---
version: alpha
name: Rive
description: A pure-black stage where flat pixels learn to move.
colors:
  on-surface-variant: "#999999"
  on-surface: "#FFFFFF"
  primary: "#FFA41C"
  surface: "#000000"
  surface-1: "#111111"
  surface-2: "#121212"
  card-dark: "#1D1D1D"
  elevated: "#262626"
  text-strong: "#F1F1F1"
  text-soft: "#F2F0F0"
  text-dim: "#AAAAAA"
  surface-light: "#EBEBEB"
  paper: "#FFFFFF"
  link-default: "#0000EE"
typography:
  label-caption:
    fontFamily: "Inter / Inter Display"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  small:
    fontFamily: "Inter / Inter Display"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small-2:
    fontFamily: "Inter / Inter Display"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  eyebrow-accent:
    fontFamily: "Inter / Inter Display"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: "Inter / Inter Display"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  sub-head:
    fontFamily: "Inter / Inter Display"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  heading:
    fontFamily: "Inter / Inter Display"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  display:
    fontFamily: Tomorrow
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
rounded:
  small-chip-inline: 4px
  card-corner: 5px
  buttons-inputs: 8px
  pill-badge: 20px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
---
# Rive — Style Reference
> A pure-black stage where flat pixels learn to move.

**Theme:** dark

Rive builds on total darkness: `#000000` is not a background, it is the stage, and everything else is lit against it. The identity move is the letter-spaced techno wordmark — Tomorrow, wide and thin — sitting over a bold-medium display line that never climbs past weight 500, so "impact" comes from width and tracking, not heft. A single warm amber (`#FFA41C`) is the only chromatic event on an otherwise strictly monochrome grey ramp; it marks the CTA and the small credit labels and nothing else. Type is a three-voice system — Tomorrow for display, Inter for prose, and a loaded mono (JetBrains / Fragment) for the uppercase machine labels ("SCRIPTING IS LIVE", "PRODUCT UI"). Layout is a centered hero over a full-bleed horizontal rail of use-case cards, each card a dark `#1D1D1D` frame around a piece of live product media. Restraint is the whole point: the interface is deliberately quiet so the animated content it showcases is the loudest thing on screen.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Stage Black | `#000000` | `--color-black` | The page. Every surface and every glyph is lit against this; never a lighter default. |
| Surface 1 | `#111111` | `--color-surface-1` | First lift off black — section panels, muted fills. |
| Surface 2 | `#121212` | `--color-surface-2` | Near-identical raised step; use interchangeably with Surface 1 for barely-there depth. |
| Card Dark | `#1D1D1D` | `--color-surface-3` | Card and dark-button fill (the rail cards, the DOWNLOADS button). The workhorse dark chip. |
| Elevated | `#262626` | `--color-surface-4` | Highest dark step — hover fills, hairline-substitute edges (there are no real borders). |
| White | `#FFFFFF` | `--color-white` | Primary text and the display headline. Full white is reserved for headings and key copy. |
| Text Strong | `#F1F1F1` | `--color-text-strong` | Sub-headings (24 / 20px, weight 500) — a half-step under pure white. |
| Text Soft | `#F2F0F0` | `--color-text-soft` | Off-white variant, effectively interchangeable with Text Strong. |
| Text Dim | `#AAAAAA` | `--color-text-dim` | Secondary paragraph tone. |
| Text Muted | `#999999` | `--color-text-muted` | The quietest legible grey — captions, supporting subtext under the hero. |
| Amber | `#FFA41C` | `--color-amber` | THE accent. Primary CTA fill + the small credit/eyebrow labels (14px/500). The only hue in the system — never spend it on body text or decoration. |
| Surface Light | `#EBEBEB` | `--color-surface-light` | Light-mode inlay — input fields and the white product mockups embedded in cards. |
| Paper | `#FFFFFF` | `--color-paper` | Full-white surface inside light media tiles. |
| Link Default | `#0000EE` | `--color-link-default` | Unstyled browser anchor blue captured on raw links — a scan residual, **not** a brand color. Do not use. |

## Tokens — Typography
### Tomorrow — the display and wordmark voice: wide techno geometric sans, used letter-spaced and thin for the "RIVE" mark and the big headline, capped at weight 500 · `--font-display`
- **Substitute:** Michroma, Chakra Petch, Rajdhani
- **Weights:** 300, 400, 500, 600, 700 loaded (normal + italic); the site uses 400–500
- **Sizes:** 40px display headline; 20 / 24px sub-heads
- **Line height:** ~1.05–1.15 on the display line (tight, two-line stack)
- **Letter spacing:** generous positive tracking on the wordmark and uppercase labels; near-normal on the headline
- **Role:** All display type — the wordmark, the hero headline, section titles. Its width does the work weight normally would.
### Inter / Inter Display — the reading voice: neutral humanist sans for body copy and supporting text · `--font-body`
- **Substitute:** Inter, ui-sans-serif, system-ui
- **Weights:** 400, 500
- **Sizes:** 16px body; 14px; 13px small
- **Line height:** ~1.5 for paragraphs
- **Letter spacing:** normal
- **Role:** Hero subtext, paragraphs, general UI prose. Recedes so the display and the media lead.
### JetBrains Mono / Fragment Mono — the label voice: monospace for uppercase machine labels and code chrome · `--font-mono`
- **Substitute:** JetBrains Mono, ui-monospace, SFMono-Regular
- **Weights:** 400, 600, 700 loaded
- **Sizes:** 11 / 12 / 13px
- **Line height:** ~1.3
- **Letter spacing:** wide tracking, uppercase ("SCRIPTING IS LIVE", nav + card labels)
- **Role:** Small structural labels, eyebrows, and any code/technical chrome.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Label / caption | 11px | 1.3 | wide, uppercase | `--text-label` |
| Small | 12px | 1.4 | normal | `--text-sm` |
| Small+ | 13px | 1.4 | normal | `--text-sm-plus` |
| Eyebrow / accent | 14px | 1.4 | normal | `--text-accent` |
| Body | 16px | 1.5 | normal | `--text-base` |
| Sub-head | 20px | 1.2 | normal | `--text-lg` |
| Heading | 24px | 1.15 | normal | `--text-xl` |
| Display | 40px | 1.1 | tight | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (8px is the dominant step)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chip / inline | 4px |
| Card corner (rail cards) | 5px |
| Buttons, inputs | 8px |
| Pill / badge | 20px |

### Shadows
The system uses **no elevation shadows** — the only captured shadow is a transparent `0 0 0 1px inset` (i.e. none). Depth is luminance-only. See Elevation.

### Layout
- **Page max-width:** hero content centered in a narrow column (~640px of text); the card rail is full-bleed and scrolls horizontally past both edges.
- **Section gap:** large vertical air around the centered hero (generous top padding before the wordmark).
- **Card padding:** dark `#1D1D1D` frame with a small inner inset around each media tile; label sits above the media.
- **Element gap:** 8–16px between stacked hero elements; CTAs sit side by side.

## Components
### Primary CTA — "Get Started"
**Role:** The single conversion action, and the only place amber becomes a fill.
Amber `#FFA41C` background, near-black text (`#000000`), `8px` radius, comfortable horizontal padding. It is warm and solitary on the black stage — one per view. Never render two amber CTAs together.

### Secondary Button — "Downloads"
**Role:** The paired, lower-priority action next to the primary CTA.
Dark `#1D1D1D` fill, white text, small mono/label type (12px), `8px` radius, no border. Carries the R glyph inline. This is the reusable dark-button pattern across the nav and rail.

### Nav "Get Started" (outlined)
**Role:** Persistent header CTA.
Transparent fill with a warm amber-tinted hairline edge and white label — the header's quieter echo of the amber CTA, holding the top-right corner.

### Top Navigation
**Role:** Global wayfinding.
Fixed bar on pure black: R wordmark left; PRODUCTS / COMMUNITY / LEARN / PRICING / DOWNLOADS center as uppercase mono labels with dropdown carets; outlined CTA right. No background panel — it floats on the stage.

### Wordmark
**Role:** Brand signature.
"RIVE" set in Tomorrow, thin weight, wide positive letter-spacing, pure white, centered above the headline. The tracking IS the logo.

### Display Headline
**Role:** The hero statement.
Tomorrow at 40px, weight 500, white, stacked two lines ("THE INTERACTIVE / EXPERIENCE ENGINE"), tight line-height. Width and tracking carry the impact — do not reach for heavier weights.

### Hero Subtext
**Role:** Supporting proof line.
Inter, 16px, weight 400, muted grey (`#999999`/`#AAAAAA`), centered, ~1.5 line-height. Names the marquee customers (Spotify Wrapped, Duolingo) in plain prose.

### Eyebrow / Credit Label
**Role:** Small accent callout ("SCRIPTING IS LIVE").
Amber `#FFA41C` (or white for neutral labels), 14px, weight 500, tracked. Amber here is editorial credit, not a link.

### Use-Case Card
**Role:** The horizontal rail of capability showcases (AUTOMOTIVE, PRODUCT UI, GAME UI, MOBILE APPS, FILM + TV, WEBSITES).
Dark `#1D1D1D` frame, `5px` radius, uppercase mono label at top, live product media filling the body. Cards are equal-width and scroll horizontally full-bleed. The media does the talking; the chrome is silent.

### Input Field
**Role:** Form entry.
Light `#EBEBEB` fill, black text (`#000000`), 16px, `8px` radius, no visible border, 15px padding — a rare light inlay dropped into the dark system.

### Dropdown Nav Item
**Role:** Expandable nav category.
Uppercase mono label + caret; menu opens onto a near-black `#111111`/`#121212` panel with white items.

### Light Media Tile
**Role:** Product mockups shown inside cards (e.g. the WEBSITES / Figma tile).
Full-white `#FFFFFF` / `#EBEBEB` surface with the real UI rendered inside — the system inverts locally to show light-context product work.

## Do's and Don'ts
### Do
- Start from `#000000` and light everything against it. Black is the default surface, not a choice.
- Keep amber (`#FFA41C`) singular — one CTA, or small credit labels. Its power is scarcity.
- Get impact from Tomorrow's width and letter-spacing, not weight; cap display at 500.
- Convey depth with luminance steps (`#111` → `#1D1D1D` → `#262626`), never drop shadows.
- Set all small structural labels in uppercase tracked mono.
- Let showcased product media be the brightest, busiest thing on screen; keep chrome quiet.

### Don't
- Don't introduce a second hue. The palette is monochrome grey + one amber, full stop.
- Don't use `#0000EE` — it is an unstyled-anchor scan artifact, not brand blue.
- Don't reach for bold (700+) display type; the system tops out at weight 500.
- Don't add shadows or glows for elevation; the scan carries none.
- Don't spend amber on body text, borders, or decoration.
- Don't box the nav in a panel — it floats on the black stage.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The stage — page background. |
| 1 | Surface 1 | `#111111` | Panels, dropdown menus, muted sections. |
| 2 | Surface 2 | `#121212` | Interchangeable near-black raised step. |
| 3 | Card | `#1D1D1D` | Cards and dark buttons — the primary dark chip. |
| 4 | Elevated | `#262626` | Hover fills and top-most dark edges. |
| L | Light Inlay | `#EBEBEB` / `#FFFFFF` | Inputs and embedded light product media. |

## Elevation
Depth is expressed purely through **luminance stepping**, not shadow. The captured shadow set is empty (only a transparent inset), so layers separate by getting lighter: `#000` canvas → `#111`/`#121212` panel → `#1D1D1D` card → `#262626` on hover. Cards read as raised only because their fill is a few points brighter than the black behind them. When a light context is needed (inputs, product mockups) the system inverts to `#EBEBEB`/`#FFFFFF` rather than floating a shadowed element.

## Imagery
Imagery is the product itself: dense, motion-first, real. The rail cards each carry a live Rive-built artifact — an automotive cluster dial reading "02:30 PM", a green game-UI hunter scene, a phone product-UI mock, film + TV character posters, a Figma-collab website tile, streaming/live-event overlays. It is heterogeneous on purpose — the point is breadth of medium (games, cars, apps, film, web). Against the black chrome these thumbnails glow. The only brand illustration is the tiny astronaut mascot peeking beside the primary CTA. Rule: never decorate with abstract stock; every image should be a real interactive artifact the engine produced.

## Layout
Full-bleed dark canvas. The hero is strictly centered — wordmark, two-line display headline, muted subtext, then the amber + dark CTA pair, then a small mono credit label — stacked with generous vertical air. Below, a full-width horizontal card rail bleeds off both edges and scrolls sideways through the use cases, each card equal-width with a top label. Navigation is a floating top bar (no background) with a centered uppercase mono menu and a right-aligned outlined CTA. The composition is symmetrical and calm above the fold, then hands off to the busy, asymmetric energy of the media rail.

## Typography Signature
Two forces define the type. First, **width-as-weight**: the "RIVE" wordmark and the 40px headline are Tomorrow — a wide techno sans — held to weights 400–500 and pushed apart with positive letter-spacing, so the headline feels commanding without ever going bold. Second, **the mono label register**: every small structural cue (nav items, card categories, "SCRIPTING IS LIVE") is uppercase monospace with wide tracking, giving the interface a technical, engineered voice that contrasts the neutral Inter prose in the hero subtext. The result is a three-voice hierarchy — engineered display, humanist body, machine labels — that reads as "software built by designers." The move to copy: never let display type get heavy; let width and tracking, not weight, do the shouting.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` / text: `#FFFFFF` (muted `#999999`) / surface: `#1D1D1D` / border: none (luminance step to `#262626`) / accent: `#FFA41C` / primary action: `#FFA41C` amber fill with `#000000` text

## Example Component Prompts
1. **Hero**: Centered hero on a pure-black (`#000000`) canvas. "RIVE" wordmark in a wide techno sans (Tomorrow) with heavy positive letter-spacing, thin weight, pure white. Below it a 40px two-line display headline in the same font at weight 500, white. Muted grey (`#999999`) 16px Inter subtext. Then two side-by-side buttons: an amber `#FFA41C` "Get Started" (8px radius, black text) and a dark `#1D1D1D` "Downloads" (white text, 8px radius). A small uppercase mono amber label "SCRIPTING IS LIVE" underneath.
2. **Use-Case Card**: Equal-width card, dark `#1D1D1D` fill, `5px` radius, uppercase monospace label ("PRODUCT UI") at the top, and a full-bleed piece of live product media filling the body. Arrange several in a horizontal rail that scrolls sideways and bleeds off both screen edges. No shadow — the card lifts only by being lighter than the black behind it.
3. **Top Nav**: Floating navigation bar on black with no background panel. R wordmark left; centered uppercase mono links (PRODUCTS, COMMUNITY, LEARN, PRICING, DOWNLOADS) with dropdown carets; right-aligned outlined "GET STARTED" button with a warm amber-tinted hairline and white label.
4. **Eyebrow Label**: Small 14px weight-500 amber (`#FFA41C`) text, used as an editorial credit or status line above or below a section. Amber only — never as a link, never for body.
5. **Input**: Light `#EBEBEB` field with black text, 16px, `8px` radius, 15px padding, no visible border — a light inlay dropped into the dark layout.

## Similar Brands
- **Linear** — the same monochrome-dark discipline with one restrained accent and precise, quiet chrome.
- **Vercel** — pure-black canvas, high-contrast white type, product-as-hero minimalism.
- **Framer** — designer-tool identity where the showcased motion/media is louder than the UI around it.
- **Arc (The Browser Company)** — playful mascot warmth (the astronaut) inside an otherwise serious dark system.
- **Rendered / techno-sans studios (Tomorrow, Michroma users)** — the wide letter-spaced techno wordmark as brand signature.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-surface-1: #111111;
  --color-surface-2: #121212;
  --color-surface-3: #1D1D1D;
  --color-surface-4: #262626;
  --color-white: #FFFFFF;
  --color-text-strong: #F1F1F1;
  --color-text-soft: #F2F0F0;
  --color-text-dim: #AAAAAA;
  --color-text-muted: #999999;
  --color-amber: #FFA41C;
  --color-surface-light: #EBEBEB;
  --color-paper: #FFFFFF;
  --color-link-default: #0000EE; /* scan artifact — not brand; do not use */

  /* Typography — Families */
  --font-display: 'Tomorrow', 'Michroma', 'Chakra Petch', ui-sans-serif, sans-serif;
  --font-body: 'Inter', 'Inter Display', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fragment Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — Scale */
  --text-label: 11px;
  --text-sm: 12px;
  --text-sm-plus: 13px;
  --text-accent: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-display: 40px;
  --leading-display: 1.1;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-card: 5px;
  --radius-md: 8px;
  --radius-pill: 20px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-surface-1: #111111;
  --color-surface-2: #121212;
  --color-surface-3: #1D1D1D;
  --color-surface-4: #262626;
  --color-white: #FFFFFF;
  --color-text-strong: #F1F1F1;
  --color-text-soft: #F2F0F0;
  --color-text-dim: #AAAAAA;
  --color-text-muted: #999999;
  --color-amber: #FFA41C;
  --color-surface-light: #EBEBEB;
  --color-paper: #FFFFFF;
  --color-link-default: #0000EE;

  /* Typography — Families */
  --font-display: 'Tomorrow', 'Michroma', 'Chakra Petch', ui-sans-serif, sans-serif;
  --font-body: 'Inter', 'Inter Display', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fragment Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — Scale */
  --text-label: 11px;
  --text-sm: 12px;
  --text-sm-plus: 13px;
  --text-accent: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-display: 40px;
  --leading-display: 1.1;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-card: 5px;
  --radius-md: 8px;
  --radius-pill: 20px;
}
```