A pure-black engine brand dressed like developer hardware rather than the playful look the category suggests: every UI role — nav, headings, buttons, labels — is set in the squarish Tomorrow grotesque at a pinned weight 500 and in uppercase with positive tracking, depth comes from a tight near-black surface ladder with no borders and no shadows, one amber marks section eyebrows, and the primary CTA is itself a live Rive animation rendered to canvas rather than a styled element.
Browse Rive in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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 → #121212 → #1d1d1d → #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.
| 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 |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
amber | #ffa41c | THE accent — section eyebrows only |
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 · blue #3084ff · cyan #19f2ff · amber #ffa41c · magenta #f30058 · red-orange #ff483c · 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.
Tomorrow, "Tomorrow Placeholder", sans-serif — used for everything including nav and labelsInter, 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.