---
version: alpha
name: Rive
description: Motion-first creative runtime — absolute black canvas, Tomorrow's geometric uppercase headers paired with Inter body text, tight radius system anchored at 8px, and a spectrum-gradient accent that encodes the full range of realtime animation as color.

colors:
  # Primary canvas
  background: "#000000"
  surface: "#121212"
  surface-elevated: "#1d1d1d"
  surface-hover: "#222222"

  # Ink (text scale)
  ink: "#ffffff"
  ink-secondary: "#aaaaaa"
  ink-tertiary: "#999999"
  ink-muted: "#f1f1f1"

  # Neutral fills
  input-bg: "#ebebeb"     # light input background on dark canvas

  # Brand gradient stops (from extracted gradient)
  gradient-white: "#ffffff"
  gradient-blue: "#3084ff"
  gradient-cyan: "#19f2ff"
  gradient-amber: "#ffa41c"
  gradient-crimson: "#f30058"
  gradient-coral: "#ff483c"

  # Borders
  border: "#262626"
  border-subtle: "#1d1d1d"

  # Semantic
  on-primary: "#ffffff"
  on-surface: "#aaaaaa"

typography:
  display-hero:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.4px
  heading-section:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: -0.8px
  heading-sub:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  label-upper:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.7px
  nav-link:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  caption-upper:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1.2px
  caption-micro:
    fontFamily: "Tomorrow, 'Tomorrow Placeholder', system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0.11px
  body:
    fontFamily: "Inter, 'Inter Placeholder', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, 'Inter Display Placeholder', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, 'Inter Placeholder', system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.70
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 30px
  2xl: 32px
  3xl: 60px

rounded:
  none: 0px
  sm: 4px
  md: 5px
  lg: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-upper}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption-upper}"
    rounded: "{rounded.lg}"
    padding: 8px 12px
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 16px
  card-featured:
    backgroundColor: "{colors.surface-elevated}"
    rounded: "{rounded.lg}"
    padding: 30px

  input:
    backgroundColor: "{colors.input-bg}"
    textColor: "{colors.background}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 15px
  input-focus:
    backgroundColor: "{colors.input-bg}"
    textColor: "{colors.background}"

  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption-upper}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 16px 30px

  link-primary:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.body}"

  link-primary-hover:
    textColor: "{colors.ink}"
---

# Rive Design System

## Overview

Rive's website is an exercise in controlled darkness — a pure `{colors.background}` canvas that behaves less like a page and more like a rendering surface waiting for something to move across it. This is fitting for a company whose entire product is about interactive, realtime animation. The design doesn't decorate; it recedes, placing all attention on the motion demos and embedded Rive animations that punctuate the page. The visual language is minimal to the point of severity, letting the product be its own loudest statement.

The typographic system runs on a sharp duality: Tomorrow for all structural text (headings, labels, navigation) and Inter for reading text. Tomorrow is a geometric, condensed sans with a light industrial character — its uppercase-only usage throughout the site creates a distinctive ALL-CAPS mechanical register that reads like engineering notation rather than editorial voice. Paired with Inter's humanist neutrality in the body, the system balances authority with legibility. Letter-spacing ranges from wide positives at small sizes (`{typography.caption-upper}` at +1.2px) to tight negatives at headings — tracking that contracts as importance grows.

Rive's defining chromatic gesture is its spectrum gradient: white to electric blue `{colors.gradient-blue}` through cyan `{colors.gradient-cyan}`, amber `{colors.gradient-amber}`, crimson `{colors.gradient-crimson}`, and coral `{colors.gradient-coral}` to black. The gradient appears as an accent band rather than a fill, a compressed rainbow that communicates the full creative spectrum of animation possibilities in a single visual move. Against the black canvas, these gradient stops provide the only sustained chromatic energy on the page.

**Key Characteristics:**
- Absolute black canvas `{colors.background}` — zero warmth, zero room material, pure void
- Tomorrow (self-hosted, variable) for all structural text; Inter for body copy
- All-caps uppercase transformation on every Tomorrow instance — deliberate, not accidental
- Letter-spacing expands at small sizes (+1.2px at 12px) and compresses at display (-0.8px at 24px)
- Spectrum accent gradient (white → blue → cyan → amber → crimson → coral → black) as a brand flourish
- Tight 8px radius system anchored at `{rounded.lg}` — shapes feel precise, not rounded-happy
- Spacing base of 8px with 60px section gaps that create breathing room on the dark surface
- `{colors.surface-elevated}` as the primary interactive surface color (`{colors.surface-elevated}`)
- Light input background `{colors.input-bg}` inverts the dark-field convention for form elements
- No box shadows — depth communicated entirely through surface luminance steps

## Colors

### Canvas & Surfaces
- **Void Black** (`{colors.background}`): The page background. Not a dark gray — true `#000000`. Every surface floats on it.
- **Raised Surface** (`{colors.surface}`): Subtle lift above the void. Used for secondary cards and content blocks.
- **Elevated Surface** (`{colors.surface-elevated}`): Primary interactive surface — buttons, featured cards, hover states.
- **Hover State** (`{colors.surface-hover}`): The lightest dark surface, reserved exclusively for hover interaction feedback.

### Text Scale
- **Primary White** (`{colors.ink}`): All headline text, active states.
- **Muted Near-White** (`{colors.ink-muted}`): Alternate body text, high emphasis without full white.
- **Silver-Gray** (`{colors.ink-secondary}`): Body text, navigation links, default UI text.
- **Mid-Gray** (`{colors.ink-tertiary}`): De-emphasized links, metadata, placeholder text.

### Brand Gradient
The spectrum gradient anchors Rive's visual identity. Individual stops — `{colors.gradient-blue}`, `{colors.gradient-cyan}`, `{colors.gradient-amber}`, `{colors.gradient-crimson}`, `{colors.gradient-coral}` — compress the full creative spectrum into a single band. Appears as accent rules, logo details, and hero decorative elements.

### Borders
- **Border Primary** (`{colors.border}`): Visible structural borders on cards and containers.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible separator; same value as elevated surface.

### Utilities
- **Input Background** (`{colors.input-bg}`): Light fill for form inputs — inverts the dark convention. Black text on light gray, readable on a black page.

## Typography

### Font Family
- **Display + Labels**: `Tomorrow`, self-hosted variable font (woff2), with fallbacks: `system-ui, sans-serif`
- **Body**: `Inter` and `Inter Display`, self-hosted, with fallbacks: `system-ui, sans-serif`
- Both fonts are loaded as self-hosted woff2 — no Google Fonts or Adobe Fonts dependency

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 40px hero headlines, all caps, +0.4px tracking |
| `heading-section` | 24px section headings, -0.8px tracking |
| `heading-sub` | 20px feature subtitles, +0.2px tracking |
| `label-upper` | 14px uppercase labels, +0.7px tracking |
| `nav-link` | 14px navigation items, normal tracking |
| `caption-upper` | 12px uppercase captions, +1.2px tracking |
| `caption-micro` | 11px smallest text, +0.11px tracking |
| `body` | 16px Inter for reading content, 1.6 line-height |
| `body-medium` | 14px Inter Display for secondary copy |
| `body-small` | 13px Inter medium-weight for tight UI text |

### Principles
- **Tomorrow is always uppercase**: The font itself supports mixed case, but Rive applies `text-transform: uppercase` universally in structural contexts. This is identity, not a style toggle.
- **Tracking expands at small sizes**: +1.2px at 12px, +0.7px at 14px — as type shrinks, air is added. At heading sizes, tracking compresses or goes negative.
- **Tomorrow leads, Inter reads**: Tomorrow handles identity and navigation; Inter handles comprehension. The switch is deliberate — Tomorrow is too tight for paragraph reading.
- **Weight stability**: Tomorrow holds at weight 500 throughout. No bold emphasis variation — the uppercase register does the work.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: **8px**, with 5px micro steps for tight component internals.

Section spacing runs at `{spacing.3xl}` (60px), creating wide vertical gaps on the black canvas that function as breathing room rather than dividers. The page feels episodic — each section is its own isolated viewing chamber.

### Grid & Container
- Max content width: approximately 1200px
- Hero: full-width centered column with large vertical padding
- Feature sections: 2–3 column grids at desktop; single-column stack at mobile
- Breakpoints: 948px (tablet), 640px (mobile), 389px (small mobile)

### Whitespace Philosophy
- **Void as design material**: empty black space is an active element, not absence. Sections need no dividers because the canvas itself separates them.
- **Internal density, external space**: component interiors are tight (5px, 8px, 12px steps) while inter-section gaps are generous (60px+).
- **No decorative rules or dividers**: the black background creates all structural separation.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` — pure black | Page canvas, text sections |
| Surface (Level 1) | `{colors.surface}` — #121212 | Secondary cards, content blocks |
| Elevated (Level 2) | `{colors.surface-elevated}` — #1d1d1d | Buttons, featured cards, interactive elements |
| Hover (Level 3) | `{colors.surface-hover}` — #222222 | Interactive hover state |
| Invert (Form) | `{colors.input-bg}` — #ebebeb | Light-field inputs, inverted from dark convention |

**Shadow Philosophy**: Rive uses zero box shadows. All depth is expressed through background luminance stepping — each successive surface level is a perceptible increment lighter than the canvas below. On an absolute black canvas, even a 4% lightening is visible. This approach is invisible at small scales and dramatic at feature-card scale, where a gray rectangle floating in blackness communicates depth entirely through contrast.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inset tab connectors, sharp grid elements |
| `sm` | 4px | Image thumbnails, video containers, small cards |
| `md` | 5px | Media embeds, secondary containers |
| `lg` | 8px | Buttons, inputs, primary cards, interactive elements |
| `pill` | 9999px | Reserved for special badge/tag contexts |

Rive's radius philosophy is precise and unromantic. The `{rounded.lg}` 8px value handles almost all interactive elements — enough to feel intentional, not enough to feel soft. The sm/md variants appear on media embeds where slight rounding prevents the hard-edge TV-screen effect. No full-pill buttons; the UI doesn't soften its edges that way.

## Components

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

### Button variants
- **`button-primary`** — dark elevated fill `{colors.surface-elevated}`, white text, 8px radius, all-caps Tomorrow label. The "start" / "get access" CTA. Hover shifts to `{colors.surface-hover}`.
- **`button-secondary`** — near-black fill `{colors.surface}`, silver-gray text, same radius. Navigation and auxiliary actions.

### Cards
- **`card`** — `{colors.surface}` background, 8px radius, 16px padding. Standard content block.
- **`card-featured`** — `{colors.surface-elevated}` background, 8px radius, 30px padding. Highlighted feature sections.

### Inputs
- **`input`** — inverts the dark convention: `{colors.input-bg}` (light gray) with black text, 8px radius, 15px padding. Appears in email subscription forms. No visible border — shape defines the field.

### Badges
- **`badge`** — elevated dark background, gray text, 4px radius, uppercase caption tracking. Used for version labels and category tags.

### Navigation
- **`nav-bar`** — absolute black sticky header. Tomorrow 14px medium links in `{colors.ink-secondary}`. No background change on scroll — the nav is already void black. CTA button (`{components.button-primary}`) right-aligned.

### Links
- **`link-primary`** — `{colors.ink-tertiary}` default, no underline. Hover produces no color change from CSS (Framer's inherited hover system used instead).

## Do's and Don'ts

### Do
- Use Tomorrow in all-caps for every structural text element — headings, labels, navigation, button text
- Expand letter-spacing as font size shrinks: +1.2px at 12px, +0.7px at 14px
- Build on `{colors.background}` — pure black, not dark gray
- Use `{colors.surface-elevated}` for all interactive surfaces (buttons, featured cards)
- Communicate depth through luminance steps only — no box shadows
- Apply `{rounded.lg}` as the universal interactive radius
- Use the spectrum gradient only as an accent band or logo mark treatment — never as a full-screen fill
- Pair Tomorrow display text with Inter for any text meant to be read (body copy, feature descriptions)
- Use `{colors.input-bg}` (light gray) for form fields — the inversion from dark canvas is the contrast signal

### Don't
- Don't mix Tomorrow with mixed-case rendering — its identity is all-caps
- Don't use warm or saturated brand colors as surface fills — the spectrum gradient is a decoration, not a theme
- Don't introduce new radius values between 5px and 8px — the system uses both precisely
- Don't add box shadows for elevation — the luminance-step system handles all depth
- Don't apply positive letter-spacing to Tomorrow at heading sizes (24px+) — only negative or tight tracking at scale
- Don't use `{colors.ink}` pure white for secondary text — reserve it for primary headlines and CTAs
- Don't use rounded-pill buttons — Rive's button geometry is rectilinear with 8px softening, not pill-shaped
- Don't light up the nav on scroll — the void-black header is persistent and intentional

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <389px | Single column, compact internal padding |
| Mobile | 389–639px | Full-width components, stacked layout |
| Tablet | 640–948px | 2-column grids begin, nav condenses |
| Desktop | 949px+ | Full multi-column layout, expanded hero |

### Touch Targets
- Buttons use 8px 16px padding minimum, 8px radius — adequate for touch
- Nav links at 14px with sufficient horizontal spacing for tap targets
- Input field padding at 15px provides comfortable tap area on mobile

### Collapsing Strategy
- Hero headline: 40px → 28px → 22px at breakpoints; letter-spacing adjusts proportionally
- Navigation: horizontal links → hamburger at 640px
- Feature grids: 3-column → 2-column → single-column
- Video/animation embeds: maintain aspect ratio, reduce surrounding padding
- Section gaps: 60px → 32px on mobile

### Image Behavior
- Rive animation embeds scale responsively within their containers
- Video elements maintain `{rounded.sm}` radius at all sizes
- Product screenshots reduce in scale but preserve radius treatment

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text (primary): `{colors.ink}`
- Text (secondary): `{colors.ink-secondary}`
- Text (muted): `{colors.ink-tertiary}`
- Interactive surface: `{colors.surface-elevated}`
- Border: `{colors.border}`
- CTA button fill: `{colors.surface-elevated}`
- Input fill: `{colors.input-bg}`

### Example Component Prompts

- "Create a hero section on `{colors.background}` pure black. Headline in Tomorrow 40px weight 500, letter-spacing +0.4px, all-caps, color `{colors.ink}`. Subtext in Inter 16px weight 400, line-height 1.60, color `{colors.ink-secondary}`. CTA button: `{colors.surface-elevated}` fill, white text, 8px radius, 8px 16px padding, Tomorrow 12px weight 500 +1.2px tracking, all-caps."
- "Design a feature card on `{colors.surface}` (120x120 raised above black canvas). Title: Tomorrow 20px weight 500, all-caps, +0.2px tracking, `{colors.ink}`. Body: Inter 14px weight 400, 1.50 line-height, `{colors.ink-secondary}`. Card: 8px radius, 16px padding, no shadow."
- "Build a navigation bar on `{colors.background}`. Logo left, Tomorrow 14px weight 500 links in `{colors.ink-secondary}` center, CTA button right (`{colors.surface-elevated}` bg, white text, 8px radius). All nav text uppercase. Sticky on scroll, no background change."
- "Create a badge/label component: `{colors.surface-elevated}` background, `{colors.ink-secondary}` text, Tomorrow 12px weight 500, +1.2px letter-spacing, all-caps, 4px radius, 4px 10px padding."
- "Design an email input field: `{colors.input-bg}` fill, black text (#000000), Inter 16px weight 400, 8px radius, 15px padding all sides. No border. Place on `{colors.background}` canvas."
- "Render a spectrum accent band: linear gradient from `{colors.gradient-white}` through `{colors.gradient-blue}` → `{colors.gradient-cyan}` → `{colors.gradient-amber}` → `{colors.gradient-crimson}` → `{colors.gradient-coral}` to `{colors.background}`. Use as a 2–4px ruled accent line or logo mark underline."

### Iteration Guide

1. Start with `{colors.background}` pure black — any dark gray alternative is wrong
2. Apply Tomorrow uppercase everywhere structural: headings, nav, labels, buttons. No exceptions.
3. Letter-spacing rule: as size decreases, tracking opens. +1.2px at 12px, +0.7px at 14px, -0.8px at 24px
4. Depth = luminance steps only: `{colors.surface}` → `{colors.surface-elevated}` → `{colors.surface-hover}`. No shadows.
5. Interactive radius is always `{rounded.lg}` (8px) — don't round further, don't sharpen
6. The spectrum gradient is an accent, not a theme color — use sparingly as a decorative band
7. Body copy switches to Inter — Tomorrow is for structure, Inter is for reading

---

## 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 Rive. Brand names and trademarks belong to their respective owners.