# Rive — Marketing site Design Spec

> Source: rive.app (live DOM, computed styles; Framer-built, no CSS custom properties published), 2026-07-19.
> Coverage: home / product landing. Logged-in editor not captured (needs login).
> Note: the primary CTA is itself a **Rive animation rendered to canvas**, so its fill, border and glow are not CSS values and are marked `not captured`.

## 1. Visual Theme & Atmosphere

Rive is a pure-black engine brand that dresses like developer hardware: everything — nav, headings, buttons, eyebrows, even body labels — is set in **Tomorrow**, a squarish techno grotesque, and almost all of it is **UPPERCASE with positive tracking**. That single decision does most of the work; there is no serif, no lowercase display, and no soft geometry. Surfaces step through a tight near-black ladder (`#000` &rarr; `#121212` &rarr; `#1d1d1d` &rarr; `#262626`) with no borders and effectively no shadows, so panels read as machined blocks rather than cards. One amber `#ffa41c` marks section eyebrows. The brand's real signature is that the interface demonstrates the product: five `<canvas>` elements run live Rive files, including the primary CTA button itself, and the only gradient on the page is a wide `oklch` spectrum sweep. Feels: technical, precise, dark, engine-like.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| `text` | `#ffffff` | Headlines, nav links |
| `text-heading` | `#f1f1f1` | Section headings |
| `text-heading-2` | `#f2f0f0` | Alternate heading ink |
| `muted` | `#999999` | The most common body/meta colour |
| `muted-2` | `#aaaaaa` | Secondary meta |
| `paragraph` | `rgba(255,255,255,.60)` | Hero sub / paragraph copy |
| `on-light` | `#000000` | Text on the white pill |

### Surfaces

| Token | Hex | Role / usage |
|---|---|---|
| `canvas` | `#000000` | Page background — pure black |
| `surface` | `#121212` | Primary raised surface (most common) |
| `surface-2` | `#1d1d1d` | Secondary button / panel fill |
| `surface-3` | `#262626` | Card fill, showcase tiles |
| `surface-4` | `#111111` | Deepest step |
| `white-90` | `rgba(255,255,255,.90)` | White pill button fill |
| `white-10` | `rgba(255,255,255,.10)` | Faint divider / hairline |
| `light` | `#ebebeb` | Rare light block |

### Accent

| Token | Hex | Role / usage |
|---|---|---|
| `amber` | `#ffa41c` | THE accent — section eyebrows only |

### Spectrum sweep (the one gradient)

`linear-gradient(90deg in oklch, #ffffff 0%, #ffffff 30%, #3084ff 35%, #19f2ff 45%, #ffa41c 50%, #f30058 55%, #ff483c 60%, #f30058 65%, #000000 70%, #000000 100%)`

Stops: white `#ffffff` &middot; blue `#3084ff` &middot; cyan `#19f2ff` &middot; amber `#ffa41c` &middot; magenta `#f30058` &middot; red-orange `#ff483c` &middot; black `#000000`

**Rules.** Chrome is monochrome — the black ladder plus white. Amber is reserved for eyebrows and is never a button fill. The spectrum colours exist only inside that single `oklch` gradient sweep and in rendered Rive artwork; they are never applied to UI directly.

## 3. Typography Rules

- Display + UI: `Tomorrow, "Tomorrow Placeholder", sans-serif` — used for **everything** including nav and labels
- Body: `Inter, sans-serif` — only for running paragraph copy

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Hero h1 | Tomorrow | 40/48 | 500 | +0.4px | UPPERCASE |
| Section h2 | Tomorrow | 24/33.6 | 500 | **-0.8px** | UPPERCASE |
| Section h2 (alt) | Tomorrow | 24/31.2 | 500 | +0.2px | UPPERCASE |
| Sub-section h2 | Tomorrow | 20/24 | 500 | +0.2px | UPPERCASE |
| Eyebrow h3 | Tomorrow | 14/14 | 500 | **+1.4px** | UPPERCASE (`#ffa41c`) |
| Label h2 | Tomorrow | 12/14.4 | 500 | +0.84px | UPPERCASE |
| Nav link | Tomorrow | 12/14.4 | 500 | normal | UPPERCASE |
| Body paragraph | Inter | 16/25.6 | 400 | normal | sentence |

Patterns: weight is pinned at **500** across every Tomorrow role — there is no bold anywhere. Tracking is **positive** at small sizes (+1.4px eyebrows, +0.84px labels, +0.4px hero) and only goes negative on the 24px section heading (-0.8px), the inverse of the usual convention. Case is uppercase for every role except Inter body copy.

## 4. Component Stylings

**Nav** — 64px, fully transparent (no fill, no blur, no border), floating on black. Wordmark glyph, five uppercase Tomorrow links at 12/14.4 with chevrons on three, then a single bordered CTA.

**Buttons**:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary CTA | *Rive canvas* | white | *Rive canvas* | — | 47px | — | Tomorrow 12/500 UPPER |
| White pill | `rgba(255,255,255,.90)` | `#000000` | none | 8px | 45px | — | Tomorrow 12/500 UPPER |
| Secondary | `#1d1d1d` | `#ffffff` | none | 8px | 45px | 8px 10px | Tomorrow 12/500 UPPER |
| Tertiary | `#1d1d1d` | `#ffffff` | none | 8px | 40px | 0 16px | Tomorrow 12/500 UPPER |
| Nav chip | `#262626` | `#ffffff` | none | — | 34px | 0 12px | Tomorrow 12/500 UPPER |

The primary CTA (`GET STARTED`) is a 32&times;32-anchored Rive canvas instance with an animated amber border and glow — its exact fill/border/glow values are **not captured** because they are rendered, not styled.

**Showcase tiles** — `#262626` fill with a `#000000` 30px caption strip, using percentage-based radii (`2.87% / 3.86%`) rather than pixel values, so corners scale with the tile.

**Cards / panels** — `#121212` or `#262626`, no border, no shadow.

**Inputs** — not captured (the newsletter field is inside a Framer form component that did not expose computed styles).

## 5. Layout Principles

Centered hero: logotype, two-line uppercase headline, a 16/25.6 Inter sub, then a two-button row — sitting above a full-width live Rive canvas (500&times;500 in the hero, plus a 270&times;150 instance in the nav area). Content below runs 3-across showcase grids of 277&times;206 tiles with 30px caption strips. Radius scale is small and hard: `4 / 5 / 8 / 20px`, plus the percentage radii on tiles.

## 6. Depth & Elevation

Radius scale: `4px` / `5px` / `8px` (all buttons) / `20px`, plus percentage-based `2.87% 2.87% 2.89% 2.89% / 3.86% 3.86% 3.88% 3.88%` on showcase tiles.

**Effectively no elevation.** The only box-shadow found is `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset` — a fully transparent inset ring (a hover placeholder). There is no `backdrop-filter` anywhere. Depth is created purely by the near-black surface ladder `#000` &rarr; `#111` &rarr; `#121212` &rarr; `#1d1d1d` &rarr; `#262626`.

## 7. Motion

CSS motion is minimal — a single generic `all` transition is the only declared value. Virtually all animation is delegated to the **Rive runtime**: five `<canvas>` instances plus ten `<video>` elements carry the page's movement, including the primary button's hover/press states. This is the point of the brand: the site is a demo of its own engine.

## 8. Backgrounds, Effects & WebGL

- **5 `<canvas>`** elements running live Rive files (hero 500&times;500, nav 270&times;150, CTA 32&times;32, two 19&times;19 glyphs)
- **10 `<video>`** elements for product motion
- Exactly **one CSS gradient** — the `90deg in oklch` spectrum sweep listed in &sect;2, notable for using the `oklch` interpolation space
- No `backdrop-filter`, no grain or noise texture, no blur effects

## 9. Do's and Don'ts

### Do
- Set every UI role in Tomorrow at weight 500, UPPERCASE, and reserve Inter for running body copy.
- Use positive tracking at small sizes (+1.4px eyebrows, +0.84px labels) and negative only at the 24px heading (-0.8px).
- Build depth from the near-black ladder (`#000` / `#111111` / `#121212` / `#1d1d1d` / `#262626`) with no borders and no shadows.
- Keep radii small and hard: 8px on buttons, 4-5px elsewhere.
- Reserve amber `#ffa41c` for section eyebrows.
- Let live Rive canvases carry the motion rather than CSS animation.
- Keep the nav transparent, 64px, floating on black.

### Don't
- Don't use bold — every Tomorrow role sits at 500.
- Don't set UI copy in lowercase or sentence case; only Inter body copy is sentence case.
- Don't add box-shadows or backdrop-filters — the system has neither.
- Don't make amber a button fill.
- Don't apply the spectrum colours to UI; they live only in the one gradient and in rendered artwork.
- Don't use large or pill radii; the geometry is hard-edged.

## 10. Responsive Behavior

Not captured — the site is Framer-built with generated per-breakpoint class names, and no media-query census was resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#000000` · Surfaces `#121212` / `#1d1d1d` / `#262626` · Text `#ffffff` / `#f1f1f1` · Muted `#999999` · Paragraph `rgba(255,255,255,.60)` · Accent `#ffa41c`
- Font: Tomorrow 500 UPPERCASE (everything), Inter 400 (body only) · Body: 16/25.6 · Radius: 8px control / 4-5px detail · Control height: 40-47px
- Focus: not captured · Hover: not captured (delegated to Rive runtime) · Transition: `all` only

<rive_design_language>
A pure-black #000 engine brand dressed like developer hardware. Every UI role — nav, headings, buttons, eyebrows, labels — is set in Tomorrow, a squarish techno grotesque, at a pinned weight 500 and in UPPERCASE; Inter appears only for running body copy at 16/25.6. Tracking runs the opposite way from convention: positive at small sizes (+1.4px on eyebrows, +0.84px on labels, +0.4px on the 40/48 hero) and negative only on the 24/33.6 section heading (-0.8px). Depth comes from a tight near-black surface ladder — #000, #111111, #121212, #1d1d1d, #262626 — with no borders, no backdrop-filter and effectively no shadows (the sole recipe is a fully transparent inset ring). Radii are small and hard: 8px on every button, 4-5px elsewhere, plus percentage-based corners on showcase tiles. Text steps white #ffffff, heading #f1f1f1, muted #999999, paragraph rgba(255,255,255,.60). One amber #ffa41c is the only accent and appears solely on section eyebrows, never as a fill; a single 90deg oklch spectrum gradient (white to blue #3084ff, cyan #19f2ff, amber #ffa41c, magenta #f30058, red #ff483c, black) is the one place other hues exist. Buttons are 40-47px at 8px radius: a white rgba(255,255,255,.90) pill with black label, or #1d1d1d secondary. The nav is transparent, 64px, floating on black. Crucially, motion is delegated to the Rive runtime — five live canvases and ten videos, including the primary CTA, which is itself a rendered Rive animation rather than a styled element. Feels: technical, precise, dark, engine-like. Avoid: bold weights, lowercase UI copy, box-shadows or backdrop blur, amber as a button fill, spectrum colours applied to UI, and large or pill-shaped radii.
</rive_design_language>