---
title: "AATHER design system"
variant: extended
source: https://aather.com/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/aather-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# AATHER · Design System

> Quiet candle luxury, composed like an editorial.

**Theme:** light · **Industry:** beauty · **Source:** https://aather.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

AATHER presents its scented candles through a restrained, editorial storefront built around generous white space and tactile lifestyle photography. Delicate serif typography and a single warm sand section lend the page a quiet, considered luxury.

## North star

Let quiet typography, open white space and tactile photography carry the story; keep interface decoration nearly invisible.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, letting product and lifestyle photography provide most of the colour and atmosphere. Ink (#000000) carries navigation, headings, body copy and links; Pale Line (#e6e6e6) appears in subtle dividers, while Soft Fog (#f7f7f7) is reserved for a quiet card surface. The muted Sand (#dec39d) creates a distinct brand moment in the people-together story section, and Ash Text (#7f7f7f) softens secondary footer details. Gestura’s fine serif styles give the hero and editorial copy an understated, literary character; Untitled Sans supplies navigation, labels and supporting hierarchy. The composition moves between full-width photography, sparse product placements, offset two-column editorial sections and an image strip. Comfortable spacing and restrained rules keep the page airy rather than card-heavy. Product shots remain small and calm, while larger photographs establish mood and material texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, header and open section backgrounds; maintains the spacious editorial field. |
| Ink | `#000000` | `--color-ink` | brand | Navigation, headings, body copy, footer links and primary text links. |
| Pale Line | `#e6e6e6` | `--color-pale-line` | semantic | Subtle hairlines and footer separators; keep borders low contrast. |
| Soft Fog | `#f7f7f7` | `--color-soft-fog` | surface | Quiet card or utility surface, including the light modal-style card treatment. |
| Warm Sand | `#dec39d` | `--color-warm-sand` | accent | Distinct warm background band behind the togetherness story; not a general-purpose CTA colour. |
| Ash Text | `#7f7f7f` | `--color-ash-text` | neutral | Muted secondary copy and understated footer details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Fog) · `--color-surface-2` → `#dec39d` (Warm Sand) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#7f7f7f` (Ash Text) · `--color-border` → `#e6e6e6` (Pale Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#dec39d` | 12.4:1 | AAA |
| `#7f7f7f` | `#ffffff` | 4:1 | AA-large |
| `#7f7f7f` | `#f7f7f7` | 3.74:1 | AA-large |
| `#7f7f7f` | `#dec39d` | 2.36:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gestura Text Extra Light | `--font-body` | webfont | 100, 200 | Large editorial body copy and product or story links | Cormorant Garamond |
| Untitled Sans Light | `--font-display` | webfont | 100, 200 | Navigation, section headings, large links and captions | Inter |
| Gestura Text Thin | `--font-gestura-text-thin` | webfont | 200 | Primary hero heading | Cormorant Garamond |
| Untitled Sans Regular | `--font-untitled-sans-regular` | webfont | 400, 200 | Small utility labels and button text | Inter |
| Gestura Text Light | `--font-gestura-text-light` | webfont | 200 | Occasional lighter serif heading or editorial text | Cormorant Garamond |

- **Gestura Text Extra Light:** Very light serif weight; preserve a delicate, literary appearance and avoid bold emphasis.
- **Untitled Sans Light:** Light sans with restrained hierarchy; use sentence case and avoid heavy weight.
- **Gestura Text Thin:** Thin serif display treatment; keep the heading elegant and unembellished.
- **Untitled Sans Regular:** Regular weight used sparingly for compact controls; button lettering is small and understated.
- **Gestura Text Light:** Light serif styling; use for subtle contrast within the page's otherwise thin editorial typography.

### Type scale — Perfect Fourth (ratio ≈ 1.323, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 35px | 200 | 1.2 | 0 | — | Gestura Text Thin | Thin serif hero statement over the opening photograph. |
| h2 | 24px | 200 | 1.35 | 0 | — | Untitled Sans Light | Light sans headings introducing editorial and product sections. |
| body | 20px | 100 | 1.35 | 0 | — | Gestura Text Extra Light | Fine serif copy for brand storytelling and product links. |
| caption | 13px | 100 | 1.35 | 0 | — | Untitled Sans Light | Small sans labels, supporting notes and footer details. |
| button | 11px | 200 | 1.2 | 0 | — | Untitled Sans Regular | Compact understated sans text for utility controls. |
| nav | 18px | 200 | 1.39 | 0 | — | Untitled Sans Light | Light sans navigation labels in the header. |
| link | 24px | 200 | 1.35 | 0 | — | Untitled Sans Light | Prominent light sans links such as About Aather. |
| eyebrow | 9px | 100 | 0.78 | 0.056em | uppercase | Untitled Sans Light | Tiny uppercase sans labels with subtle tracking. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 7, 15, 18, 20, 25, 30, 35, 40, 45, 55, 60, 80, 100 px.
- Section rhythm 40px · element gap — · card padding 23px · max content width 700px.

A long, vertically paced storefront begins with a slim announcement strip and a compact navigation row, then moves through full-width hero imagery, product browsing and editorial content. Sections mostly sit on a white canvas, with a single sand-toned story band. Product and story content alternate between open single-column compositions and offset two-column layouts. The measured content max width is 700px; keep alignment intentional and copy blocks narrow. Density is comfortable, with broad visual pauses between sections and minimal enclosing UI.

## Shape & elevation

- Radius: input `2px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is predominantly flat: no measured shadows or gradient treatments. Use white space and photography to separate sections, with only discreet pale hairlines where needed. Avoid rounded, elevated cards; the measured input radius is 2px, while the displayed buttons and links are square-edged and visually light.

## Imagery

Use atmospheric, natural-light photography rather than illustration or 3D. The hero is a wide lifestyle image focused on a candle held in a hand, with the headline and shop link placed over the lower area. Supporting photos show people, interiors, packaging and product details. Keep product imagery tactile, softly toned and uncrowded; the image strip acts as a quiet social gallery.

## Components

### Announcement strip

A narrow pale header row repeats the free-shipping message, set in small, quiet serif text.

### Header navigation

Minimal white navigation with Menu and Shop at the left, centered AATHER wordmark, and a small utility icon at the right.

### Hero overlay

Wide lifestyle photograph with a delicate serif statement near the bottom and an underlined Shop Candles link aligned toward the right.

### Product presentation

Sparse product imagery and brief scent naming sit in open white space; shop links remain text-led rather than button-led.

### Story band

Warm Sand (#dec39d) section pairs a short serif heading with concise brand-purpose copy and an understated About Aather link.

### Social image strip

A single horizontal sequence of small, closely related lifestyle and product photographs precedes the minimal account label.

### Footer

Quiet multi-column lists of store, help and account links sit alongside currency and newsletter utilities.

### Measured component styles

- **Primary button** (“Menu”): transparent background · text #000000 · radius 0px · padding 0px 55px 0px 0px · 200 18px Untitled Sans Light
- **Link** (“Cabin in the Forest”): transparent background · text #000000 · radius 0px · padding 0px · 100 20px Gestura Text Extra Light
- **Input**: transparent background · text #000000 · radius 2px · padding 0px · 200 14px Untitled Sans Light
- **Card** (“Close”): background #f7f7f7 · text #000000 · radius 0px · padding 0px 45px · 100 20px Gestura Text Extra Light
- **Navigation item** (“Menu Shop”): transparent background · text #000000 · radius 0px · padding 0px · 100 20px Gestura Text Extra Light

## Do

- Use Gallery White as the dominant canvas.
- Pair fine serif storytelling with light sans navigation.
- Let photography supply the strongest colour and texture.
- Keep shop links understated and text-led.
- Use Warm Sand for the story section only.
- Leave generous visual breathing room between content groups.

## Don't

- Do not add saturated interface colours.
- Do not turn text links into heavy filled buttons.
- Do not crowd product photos with dense card chrome.
- Do not use heavy bold headings or all-caps navigation.
- Do not apply shadows or gradients absent from the measured design.
- Do not treat colours sampled from photographs as interface palette.

## Agent prompt

Build a new AATHER page as a quiet, editorial candle storefront. Use Gallery White (#ffffff) for the main canvas and Ink (#000000) for navigation, headings and links; reserve Warm Sand (#dec39d) for a deliberate story band. Set editorial statements in a thin, graceful serif, with light sans typography for navigation, labels and supporting headings. Keep copy narrow, compositions open and section spacing generous. Lead with tactile natural-light photography, then vary sparse product moments with offset editorial image-and-copy sections. Prefer plain text links and subtle hairlines in Pale Line (#e6e6e6); Soft Fog (#f7f7f7) may support a restrained surface and Ash Text (#7f7f7f) muted details. Keep the page flat, avoid bold controls, shadows, gradients and decorative card framing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width lifestyle image with overlaid statement and shop link. | Shop Candles text link | Hero photography, Serif overlay, Underlined link |
| 2 | product-grid | Introductory copy followed by sparse product imagery and names. | Browse candle scents, Shop link | Open white canvas, Product photography, Editorial serif copy |
| 3 | video | Large, edge-to-edge lifestyle visual. | Immersive visual pause | Wide photography, Minimal surrounding UI |
| 4 | feature-split | Warm sand band with heading, short copy and a link. | About Aather link | Warm Sand background, Two-part text alignment |
| 5 | feature-split | Product image and heading arranged in a spacious two-column section. | Shop Candles link | Offset image-and-copy, Open white space |
| 6 | feature-split | Interview heading and link paired with a portrait photograph. | Read Interview link | Editorial split layout, Portrait photography |
| 7 | gallery | Horizontal strip of six small photographs with a social handle. | Visit social profile | Image strip, Compact account label |
| 8 | footer | Light, multi-column footer with shop, help, account and newsletter utilities. | Browse footer links, Choose currency, Subscribe | Multi-column link lists, Minimal form field, Subtle separators |

## Source CSS custom properties (selected)

```css
--color-white: #ffffff;
--color-black: #000000;
--color-grey: rgba(0, 0, 0, 0.5);
--color-text: #000000;
--color-text-rgb: 0, 0, 0;
--color-body-text: #000000;
--color-sale-text: #000000;
--color-small-button-text-border: #747474;
--color-text-field: #ffffff;
--color-text-field-text: #000000;
--color-text-field-text-rgb: 0, 0, 0;
--color-btn-primary: #000000;
--color-btn-primary-darker: #000000;
--color-btn-primary-text: #000000;
--color-blankstate: rgba(0, 0, 0, 0.35);
--color-blankstate-border: rgba(0, 0, 0, 0.2);
--color-blankstate-background: rgba(0, 0, 0, 0.1);
--color-text-focus: #808080;
--color-overlay-text-focus: #e6e6e6;
--color-btn-primary-focus: #808080;
--color-btn-social-focus: #cfcfcf;
--color-small-button-text-border-focus: #5b5b5b;
--color-body: #ffffff;
--color-bg: #ffffff;
--color-bg-rgb: 255, 255, 255;
--color-bg-alt: rgba(0, 0, 0, 0.05);
--color-bg-currency-selector: rgba(0, 0, 0, 0.2);
--color-overlay-title-text: #ffffff;
--color-image-overlay: #685858;
--color-image-overlay-rgb: 104, 88, 88;
--color-border: #e8e8e8;
--color-border-form: #8f8d8b;
--color-border-form-darker: #767471;
--font-weight-body--bold: 700;
--font-weight-body--bolder: 700;
--font-stack-header: 'Gestura Text Thin', serif;
--font-style-header: normal;
--font-weight-header: 200;
--font-stack-body: 'Gestura Text Extra Light', serif;
--font-style-body: normal;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/aather-com