---
version: alpha
name: Gossamer Frond
description: "Restrained beauty UI: true-neutral greys, one deep moss-green accent (brand.600), regular-weight Literata headlines and generous whitespace."
colors:
  background: "#fafafa"
  foreground: "#121212"
  card: "#ffffff"
  card-foreground: "#121212"
  popover: "#ffffff"
  popover-foreground: "#121212"
  primary: "#487535"
  primary-foreground: "#ffffff"
  secondary: "#f2f2f2"
  secondary-foreground: "#222222"
  muted: "#f2f2f2"
  muted-foreground: "#636363"
  accent: "#e5efdc"
  accent-foreground: "#1f3318"
  destructive: "#b82a49"
  destructive-foreground: "#ffffff"
  success: "#176548"
  success-foreground: "#ffffff"
  warning: "#f8dc98"
  warning-foreground: "#402d03"
  border: "#e3e3e3"
  input: "#cccccc"
  ring: "#5f8f48"
  dark-background: "#121212"
  dark-foreground: "#fafafa"
  dark-card: "#222222"
  dark-card-foreground: "#fafafa"
  dark-popover: "#222222"
  dark-popover-foreground: "#fafafa"
  dark-primary: "#80ab67"
  dark-primary-foreground: "#111f0d"
  dark-secondary: "#363636"
  dark-secondary-foreground: "#f2f2f2"
  dark-muted: "#363636"
  dark-muted-foreground: "#cccccc"
  dark-accent: "#1f3318"
  dark-accent-foreground: "#e5efdc"
  dark-destructive: "#f26a82"
  dark-destructive-foreground: "#3a0012"
  dark-success: "#52b98a"
  dark-success-foreground: "#052016"
  dark-warning: "#d1a43a"
  dark-warning-foreground: "#271b01"
  dark-border: "#363636"
  dark-input: "#4d4d4d"
  dark-ring: "#80ab67"
typography:
  display-lg:
    fontFamily: Literata
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.07
    letterSpacing: -0.022em
  display-md:
    fontFamily: Literata
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.018em
  heading-lg:
    fontFamily: Literata
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.012em
  heading-md:
    fontFamily: Literata
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.006em
  heading-sm:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
  body-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0.005em
  label:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.02em
  caption:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.08em
  code:
    fontFamily: Fira Code
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 24px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 12px
    height: 24px
---

# Gossamer Frond

## Overview

Gossamer Frond is for premium beauty and skincare storefronts that sell through restraint rather than promotion. The UI stays on the neutral ramp, and product photography supplies the color. One deep botanical green (primary) appears in only four roles: the main action per view, text links, the focus ring and selected states. Whitespace is part of the system. Sections use space.16 to space.24 gaps, and cards keep space.8 padding.

Moods: restrained, luxurious, calm, refined. Built for: beauty, skincare, luxury-retail. Density: spacious.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Neutrals are deliberately untinted (R=G=B) so packaging and swatches read accurately. The ramp steps in roughly even lightness increments. The 400 and 500 steps were smoothed to #a6a6a6 and #808080 to remove the mid-ramp gap. Brand green sits at OKLCH hue about 130, a moss and eucalyptus tone rather than emerald. Its chroma peaks at 400 to 600 and tapers toward 50 and 950. The same curve is used for success (cooler teal-green, hue about 160) and danger (crimson, hue about 10), so all status ramps read as one family. Warning is an ochre that shares the brand's yellow lean.

Light-mode contrast:
- primary brand.600 with white text: 5.4:1.
- primary on background: 5.2:1.
- destructive danger.600 with white: 6.1:1.
- success.700 with white: 7.0:1.
- muted-foreground neutral.600: 5.7:1 on background and 5.4:1 on muted.
- ring brand.500 on background: 3.6:1.

Dark mode is built on near-black #121212. Cards and popovers lift to neutral.900, and secondary and muted surfaces sit at neutral.800. The accent is a soft sage, brand.400, with brand.950 text (6.5:1). It is luminous without turning neon. Destructive in dark mode is danger.400 with danger.950 text (6.1:1).

- **Primary** `#487535` / dark `#80ab67`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#fafafa` / dark `#121212` on `#121212` / dark `#fafafa`: page surface and body text.
- **Card** `#ffffff` / dark `#222222`: raised surfaces.
- **Secondary** `#f2f2f2` / dark `#363636`: secondary buttons and quiet controls.
- **Muted** `#f2f2f2` / dark `#363636` with **muted-foreground** `#636363` / dark `#cccccc`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#e5efdc` / dark `#1f3318`: highlights, selected rows, badges.
- **Destructive** `#b82a49` / dark `#f26a82`, **Success** `#176548` / dark `#52b98a`, **Warning** `#f8dc98` / dark `#d1a43a`: status only, always paired with an icon or label.
- **Border** `#e3e3e3` / dark `#363636`, **Input** `#cccccc` / dark `#4d4d4d`, **Ring** `#5f8f48` / dark `#80ab67`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The scale uses a 1.333 ratio (perfect fourth) above the 18px body-lg: 24, 32, 42, 56. Body steps run 12, 14, 16, 18. Literata carries display-lg through heading-md at weight 400, with heading-md at 500. Tracking tightens as size grows: -0.022em at 56px, -0.018em at 42px, -0.012em at 32px and -0.006em at 24px. Nunito Sans (400, 500, 600) handles navigation, forms, product detail and buttons. Body line height is 1.65 at 16px and 1.7 at 18px. Fira Code 400 is used only for SKUs, order numbers and code. Caption is 12px, weight 600, uppercase, with 0.08em tracking for eyebrows and category labels.

- Display: **Literata** (fallback Georgia, serif)
- Interface: **Nunito Sans** (fallback system-ui, sans-serif)
- Mono: **Fira Code** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Literata | 56px | 1.07 | 400 |
| display-md | Literata | 42px | 1.12 | 400 |
| heading-lg | Literata | 32px | 1.2 | 400 |
| heading-md | Literata | 24px | 1.3 | 500 |
| heading-sm | Nunito Sans | 18px | 1.4 | 600 |
| body-lg | Nunito Sans | 18px | 1.7 | 400 |
| body-md | Nunito Sans | 16px | 1.65 | 400 |
| body-sm | Nunito Sans | 14px | 1.55 | 400 |
| label | Nunito Sans | 14px | 1.3 | 600 |
| caption | Nunito Sans | 12px | 1.4 | 600 |
| code | Fira Code | 14px | 1.6 | 400 |

## Layout

Spacious density on a 4px base grid. Section gaps run space.16 (64px) to space.24 (96px) on desktop and space.12 (48px) on mobile. The content column is at most 1120px. Body text runs 60 to 72 characters per line. Prefer one idea per viewport, and let full-bleed imagery sit without overlaid UI.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Almost flat. Surfaces are separated by a 1px border token (neutral.200 light, neutral.800 dark) and by whitespace. Shadows are used as follows:
- shadow.sm (4% opacity) is the only shadow allowed on cards.
- shadow.md is for menus and popovers.
- shadow.lg is for dialogs and drawers.
- Never combine two shadow tokens on one element.

- sm: `0 1px 2px rgba(18, 18, 18, 0.04)`
- md: `0 6px 20px -6px rgba(18, 18, 18, 0.10)`
- lg: `0 24px 56px -12px rgba(18, 18, 18, 0.18)`

## Shapes

Corners are small for a tailored look:
- radius.md (4px) on buttons, inputs and selects.
- radius.lg (8px) on cards and dialogs.
- radius.sm (2px) on checkboxes and tags.
- radius.full only on badges (24px tall), avatars and color swatches.

Radius scale: sm 2px, md 4px, lg 8px, xl 12px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 24px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 32px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button per view for the main action, such as 'Add to bag'. Render all other buttons as secondary or ghost.
- **Do:** Keep desktop section gaps at space.16 (64px) or larger and card padding at space.8 (32px).
- **Do:** Set Literata only at heading-md (24px) and above: weight 400 for display-lg through heading-lg, 500 for heading-md. Use Nunito Sans for all UI text.
- **Do:** Set caption uppercase with its 0.08em tracking for eyebrows and category labels, limited to 1-3 words.
- **Do:** Separate surfaces with a 1px border token (neutral.200 light, neutral.800 dark). Use shadow.md only on menus and popovers, and shadow.lg only on dialogs.
- **Do:** Show focus as a 2px ring token (brand.500 light, brand.400 dark) offset 2px from the control, on every interactive element.
- **Do:** Pair success, warning and destructive states with an icon or a text label, such as 'In stock' or 'Only 2 left', so meaning never relies on color alone.
- **Don't:** Don't fill large sections or decorative shapes with brand green. Primary is limited to actions, links, focus and selected states.
- **Don't:** Don't set Literata below 24px, above weight 500, or in all caps.
- **Don't:** Don't tint the neutral ramp warm or cool. Grey stays R=G=B so packaging colors stay true.
- **Don't:** Don't exceed radius.lg (8px) on cards or radius.md (4px) on buttons and inputs. radius.full is for badges, avatars and swatches only.
- **Don't:** Don't add shadow.md or shadow.lg to cards in a product grid. Cards use only the 1px border and shadow.sm.
- **Don't:** Don't use success green for primary actions. It is a status color, cooler in hue than brand green.
- **Don't:** Don't reduce card padding below space.6 (24px) or let body text lines exceed 72 characters.