---
name: Rive
description: "This site is a perfect example of a premium developer tool brand using a bold, dark aesthetic to convey power and sophistication."
version: alpha

colors:
  background: "#000000"
  primary: "#f1f1f1"
  secondary: "#999999"
  neutral: "#666666"
  bg-soft: "#121212"
  bg-quiet: "#1d1d1d"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0.7px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.11px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.11px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The interactive experience engine for designing, animating, and shipping everywhere.

*A sleek, professional workshop for building interactive animations across all platforms.*

## Colors

Deep dark canvas with high-contrast white text and subtle gray accents.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#f1f1f1`)** — uses `ink` token
- **Secondary text (`#999999`)** — uses `ink-soft` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px base with consistent application of 8px and 16px increments.

## Elevation & Depth

- rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
- Borders: Subtle 1px solid borders using low-opacity white.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast primary with gold outline, secondary with subtle border.
- **card:** Dark cards with subtle borders and rounded corners, showcasing visual examples.
- **chip:** Not prominently featured.
- **input:** Not prominently featured.
- **hero:** Large centered typography with two prominent call-to-action buttons.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```