Warm Sand
#dec39dYellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
AATHER
aather.com
Website preview
The design language
AATHER operates as an editorial candle studio rendered in near-total monochrome: white canvas, black ink, hairline rules, and photography doing all the emotional heavy lifting. The interface itself is austere to the point of being almost invisible — every typographic decision is calibrated toward whisper (weights 100–200) and air (tracking 0.036–0.056em), so the UI reads like a fashion magazine layout rather than a storefront. Warmth is never injected into the UI palette; instead, a single sand-toned surface (#dec39d) and full-bleed editorial photography carry the brand's tactile, hand-held mood. Components are reduced to their most elemental forms: text links with thin underlines stand in for buttons, 2px corners refuse decoration, and the centered wordmark navigation borrows directly from print editorial conventions.
Color palette
accent
neutral
Ink
#000000Neutral form states, badge text, and quiet UI feedback where color should stay understated.
Paper
#ffffffPage background, card surfaces, reversed text on dark — the default canvas. Never tinted, never warmed; warmth arrives only through photography
Mist
#f7f7f7Alternate canvas band, subtle section wash — used to separate content blocks without introducing a visible border line
Ash
#e8e8e8Footer and secondary dividers — the lightest perceptible rule, reserved for structural seams that must recede
Graphite
#808080Muted secondary text, low-emphasis borders, tertiary metadata. Pairs with body and link borders at lower visual weight than Ink
Typography
Type scale
Major Second (1.125) · 16px basedisplay
35px · 200 · 1.2 · 0px trackingThe quick brown fox jumps
heading
24px · 200 · 1.2 · 0px trackingThe quick brown fox jumps
subheading
20px · 100 · 1.35 · 0px trackingThe quick brown fox jumps
text-18
18px · 200 · 1.39The quick brown fox jumps
body-lg
16px · 100 · 1.38 · 0px trackingThe quick brown fox jumps
body
14px · 200 · 1.22 · 0.36px trackingThe quick brown fox jumps
text-13
13px · 100 · 1.35The quick brown fox jumps
text-12
12px · 400 · 1.17The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Gestura Text Extra Light
- Weights
- 100, 200
- Sizes
- 14px, 16px, 20px
- Line height
- 1.22, 1.35, 1.38
Gestura Text Extra Light — detected in extracted data but not described by AI
Additional typeface
Gestura Text
- Weights
- 100, 200
- Sizes
- 35px
- Line height
- 1.20–1.38
- Letter spacing
- normal
- Fallback
- Cormorant Garamond Light, Spectral Light, or a light humanist serif like Lora Light
Primary editorial face for body copy, links, nav, cards, and the 35px display overlay heading. The use of Extra Light (100) and Thin (200) weights throughout is a signature anti-convention — most luxury e-commerce uses 300–400 minimum. Here the type is intentionally thin enough to feel like it could disappear, forcing the photography to lead.
Additional typeface
Untitled Sans
- Weights
- 100, 200, 400
- Sizes
- 9px, 11px, 12px, 13px, 14px, 16px, 18px, 20px, 24px
- Line height
- 0.78–1.39
- Letter spacing
- 0.036em–0.056em
- Fallback
- Inter at weight 200, Söhne Light, or General Sans Light
Workhorse sans for buttons, inputs, list items, and supporting UI chrome. The generous tracking (up to 0.056em) transforms a clean geometric sans into something that reads as typeset and intentional — labels feel engraved rather than typed. The 0.78 line-height at 9px is display micro-copy collapsed to its tightest possible rhythm.
Additional typeface
Gestura Text Light
- Weights
- 200
- Sizes
- 16px
- Line height
- 1.38
Gestura Text Light — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 30-35px
- Card padding
- 20-25px
- Element gap
- 10-15px
Border radius
all
2pxSpacing scale
1px5px6px7px8px10px11px15px18px20px25px30px35px40px45px55px60px80px100px145px199px211pxGuidelines
Do
- Use weight 100 or 200 for all body and heading text — never go above 400 outside of regulatory copy.
- Apply tracking of 0.036–0.056em to all Untitled Sans instances; let the letter-spacing do the luxury work.
- Reach for a 1px black underline before you reach for a button — the underlined text link is the system's primary action.
- Use 2px border-radius on every rounded element; do not introduce larger radii.
- Let photography supply all warmth and color; the UI palette stays pure monochrome.
- Center the wordmark in the header and treat navigation as a three-column editorial spread.
- Separate sections with hairline Ink (#000000) rules at 1px, not background tint shifts.
Don’t
- Do not introduce filled rectangular buttons with backgrounds — the underlined text link is the only CTA pattern.
- Do not use bold or semibold weights (500–800) anywhere in the system.
- Do not add drop shadows, glows, or elevation effects — surfaces stay flat.
- Do not use border-radius above 2px; the sharp corners are part of the brand's editorial restraint.
- Do not apply a chromatic accent color to UI elements — #dec39d lives only in photography.
- Do not left-align the wordmark in the header; centering is non-negotiable.
- Do not add gradients, textures, or noise to backgrounds; the canvas must read as flat paper.
Components
Announcement Bar
Top-of-page promotional stripFull-bleed white bar, centered text in Untitled Sans at 9–11px, weight 200, tracking 0.042em. Content is a single line of free-shipping or campaign copy. No background tint, no border — defined only by its position above the header.
Centered Logo Header
Primary site navigationThree-column flex: left cluster ('Menu' + 'Shop' with small dropdown carets), centered wordmark ('AATHER' in Untitled Sans, weight 200, ~16px, tracking 0.056em), right cluster (cart icon). No background fill, no shadow, no border. Vertical padding ~15px. The centered wordmark is a deliberate editorial cue — this header reads like a magazine masthead.
Full-Bleed Hero Image
Atmospheric brand introductionEdge-to-edge photograph occupying the full viewport width. No overlay gradient, no vignette — the image carries the mood. A single line of display text is positioned bottom-center in white, weight 200, ~35px, with a paired underlined text link beside it.
Hero Overlay Text
Editorial caption on hero photographyGestura Text Thin, 35px, weight 200, white (#ffffff) with no text shadow. Positioned in the lower third of the hero. The complete absence of shadow or scrim is a deliberate choice — the photography must be light enough to hold white type natively.
Underlined Text Link (replaces buttons)
Primary call-to-actionUntitled Sans, 14–16px, weight 200, tracking 0.036em. A 1px black bottom border acts as the underline. No background fill, no border-radius, no padding beyond the text. On hover the underline persists. This component is the system's de facto button — the brand never uses a filled rectangular button.
Cookie Consent Bar
Sticky bottom regulatory noticeWhite bar fixed to viewport bottom with a 1px top border in #e8e8e8. Left-aligned copy in Untitled Sans 11px, right-aligned 'OK' affordance. Minimal, functional, no styling beyond the hairline separator.
Nav Dropdown Indicator
Menu state affordanceA small downward triangle (▼ or ▾) rendered in Ink (#000000) next to 'Menu' and 'Shop' labels. Size ~6px, no border or background. Pure typographic punctuation.
Cart Icon
E-commerce entry pointMinimal line-icon shopping bag in Ink (#000000), ~16px, stroke weight 1px. Sits flush right in the header with no label or badge.
Surfaces & elevation
Level 0
Paper
#ffffffDefault page canvas and product backgrounds — the base on which everything else floats.
Level 1
Mist
#f7f7f7Alternate section wash for content blocks that need separation without a visible border.
Level 2
Warm Sand
#dec39dEditorial accent surface — appears within hero and product photography, never as a UI fill.
The system uses zero shadow-based elevation. Hierarchy is achieved through typography weight contrast, whitespace, and hairline 1px rules in Ink or Ash. Components sit on the same plane as the canvas — the design reads as printed editorial rather than digital interface.
Layout & imagery
Layout
The page is max-width contained at ~1200px but hero images break full-bleed to viewport edges. The hero is a full-viewport-height photograph with overlay text positioned in the lower third. Below the fold, sections stack vertically with 30–35px gaps, separated by hairline rules or subtle Mist (#f7f7f7) washes rather than card containers. Navigation is a centered three-column masthead. Content is predominantly single-column and text-driven, with photography interrupting at full-bleed intervals. The rhythm is slow and editorial — sparse text blocks, generous breathing room, and image-led section breaks.
Imagery
Imagery is the brand's primary expressive medium. Photography is editorial and intimate: tight crops of hands holding candles, fabric in warm earth tones, and single objects isolated on warm taupe or cream backgrounds. Treatments are full-bleed, unmasked, with no rounded corners on images. The color palette of the photography is restricted to warm sand (#dec39d), cream, terracotta, and muted blues — never saturated. Lifestyle context is stripped away; the object and the hand are always the subject. No illustration, no icons beyond a minimal cart glyph, no decorative graphics.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #e8e8e8 (light) or #000000 (structural) - accent: #dec39d (photography only — not for UI) - muted text: #808080 - primary action: no distinct CTA color **3–5 Example Component Prompts** 1. *Editorial hero section*: Full-bleed warm sand (#dec39d) photograph. White overlay text at 35px Gestura Text Thin, weight 200, positioned in the lower third. Adjacent underlined text link in Untitled Sans 16px weight 200, 1px black bottom border, tracking 0.036em. 2. *Centered masthead header*: White background, no border. Three-column flex layout: left ('Menu ▾' and 'Shop ▾' in Untitled Sans 14px weight 200), center ('AATHER' wordmark in Untitled Sans 16px weight 200, tracking 0.056em), right (line-icon cart glyph in #000000). Vertical padding 15px. 3. *Underlined text link*: Untitled Sans, 16px, weight 200, #000000, tracking 0.036em, 1px solid #000000 bottom border, 2px border-radius, 0px padding. No background fill. 4. *Product image section*: Full-bleed photograph with 1px #e8e8e8 hairline rule above and below. No card container, no shadow, no padding around the image itself. 5. *Cookie consent bar*: Fixed bottom, white background, 1px top border in #e8e8e8, body text in Untitled Sans 11px weight 200, 'OK' button as underlined text link aligned right.
Signature Choices Explained
Three choices define this system's identity: (1) the ultra-light typography at weights 100–200 makes the interface recede so photography can lead — most luxury e-commerce defaults to 300–400, which reads as confident but visible; AATHER's choice reads as editorial confidence that doesn't need volume. (2) The 0.036–0.056em tracking on a sans-serif transforms it from a UI font into something typeset, giving labels the rhythm of engraved text rather than screen text. (3) The underlined text link replacing the button eliminates the visual noise of fills, borders, and radii — every CTA is a typographic gesture, not a graphical one, which is why the 1px bottom border has such heavy semantic weight in this system.
Similar brands
Diptyque
Same editorial monochrome UI with all warmth and color carried by product photography, centered wordmark navigation, and hairline-rule section dividers.
Byredo
Identical restraint in UI chrome — nearly all-black-and-white interface with ultra-light sans typography, letting product imagery and fragrance photography provide the chromatic personality.
Le Labo
Same minimal-monochrome aesthetic with thin sans-serif type, underlined text links in place of filled buttons, and a printed-editorial sensibility over a digital-commerce one.
Boy Smells
Shared ultra-light typographic weights and generous tracking, with a warm-taupe-and-cream photography palette that never bleeds into the UI color system.
Aesop
Same quiet-luxury restraint: monochrome chrome, thin sans type, text-link CTAs, and 2px or zero border-radius — the store reads like a printed monograph.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
