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: process magenta, cobalt, a doubled violet rule, a jade edge, a dashed teal 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 accent-ruled link sits inside running text without shouting.

Slate eyebrow

Accent 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