A design system for a manufacturer.

The premise

A bag is a manufactured object with tolerances, not a photograph on a catalogue page. This site is built on that claim: the spec is the interface. Every data point on the site is a real manufacturing value — GSM, denier, SPI, AQL, MOQ, lead time — because the credibility gap in this category is credibility expressed as specification.

The recurring motif is the saddle-stitch rule — a dashed 2px line borrowed from leatherwork — used at every section boundary. The second device is the dimension callout, which frames products as objects with measurements rather than as pictures.

Dye-vat palette

Two grounds — deep ink and warm paper — alternating down the page in a day/night rhythm. The accent is a turmeric marigold, a working Indian dye reference rather than a decorative one. Indigo carries the structural notes; madder is reserved for scarcity and error states, and is never used for anything else.

Three voices

Archivo carries every structural voice — display, headings and body. Instrument Serif appears only in italic, as a counterpoint inside display lines. IBM Plex Mono is reserved exclusively for data: labels, units, measurements, spec keys and anything that would sit in a tech pack. If it is a number, it is monospace.

Eight-point baseline

An 8px baseline, a 12-column grid at 1440px, and a 32px gutter that flexes to 48px on wide screens. Section rhythm is fluid, from 64px on mobile to 136px on desktop. Asymmetric splits (7/5 and 8/4) carry most page compositions; centred symmetry is reserved for the hero and the closing band.

The working set

Restraint as a principle

Motion exists to direct attention, never to entertain. Elements reveal with an 18px rise and a 620ms ease-out, staggered at 60ms. Section numerals count. The capability marquee runs at a reading pace and pauses on hover. Everything animates on transform and opacity only — never width, height or top — and the entire system collapses to a near-zero duration under prefers-reduced-motion.