AETHER · Light, given form

Design Specification — AETHER · Light, given form

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F1EEE7), ink text (#15160F), a vivid accent (#E8C489). Display headings use a distinct face (var(--serif)) over the body stack ('Inter'). Detected font weights: 300, 400, 500, 600.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg, rgba(12, 13, 9, .34), transparent 30%, transparent 55%, rgba(12, 13, 9, .72))
• linear-gradient(#b08d57, transparent)
• linear-gradient(to top right, rgba(8, 9, 5, .62), transparent 42%)

Typography

Primary typeface: Inter — stack: 'Inter'

Display / heading typeface: var(--serif) (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Inter'
• var(--serif)
• 'Fraunces'
• var(--sans)

Web font sources

• fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;1,9..144,300&family=Inter:wght@300;400;500&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Shadows

Derived elevation

All detected shadows

• 0 30px 80px rgba(0, 0, 0, .45)

Layout

Container max-width: 820px

Grid columns (largest detected grid): 3

Breakpoints

• 680px
• 820px

Animation & Motion

Transitions

• opacity .8s
• width .3s
• color .4s ease
• color .25s, opacity .25s

Source Design Tokens (CSS custom properties)

:root {
  --ink: #15160f;
  --ink2: #22241b;
  --paper: #f1eee7;
  --paper2: #e7e2d6;
  --concrete: #c7bfb1;
  --stone: #9c9486;
  --stone-d: #6e675b;
  --oak: #b08d57;
  --glass: #8b97a0;
  --sans: "Inter", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --pad: clamp(20px, 5vw, 84px);
  --body-bg: var(--paper);
  --body-color: var(--ink);
}

Do's and Don'ts

Do

• Do reserve the accent #E8C489 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #F1EEE7; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--serif), and body copy in the primary stack.
• Do stick to the detected font weight(s): 300, 400, 500, 600.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #F1EEE7;
  --color-text-primary: #15160F;
  --color-primary: #E8C489;
  --color-accent: #E8C489;
  --color-surface: #F1EEE7;
  --color-secondary: #080905;
  --color-text-secondary: #E7E2D6;
  --color-border: #C7BFB1;
  --color-on-primary: #15160F;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #15160F;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F1EEE7;
  --color-surface-container: #E7E2D6;
  --color-surface-container-high: #C7BFB1;
  --font-sans: 'Inter';
  --font-size-headline-lg: 32px;
  --font-size-title-lg: 22.4px;
  --font-size-body-md: 16px;
  --font-size-label-md: 13.6px;
  --font-size-label-sm: 11.5px;
  --shadow-md: 0 30px 80px rgba(0, 0, 0, .45);
  --space-sm: 9.6px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --font-display: var(--serif);
  --tracking-label: .5em;
  --container-max: 820px;
}