---
name: Aather
description: "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."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#000000"
  tertiary: "#dec39d"
  neutral: "#808080"
  bg-soft: "#f7f7f7"
  line: "rgba(0,0,0,0.5)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 200
    letterSpacing: "0.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 200
    letterSpacing: "0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.35
    fontWeight: 100
    letterSpacing: "0.5px"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.35
    fontWeight: 300
    letterSpacing: "0.5px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined, magazine-style e-commerce experience for premium home scents.

*A high-end editorial spread for a boutique candle brand.*

## Colors

A restrained, monochromatic base with warm photographic tones and a soft sandy accent.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Accent (`#dec39d`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.5)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Spacious, asymmetric layouts with generous whitespace between elements.

## Elevation & Depth

- Borders: Minimal borders; use 1px solid rgba(0,0,0,0.5) for subtle separation.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimalist text links with a 1px bottom border.
- **card:** Clean photographic cards with no background or border.
- **chip:** Small uppercase sans-serif labels.
- **input:** Clean sans-serif inputs with subtle bottom borders.
- **hero:** Full-bleed photographic hero with large serif text overlay.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```