Design System · v2.0 “Ivory & Ink”
The style guide.
A warm ivory canvas, ink serif typography and one muted taupe opinion. Cormorant Garamond for display, DM Sans for body, Fraunces for the asides. Motion stays subtle: fades and reveals, 250–400ms, always ease-out.
01 · Brand marks
The house signature: a serif wordmark with a calligraphic monogram sweep. Three cuts, one rule: never redraw, never recolour.
Primary lockup · signature
Footer, loading, gift card, editorial moments. Minimum height 64px; clear space equal to the wordmark cap height on all sides.
Wordmark · header & compact
Header centre, mobile drawer, tight slots. Minimum height 22px. Ink only: never recoloured, never taupe.
Reverse · white on ink
For ink surfaces and the gift card. Same rules, inverted ink.
02 · Colour
Every text pair is verified ≥ 4.5:1 (AA) on the ivory canvas. Taupe is an accent, never a background for body copy.
Core · Ink & Ivory
Ink
#12100D
17.0:1 on ivory, AA ✓
Warm Ivory
#F7F2E7
The canvas. Always light.
Surface
#F0EADB
Section bands
Surface-2
#E7DFCC
Track fills
Line
#DCD3BE
Warm hairlines & borders
Accent · The House Taupe
Taupe
#6F6152
5.4:1 on ivory, 6.0:1 w/ white, AA ✓
Taupe Dark
#57493A
Pressed / hover depth
Taupe Pale
#E9E2D2
Tint surfaces, 14.7:1 w/ ink
Gold
#B2955D
Metallic detail only
Semantic
Success
#1F7A46
4.8:1, AA ✓
Success Pale
#E6F0E8
Confirm surfaces
Error
#B3261E
5.9:1, AA ✓
Error Pale
#F9EAE7
Form errors
Warning
#7A6000
5.4:1, AA ✓
Warning Pale
#F2ECDC
Low-stock surfaces
Text Tones
Ink-2
#3A362E
Body secondary, 10.8:1
Ink-3
#4C463B
8.4:1, AA ✓
Ink-4
#6B6254
5.4:1, AA ✓
03 · Type scale
Display / H1 · Cormorant Garamond
Confidence, tailored.
Display / H2 · Cormorant Garamond
Nine shelves, zero filler
Display / H3 · Cormorant Garamond
The Saturday line-up
Editorial lead · Fraunces
Sharp tailoring, honest fabrics, and the pieces that move with you.
Body · DM Sans 15px
Every fibre, every mill, every factory, published on the label you'd normally ignore. The ledger started the week we got caught out ourselves.
Body small · DM Sans 13.5px
Free shipping over $150. Thirty-day returns, unworn and unwashed. Spare parts sold for ten years after launch.
Eyebrow · DM Sans 11px / 0.28em
Shop by Category
04 · Buttons, all states
| Variant | Default | Hover → | Pressed / Disabled |
|---|---|---|---|
| Primary | |||
| Secondary | |||
| Ghost | |||
| Taupe (CTA) |
Sizes
Wishlist pop (click me)
05 · Inputs & controls
Default
Focus (click in)
Error + message
Enter a valid email, the receipt lands here.
Success + message
Code applied, 10% off this order.
Qty stepper
Price slider (dual)
$80 – $320
06 · Badges & chips
Product badges
Status
Filter chips
Swatches
07 · Product card, all states
Hover swaps to the second image, reveals quick-add and quick-view, and zooms 4.5%. Out-of-stock greys and locks. Sale sets the price in taupe and strikes the compare price in muted ink.
Default
Hover me
Sale + struck price
Sold out
Price display
Ratings
08 · Motion
| --dur-fast | 250–300ms | Button hovers, swatch scale, link sweeps |
| default media | 280–300ms | Image swap, zoom on hover |
| --dur-med | 350–400ms | Drawers, view fades, reveals |
| character | Subtle fade & reveal | Nothing bounces: fades, slides, quiet scale |
| ease | cubic-bezier(0.16, 1, 0.3, 1) | Ease-out, the 'lux' curve throughout |
prefers-reduced-motion disables the marquee, hotspot pulses and zooms.
09 · Toasts & feedback
Bottom-right, 250ms in, close button always. Quiet ivory cards with a hairline border and square corners; the semantic colour rides on the icon alone. Never more than one at a time per action.
Imagery direction
