← All designs
Design

Rive

An interactive animation tool with a dark, creative-professional canvas (#1A1A1A) and Rive's distinctive purple-magenta accent (#7C3AED / #C026D3) appearing on the logo, active selection states, and the animated mascot (Rive Bird). The product is a vector animation editor — think Figma meets After Effects — with a timeline, artboard, and state machine panel. The UI chrome is dark and recessive, keeping the user's animations front and center. Marketing showcases Rive's output: fluid, interactive animations running in-browser at runtime. Typography is clean and functional. The brand is serious about runtime animation as a first-class design medium.

Color Tokens

#7C3AEDprimary
#ffffffon-primary
#6D28D9primary-hover
#C026D3secondary
#E4E4E7ink
#71717Aink-muted
#1A1A1Acanvas
#222222surface-1
#2A2A2Asurface-2
#3F3F46border

version: alpha name: Rive description: "An interactive animation tool with a dark, creative-professional canvas (#1A1A1A) and Rive's distinctive purple-magenta accent (#7C3AED / #C026D3) appearing on the logo, active selection states, and the animated mascot (Rive Bird). The product is a vector animation editor — think Figma meets After Effects — with a timeline, artboard, and state machine panel. The UI chrome is dark and recessive, keeping the user's animations front and center. Marketing showcases Rive's output: fluid, interactive animations running in-browser at runtime. Typography is clean and functional. The brand is serious about runtime animation as a first-class design medium."

colors: primary: "#7C3AED" on-primary: "#ffffff" primary-hover: "#6D28D9" secondary: "#C026D3" ink: "#E4E4E7" ink-muted: "#71717A" canvas: "#1A1A1A" surface-1: "#222222" surface-2: "#2A2A2A" border: "#3F3F46" artboard-bg: "#141414" artboard-checker: "#1A1A1A" selection: "#7C3AED" timeline-bg: "#181818" handle-color: "#7C3AED"

typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.025em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0

spacing: base: 8px scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]

radius: sm: 2px md: 4px lg: 8px pill: 9999px

shadows: panel: "1px 0 0 rgba(255,255,255,0.06)" elevated: "0 4px 16px rgba(0,0,0,0.5)" selection: "0 0 0 2px #7C3AED"

motion: duration-fast: 80ms duration-base: 150ms easing: cubic-bezier(0.4, 0, 0.2, 1)

1. Visual Theme & Atmosphere

Rive is building the future of UI animation as a medium. The tool looks like a hybrid between Figma and After Effects but is neither — it's purpose-built for interactive, state-driven animations that run natively in any app. The dark editor surface is standard for animation tools (Final Cut, Premiere, After Effects all use dark); the artboard sits lighter-dark on top. Purple selection handles and active states provide clear affordances without overwhelming the animation content. Marketing is distinguished by the animations themselves — the product is its own best advertisement.

2. Color System

  • Editor canvas: #1A1A1A — deep dark for animation editing sessions
  • Artboard: #141414 — slightly darker than the editor background, creating the artboard boundary
  • Purple: #7C3AED — selection state, active handles, primary brand color
  • Magenta secondary: #C026D3 — gradient partner, secondary interactive elements
  • Surface layers: #222222 / #2A2A2A — panel backgrounds in property inspector and layers
  • Ink: #E4E4E7 — light zinc-gray for readability

3. Typography

Inter at very small functional sizes (13px body) — animation tools are dense, and every pixel of screen space is competing with the artboard. Labels, layer names, and property values need to be compact. Display type on the marketing site is bolder and more expressive at 700/44px.

4. Components & Patterns

  • Artboard canvas: Infinite canvas with the animation artboard centered, checkered background
  • Layers panel: Left sidebar, hierarchy tree of shapes/bones/groups
  • Inspector panel: Right sidebar, property values for selected element (position, size, fill, etc.)
  • Timeline: Bottom panel, keyframe track per animated property, playhead scrubbing
  • State machine panel: Visual node graph for interactive animation states and transitions
  • Rive Bird mascot: Animated interactive mascot on marketing and empty states

5. Spacing & Layout

Editor: full viewport. Left panel: 240px (layers + assets). Right panel: 260px (inspector). Timeline: ~180px from bottom. Artboard centered in remaining space. Very dense — every pixel serves the animation workflow.

6. Motion & Interaction

The tool itself is animated — selecting objects springs the handles into place, timeline scrubbing is frame-perfect, and the state machine preview plays animations in real-time within the editor canvas. The meta-delight of an animation tool being animated is fully realized.