Relume

---
version: alpha
name: Relume-design-analysis
description: A confident, builder-tool marketing interface anchored on white canvas with near-black ink and a single electric-violet accent (#6248ff). The system reads as modern, design-system-native SaaS — warm-gray surface cards, monochrome typography at large display scale, and a tightly controlled accent palette where violet carries the brand and warm neutrals (#e4e2df, #f1f0ee) do the surface work. Secondary chromatic moments (orange, red, cream, lilac) appear only inside product/component showcases, never on primary actions.

colors:
  primary: "#6248ff"
  primary-active: "#563eeb"
  ink: "#161616"
  ink-soft: "#333333"
  black: "#000000"
  body: "#2e2e2e"
  muted: "#686868"
  hairline: "#d8d5d1"
  hairline-soft: "#dddddd"
  border-soft: "#cccccc"
  canvas: "#ffffff"
  surface-soft: "#fafafa"
  surface-warm: "#f1f0ee"
  surface-warm-strong: "#e4e2df"
  surface-dark: "#222222"
  surface-dark-elevated: "#2e2e2e"
  on-primary: "#ffffff"
  on-dark: "#ffffff"
  accent-orange: "#ff7448"
  accent-red: "#ff4848"
  accent-cream: "#f9edd6"
  accent-lilac: "#dcd8eb"
  accent-blue: "#3898ec"

typography:
  display-xl:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.5px
  display-lg:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1px
  display-md:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  title-lg:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.3px
  title-md:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px
  full: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 22px
    height: 44px
  button-primary-active:
    backgroundColor: "{colors.black}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 22px
    height: 44px
  button-accent-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 12px 22px
    height: 44px
  button-text-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 72px
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: 96px
  feature-card:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  showcase-card:
    backgroundColor: "{colors.surface-warm-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  product-mockup-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  pricing-tier-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-lg}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier-card-featured:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-lg}"
    rounded: "{rounded.lg}"
    padding: 32px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 44px
  badge-pill:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-accent:
    backgroundColor: "{colors.accent-lilac}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: 64px
---

## Overview

Relume's marketing surface is a confident builder-tool interface — white canvas (`{colors.canvas}` — #ffffff) with near-black ink (`{colors.ink}` — #161616), a single electric-violet accent (`{colors.primary}` — #6248ff), and warm-gray surface cards (`{colors.surface-warm}` — #f1f0ee, `{colors.surface-warm-strong}` — #e4e2df) that hold product fragments and feature claims. The system reads as design-system-native SaaS: it is the product of a company that sells component libraries, so the marketing surface looks like a tidy, well-tokenized design system itself.

The color story is deliberately disciplined. Violet is the one brand-carrying accent; everything else is monochrome (white → warm-gray → near-black). A small set of secondary chromatics — `{colors.accent-orange}` (#ff7448), `{colors.accent-red}` (#ff4848), `{colors.accent-cream}` (#f9edd6), `{colors.accent-lilac}` (#dcd8eb) — appears only inside product/component showcases and illustrative tiles, never on primary actions.

The warm neutral family is the system's signature. Instead of cold grays (#f5f5f5 territory), Relume uses warm, slightly-beige surfaces (`#f1f0ee`, `#e4e2df`, `#d8d5d1`) that give cards a paper-like, editorial calm. The contrast between warm-gray cards and the cold electric violet is what gives the brand its specific voltage.

**Key Characteristics:**
- White canvas with near-black ink (`{colors.ink}` — #161616, measured) and a single violet brand accent (`{colors.primary}` — #6248ff, measured).
- Warm-gray surface family (`{colors.surface-warm}` #f1f0ee → `{colors.surface-warm-strong}` #e4e2df → `{colors.hairline}` #d8d5d1) — the system's distinctive "paper" tone instead of cold gray.
- Electric violet reserved for accent CTAs, highlight badges, and brand moments; the press/active state shifts to the deeper `{colors.primary-active}` (#563eeb, measured — used here as the active tone).
- Secondary chromatics (orange #ff7448, red #ff4848, cream #f9edd6, lilac #dcd8eb) appear only inside product/component showcase tiles — never on primary actions.
- Near-black footer (`{colors.ink}` — #161616) closes the page; it is the only large dark surface in the body, with the dark featured-pricing tier as a deliberate exception.
- Typography, spacing, and radius were not captured by the analyzer (only colors were measured) — all type, spacing, and shape tokens below are **derived** from screenshot ground-truth and standard builder-tool baselines; see Known Gaps.

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #6248ff): The electric-violet brand accent. Used on accent CTAs, highlight badges, and brand wordmark moments. Press/active state shifts to `{colors.primary-active}` (#563eeb) — derived as the active tone from the measured deeper violet.
- **Accent Orange** (`{colors.accent-orange}` — #ff7448): Appears inside product/component showcase tiles and illustrative accents only.
- **Accent Red** (`{colors.accent-red}` — #ff4848): Secondary chromatic, used inside showcase tiles and small status moments.
- **Accent Cream** (`{colors.accent-cream}` — #f9edd6): A warm pastel fill used on showcase/illustration backgrounds.
- **Accent Lilac** (`{colors.accent-lilac}` — #dcd8eb): A soft violet-tint fill used on accent badges and highlight chips.
- **Accent Blue** (`{colors.accent-blue}` — #3898ec): A rarely-seen blue (likely a default UI/embed tone) — used only inside embedded product UI, not in the brand layer.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor.
- **Surface Soft** (`{colors.surface-soft}` — #fafafa): Barely-off-white band divider.
- **Surface Warm** (`{colors.surface-warm}` — #f1f0ee): Feature cards, badge pills, soft section fills — the lighter warm-gray.
- **Surface Warm Strong** (`{colors.surface-warm-strong}` — #e4e2df): Heavier warm-gray for showcase cards and emphasized surface blocks.
- **Surface Dark** (`{colors.surface-dark}` — #222222): The featured pricing tier card surface.
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #2e2e2e): Nested blocks inside dark surfaces.

### Lines & Borders
- **Hairline** (`{colors.hairline}` — #d8d5d1): The warm 1px border tone on light surfaces.
- **Hairline Soft** (`{colors.hairline-soft}` — #dddddd): Softer divider for low-emphasis splits.
- **Border Soft** (`{colors.border-soft}` — #cccccc): Neutral border alternative on inputs and dividers.

### Text
- **Ink** (`{colors.ink}` — #161616): All headlines and primary text; also the footer background.
- **Ink Soft** (`{colors.ink-soft}` — #333333): Slightly softened heading/body emphasis.
- **Black** (`{colors.black}` — #000000): Pure-black used on the primary button press state and high-contrast moments.
- **Body** (`{colors.body}` — #2e2e2e): Default running-text color.
- **Muted** (`{colors.muted}` — #686868): Secondary text — captions, sub-labels, footer body.
- **On Primary / On Dark** (`{colors.on-primary}` / `{colors.on-dark}` — #ffffff): Text on accent buttons and dark surfaces.

## Typography

### Font Family
Typography was **not** measured by the analyzer (the typography array is empty); the families and sizes below are **derived** from screenshot ground-truth and standard builder-tool baselines. Relume's marketing surface runs a clean grotesque/neo-grotesque sans for both display and body. **Inter** is documented here as a faithful, open-source stand-in for that voice — it preserves the tight, slightly-condensed headline character and the neutral body texture. No licensed/custom typeface was flagged in `fonts_licensed`, so no proprietary-font substitution is required; the Inter mapping is a derived approximation, not a measured value.

The split is functional and monochrome:
- Display (large, weight 600, negative tracking) — h1, h2, h3
- Body + UI (weight 400–500, neutral tracking) — paragraphs, labels, buttons, nav

### Hierarchy

All sizes below are **derived** (not measured).

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 600 | 1.1 | -1.5px | Homepage h1 — derived |
| `{typography.display-lg}` | 48px | 600 | 1.15 | -1px | Section heads — derived |
| `{typography.display-md}` | 36px | 600 | 1.2 | -0.5px | Sub-section heads, card titles — derived |
| `{typography.title-lg}` | 24px | 600 | 1.3 | -0.3px | Pricing plan names — derived |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Feature card titles — derived |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text — derived |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print — derived |
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions — derived |
| `{typography.button}` | 15px | 500 | 1.0 | 0 | Button labels — derived |
| `{typography.nav-link}` | 15px | 500 | 1.4 | 0 | Top-nav menu items — derived |

### Principles
The type system stays monochrome (`{colors.ink}`) — violet is almost never used on type, only on the accent button and badge surfaces. Display weight holds at 600 with negative letter-spacing for the modern, tightly-set headline character. Body stays at 400. The hierarchy is achieved through size and weight, not color.

### Note on Font Substitutes
**Inter** (weight 400–600) is the documented stand-in for Relume's grotesque sans. **Helvetica Now** or **Geist** are also close alternatives if a different texture is wanted. Because the actual face was not measured, treat the Inter mapping as a derived approximation to be confirmed against live CSS.

## Layout

### Spacing System
Spacing was **not** measured (the spacing array is empty); the scale below is **derived** from a standard 4px base and screenshot rhythm.

- **Base unit:** 4px (derived).
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px — all derived.
- **Section padding:** `{spacing.section}` (96px) between major bands — derived.
- **Card internal padding:** `{spacing.xl}` (32px) for feature/pricing cards; `{spacing.lg}` (24px) for showcase + product-mockup cards — derived.
- **Gutters:** `{spacing.lg}` (24px) between cards in multi-up grids — derived.

### Grid & Container
- **Max content width:** ~1280px centered (derived).
- **Hero band:** single-column centered headline, or 7/5 split with a product/component artifact (derived from screenshots).
- **Feature/showcase grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile (derived).
- **Pricing grid:** 3-up at desktop, collapsing to 1-up (derived).

### Whitespace Philosophy
Relume's layout is generous and tidy — the marketing surface mirrors a clean design system. Bands alternate white canvas and warm-gray surface fills to pace the scroll. The rhythm favors clear scanning over density.

## Elevation & Depth

Shadows were **not** measured (the shadows array is empty); the treatments below are **derived** from screenshot ground-truth.

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body sections, top nav, hero bands |
| Warm hairline | 1px `{colors.hairline}` (#d8d5d1) border | Inputs, dividers, occasional card outlines |
| Surface block | `{colors.surface-warm}` / `{colors.surface-warm-strong}` fill, no shadow | Feature cards, showcase cards |
| Color-block invert | `{colors.surface-dark}` fill | Featured pricing tier; color contrast does the elevation work |

The elevation philosophy reads as **flat, color-blocked, and modern** — surface tone and warm hairlines carry the depth rather than drop shadows. Any drop shadows present in product-mockup screenshots are product chrome shown as content, not system tokens.

## Shapes

Radius was **not** measured (the radius array is empty); the scale below is **derived**.

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small inline accents — derived |
| `{rounded.sm}` | 6px | Dropdown items, small chips — derived |
| `{rounded.md}` | 8px | Buttons, text inputs — derived |
| `{rounded.lg}` | 12px | Content cards (feature, showcase, pricing) — derived |
| `{rounded.xl}` | 16px | Large hero/product mockup containers — derived |
| `{rounded.pill}` | 9999px | Badge pills — derived |
| `{rounded.full}` | 9999px | Avatars, icon dots — derived |

### Photography Geometry
Product/component showcase tiles retain their native chrome and aspect ratios; card containers carry `{rounded.lg}` corners (derived). Larger marquee artifacts use `{rounded.xl}` (derived).

## Components

All component specs reference measured colors; their typography, radius, padding, and sizing values are **derived** from screenshot ground-truth (no component metrics were captured by the analyzer).

### Top Navigation

**`top-nav`** — White nav bar pinned to the top of every page, ~72px tall (derived), `{colors.canvas}` background. Carries the Relume wordmark at left, primary horizontal menu center, and a right-side cluster with a text sign-in and a primary CTA. Menu items in `{typography.nav-link}`.

### Buttons

**`button-primary`** — The default near-black CTA. Background `{colors.ink}` (#161616), text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.md}`, padding 12px × 22px, height 44px (derived). Active state `button-primary-active` shifts to `{colors.black}` (#000000).

**`button-accent`** — The violet brand CTA. Background `{colors.primary}` (#6248ff), text `{colors.on-primary}`, same geometry as primary. Active state `button-accent-active` shifts to `{colors.primary-active}` (#563eeb).

**`button-secondary`** — White button with a warm hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.hairline}` border, same padding/height/radius as primary.

**`button-text-link`** — Inline text button, no background, `{colors.ink}` label in `{typography.button}`.

### Cards & Containers

**`hero-band`** — White-canvas hero with a centered or 7/5-split headline and product/component artifact. Vertical padding `{spacing.section}` (96px, derived). H1 in `{typography.display-xl}`.

**`feature-card`** — Used in multi-up feature grids. Background `{colors.surface-warm}` (#f1f0ee), rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Title in `{typography.title-md}`, body in `{typography.body-md}`.

**`showcase-card`** — Heavier warm-gray card holding component/library previews. Background `{colors.surface-warm-strong}` (#e4e2df), rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Secondary chromatics (orange, red, cream, lilac) appear inside these tiles.

**`product-mockup-card`** — A card showing real Relume product UI (component picker, sitemap builder, library grid). Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. The UI inside carries its own chrome.

**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Plan name in `{typography.title-lg}`, feature checklist in `{typography.body-md}`, CTA at the bottom.

**`pricing-tier-card-featured`** — The featured tier inverts to `{colors.surface-dark}` (#222222) with text in `{colors.on-dark}`. The dark surface IS the featured signal — no badge or scale shift required.

### Inputs & Forms

**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}`, padding 12px × 16px, height 44px (derived), with a 1px `{colors.hairline}` border.

### Tags / Badges

**`badge-pill`** — Neutral pill label for category tags. Background `{colors.surface-warm}`, text `{colors.ink}`, type `{typography.caption}`, rounded `{rounded.pill}`, padding 4px × 12px.

**`badge-accent`** — Violet-tint highlight chip. Background `{colors.accent-lilac}` (#dcd8eb), text `{colors.primary}`, type `{typography.caption}`, rounded `{rounded.pill}`.

### Footer

**`footer`** — Near-black footer that closes every page. Background `{colors.ink}` (#161616), text `{colors.on-dark}`, body links in `{typography.body-sm}`, vertical padding 64px (derived). The only large dark surface in the body (aside from the featured pricing tier).

## Do's and Don'ts

### Do
- Reserve `{colors.primary}` (#6248ff) for the accent CTA, highlight badges, and brand moments. It is the single brand-carrying color.
- Use the warm-gray surface family (`{colors.surface-warm}`, `{colors.surface-warm-strong}`) for cards — the warm tone is the system's signature, distinct from cold-gray SaaS.
- Keep typography monochrome (`{colors.ink}`). Hierarchy comes from size and weight, not color.
- Confine secondary chromatics (orange, red, cream, lilac, blue) to product/component showcase tiles.
- End the page with the near-black footer (`{colors.ink}`). The light-to-dark close is part of the rhythm.
- Use `{component.button-primary}` (near-black) as the default action and `{component.button-accent}` (violet) for the highest-emphasis brand CTA.

### Don't
- Don't paint headlines or body copy violet — violet lives on surfaces and CTAs, not on type.
- Don't substitute cold gray for the warm-gray surfaces. The beige tone is intentional.
- Don't scatter secondary chromatics across primary actions or nav — they belong inside showcase tiles only.
- Don't add dark cards casually; the dark surface is reserved for the footer and the featured pricing tier.
- Don't document hover states — default and active/pressed only (`button-primary` → `button-primary-active`; `button-accent` → `button-accent-active`).

## Responsive Behavior

Breakpoint behavior below is **derived** from screenshot ground-truth (no responsive metrics were measured).

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 scales down; feature/showcase grids 1-up; pricing 1-up; footer columns stack |
| Tablet | 768–1024px | Nav tightens; feature/showcase cards 2-up; pricing 2-up |
| Desktop | 1024–1440px | Full top-nav; 3-up feature/showcase cards; 3-up pricing tiers |
| Wide | > 1440px | Same as desktop; content width caps ~1280px with added outer breathing room |

### Touch Targets
- `{component.button-primary}` and `{component.button-accent}` at ~44px height (derived) meet comfortable tap minimums.
- `{component.text-input}` height ~44px (derived).

### Collapsing Strategy
- Top nav collapses to a hamburger sheet on mobile.
- Hero split collapses to single column — headline + CTA first, artifact below.
- Feature/showcase grids reduce columns rather than shrinking cards.
- Pricing tiers collapse 3 → 2 → 1; the featured dark tier stays visually distinct at every breakpoint.

## Iteration Guide

1. Focus on ONE component at a time and reference its YAML key directly (`{component.feature-card}`, `{component.pricing-tier-card-featured}`).
2. Variants (`-active`, `-featured`, `-accent`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline hex in components.
4. Never document hover. Default and Active/Pressed states only.
5. Violet is the single brand accent — escalate emphasis with surface contrast and size before reaching for more color.
6. The warm-gray surfaces are the brand's texture; don't swap them for cold grays.
7. Replace any derived typography/spacing/radius value with measured values as soon as live CSS can be sampled (see Known Gaps).

## Known Gaps

- **Only colors were measured.** The analyzer returned empty `typography`, `spacing`, `radius`, `shadows`, and `components` arrays. Every type token, spacing value, radius value, shadow treatment, and component metric in this document is **derived** from screenshot ground-truth and standard builder-tool baselines — not measured. These must be confirmed against live CSS before being treated as authoritative.
- The actual typeface is unconfirmed. Inter is documented as a derived stand-in; no font was flagged in `fonts_licensed`, so no proprietary substitution was required, but the real family should be sampled and replaced.
- `{colors.primary-active}` (#563eeb) and `{colors.black}` (#000000) are assigned as button press/active tones by inference from the measured palette; the actual interaction-state mapping was not captured.
- The exact roles of `{colors.accent-blue}` (#3898ec), `{colors.accent-cream}` (#f9edd6), and `{colors.accent-orange}`/`{colors.accent-red}` are inferred as showcase-tile chromatics; their precise placements need confirmation. (#3898ec is likely a default embed/UI tone rather than a brand color.)
- Drop-shadow values, animation/transition timings, form validation states, and the dark-surface elevated nesting (`{colors.surface-dark-elevated}`) usage were not extracted.
- Only two pages were captured (`landing`, `pricing`); component coverage for deeper product, library, and account surfaces is out of scope.

<!-- Documented by duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/relume/design-md -->