A printed lookbook · signature — The Wear Rule · default

Drobe · Design systems

Five systems.
One contract.

Every system answers the same token contract, so each is complete rather than a repaint — its own type, scale, shape, texture and signature. Switch above; everything on this page repaints, including the swatches.

01 — Colour

The semantic palette

--bg

Primary surface

--bg-raise

Plates and cards

--bg-sunk

Wells and thumbs

--ink

Primary text

--ink-2

Secondary text — AA at body size

--ink-3

Tertiary and helper copy

--line

Default divider

--line-strong

Emphasised divider

--accent

Fills, rules, focus

--accent-text

Accent as small text — AA

Screens reference these roles, never a brand colour, which is why one set of components serves five systems. Each system’s accent is a seasoning, not a base: it appears here only as the masthead rule, the top of the wear scale, link underlines and focus rings.

02 — Signature

The Wear Rule

Editorial minimalism repeats the hairline more than any other element. Here it carries the one thing only Drobe knows: how lived-in a garment is. Every system speaks this scale in its own material — brass, oxblood, a doubled saffron rule, a gold glow, a moss tick — so the accent is earned, not applied.

--rule-0Never worn — the system’s unworn style

--rule-1Worn once or twice

--rule-2In rotation

--rule-3Well worn

--rule-4Worn most — the glint

03 — Typography

Display and body, per system

Display — the active system’s face

The closet you already own

Three pieces, and today dresses itself

Body — the active system’s UI face

Photograph what you own. Drobe reads colour, weight and formality, then composes looks from the wardrobe already in your room.

Editorial self-hosts Cormorant Garamond and Geist as latin-subset woff2 with font-display: swap; the other four use the fontsource families. Each system sets its own modular ratio, so the display steps below move when you switch.

Scale

--t-megaDrobe

--t-heroDrobe

--t-h1Drobe

--t-h2Drobe

--t-h3Drobe

--t-leadDrobe

--t-bodyDrobe

--t-smDrobe

--t-xsDrobe

--t-microDrobe

Roles

display-4 — section headline

title — card and panel heading

lead — the sentence under a headline

body — running text at a comfortable measure

caption — secondary and metadata

serial — lot number, wear count, tabular

04 — Primitives

Button, Link, Divider, Eyebrow

Button

Link & Eyebrow

An inline brass-ruled link sits inside running text without shouting.

Slate eyebrow

Brass eyebrow

Ink eyebrow

05 — Space & shape

One 4px rhythm, five shapes

--r-plate — panels

--r-tile — imagery

--r-btn — buttons

--r-chip — chips

06 — Grid

Asymmetric by default

Twelve columns, shared by all five systems. Content is placed against them rather than centred in them — a headline in 1–7 with its note in 9–12 reads as a page. Below 48rem every column is full width and the reading order carries the composition.

Drobe · Five design systems · Tokens in src/styles/systems.css