# Aather · Design system migration spec

> Source: https://aather.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of minimalist premium e-commerce, relying heavily on high-quality photography and refined typography rather than complex UI patterns.

## 1. Identity DNA

Aather's identity operates like a high-end editorial spread for a boutique candle brand: every element is curated with the restraint of a gallery installation, where the product is framed by atmosphere rather than advertising. The system is built on a principle of quiet luxury—minimal in form, aromatic in suggestion.

**One-liner:** A refined, magazine-style e-commerce experience for premium home scents.
**Keywords:** minimal · aromatic · curated · quiet luxury · editorial
**Analogy:** A high-end editorial spread for a boutique candle brand.

## 2. Color

The palette is a study in restraint: a monochromatic base of crisp whites, soft off-whites, and deep blacks is punctuated only by a single, muted sandy tan accent that carries the warmth of the photographic imagery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f7f7f7` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#dec39d` | single accent |
| `--line` | `rgba(0,0,0,0.5)` | divider |

**Color principle:** A restrained, monochromatic base with warm photographic tones and a soft sandy accent.

Color is used sparingly to create visual hierarchy and evoke the tactile quality of the scents themselves, never to overwhelm.

## 3. Typography

Typography is the voice of the brand, split between a transitional-serif for evocative display headlines and a humanist-sans for functional UI elements. The system enforces a consistent lightness—weights between 100 and 300—with a uniform 0.5px letter-spacing to maintain an airy, legible texture throughout.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 200 | 0.5px | Hero headlines and large section statements |
| h1 | 32px | 1.2 | 200 | 0.5px | Sub-hero and primary section titles |
| body | 20px | 1.35 | 100 | 0.5px | Main narrative copy and product descriptions |
| small | 13px | 1.35 | 300 | 0.5px | Navigation links and utility text |

**Type rules:**
- Use transitional-serif for all large-scale display copy.
- Use humanist-sans for navigation, buttons, and functional UI elements.
- Maintain very light font weights (100-300) across all text.
- Apply uniform 0.5px letter-spacing to improve readability.

## 4. Spacing

Spacing is the rhythm of the page: layouts breathe through generous, asymmetric whitespace, allowing each element a distinct place within the composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious, asymmetric layouts with generous whitespace between elements.

## 5. Surfaces

Surfaces are flat and clean, defined by their relationship to the background rather than by shadow or border. Where separation is needed, a single, hairline 1px border in semi-transparent black provides a subtle, graphic division.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal borders; use 1px solid rgba(0,0,0,0.5) for subtle separation.

## 6. Layout

The structural skeleton begins with a full-bleed photographic hero, a visual overture that sets the atmospheric tone. The layout then resolves into clean, single-column text sections, ensuring the narrative flows with the unhurried pace of a magazine feature.

- **Container max:** 1440px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero images followed by single-column text sections.

## 7. Motion & Interaction

Motion is atmospheric rather than decorative, employing gentle opacity and position fades to suggest a page materializing rather than loading. Interactive transitions are smooth and brief, preserving the overall sense of calm and focus.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.2, 0, 0.1, 1)`
- **Patterns:**
  - Gentle opacity and position fades on page load.
  - Smooth hover transitions on text links.

- **Hover:** Subtle opacity change or underline appearance.
- **Click:** Immediate visual feedback via state change.
- **Transition:** 0.3s ease-in-out for most interactive elements.
- **Keyboard:** Standard browser focus rings for navigation.

## 8. Voice & Don'ts

The editorial voice is poetic and evocative, setting mood with serif sentences rather than shouting with promotional copy. Headlines are evocative statements, and calls to action are simple, direct text links framed by a bottom border.

- **Tone:** Poetic, evocative, and calm.
- **Headline style:** Evocative serif sentences that set a mood.
- **CTA style:** Simple, direct text links with a bottom border.
- **Avoid:** Aggressive sales language / Loud exclamation marks / Dense, heavy blocks of text

### Don'ts
- ❌ Don't use bold weights for body text — screenshot shows very thin, light weights (100-300) instead.
- ❌ Don't add heavy drop shadows to UI elements — screenshot shows completely flat surfaces.
- ❌ Don't use rounded corners on components — screenshot shows sharp, 0px radius edges.
- ❌ Don't use a dark mode — screenshot shows a predominantly white and light background.
- ❌ Don't use high-chroma, saturated accent colors — screenshot shows a muted, earthy tan accent.
- ❌ Don't crowd the layout with elements — screenshot shows generous whitespace and minimalist arrangement.

The system deliberately avoids bold weights, heavy drop shadows, rounded corners, dark mode, saturated accents, and dense text blocks—defining its identity as much by what it omits as by what it includes.

## System Prompt (paste into AI tool)

```
Design a premium, editorial e-commerce experience for a boutique candle brand. The aesthetic is minimal and refined, using a monochromatic black-and-white base with warm photographic tones. Typography should be very light (transitional-serif for headlines, humanist-sans for UI) with uniform 0.5px letter-spacing. Key colors include white (#ffffff), off-white (#f7f7f7), black (#000000), and a muted sandy tan (#dec39d). Avoid heavy font weights, rounded corners, drop shadows, or aggressive sales copy; maintain a calm, poetic, and spacious layout.
```