Design System

01 · Foundations

Colour tokens

Every colour is a custom property declared once in :root and referenced everywhere else. No component sets a raw hex value, and no page introduces a new hue. Surfaces are warm near-black, never pure black; the accent is a single champagne gold, with oxblood reserved only for urgency and limited releases.

--ink

#0B0A08

--ink-2

#100E0B

--surface

#16130F

--surface-2

#1D1913

--surface-3

#262019

--surface-4

#2F2820

--ivory

#F3EDE1

--ivory-dim

#D6CDBC

--muted

#A69C8B

--faint

#857C6E

--gold

#C9A96A

--gold-bright

#E9D5A6

--gold-deep

#8E7038

--wine

#7C2F2F

--line

rgba(201,169,106,.17)

--line-hard

rgba(201,169,106,.34)

02 · Foundations

Typography

Three families, no more. Fraunces carries every display and heading at a light weight with a soft, slightly wonky optical setting. Instrument Sans is the body and interface face. DM Mono is reserved for eyebrows, labels, prices and other metadata. No other family may be introduced, and no component sets its own font-family.

Aa

--font-display

Fraunces · 300–900, italic & roman

Aa

--font-body

Instrument Sans · 400–600

Aa

--font-mono

DM Mono · 400

Heading scale

h1 · --fs-h1

Hand-blended in Grasse

h2 · --fs-h2

The composition and its pyramid

h3 · --fs-h3

Matured ninety days before bottling

h4 · --fs-h4

A note on maceration

Display, lead and supporting styles

.display

Noir & Champagne

.lead

A quieter kind of luxury — the extrait is composed to be judged at hour eight, not at the counter.

.eyebrow

The house since 2019

Eyebrow without the rule · .eyebrow--bare

.quote

Built to be judged at hour eight.

.mono, .small, .muted, .gold

SKU AUR-NA-50 · ₹34,500 · 28% perfume oil

Supporting copy in Instrument Sans at --fs-sm, in --muted.

Accent copy in .gold.

03 · Foundations

Spacing scale

Spacing runs on an eight-pixel rhythm, from --s-1 (4px) to --s-12 (128px). Sections use --section-y, page edges use --gutter, and content is held within --container or the wider --container-wide.

--s-14px

--s-28px

--s-312px

--s-416px

--s-524px

--s-632px

--s-740px

--s-848px

--s-964px

--s-1080px

--s-11104px

--s-12128px

--gutterclamp(1.25rem, 4.6vw, 4rem) — page edge padding

--section-yclamp(4.5rem, 9vw, 9.5rem) — vertical section padding

--container1340px · .container

--container-wide1640px · .container--wide

--radius2px · corners stay near-square everywhere

04 · Controls

Buttons

One base class, .btn, with variants and sizes. Buttons are near-square (--radius), set in DM Mono with wide tracking, and never pill-shaped. The primary button is gold on ink; the ghost button is an inset hairline.

Variants · .btn, .btn--ghost, .btn--dark

Sizes · .btn--sm, default, .btn--lg, .btn--block

Disabled · .btn[disabled]

Text link · .link-arrow and .link-sweep

Shop all 24 An underlined inline link

05 · Controls

Form controls

Every control sits inside a .field with a .label. Inputs, selects and textareas share one surface and hairline. Error text uses .field__error and hint text uses .field__hint. The validation script fills the error span when a required field is empty.

Full name

Email address Used only for order updates and, if you opt in, the house letter.

Country

Delivery note

Field with error · .field__error Enter a valid email address.

Choices Join the house letter Send a gift receipt Standard delivery Express delivery

06 · Library

Components

The reusable blocks that make up every page. Each is shown live below its literal class names. Components never nest a card inside a card, and every media element carries descriptive alt text, explicit width and height, and lazy loading below the fold.

Media frames

.frame with ratio modifiers --tall (4:5), --portrait (3:4), --square (1:1), --land (16:10), --cine (21:9) and --wide (3:2). Add --sheen or --zoom for hover.

Frames shown at the 16:10 landscape ratio

Product card & badges

.product-card with __media, __badge, __body, __family, __name, __price and __quick. Badges take --wine for limited or final-sale states. The add button uses data-add="<slug>".

Signature

Woody & Resinous · 50 ml

Noir Absolu

₹34,5004.9 · 218

Final sale Oud Cendré extrait de parfum flacon

Oud · Birch Tar · Smoke · 50 ml

Oud Cendré

₹29,900

Bestseller Aurum Doré extrait de parfum flacon

Amber & Gourmand · 50 ml

Aurum Doré

₹31,500

Leather · Iris · Vetiver · 100 ml

Cuir de Minuit

₹19,500₹22,000

Chips, pills & meters

.chip toggles with aria-pressed; .note-pill lists a note; .status-pill carries state and --done marks it complete; .scent-meter renders intensity as gold bars driven by data-meter.

Smoked Oud Labdanum In stock Delivered

Intensity 9.2

Sillage 7.0

Accordion & tabs

.accordion with __trigger[aria-expanded] and __panel > __inner; single-open behaviour is handled in main.js. Tabs live in a [data-tabs] wrapper with role="tab" buttons and role="tabpanel" siblings.

A dense extrait at 28% perfume oil, macerated ninety days and bottled by hand in Grasse.

Two sprays, on warm skin. Do not rub. Best worn in the evening and in cold weather.

India 1–3 working days; international 4–9. Sealed flacons may be returned within 30 days.

Black plum, Bulgarian rose, smoked oud, leather and labdanum. The rose is jammy rather than fresh.

Table & pagination

.table sets mono, tracked headers over hairline rows; inside .prose it inherits prose padding. .pagination holds square page links with aria-current on the active page.

Order	Composition	Status	Total
AUR-10428	Noir Absolu · 50 ml	Delivered	₹34,500
AUR-10411	Éclat Blanc · 100 ml	In transit	₹14,900
AUR-10396	Safran Nuit · 50 ml	Delivered	₹29,900

Stat & step

.stat with __num and __label for figures; .step with __num for a numbered sequence.

90dMacerated

28%Perfume oil

10h+On skin

Step 01

Composed

Built around a single idea, not a trend.

Step 02

Macerated

Rested ninety days so the notes settle.

Step 03

Bottled

Drawn, sealed and dated by hand in Grasse.

Testimonial, gift card & timeline

.testimonial pairs a quote with an avatar; .giftcard is the 16:9 gift visual; .timeline with __item, __dot and is-done traces an order.

Two sprays, and I could still find it on my coat the following evening.

Aarav R.
Verified buyer · Mumbai

Aurenza · Gift card

₹10,000

No expiry · Redeemable online and in boutique

Order placed

1 October, 09:12 IST

Dispatched

1 October, 16:40 IST

Out for delivery

Expected 3 October

Empty state, breadcrumb & toast

.empty-state with __icon for a cleared cart or wishlist; .breadcrumb for the page trail; .toast inside .toast-stack for transient confirmations, created by main.js.

Your cart is empty

Nothing selected yet. Explore the six houses and find the one that follows you.

Browse the collection

Added to cart
Noir Absolu · 50 ml

.summary · order totals

Subtotal₹34,500

ShippingComplimentary

Total₹34,500

07 · Assets

Imagery

All artwork is SVG, so it stays sharp at any size and weighs almost nothing. Products live at 1000×1250, editorial at 1400×1050 (landscape) and 1200×1600 (portrait), heroes at 2000×1200, and avatars at 200×200. Always declare width and height, add descriptive alt text, and lazy-load everything below the fold.

08 · Behaviour

Motion

Motion is opt-in and additive. The root element only receives the motion class when GSAP, ScrollTrigger and a motion-safe preference are all present, so content is visible by default and nothing is hidden from a reduced-motion or no-JavaScript visitor.

Reveal

Add data-reveal to a block to fade and lift it as it enters the viewport, and data-reveal-delay="0.08" to stagger a group. The reveal fires once, at top 88%, with a 1.05s power3.out ease.

Other hooks

.split-line > span — masked line reveal for hero headlines.
data-parallax="12" — scrubbed vertical drift on a background.
data-count="218" data-dec="0" — a number that counts up once.
data-meter="92" — staggers the bars of a scent meter.
data-magnetic — a button that leans toward the cursor on hover-capable devices.
.frame--reveal img — a scale-and-fade entrance for media.
data-hscroll — a horizontal track scrubbed by vertical scroll.

Reduced motion

Under prefers-reduced-motion: reduce the motion class is never added, transitions collapse to a fraction of a millisecond, and every [data-reveal] and .split-line > span is forced fully visible. No content depends on animation to be readable.

Accessibility checklist

One h1 per page; headings never skip a level.
Every input has a <label> tied by for.
Focus states use a visible gold outline, never outline: none alone.
Colour is never the only signal; state also uses text or aria-pressed.