# Rive · Design system migration spec

> Source: https://rive.app  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a premium developer tool brand using a bold, dark aesthetic to convey power and sophistication.

## 1. Identity DNA

Rive's design system is built as a sleek, professional workshop for building interactive animations across all platforms. Its identity is defined by the tension between an interactive engine's technical power and the clean aesthetic of a design tool.

**One-liner:** The interactive experience engine for designing, animating, and shipping everywhere.
**Keywords:** interactive · engine · animation · design · code
**Analogy:** A sleek, professional workshop for building interactive animations across all platforms.

## 2. Color

The color system is built on a stark, high-contrast foundation of deep blacks and pure whites, with muted grays for secondary text. This starkness is deliberate, ensuring content clarity and a premium, focused aesthetic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#121212` | card background |
| `--bg-quiet` | `#1d1d1d` | quiet area |
| `--ink` | `#f1f1f1` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Deep dark canvas with high-contrast white text and subtle gray accents.

The principle is restraint: color is used to define hierarchy and focus, not as decoration.

## 3. Typography

The typographic voice is authoritative and clean, employing a sharp, geometric grotesque for headlines and a humanist sans-serif for body text. Display text is set in uppercase with tight tracking for impact, while body copy uses a more generous line height for sustained reading comfort.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headlines |
| h2 | 32px | 1.2 | 500 | 0.7px | Section headlines |
| body | 16px | 1.6 | 400 | 0.11px | Paragraph text |
| caption | 12px | 1.6 | 400 | 0.11px | Small text and labels |

**Type rules:**
- Display headlines use uppercase with tight tracking.
- Body text uses a slightly expanded line height for readability.
- Button text uses uppercase with wide tracking.

## 4. Spacing

A consistent 4px-based rhythm provides the structural foundation for all spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with consistent application of 8px and 16px increments.

## 5. Surfaces

Depth is created not through shadows, but through subtle, low-opacity white borders and the contrast between surface layers. This approach gives the interface a flat, modern structure where separation is defined by edge clarity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
- **Borders:** Subtle 1px solid borders using low-opacity white.

## 6. Layout

The layout skeleton is a full-width dark canvas with a centered content column, structured by a 12-column grid. This architecture prioritizes spaciousness and centers the user's attention on the core message and calls-to-action.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark background with centered content blocks and a 12-column grid.

## 7. Motion & Interaction

Motion is treated as a functional enhancement, not a flourish. The philosophy governs transitions and hover states to provide smooth, immediate feedback that reinforces the interface's professional and responsive character.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Hover transitions on interactive elements.
  - Smooth scrolling between sections.

- **Hover:** Subtle color or opacity changes on buttons and links.
- **Click:** Immediate visual feedback on press.
- **Transition:** Smooth transitions for state changes.
- **Keyboard:** Standard focus management for navigation.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and innovative, with headlines that are bold, uppercase, and authoritative. The copy avoids playful tone and cluttered layouts, favoring clear, action-oriented communication that matches the tool's precision.

- **Tone:** Professional, confident, and innovative.
- **Headline style:** Bold, uppercase, and authoritative.
- **CTA style:** Clear, action-oriented, and prominent.
- **Avoid:** Overly casual or playful language. / Cluttered layouts. / Low-contrast text.

### Don'ts
- ❌ Don't use light backgrounds — the screenshot shows a deep black canvas.
- ❌ Don't use rounded, playful fonts — the screenshot shows sharp, geometric grotesque-sans.
- ❌ Don't use colorful gradients as primary elements — the screenshot uses high-contrast white on black.
- ❌ Don't use small, subtle buttons — the screenshot shows large, prominent call-to-action buttons.
- ❌ Don't use complex multi-column layouts for hero sections — the screenshot uses centered, single-column focus.
- ❌ Don't use drop shadows for depth — the screenshot relies on borders and contrast.

The system deliberately does not use light backgrounds, playful typography, colorful gradients as primary elements, or subtle, small buttons.

## System Prompt (paste into AI tool)

```
This site is a high-end developer tool for creating interactive animations, positioned as the 'Interactive Experience Engine' for major brands. It features a sleek, dark-mode aesthetic with a pure black background (#000000), soft dark surfaces (#121212), and high-contrast white text (#f1f1f1). The typography uses clean, geometric grotesque-sans for display and humanist-sans for body text, creating a professional and authoritative feel. The layout is centered and spacious, emphasizing large headlines and prominent call-to-action buttons with gold outlines. Key design principles include restraint, clarity, and visual impact through contrast. Critical donts include avoiding light backgrounds, playful typography, cluttered layouts, subtle buttons, complex multi-column hero sections, and reliance on drop shadows for depth.
```
