Rive — design system & UI screens

Design · 1 screen · 8 sections · rive.app

Near-black landing page led by a centered serif/letter-spaced "RIVE" wordmark above a bold condensed "THE INTERACTIVE EXPERIENCE ENGINE" headline, with amber "Get Started" and dark "Downloads" buttons. The signature element is a full-bleed horizontal carousel of category tiles (Automotive, Product UI, Game UI, Mobile Apps, Film+TV) directly under the hero, each showing a real product screenshot. Below, an editor showcase with a fighting-game UI screenshot, a platform-icon grid (Web/iOS/React/Unreal etc.), a "2 billion users" logo wall, and a dense three-column avatar testimonial wall close the page.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/rive.

Decoded design system

Rive's decoded design system: background #000000, text #FFFFFF, accent #FFA41C, link #FFA41C, primary #0000EE; type scale h1 40px / h2 16px / body 14px; 10px spacing base; 0px base radius. The single interactive/action color is #1A1A1A — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#0F0F0F`
border	`#262626`
text	`#FFFFFF`
text_muted	`#9E9E9E`
primary	`#0000EE`
accent	`#FFA41C`
link	`#FFA41C`
button_bg	`#1A1A1A`
button_text	`#FFFFFF`

Using these colors

Action color #1A1A1A — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #FFA41C — one role, not several (the action color).
accent #FFA41C — accent for emphasis — keep it rare on the page.
primary #0000EE — a brand color — but the call-to-action uses #1A1A1A, not this.

Typography

Heading: Tomorrow
Body: Tomorrow
h1: 40px
h2: 16px
body: 14px

Spacing

base unit: 10px
scale: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px

Radii

base: 0px
button: 8px

Button states (measured)

primary hover: background #222222
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

nav: 64px relative

Input (measured)

height 52.4062px · radius 8px

Responsive (measured)

breakpoints: 640px · 949px
mobile (390px): hero 21px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Dark interactive-engine landing with use-case tile carousel and editor showcase for Rive