--- name: Default Design System description: The design language behind default.com. AI infrastructure for revenue teams. version: 1.0 tagline: Deploy agents that work across your go-to-market --- # Default Design System This document is the machine-readable reference for the Default marketing surface. It captures the colors, typography, spacing, elevation, motion, shapes, components, and voice that compose default.com. Tokens are the source of truth and live in `src/styles/tokens.css`; this file mirrors their resolved values so designers, engineers, and agents can read the system in one place. The system is dark by default, high contrast, and minimal. White on near-black, with a single warm-cream light zone for sections that invert. There is no decorative color. Hierarchy comes from weight, opacity, and space rather than hue. ## Colors Two namespaces exist and never cross. The **marketing surface** composes the pages themselves. The **app palette** (the `--app-*` tokens) drives the simulated product UI inside marketing illustrations only. ### Surface (dark base) | Token | Value | Use | |---|---|---| | background | #0b0c0e | Page base | | background-elevated | #171717 | Cards, panels | | background-strong | #111111 | Stronger fills | | background-deep | #020202 | Deepest wells | | background-footer | #111111 | Footer | ### Foreground Text is white at four opacities. Opacity, not a gray ramp, encodes hierarchy. | Token | Value | Use | |---|---|---| | foreground | rgba(255,255,255,0.92) | Primary text | | foreground-muted | rgba(255,255,255,0.76) | Secondary text | | foreground-soft | rgba(255,255,255,0.56) | Tertiary text | | foreground-faint | rgba(255,255,255,0.38) | Disabled, hints | ### Borders and accent | Token | Value | Use | |---|---|---| | border | rgba(229,231,235,0.10) | Default hairline | | border-strong | rgba(229,231,235,0.16) | Emphasized hairline | | accent | rgba(255,255,255,0.96) | Primary action surface | | accent-soft | rgba(255,255,255,0.08) | Quiet fills | | accent-foreground | near-black | Ink on accent | ### Status Reserved for state, never for decoration. | Token | Value | Meaning | |---|---|---| | status-info | hsl(200 88% 73%) | Informational | | status-positive | hsl(151 72% 58%) | Success | | status-warning | hsl(38 92% 70%) | Warning | | status-danger | hsl(352 80% 74%) | Error, destructive | | status-violet | hsl(255 84% 80%) | Accent state | ### Light zone A single warm light palette inverts sections that need contrast against the dark page. | Token | Value | |---|---| | background (light) | #f9f9f7 | | foreground (light) | hsl(223 24% 12%) | ## Typography Two families. **Inter** carries every display and body role. **Geist Mono** carries code and tabular figures. Display sizes run the optical-size axis at `opsz 32`. ### Display scale Fluid, set with `clamp()`, tight tracking, near-1 line height. | Style | Size | Line height | Tracking | |---|---|---|---| | Marketing H1 | clamp(2.5rem, 5vw, 4rem) | 0.94 | -1.28px | | Marketing H2 | clamp(2rem, 4vw, 3.25rem) | 1.0 | -1.30px | | Marketing H3 | clamp(2rem, 3.6vw, 2.75rem) | 1.05 | -0.90px | | Marketing H4 | clamp(1.5rem, 2.4vw, 2rem) | 1.05 | -0.80px | | Marketing H5 | 1.25rem | 1.35 | -0.40px | | Metric | clamp(2.45rem, 4.35vw, 4.2rem) | 1.0 | -0.06em | ### Body and labels | Style | Size | Line height | |---|---|---| | Body large | clamp(1rem, 1.15vw, 1.28rem) | 1.45 | | Body | 0.9375rem | 1.8 | | Body small | 0.875rem | 1.375rem | | Caption | 0.75rem | 1rem | | Kicker | 0.875rem | 1.25rem | | Nav link | 0.875rem | 1.25rem | | Button | 0.8125rem | 1.1 | Headline gradient: display headlines use a top-to-bottom white gradient, `rgba(255,255,255,1)` to `rgba(255,255,255,0.66)`, applied through `-webkit-background-clip: text`. ## Layout and spacing The content column is `67.5rem` (1080px) wide, centered, with a 4px page-canvas inset so sections sit inside a rounded 14px card shell on a flat #080808 gutter. ### Section rhythm | Token | Value | Use | |---|---|---| | section-space | clamp(5.75rem, 7vw, 6.85rem) | Default block padding | | section-space-tight | clamp(4.9rem, 6vw, 5.95rem) | Tighter sections | | section-header-pad | clamp(3rem, 3.5vw, 3.5rem) | Above a section header | | section-header-gap | same as header-pad | Header to first row | | section-row-pad | clamp(4rem, 6vw, 6rem) | Sub-row padding | The header pad and the header gap are intentionally equal. Do not drift them apart. ### Navigation | Token | Value | |---|---| | nav height | 4.5rem | | chrome height | nav height, plus 2.5625rem when the announcement bar is mounted | ## Elevation and depth Shadows are soft and low contrast. They read as lift, not drama. | Token | Value | |---|---| | shadow-xs | 0 2px 4px rgba(0,0,0,0.02), 0 0 8px rgba(0,0,0,0.02) | | shadow-sm | 0 1px 4px rgba(0,0,0,0.10), 0 0 1px rgba(0,0,0,0.10) | | shadow-lg | 0 0 2px rgba(0,0,0,0.15), 0 16px 40px rgba(0,0,0,0.08) | Cards and panels on the marketing surface carry `shadow-sm` plus a faint inset top highlight so a surface reads as glass against the dark page. ## Materials and glass Glass is standardized, not ad hoc. Translucent surfaces compose a fill, a subtle hairline, and a blur drawn from a fixed five-step scale. Reach for a step on the scale rather than a new blur value. ### Blur scale | Token | Value | |---|---| | glass-blur-sm | 6px | | glass-blur-md | 12px | | glass-blur-lg | 16px | | glass-blur-xl | 22px | | glass-blur-2xl | 40px | The parallel `--app-blur-*` scale (8 / 12 / 16 / 24 / 40px) applies inside the product mockup illustrations only and does not mix with the marketing surface. ### Soft surface The `.surface-soft` utility is the canonical glass material. - Fill: rgba(255,255,255,0.06) on the dark surface - Border: a subtle hairline at rgba(255,255,255,0.14) - Backdrop: blur(glass-blur-md), 12px - Highlight: a faint inset top highlight so the surface reads as glass The secondary pill CTA is the lightest glass treatment: a rgba(255,255,255,0.05) fill over a 6px backdrop blur. The solid `.surface-card` material is the non-glass counterpart, a flat #171717 card behind a `border-strong` hairline. ## Motion Use the `motion/react` library through the `` factory, never raw ``. Animations are short and eased, not bouncy. The hero illustration enters with a 0.5s `cubic-bezier(0.25, 0.1, 0.25, 1)` scale-and-fade. Marquees translate linearly on a 30s default loop. Every animation honors `prefers-reduced-motion: reduce`. When the user asks for less motion, shimmer, pulse, marquee, and enter animations all resolve to a static state. ## Shapes Corners are rounded, not sharp. The marketing surface rounds at 8px for cards and 10px for the larger card shells; pills round to a 10px to 11px radius. | Token | Value | |---|---| | radius-xs | 0.375rem | | radius-sm | 0.5rem | | radius-md | 0.75rem (8px on the site surface) | | radius-lg | 1rem (10px on the site surface) | | radius-xl | 1.5rem | | page card shell | 14px | Where supported, surfaces use `corner-shape: squircle` (CSS Borders Level 4) as a progressive enhancement. Small pills stay on standard round corners because a squircle reads as less rounded at a 10px radius. ## Components ### Buttons The canonical pair is a solid primary and a glass secondary, rendered at identical box dimensions so a row of two never looks height-asymmetric. **Primary** - Background: rgba(255,255,255,0.96) - Text: near-black (#0a0a0a) - Border: rgba(255,255,255,0.16) - Hover: background drops to rgba(255,255,255,0.90) **Secondary** - Background: rgba(255,255,255,0.07) - Text: rgba(255,255,255,0.78) - Border: rgba(255,255,255,0.10) - Hover: background rises to rgba(255,255,255,0.11) **Pill CTA** (hero and page-end) - Primary fill #f2f2f2, ink #333, 1px rgba(255,255,255,0.20) border - Secondary fill rgba(255,255,255,0.05) with a 6px backdrop blur ## Voice and content Write the way the homepage reads. Headings are simple and declarative, one sentence. Support copy is one or two sentences. Lead with the verb. Say what the product does, not how it feels. Rules: - No em dashes. Use periods or commas. - Spell terms out. Do not use unexplained abbreviations. - Do not use negation-then-flip constructions ("It is not X, it is Y"). - Title Case for labels and buttons. Sentence case for body copy. - Error messages name the problem and the fix in plain language. ## Do - Lean on opacity and weight for hierarchy before reaching for color. - Keep the content column at 67.5rem and let space do the work. - Reuse an existing component before building a new one. - Respect `prefers-reduced-motion` on every animation. - Keep status color reserved for state. ## Don't - Don't introduce decorative hues outside the status palette. - Don't mix the `--app-*` palette into the marketing surface. - Don't drift the section header pad and gap apart. - Don't ship low-contrast text below the foreground-faint opacity. - Don't use ``; always use ``. --- Source of truth: `src/styles/tokens.css`. Rendered site: https://www.default.com.