---
title: "Rive design system"
variant: extended
source: https://rive.app/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/rive-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Rive · Design System

> A monochrome canvas for interactive design in motion

**Theme:** dark · **Industry:** design · **Source:** https://rive.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Rive’s homepage presents its interactive design and animation platform through a restrained dark interface, bold display typography, and product-focused motion. Alternating black and charcoal sections create a clear rhythm, while compact controls and testimonial cards reinforce its technical, tool-oriented character.

## North star

Keep the interface nearly monochrome and let bold technical typography, product motion, and clear section rhythm provide the visual emphasis.

## Overview

Rive’s visual strategy is monochrome and product-led: black anchors the hero, footer, and runtime section, while a charcoal band distinguishes the editor feature and the social-proof area. White display text delivers the strongest contrast; muted grays handle supporting copy and keep long descriptions secondary. The headings use uppercase, geometric Orbitron, while Inter Display supplies readable body copy and Tomorrow gives navigation and labels a compact technical cadence. Layout favors a centered, constrained content area with two-column feature sections, generous dark negative space, and denser card-based proof lower down. The hero pairs a column of labeled interactive previews with a strong text-and-CLI panel, making the product itself the primary visual. Motion and interface captures carry the personality; logos and testimonials provide evidence without introducing a colorful marketing palette. Buttons and cards remain subdued, using near-black fills and restrained separation rather than bright accent colors or heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Canvas | `#111111` | `--color-graphite-canvas` | brand | Primary charcoal canvas for feature sections, cards, and selected content bands. |
| Absolute Black | `#000000` | `--color-absolute-black` | surface | Dominant page background, including the hero, runtime section, newsletter area, and footer. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | High-contrast navigation, headings, and primary text on dark backgrounds. |
| Soft Ash | `#999999` | `--color-soft-ash` | neutral | Muted supporting copy, testimonials, and footer text. |
| Cool Gray | `#a0a0a0` | `--color-cool-gray` | neutral | Secondary body text where a quieter contrast than white is needed. |
| Dark Slate | `#262626` | `--color-dark-slate` | surface | Subtle raised surfaces and dark controls within the otherwise black interface. |
| Warm Chalk | `#f2f0f0` | `--color-warm-chalk` | neutral | Occasional near-white text and heading treatment; not a broad background color. |
| Pale Smoke | `#aaaaaa` | `--color-pale-smoke` | neutral | Sparse secondary text detail within the page’s subdued grayscale type palette. |
| Quiet Stone | `#888888` | `--color-quiet-stone` | neutral | Low-emphasis text detail, most appropriate for captions and tertiary information. |

### Semantic aliases

`--color-canvas` → `#111111` (Graphite Canvas) · `--color-surface` → `#000000` (Absolute Black) · `--color-surface-2` → `#262626` (Dark Slate) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#999999` (Soft Ash) · `--color-text-subtle` → `#a0a0a0` (Cool Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#262626` | 15.13:1 | AAA |
| `#999999` | `#111111` | 6.63:1 | AA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#262626` | 5.31:1 | AA |
| `#a0a0a0` | `#111111` | 7.22:1 | AAA |
| `#a0a0a0` | `#000000` | 8.03:1 | AAA |
| `#a0a0a0` | `#262626` | 5.79:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Display | `--font-body` | webfont | 400 | Primary body copy and explanatory text | Inter |
| Inter | `--font-inter` | webfont | 400, 500 | Interface and supporting text | Inter |
| Tomorrow | `--font-tomorrow` | webfont | 400, 500 | Navigation, captions, and eyebrow labels | Rajdhani |
| Orbitron | `--font-display` | webfont | 700, 900 | Primary display headings | Orbitron |
| PragmataPro VF Variable Regular | `--font-pragmatapro-vf-variable-regular` | webfont | 400 | Code and terminal-like snippets | IBM Plex Mono |

- **Inter Display:** Regular sans-serif with comfortable leading; keep body copy sentence case and restrained.
- **Inter:** Regular and medium weights; use for compact controls and readable secondary copy.
- **Tomorrow:** Compact uppercase technical labels, with light tracking and medium weight.
- **Orbitron:** Bold or heavy uppercase headings with slight positive tracking and tight line height.
- **PragmataPro VF Variable Regular:** Use a monospaced substitute for CLI commands; keep code visually distinct from prose.

### Type scale — Augmented Fourth (ratio ≈ 1.419, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 900 | 1.2 | 0.01em | uppercase | Orbitron | Hero display headline; bold uppercase technical statement. |
| h2 | 24px | 700 | 1.3 | 0.008em | uppercase | Orbitron | Feature-section headlines and major social-proof statement. |
| h3 | 20px | 700 | 1.2 | 0.01em | uppercase | Orbitron | Smaller product or subsection headings. |
| body | 14px | 400 | 1.5 | 0 | — | Inter Display | Explanatory paragraphs, product descriptions, and testimonial copy. |
| caption | 11px | 400 | 1.6 | 0.01em | uppercase | Tomorrow | Compact uppercase labels and small metadata. |
| nav | 12px | 500 | 1.2 | 0 | uppercase | Tomorrow | Uppercase primary navigation and compact menu labels. |
| eyebrow | 14px | 500 | 1.4 | 0.05em | uppercase | Tomorrow | Small uppercase section identifiers above feature headings. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 5, 8, 10, 12, 15, 16, 20, 30, 60 px.
- Section rhythm 60px · element gap 10px · card padding 10px · max content width 1000px.

Use a centered content frame capped at the measured 1000px maximum, with wide margins at desktop widths. The hero and major features use two-column compositions; the hero balances a vertical preview rail against copy and a CLI panel. Alternate black and charcoal section bands to separate stories without decorative dividers. Keep the runtime integrations in a multi-column logo field, then increase density for the testimonial cards and footer link columns. Preserve generous section gaps and tighter spacing inside controls.

## Shape & elevation

- Radius: button `4px` · input `8px` · card `4px` · media `4px` · link `8px` · xs `4px` · sm `5px` · md `8px`
- Shadow `inset` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat, with black and charcoal bands doing most of the separation. Cards and controls use subdued dark fills and occasional fine edges rather than visible drop shadows. Preserve clear content layers through spacing and contrast; avoid glossy effects, gradients, or pronounced elevation.

## Imagery

Treat product interfaces and motion previews as the primary imagery, not decorative photography. The hero uses stacked, labeled preview panels alongside the product pitch; later sections show editor or runtime material and integration logos. Keep media framed simply against the dark canvas, with restrained edges and no invented color overlays. Individual logos or artwork may introduce color, but the overall page identity remains grayscale.

## Components

### Top navigation

Compact uppercase Tomorrow labels on black, with the Rive mark, navigation links, docs access, and a subdued GET STARTED control.

### Hero preview rail

A vertical stack of labeled product and use-case media previews, paired with the hero copy in a two-column layout.

### CLI and editor panel

A dark #111111 product panel grouping a CLI label, platform choices, terminal command, editor label, and compact action buttons.

### Feature split

Two-column product section with a compact uppercase eyebrow and headline, supporting paragraph, and restrained dark action buttons.

### Integration grid

A multi-column field of platform and tool marks next to runtime copy; logos may retain their product colors.

### Testimonial cards

Dense, dark review cards with small avatars, author details, and muted supporting text grouped beneath customer proof.

### Newsletter and footer

Simple email signup above multi-column link groups, separated by fine horizontal rules on the black background.

### Measured component styles

- **Primary button** (“GET STARTED”): background #1d1d1d · text #000000 · radius 4px · padding 0px 16px · 400 12px sans-serif
- **Secondary button** (“Sign Up”): background #1a1a1a · text #ffffff · radius 8px · padding 15px · 600 16px Inter Regular
- **Link** (“RIVE CLI”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: background #ebebeb · text #000000 · radius 8px · padding 15px · 400 16px Inter Regular · shadow rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
- **Card** (“RIVE CLI macOS / Linux Windows curl -fsS”): background #111111 · text #000000 · radius 4px · padding 20px 0px · 400 12px sans-serif
- **Navigation item** (“PRODUCTS COMMUNITY LEARN PRICING DOWNLOA”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use black and charcoal as the page’s structural colors.
- Reserve strong white contrast for headings and key navigation.
- Set major headings in uppercase Orbitron.
- Use Tomorrow for compact uppercase labels and navigation.
- Let product previews and real interface details carry the visual story.
- Alternate section bands to clarify long-page progression.

## Don't

- Do not introduce a bright branded accent color absent from the measured palette.
- Do not use gradients or colorful backgrounds to separate sections.
- Do not make every paragraph or caption white.
- Do not replace the product-led imagery with generic stock photography.
- Do not add large shadows or glossy card effects.
- Do not turn the compact technical labels into oversized navigation.

## Agent prompt

Build a new page in Rive’s restrained, technical visual style. Use Absolute Black (#000000) as the main canvas and Graphite Canvas (#111111) for selected feature bands and panels; reserve Studio White (#ffffff) for strong headings and key labels, with Soft Ash (#999999) and Cool Gray (#a0a0a0) for supporting copy. Set display headings in bold uppercase Orbitron, body text in Inter Display, and compact navigation or eyebrows in Tomorrow. Use a centered constrained content frame, two-column feature layouts, generous dark negative space, and tighter spacing within controls. Make product UI, motion previews, and integrations the core imagery. Keep buttons and cards subdued, favoring simple dark fills and fine separation over shadows, gradients, or decorative color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black hero with a vertical preview rail beside headline, supporting copy, CLI panel, and editor actions. | primary product introduction, platform selection, copyable CLI command, editor signup | compact top navigation, stacked media previews, dark command panel, uppercase display heading |
| 2 | feature-split | Charcoal feature band with copy and actions on one side and editor media on the other. | learn more action, feature exploration | eyebrow label, uppercase headline, two-column composition, subdued buttons |
| 3 | integrations | Black section pairing a multi-column platform logo grid with runtime copy and resource links. | platform discovery, documentation access | integration logo grid, uppercase section heading, compact action buttons |
| 4 | testimonials | Charcoal, centered proof section with customer logos, intro copy, and a dense grid of review cards. | customer proof, testimonial browsing | logo row, centered headline, muted body copy, review cards with avatars |
| 5 | newsletter | Black signup band with explanatory copy and a horizontal email form. | email capture, newsletter signup | email input, compact submit button, fine divider |
| 6 | footer | Black footer with several link columns, a horizontal separator, brand mark, copyright, and social icons. | site-wide navigation, social links | multi-column link groups, small muted text, thin rules, brand sign-off |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rive-app