---
version: alpha
name: Radian
description: "Performance-machine editorial: near-black canvas with a single high-voltage acid-yellow accent, oversized condensed display type, mono technical labels, and squared-off hardware-grade chrome. The visual language of an electric performance motorcycle: dark, confident, instrument-panel precise."

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f3"
  ink-secondary: "#a3a3a0"
  ink-muted: "#6e6e6c"

  # Brand accent — high-voltage acid yellow
  primary: "#e8ff3a"
  accent-hover: "#d4eb1f"
  accent-deep: "#b8cc14"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Lines + chrome
  border: "#2a2a2a"
  border-strong: "#3d3d3d"
  divider: "#1f1f1f"

  # States
  focus-ring: "#e8ff3a"
  surface-hover: "#202020"

  # Neutral scale
  gray-50: "#f5f5f3"
  gray-300: "#a3a3a0"
  gray-500: "#6e6e6c"
  gray-700: "#3d3d3d"
  gray-800: "#1c1c1c"
  gray-900: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1.5px
  display:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1px
  section-heading:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 1.5px
  spec-label:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1px
  spec-value:
    fontFamily: "Oswald, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -0.5px
  caption:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 32px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-spec:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.spec-value}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.divider}"
---

# Radian Design System

## Overview

Radian's site is the brand face of a high-performance electric motorcycle, and the design system reads exactly like the machine it sells: matte-black, instrument-precise, and charged with a single jolt of acid yellow. The canvas is near-black (`{colors.background}`), almost the surface of the bike itself, against which warm off-white text (`{colors.ink}`) and the high-voltage accent (`{colors.primary}`) do all the talking. Nothing here is decorative. Color is a power indicator, not a mood.

The typographic identity is built on a tall condensed display face. Headlines run in heavy condensed sans (mapped to Oswald) at large sizes with tight tracking, giving copy the stamped, mechanical confidence of a spec sheet or a number plate. Body copy switches to a neutral humanist sans (Inter) for legibility, and a monospace (Space Mono) carries the technical labels — torque, range, weight, voltage — so that every metric feels like a readout from the dash.

What makes Radian distinct among dark editorial systems is its hardware-grade chrome. Corners are squared off (`{rounded.xs}`–`{rounded.lg}`, never pill-soft except for the occasional toggle), borders are hairline grays rather than glows, and the acid-yellow accent is reserved for primary actions, live specs, and status — never spread across surfaces. The result is a system that feels engineered rather than styled, more cockpit than catalog.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with warm off-white ink — performance-machine darkness, not pure black
- Single high-voltage acid-yellow accent (`{colors.primary}`) used only for action, live specs, and status
- Condensed heavy display type (Oswald) for stamped, number-plate headlines with tight tracking
- Monospace (Space Mono) for technical spec labels — every metric reads like an instrument panel
- Squared-off hardware chrome — `{rounded.xs}` corners, hairline gray borders, no soft pills
- Large spec values in condensed bold accent — torque/range/weight as oversized readouts
- High contrast, gallery-dark spacing with full-bleed photography between sections

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas. The machine's own surface.
- **Surface** (`{colors.surface}`): Card and panel fill, one step off black.
- **Surface Soft** (`{colors.surface-soft}`): Raised insets, spec wells.
- **Ink** (`{colors.ink}`): Primary text — warm off-white, never harsh pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, metadata.

### Brand Accent
- **Acid Yellow** (`{colors.primary}`): The signature. Primary CTAs, live spec values, status. The single charge of color.
- **Accent Hover** (`{colors.accent-hover}`): Pressed/hover state of the accent.
- **Accent Deep** (`{colors.accent-deep}`): Darker accent for fine borders on yellow fills.

### Lines & Chrome
- **Border** (`{colors.border}`): Default hairline border on cards and panels.
- **Border Strong** (`{colors.border-strong}`): Outlined buttons, input borders.
- **Divider** (`{colors.divider}`): Section dividers, nav underline.

### On-Color
- **On Primary** (`{colors.on-primary}`): Black text on the acid-yellow accent.

### Neutral Scale
- **Gray 50–900** (`{colors.gray-50}` → `{colors.gray-900}`): The achromatic spine from off-white ink to black canvas.

## Typography

### Font Family
- **Display**: `Oswald`, with fallbacks `Arial Narrow, sans-serif` — condensed, heavy, stamped.
- **Body**: `Inter`, with fallbacks `Arial, sans-serif` — neutral humanist for reading.
- **Mono**: `Space Mono`, with fallbacks `ui-monospace, Menlo, monospace` — technical spec labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — stamped headline impact |
| `display` | Major section openers |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `body-large` | Lead-in paragraphs |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `button-ui` | Buttons, nav — condensed, tracked uppercase |
| `spec-label` | Mono technical labels (RANGE, TORQUE) |
| `spec-value` | Oversized condensed spec readouts |
| `caption` | Mono metadata, tags |

### Principles
- **Condensed as identity**: Display type is tall and tight — the number-plate voice of a performance machine.
- **Mono marks the machine**: Space Mono uppercase labels every spec, connecting marketing copy to the instrument panel.
- **Two reading registers**: Oswald announces, Inter explains. Never mix.
- **Accent never sets type color in body**: Yellow type appears only on spec values and active states.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.4xl}`–`{spacing.5xl}`) for gallery-dark section breaks between full-bleed photography.

### Grid & Container
- Max content width: approximately 1280px
- Hero: full-bleed photography with overlaid condensed headline and accent CTA
- Spec sections: 2–4 column grids of oversized readouts
- Full-bleed image bands alternate with contained text blocks

### Whitespace Philosophy
- **Gallery darkness**: Massive vertical rhythm between sections; the black canvas IS the negative space.
- **Spec density, copy restraint**: Numbers cluster tightly into instrument grids; prose stays sparse.
- **Photography as separator**: Section breaks come from full-bleed imagery, not borders.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No border | Page canvas, text blocks |
| Bordered (Level 1) | 1px `{colors.border}` | Cards, spec panels |
| Strong border (Level 1b) | 1px `{colors.border-strong}` | Outlined buttons, inputs |
| Focus | 2px `{colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Radian avoids glow and soft shadow. Elevation is communicated through hairline borders and one-step surface lightening (`{colors.surface}` over `{colors.background}`), keeping the system flat, matte, and hardware-like.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed bands, dividers |
| `xs` | 2px | Buttons, badges — squared hardware edge |
| `sm` | 4px | Inputs, small containers |
| `md` | 6px | Compact panels |
| `lg` | 8px | Cards, spec wells |
| `pill` | 9999px | Reserved for toggles/switches only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Acid-yellow fill, black text, squared `{rounded.xs}` edge, tracked condensed uppercase. The default CTA ("Configure", "Pre-order").
- **`button-secondary`** — Transparent on black, strong gray border, ink text; border brightens to ink on hover.

### Badges
- **`badge`** — Acid-yellow chip, black text, mono caption. Status and "NEW" flags.

### Cards
- **`card`** — Surface fill over black with hairline border, squared `{rounded.lg}` corners.
- **`card-spec`** — Instrument panel: oversized condensed accent value over a mono label.

### Inputs
- **`input`** — Surface fill, strong gray border; border flips to acid yellow on focus.

### Navigation
- **`nav-bar`** — Black sticky header, condensed tracked links, accent CTA right, divider underline.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and ink warm off-white, never pure white
- Reserve acid yellow (`{colors.primary}`) for action, live specs, and status only
- Use condensed Oswald for headlines with tight tracking — the number-plate voice
- Label every spec with Space Mono uppercase
- Keep corners squared (`{rounded.xs}`–`{rounded.lg}`) — hardware, not soft pills
- Use hairline gray borders for elevation, not glows or soft shadows
- Let full-bleed photography separate sections

### Don't
- Don't spread the accent across surfaces or large fills — it loses its charge
- Don't use pill radius on buttons or cards — squared edges only
- Don't mix Oswald and Inter in the same role — Oswald announces, Inter explains
- Don't use pure white text or pure black-only chrome with soft shadows
- Don't color body text with the accent — only spec values and active states
- Don't soften the system with rounded glows or gradients

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked specs, full-bleed hero |
| Tablet | 600–1024px | 2-column spec grids |
| Desktop | 1024–1280px | Full spec grids, contained text blocks |
| Large Desktop | >1280px | Centered, generous margins, edge-to-edge imagery |

### Collapsing Strategy
- Hero: 72px display scales down, retains condensed tracking
- Spec grids: 4-column → 2-column → single column
- Navigation: condensed links → hamburger
- Full-bleed images: maintain edge-to-edge at all sizes
- Section spacing: 140px → 64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Acid Yellow `{colors.primary}` with black text `{colors.on-primary}`
- Background: Near-black `{colors.background}`
- Heading text: Off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: 1px `{colors.border}`
- Focus ring: Acid Yellow `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}` with full-bleed photography. Headline at 72px Oswald weight 700, line-height 0.95, letter-spacing -1.5px, color `{colors.ink}`. Acid-yellow CTA (`{colors.primary}`, black text, 2px radius, 16px 32px padding, tracked uppercase 14px Oswald)."
- "Design a spec card: `{colors.surface}` fill, 1px `{colors.border}`, 8px radius, 32px padding. Value at 40px Oswald weight 700, color `{colors.primary}`. Label above in 12px Space Mono uppercase, color `{colors.ink-muted}`."
- "Build a badge: `{colors.primary}` background, black text, 2px radius, 4px 10px padding, 11px Space Mono uppercase."

### Iteration Guide
1. The accent is a power indicator — use it sparingly on action and live data only
2. Corners stay squared (2–8px) — this is hardware, not a soft consumer app
3. Oswald announces, Inter explains, Space Mono labels the machine
4. Elevation comes from hairline borders + one-step surface lightening, never glow
5. Off-white ink and near-black canvas — the micro-warmth keeps it matte, not stark

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Radian. Brand names and trademarks belong to their respective owners.