---
name: Relume
tagline: Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder.
updated_at: 2026-05-29T21:44:54.486Z
published_at: 2026-05-29T21:44:54.486Z
author: webdesignhot
source_url: https://www.relume.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [design-tools, dev-tools]
tags: [light, sans, monochrome, editorial, minimal]
preview_swatch: ['#f1f0ee', '#161616', '#3e3e3e']
related: [webflow, framer, figma]
description: 'Relume''s site sits on a warm off-white `#f1f0ee` canvas with near-black `#161616` doing every chromatic job at once — text, brand, and CTA fill. The signature move is oversized display type set in the bespoke "Relative Faux" grotesk at 88px / regular 400 weight, with "Relative" carrying body. No accent colour, no gradient: the whole system is off-white-plus-black monochrome editorial, with a single 8px radius on the black "Start for free" button. It reads like a design-system manual that happens to sell an AI website builder.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: text-soft
  muted: text-muted
  border: border
  ring: brand
colors:
  # Primary
  bg: '#f1f0ee'                    # warm off-white marketing canvas
  bg-soft: '#e9e8e5'              # slightly deeper off-white stripe
  bg-elev: '#f7f6f4'             # lifted near-white panel
  bg-dark: '#161616'             # near-black inverted band / footer
  bg-dark-2: '#222222'           # softer dark (code block, secondary inversion)
  surface: '#ffffff'             # pure-white card on off-white canvas
  surface-2: '#e9e8e5'           # second-level neutral panel
  surface-dark: '#222222'        # dark-band card

  # Text
  text: '#161616'                # body + headlines, warm near-black
  text-strong: '#000000'         # rare maximal-contrast emphasis
  text-muted: '#3e3e3e'          # captions, secondary copy
  text-soft: '#6b6b6b'           # tertiary / meta
  text-faint: '#9a9a9a'          # disabled / placeholder ink
  text-on-dark: '#ffffff'        # white on near-black band
  text-on-dark-muted: '#b8b8b8'  # muted on dark
  text-on-brand: '#ffffff'       # white on black CTA

  # Brand (monochrome — black IS the brand)
  brand: '#161616'              # near-black — CTA fill, the whole brand surface
  brand-hover: '#3e3e3e'         # CTA hover (matches live --hoverBackground)
  brand-active: '#000000'        # pressed
  brand-soft: 'rgba(22,22,22,0.06)'  # faintest near-black wash for tints
  on-brand: '#ffffff'           # white label on the black button

  # Neutrals / borders
  border: 'rgba(22,22,22,0.12)'  # hairline — near-black at low alpha
  border-strong: 'rgba(22,22,22,0.24)'  # emphasis hairline
  border-soft: 'rgba(22,22,22,0.06)'   # softest divider
  border-dark: 'rgba(255,255,255,0.14)'  # hairline on dark band

  # Semantic (kept neutral-leaning to protect monochrome identity)
  success: '#1f7a4d'
  success-bg: '#e3f0e9'
  warning: '#8a6d1f'
  warning-bg: '#f2ecd9'
  danger: '#9a2a2a'
  danger-bg: '#f2e0e0'
  info: '#161616'
  info-bg: 'rgba(22,22,22,0.06)'

typography:
  display:
    family: '"Relative Faux", "Relative", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  body:
    family: '"Relative", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 88, weight: 400, lineHeight: 1.0,  tracking: '-0.02em',  family: display }
    display-lg:      { size: 64, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display }
    h1:              { size: 56, weight: 400, lineHeight: 1.08, tracking: '-0.016em', family: display }
    h2:              { size: 40, weight: 500, lineHeight: 1.15, tracking: '-0.012em', family: body }
    h3:              { size: 28, weight: 500, lineHeight: 1.25, tracking: '-0.008em', family: body }
    h4:              { size: 22, weight: 500, lineHeight: 1.3,  tracking: '-0.004em', family: body }
    h5:              { size: 18, weight: 600, lineHeight: 1.4,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 14, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    eyebrow:         { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0.04em',   family: body }
    code:            { size: 14, weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 72
  hero-y: 140
  section-y: 120
  gutter: 32

components:
  button-primary:
    bg: '#161616'
    text: '#ffffff'
    radius: 8
    paddingX: 20
    paddingY: 12
    font: 'Relative 500 / 15px'
    hover: 'bg #3e3e3e'
  button-secondary:
    bg: 'transparent'
    text: '#161616'
    border: '1px solid rgba(22,22,22,0.24)'
    radius: 8
    paddingX: 20
    paddingY: 12
    hover: 'bg rgba(22,22,22,0.06)'
  button-ghost:
    bg: 'transparent'
    text: '#161616'
    radius: 8
    paddingX: 16
    paddingY: 10
    hover: 'bg rgba(22,22,22,0.06)'
  button-inverted:
    bg: '#ffffff'
    text: '#161616'
    radius: 8
    paddingX: 20
    paddingY: 12
    use: 'primary action on the dark #161616 band'
  card-default:
    bg: '#ffffff'
    radius: 12
    padding: 24
    border: '1px solid rgba(22,22,22,0.12)'
    shadow: 'none'
  card-dark:
    bg: '#222222'
    text: '#ffffff'
    radius: 12
    padding: 24
    border: '1px solid rgba(255,255,255,0.14)'
    shadow: 'none'
  input-text:
    bg: '#ffffff'
    border: '1px solid rgba(22,22,22,0.24)'
    radius: 8
    paddingX: 12
    paddingY: 10
    focus: 'border #161616 + ring 2px rgba(22,22,22,0.2)'
    placeholder: 'rgba(22,22,22,0.4)'
  badge:
    bg: 'rgba(22,22,22,0.06)'
    text: '#161616'
    radius: 9999
    paddingX: 10
    paddingY: 4
    font: 'Relative 500 / 12px'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-soft: 'cubic-bezier(0.45, 0, 0.55, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — scroll reveals collapse to opacity-only, hover lifts disabled, marquee/auto-scroll halted'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 2px rgba(22,22,22,0.05)'
  standard: '0 4px 16px rgba(22,22,22,0.08)'
  elevated: '0 12px 32px rgba(22,22,22,0.12)'
  ring: '0 0 0 2px rgba(22,22,22,0.4)'
  ring-dark: '0 0 0 2px rgba(255,255,255,0.6)'

accessibility:
  contrast-text-on-bg: 16.0           # AAA — #161616 on #f1f0ee
  contrast-muted-on-bg: 9.6           # AAA — #3e3e3e on #f1f0ee
  contrast-soft-on-bg: 5.2            # AA — #6b6b6b on #f1f0ee
  contrast-on-brand: 16.4             # AAA — #ffffff on #161616
  contrast-text-on-dark: 16.4         # AAA — #ffffff on #161616
  focus-ring: '2px solid #161616 with 2px offset (white on dark band)'
  reduced-motion-honored: true
  keyboard-nav: 'visible focus on every interactive; tab order matches DOM source'

dark-mode: inverted-bands              # off-white canvas with #161616 inverted sections rather than a global toggle
---

## 1. Visual Theme & Atmosphere

Relume's site opens on a warm off-white `#f1f0ee` canvas — not pure white, not cool grey, but a paper-stock cream with a faint warmth that reads as printed broadsheet rather than software UI. Against it, a single warm near-black `#161616` does every chromatic job in the system at once: it sets all the body copy, all the headlines, the hairlines, and the fill of the one button that matters — the black "Start for free" CTA with white label. There is no accent colour. There is no gradient. The entire identity is the off-white-and-black pair, and the discipline of refusing a third hue is the whole point.

The signature gesture is **oversized regular-weight display type**. The hero headline is set in the bespoke "Relative Faux" grotesk at 88px — but at weight 400, not the 700 most marketing sites reach for. That regular-weight giant type is the editorial tell: it reads like a magazine masthead or a design-school thesis cover, confident enough that it does not need to shout in bold. Body type is "Relative" at a calm 16px / 1.55, and section headings (h2) drop to "Relative" at 40px / 500 — slightly heavier, but still restrained. The two-family system is one superfamily: Relative Faux for display, Relative for everything else.

The voice is **design-system-manual-as-product-page**. Relume sells an AI website builder and a component library for Webflow and Figma, so its own marketing has to demonstrate taste before it claims to generate it. The layout is gridded, the vertical rhythm is generous, and the only ornament is the type itself. Where Webflow lets a single indigo-violet gradient in and Framer plays a loud chromatic quartet, Relume goes further toward Vercel's restraint — but warmer, on cream rather than white, and with no chromatic accent at all. The closest reference is a printed type-specimen booklet.

The atmosphere is **warm-editorial-minimal**. The cream canvas softens what would otherwise be a stark black-on-white system; the warmth keeps it human rather than clinical. Inverted `#161616` bands appear for footers, dark feature reveals, and code-adjacent contexts (the live `--code-block-background` is `#222`), flipping the same monochrome pair so white type sits on near-black. The off-white-plus-black partnership is the system; everything else is layout, scale, and the regular-weight grotesk.

**Key Characteristics**
- Warm off-white `#f1f0ee` canvas — paper-cream, never pure white, never cool
- Near-black `#161616` does text, brand, hairlines, and CTA fill all at once
- Oversized **regular-weight** display: Relative Faux 88px / 400 — the editorial tell
- Relative Faux (display) + Relative (body) — a single grotesk superfamily
- Zero accent colour, zero gradient — monochrome is the identity, by refusal
- One black "Start for free" CTA at 8px radius with white label
- Inverted `#161616` bands for footer and dark feature reveals
- Hairlines are near-black at low alpha (`rgba(22,22,22,0.12)`), never grey-blue
- No shadows on cards — depth is hairline + tonal, not elevation
- Reads like a printed type-specimen booklet, not a SaaS landing page

## 2. Color Palette & Roles

### Primary / Canvas

- **bg** (`#f1f0ee`): the warm off-white marketing canvas — the brand's base note
- **bg-soft** (`#e9e8e5`): a slightly deeper off-white for alternating stripes
- **bg-elev** (`#f7f6f4`): a lifted near-white panel for subtle separation
- **bg-dark** (`#161616`): near-black inverted band — footer and dark feature reveals
- **bg-dark-2** (`#222222`): softer dark for code blocks and secondary inversions (live `--code-block-background`)
- **surface** (`#ffffff`): pure white cards, which read crisp against the cream canvas
- **surface-2** (`#e9e8e5`): second-level neutral panel

### Text

- **text** (`#161616`): body and headlines — warm near-black, the workhorse ink
- **text-strong** (`#000000`): rare maximal-contrast emphasis
- **text-muted** (`#3e3e3e`): captions and secondary copy (matches live hover tone)
- **text-soft** (`#6b6b6b`): tertiary and meta labels
- **text-faint** (`#9a9a9a`): disabled and placeholder ink
- **text-on-dark** (`#ffffff`): white on the `#161616` inverted band
- **text-on-brand** (`#ffffff`): white label on the black CTA

### Brand (monochrome — black IS the brand)

- **brand** (`#161616`): near-black — the CTA fill and the entire brand surface
- **brand-hover** (`#3e3e3e`): CTA hover, exactly the live `--hoverBackground` `rgb(62,62,62)`
- **brand-active** (`#000000`): pressed
- **brand-soft** (`rgba(22,22,22,0.06)`): faintest near-black wash for badge/tint backgrounds
- **on-brand** (`#ffffff`): white label on the black button

There is no separate accent hue. Relume's "accent" is the absence of one — emphasis is created with **scale, weight, and the inverted band**, never with colour. Treat any request for a coloured accent as off-brand.

### Interactive

- **link**: `#161616` — same as text, distinguished by underline rather than colour
- **link-hover**: `#3e3e3e` with underline-grow
- **link-on-dark**: `#ffffff` with 1px underline
- **selected**: `rgba(22,22,22,0.06)` — soft near-black tint
- **disabled**: `#9a9a9a` text on `rgba(22,22,22,0.04)` bg

### Neutral Scale

- **text** `#161616` — body
- **text-muted** `#3e3e3e` — captions and meta
- **text-soft** `#6b6b6b` — tertiary
- **text-faint** `#9a9a9a` — disabled
- **border** `rgba(22,22,22,0.12)` — hairline, near-black at low alpha
- **border-strong** `rgba(22,22,22,0.24)` — emphasis hairline
- **border-soft** `rgba(22,22,22,0.06)` — softest divider

### Surface & Borders (Dark Band)

- **surface-dark** `#222222` — dark-band card
- **border-dark** `rgba(255,255,255,0.14)` — hairline on the inverted band
- **text-on-dark** `#ffffff` — white on near-black
- **text-on-dark-muted** `#b8b8b8` — muted white on near-black

### Shadow Colours

Relume's depth is **near-shadowless**. Cards sit on hairlines, not elevation. Where a faint lift is used, the shadow is warm near-black at very low alpha (`rgba(22,22,22,0.08)`) — never cool, never blue-tinted. The default card has *no* shadow at all.

### Semantic

Semantics are kept **neutral-leaning** to protect the monochrome identity — desaturated, dark-toned, used only in product UI (forms, validation), never in marketing.

- **success** `#1f7a4d` on `#e3f0e9`
- **warning** `#8a6d1f` on `#f2ecd9`
- **danger** `#9a2a2a` on `#f2e0e0`
- **info** `#161616` on `rgba(22,22,22,0.06)` — reuses the near-black

## 3. Typography Rules

### Font Family

- **Display**: Relative Faux — bespoke grotesk used for oversized headlines; its defining trait is that it is set at **regular 400 weight even at giant sizes**
- **Body**: Relative — the matching text-weight grotesk; handles all body, label, caption, and most section headings
- **Mono**: system monospace (ui-monospace / SF Mono / Menlo) — code blocks and the `#222` code surface only
- The two faces are one superfamily — Relative Faux is the display cut of Relative, so the pairing is seamless rather than contrasting

### Hierarchy

| Role | Font | Size | Weight | Line H | Tracking | Notes |
|---|---|---|---|---|---|---|
| display-hero | Relative Faux | 88 | 400 | 1.0 | -0.02em | Above-fold hero — the signature regular-weight giant |
| display-lg | Relative Faux | 64 | 400 | 1.05 | -0.018em | Section opener |
| h1 | Relative Faux | 56 | 400 | 1.08 | -0.016em | Page title |
| h2 | Relative | 40 | 500 | 1.15 | -0.012em | Feature header (live h2 = Relative 40/500) |
| h3 | Relative | 28 | 500 | 1.25 | -0.008em | Card title |
| h4 | Relative | 22 | 500 | 1.3 | -0.004em | Inline title |
| h5 | Relative | 18 | 600 | 1.4 | 0 | Component label |
| body-lg | Relative | 18 | 400 | 1.55 | 0 | Hero subhead |
| body | Relative | 16 | 400 | 1.55 | 0 | Default paragraph (live body = Relative 16/400) |
| body-sm | Relative | 14 | 400 | 1.5 | 0 | Captions |
| label | Relative | 14 | 500 | 1.4 | 0 | Form and button labels |
| caption | Relative | 13 | 500 | 1.4 | 0 | Meta below cards |
| eyebrow | Relative | 13 | 500 | 1.4 | 0.04em | Section taglines |
| code | mono | 14 | 400 | 1.6 | 0 | Inline code, code blocks |
| code-micro | mono | 12 | 500 | 1.5 | 0 | Version strings |

### Principles

- **Display stays at weight 400, even at 88px** — the regular-weight giant is the brand's whole typographic signature; reaching for 700 erases it
- **Relative Faux only for display ≥48px** — below that, switch to Relative; the display cut's character lives at scale
- **Headings (h2+) use Relative 500, not Relative Faux** — section headers are the heavier text face, not the lighter display face
- **Tracking is moderate-negative** — `-0.02em` at hero, easing toward 0 by body
- **No serif, no second family** — the superfamily carries everything; contrast comes from scale, not from face-switching
- **Body at 16px / 1.55** — calm, readable, never inflated for cinematic effect
- **Emphasis is scale, not colour** — there is no coloured accent to lean on, so size and weight do all the hierarchy work
- **Eyebrows tracked +0.04em** — the only positive-tracking move, used for small section labels

## 4. Component Stylings

### Buttons

**Primary CTA** — the black rectangle (live: "Start for free")
- bg `#161616`, text `#ffffff`, radius `8px`
- padding `12px 20px`, Relative 500 15px
- hover: bg `#3e3e3e` (live `--hoverBackground`), 240ms ease-standard
- focus: ring `2px solid #161616` + 2px offset
- use: every primary action — "Start for free", "Get started", "Sign up"

**Secondary Button**
- bg transparent, text `#161616`, border `1px solid rgba(22,22,22,0.24)`, radius `8px`
- padding `12px 20px`, Relative 500 15px
- hover: bg `rgba(22,22,22,0.06)`
- use: secondary action — "Book a demo", "See pricing"

**Ghost Button**
- bg transparent, text `#161616`, radius `8px`, no border
- padding `10px 16px`
- hover: bg `rgba(22,22,22,0.06)`
- use: tertiary / inline actions

**Inverted Button** (on the dark `#161616` band)
- bg `#ffffff`, text `#161616`, radius `8px`
- padding `12px 20px`
- hover: bg `#e9e8e5`
- use: primary action sitting on the near-black band — the monochrome pair simply flips

### Cards

**Card Default**
- bg `#ffffff`, radius `12px`, padding `24px`
- border `1px solid rgba(22,22,22,0.12)`, **no shadow** (depth is the hairline)
- hover: border `rgba(22,22,22,0.24)` — colour deepens, no lift

**Card Dark** (on the inverted band)
- bg `#222222`, text `#ffffff`, radius `12px`, padding `24px`
- border `1px solid rgba(255,255,255,0.14)`, no shadow
- hover: bg `#2a2a2a` — tonal, not elevation

**Card Feature** (component-library preview tile)
- bg `#ffffff`, radius `12px`, padding `0` (image bleeds to edge)
- 1px hairline frame, label row in Relative 14 `#3e3e3e` below

### Badges & Tags

**Badge Default**
- bg `rgba(22,22,22,0.06)`, text `#161616`, radius `9999px`
- padding `4px 10px`, Relative 500 12px

**Badge Inverted** (on dark band)
- bg `rgba(255,255,255,0.1)`, text `#ffffff`, radius `9999px`
- padding `4px 10px`, Relative 500 12px

**Tag Eyebrow**
- bg transparent, text `#3e3e3e`, radius `0`
- Relative 13px / 0.04em, used as small section labels

### Inputs & Forms

**Text Input**
- bg `#ffffff`, border `1px solid rgba(22,22,22,0.24)`, radius `8px`
- padding `10px 12px`, Relative 400 16px
- focus: border `#161616` + ring `2px rgba(22,22,22,0.2)`
- placeholder: `rgba(22,22,22,0.4)` (live `--placeholderColor` is `color-mix` of `#161616` at 60% transparent)

**Search Input**
- bg `#ffffff`, border `1px solid rgba(22,22,22,0.12)`, radius `8px`
- inline magnifier left, padding `10px 12px 10px 36px`

### Navigation

**Top Nav**
- bg `#f1f0ee` (transparent over hero, solidifies on scroll), height `72px`, gutters `32px`
- Relume wordmark left, link nav center (Product / Library / Pricing / Resources), CTAs right (black "Start for free" primary + ghost "Log in")
- hairline `rgba(22,22,22,0.12)` bottom on scroll
- mobile: hamburger right-aligned, full-height drawer

**Footer**
- bg `#161616`, padding `96px 32px`
- multi-column white link grid in Relative 14, muted `#b8b8b8` headers
- Relume wordmark + © at bottom — the inverted band closes the page

### Tabs / Tooltips / Toasts

**Tab Group**
- underline-style: 2px `#161616` on active, hairline `rgba(22,22,22,0.12)` on rest
- text `#161616` active, `#6b6b6b` rest

**Tooltip**
- bg `#161616`, text `#ffffff`, radius `8px`, padding `8px 12px`, Relative 500 12px

**Toast**
- bg `#ffffff`, border `1px solid rgba(22,22,22,0.12)`, radius `12px`, shadow standard
- 16px Relative 500 message, 14px muted body

## 5. Layout Principles

### Spacing System

- **base** `4px`, scale `[0, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128]`
- Density philosophy: **calm-editorial**. Section vertical rhythm holds at 120px — spacious enough to read as a type-specimen booklet, tighter than Framer's cinematic 160.

### Grid & Container

- **page-width** `1280px` with 32px gutters
- 12-column grid; component-library showcases use a denser tile grid
- Hero zones bleed full-width but reset to 1280 for content
- **prose-width** `720px` — for blog, docs, and changelog

### Whitespace Philosophy

Relume's whitespace is **the frame around the type**. The oversized regular-weight display needs air to breathe, so headlines get generous margins above and below. Cards carry 24px internal padding. With no colour to carry attention, whitespace and scale do the visual work — the cream canvas is allowed to dominate.

### Section Cadence

The page alternates the same monochrome pair:
1. Off-white `#f1f0ee` hero with 88px regular-weight headline + black CTA
2. Off-white feature row with hairline-bordered white cards
3. Off-white component-library grid (the product-as-protagonist tiles)
4. Inverted `#161616` dark feature reveal with white type
5. Off-white pricing / testimonial wall
6. Inverted `#161616` footer

The off-white / near-black alternation is the rhythm — never a third tone, never a coloured band.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Inline code corners |
| Small | 4px | Small badges, chips |
| Medium | 8px | **Buttons, inputs** — Relume's default (live CTA = 8px) |
| Large | 12px | **Cards** — the signature card radius |
| XL | 16px | Featured panels, modals |
| Pill | 9999px | Avatars, tag badges |

The radius ladder is **moderate-restrained**. The black CTA's 8px corner is the one hard data point from the live probe; cards step up to 12px. Nothing in the system goes pillow-soft — the editorial register favours crisp, near-square corners over heavy rounding.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow, no border | Display copy on canvas |
| 1 | 1px hairline `rgba(22,22,22,0.12)` | Resting card borders, dividers |
| 2 | Hairline deepens to `rgba(22,22,22,0.24)` | Card hover (no lift) |
| 3 | shadow-ambient `0 1px 2px rgba(22,22,22,0.05)` | Sticky nav on scroll |
| 4 | shadow-standard `0 4px 16px rgba(22,22,22,0.08)` | Dropdowns, toasts |
| 5 | shadow-elevated `0 12px 32px rgba(22,22,22,0.12)` | Modals, overlays |

### Shadow Philosophy

Relume's depth on the off-white canvas is **hairline-first, near-shadowless**. The default card has no shadow at all — it sits in a 1px `rgba(22,22,22,0.12)` near-black hairline, and on hover the hairline deepens rather than the card lifting. This flat, bordered treatment is the editorial discipline: depth reads as printed registration marks, not as floating UI. Shadows appear only on transient overlays (dropdowns, modals, toasts), and even then they are warm near-black at low alpha — never cool, never blue-tinted. Dark-band cards lean entirely on tonal layering (`#222` on `#161616`) with a faint white hairline.

## 8. Interaction & Motion

### Easing Curves

- **ease-standard** `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **ease-emphasized** `cubic-bezier(0.2, 0, 0, 1)` — modal entry, section reveal
- **ease-soft** `cubic-bezier(0.45, 0, 0.55, 1)` — symmetric breathing

### Duration Buckets

- **fast** `150ms` — button hover, link state
- **standard** `240ms` — card hover, dropdown reveal
- **slow** `320ms` — modal entry, scroll section reveal

### Per-Component Recipes

- **Primary CTA hover**: bg `#161616` → `#3e3e3e`, 150ms ease-standard (live hover tone)
- **Card hover**: hairline `rgba(22,22,22,0.12)` → `rgba(22,22,22,0.24)`, 240ms — colour deepens, no translateY
- **Link hover**: underline grow + colour `#161616` → `#3e3e3e`, 150ms
- **Dropdown reveal**: fade + 4px down, 240ms ease-emphasized
- **Section reveal on scroll**: fade-up 12px, 320ms ease-emphasized
- **Component-library marquee**: slow auto-scroll loop of preview tiles (halts under reduced-motion)

### Page Transitions

- Section reveals on scroll: fade-up 12px, 320ms slow
- Sticky nav: off-white bg + hairline fade-in on scroll past hero, 150ms
- Inverted band entry: white type fades up as the `#161616` band scrolls in

### Reduced Motion Strategy

Relume respects `prefers-reduced-motion: reduce`:
- Scroll-triggered reveals: opacity-only, no translate
- Component-library marquee / auto-scroll: halted (static grid)
- Hover lifts: disabled — colour/hairline changes only
- Sticky nav: instant background change

## 9. Accessibility & A11y

### Contrast Pairs

- text `#161616` on bg `#f1f0ee`: **16.0** — AAA all sizes
- text-muted `#3e3e3e` on bg `#f1f0ee`: **9.6** — AAA
- text-soft `#6b6b6b` on bg `#f1f0ee`: **5.2** — AA body, AAA large
- on-brand `#ffffff` on brand `#161616`: **16.4** — AAA (the black CTA)
- text-on-dark `#ffffff` on bg-dark `#161616`: **16.4** — AAA
- text-on-dark-muted `#b8b8b8` on bg-dark `#161616`: **7.6** — AAA
- text `#161616` on surface `#ffffff`: **17.4** — AAA (white cards)

The monochrome system is an accessibility win — every primary text/background pair clears AAA by a wide margin. The only care point is `text-faint` `#9a9a9a` on `#f1f0ee` (~2.6), which must stay reserved for disabled/decorative ink, never functional text.

### Focus Indicators

- 2px solid `#161616` with 2px offset on the off-white canvas
- On the dark band: 2px solid `#ffffff` with 2px offset (live `--buttonFocusColor` is `#ffffff`)
- Visible on every interactive
- Never `outline: none` without a replacement

### ARIA Patterns

- Dropdown nav: `aria-haspopup="menu"` + `aria-expanded`
- Modal dialogs: `role="dialog"` + `aria-modal="true"` + `aria-labelledby` + focus trap
- Tab group: `role="tablist"` + `aria-orientation` + `aria-controls`
- Component-library tiles: each preview as a labelled link/button, not a bare image
- Decorative dividers: `aria-hidden="true"`

### Keyboard Nav

- Tab order matches DOM source
- ENTER/SPACE activate buttons
- ARROW navigates within tab groups and menus
- ESC closes modals/dropdowns
- All interactives reachable in the tab cycle

### Screen Reader Hints

- Relume wordmark SVG: `<title>Relume</title>`
- Component-library previews: `<img alt>` describing the component shown
- Eyebrow labels are semantic spans, not headings
- Skip-to-content link at top, visible on focus

### Reduced Motion

- Honored across the site
- Marquee, parallax, scroll reveals: disabled or opacity-only
- Hover lifts: disabled

## 10. Responsive Behavior

### Breakpoints

| Tier | Min-width | Use |
|---|---|---|
| mobile | 0–639px | Single-column stack |
| tablet | 640–1023px | 2-column feature / tile grid |
| desktop | 1024–1279px | Full 12-column |
| wide | 1280px+ | Container caps at 1280, generous gutters |

### Touch Targets

Minimum 44×44px on mobile. The black CTA scales padding from `12px 20px` (desktop) to `14px 22px` (mobile) for a comfortable 48px tap area.

### Collapsing Strategy

- **Hero display**: 88px → 64px → 48px → 36px down the cascade — but always at weight 400
- **Feature / library grid**: 3-col → 2-col → 1-col
- **Top nav**: full link nav → right-aligned hamburger drawer at <1024px
- **Section vertical rhythm**: 120px → 80px → 56px
- **Inverted bands**: preserved on mobile (the monochrome pair is identity-critical)

### Image Behavior

- Component-library tiles: aspect-ratio 16:10, `object-fit: cover`, 1px hairline frame
- Wordmark and partner logos: monochrome SVG, never coloured
- Avatar images: 40×40 circular

### Container Queries

Component-library grids use container queries so preview tiles reflow by available width (4-up → 3-up → 2-up) independent of the page breakpoint.

## 11. Content & Voice

### Tone

**Designer-direct, quietly confident.** Relume speaks to designers and builders who already have taste and want speed. The copy is plain and craft-anchored — "designed & built faster with AI" rather than "revolutionize your workflow". It states what the tool does and trusts the type and the cream canvas to carry the polish. No exclamation marks, no buzzword stacking.

### Microcopy Patterns

- **Button verbs**: "Start for free", "Book a demo", "Get started", "Log in", "See pricing"
- **Empty states**: "No projects yet — start your first to begin." (Direct invitation.)
- **Errors**: "Something went wrong. Please try again." (Calm, no jargon.)
- **Success**: "Generated." / "Saved." (Past tense, terse.)
- **Loading**: "Generating your site…" (Verb in progress.)

### CTA Verb Conventions

Relume leads with **"Start for free"** as the primary CTA across hero, pricing, and footer — the exact live label, in the black button. Secondary is **"Book a demo"**. For the library: **"Browse components"**, **"Open in Figma"**, **"Open in Webflow"**. The verbs are short and concrete; the AI angle is stated once, not repeated.

### Empty States

Quiet invitations, no illustrations: "No sitemaps yet — generate your first." The design stays functional and type-forward, in keeping with the editorial restraint.

## 12. Dark Mode & Theming

Relume's marketing site ships **inverted monochrome bands** rather than a global dark-mode toggle. The page flips between the off-white `#f1f0ee` canvas and the near-black `#161616` band; the same two-colour system simply inverts, so white type sits on near-black for footers and dark feature reveals. The token swap inside any `<section data-theme="dark">`:

```yaml
colors-dark:
  bg: '#161616'
  bg-elev: '#222222'
  surface: '#222222'
  surface-2: '#2a2a2a'
  text: '#ffffff'
  text-muted: '#b8b8b8'
  text-soft: '#8a8a8a'
  brand: '#ffffff'              # the CTA inverts — white button, black label
  on-brand: '#161616'
  border: 'rgba(255,255,255,0.14)'
  border-strong: 'rgba(255,255,255,0.24)'
```

Because the system is already monochrome, inversion is trivial and lossless — there is no accent hue to remap. On the dark band the primary CTA flips to a white button with `#161616` label; everything else is a straight tonal mirror.

## 13. Lineage & Influences

Relume's marketing reads like the **type-specimen booklet of a studio that happens to sell an AI website builder**. The canvas is a warm off-white `#f1f0ee` — paper-cream rather than screen-white — and a single near-black `#161616` carries text, hairlines, and the one button that matters. There is no accent colour and no gradient; emphasis is built from scale and the inverted band alone. The defining typographic move is oversized **regular-weight** display: Relative Faux at 88px / 400, a confident masthead gesture that owes more to print editorial than to SaaS marketing.

The lineage runs through **Swiss / International Typographic Style** (grid discipline, the type doing the work, restraint as a value), the **broadsheet and type-specimen tradition** (cream stock, large regular-weight display, black ink), and the contemporary **monochrome-builder cohort** — Vercel's achromatic structure pushed warmer onto cream, and the design-tool sibling Webflow stripped of its indigo gradient. Where Webflow lets one gradient in and Framer plays a chromatic quartet, Relume removes colour entirely and lets the bespoke grotesk and the warm canvas be the whole identity. The custom Relative superfamily is the brand's signature instrument, the way Söhne anchors Vercel or Inter anchors so many of its peers.

**Named Influences**
- **Vercel** ([vercel.com](https://vercel.com)) — Achromatic, type-forward restraint; structure over chrome
- **Webflow** ([webflow.com](https://webflow.com)) — Design-tool-as-conference register, product-as-protagonist tiles, the visual-builder sibling
- **Figma** ([figma.com](https://www.figma.com)) — Component-library presentation and the design-system-manual cadence Relume plugs into
- **Klim Type Foundry** ([klim.co.nz](https://klim.co.nz)) — The grotesk-superfamily lineage (Söhne / National) that Relative's display-plus-text pairing echoes
- **Swiss Style** ([en.wikipedia.org/wiki/International_Typographic_Style](https://en.wikipedia.org/wiki/International_Typographic_Style)) — Grid discipline and the conviction that the type carries the message

## 14. Do's and Don'ts

### Do

- Keep the system to two colours — warm off-white `#f1f0ee` and near-black `#161616`; the monochrome is the identity
- Set display type at **regular weight 400**, even at 88px — the regular-weight giant is the signature
- Use Relative Faux for display ≥48px and Relative for everything below — one superfamily, switched by scale
- Fill the primary CTA with `#161616`, white label, 8px radius — the live "Start for free" pattern
- Hover the CTA to `#3e3e3e` (the live `--hoverBackground`), not to a tint of some other hue
- Use the off-white canvas, not pure white — the warmth is what keeps it editorial rather than clinical
- Build depth from hairlines (`rgba(22,22,22,0.12)`), not from shadows — cards default to shadowless
- Flip to the inverted `#161616` band for footers and dark reveals; let the monochrome pair invert cleanly
- Let whitespace and scale do the hierarchy work, since there is no colour to lean on
- Honor reduced motion — halt the component-library marquee and collapse reveals to opacity-only

### Don't

- Introduce an accent colour or a gradient — the moment a third hue appears, it stops being Relume
- Set the hero in bold 700 — that erases the regular-weight-giant signature entirely
- Use pure white `#ffffff` as the page canvas — it loses the warm paper note (white is for cards only)
- Add drop shadows to default cards — depth is the hairline; reserve shadows for transient overlays
- Use cool or blue-tinted hairlines/shadows — Relume's neutrals are warm near-black, never cool
- Round corners past 12px on cards or 8px on buttons — the editorial register stays crisp
- Mix a second type family (serif, second sans) into the system — the Relative superfamily carries everything
- Pack section rhythm tighter than ~80px — the oversized type needs air to breathe
- Tint the CTA or use an outline-only primary on the off-white canvas — primary is the solid black fill
- Add coloured semantic badges to marketing — keep semantics desaturated and confined to product UI

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg:           #f1f0ee (warm off-white canvas)
bg-dark:      #161616 (near-black inverted band)
surface:      #ffffff (white cards)
text:         #161616 (warm near-black)
text-muted:   #3e3e3e
text-soft:    #6b6b6b
brand:        #161616 (black — CTA fill + entire brand surface)
brand-hover:  #3e3e3e
on-brand:     #ffffff (white label on black CTA)
border:       rgba(22,22,22,0.12) (near-black hairline)
```

### Example Component Prompts

1. *"Create a Relume-style hero: warm off-white `#f1f0ee` canvas, headline in Relative Faux at 88px **weight 400** (not bold) reading 'Websites designed & built faster with AI' tracked at -0.02em in `#161616`, Relative 18 body below in `#3e3e3e`, a solid black `#161616` CTA reading 'Start for free' with white label at 8px radius."*
2. *"Design a Relume feature card: pure-white `#ffffff` bg on the off-white canvas, 12px radius, 24px padding, 1px `rgba(22,22,22,0.12)` near-black hairline, **no shadow**. Relative 28 title in `#161616`, Relative 16 body in `#3e3e3e`, small eyebrow label in Relative 13 / 0.04em `#3e3e3e`."*
3. *"Build a Relume primary CTA: solid `#161616` background, white Relative 500 15px label saying 'Start for free', 8px radius, 12px×20px padding, hover background `#3e3e3e`. No gradient, no accent colour."*
4. *"Compose a Relume component-library grid: off-white `#f1f0ee` canvas, 3-up grid of white preview tiles each with a 16:10 component thumbnail and a 1px hairline frame, label row in Relative 14 `#3e3e3e` below each."*
5. *"Create a Relume dark feature reveal: full-bleed near-black `#161616` band, white Relative Faux 64 weight-400 headline, Relative 18 body in `#b8b8b8`, an inverted CTA (white `#ffffff` button, `#161616` label) at 8px radius."*
6. *"Design a Relume footer: near-black `#161616` band, multi-column white link grid in Relative 14 with muted `#b8b8b8` column headers, Relume wordmark and © at the bottom, no colour anywhere."*

### Iteration Guide

1. **Strip the colour.** If any accent hue or gradient has crept in, remove it. Relume is two colours — off-white and near-black — and nothing else.
2. **Drop the headline weight to 400.** If the hero renders in bold, set it to regular. The regular-weight giant is the single most recognisable trait.
3. **Warm the canvas.** If the background is pure white, swap to `#f1f0ee`. The cream warmth is what reads as editorial rather than clinical.
4. **Kill the card shadows.** If cards float on drop shadows, replace with a 1px `rgba(22,22,22,0.12)` hairline and no shadow. Depth is the border.
5. **Make the CTA solid black.** If the primary button is outlined, tinted, or coloured, fill it with `#161616` and a white label at 8px radius.
6. **Hold one superfamily.** If a serif or a second sans appears, collapse back to Relative Faux (display) + Relative (body). Contrast comes from scale, not from face-switching.
7. **Add an inverted band.** If the page is monotonously off-white, drop one full-bleed `#161616` section per major reveal — the same monochrome pair, flipped.
8. **Give the type air.** If sections are packed tight, expand rhythm toward 120px. The oversized display needs whitespace to read as a specimen page.

---

*Theme-toggle audit: score=0, signals=[none]*