---
version: alpha
name: Diffusion
description: Browser-native video studio minimalism — near-black canvas, high-contrast white ink, a single electric violet accent, geometric Inter-style sans with tight display tracking, and softly rounded surfaces that frame timeline and canvas previews like product chrome.
colors:
  # Canvas + ink
  background: "#0a0a0b"
  surface: "#121214"
  surface-soft: "#18181b"
  surface-raised: "#1f1f23"
  ink: "#fafafa"
  ink-secondary: "#a1a1aa"
  ink-muted: "#71717a"

  # Accent — electric violet
  primary: "#7c5cff"
  primary-hover: "#6a48f5"
  primary-soft: "#1a1530"
  accent-cyan: "#4fd1ff"

  # Borders + dividers
  border: "#26262b"
  border-strong: "#34343a"

  # Neutral scale (dark)
  gray-100: "#e4e4e7"
  gray-400: "#a1a1aa"
  gray-500: "#71717a"
  gray-700: "#3f3f46"
  gray-900: "#18181b"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#0a0a0b"

  # Status
  success: "#34d399"
  warning: "#fbbf24"
  danger: "#f87171"

typography:
  display-hero:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.24px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 16px
  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-raised:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-strong}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  timeline-clip:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 6px 10px
    borderColor: "{colors.primary}"
---

# Diffusion Design System

## Overview

Diffusion Studio is a browser-native video editing and motion graphics platform, and its marketing surface reads like the product it sells — a dark, focused workspace where the work itself (timeline, canvas, footage) supplies all the color. The page rests on a near-black canvas (`{colors.background}`), an almost-but-not-quite-black that keeps screenshots of the editor from disappearing into a pure-black void. Against it, crisp near-white text (`{colors.ink}`) carries the headlines with the confidence of a high-end creative tool.

The system is fundamentally restrained: one accent does all the work. An electric violet (`{colors.primary}`) marks primary actions, active timeline clips, and the occasional highlight — never decoration. This single-accent discipline is what lets the embedded product imagery (which is full of its own color) sit on the page without fighting the chrome. The surrounding UI stays achromatic — layered dark surfaces (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`) separated by hairline borders (`{colors.border}`) rather than heavy shadows.

Typography leans on a geometric grotesque (Inter-class) with tight negative tracking at display sizes, giving headlines a compressed, engineered feel appropriate to a tool aimed at technically-minded creators. A monospace label face (`{typography.mono-label}`) appears for timecodes, shortcuts, and the "open in browser" technical voice that signals this runs in the browser, no install required.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) — dark enough to frame editor screenshots, warm enough to avoid OLED harshness
- High-contrast near-white ink (`{colors.ink}`) for headlines and primary copy
- A single electric violet accent (`{colors.primary}`) used only for actions and active states
- Layered dark surfaces separated by hairline borders, not shadows
- Inter-class geometric sans with tight display tracking (-2.56px at 64px)
- Monospace labels for timecodes and technical chrome
- Softly rounded surfaces (10–14px) that echo product-UI panel chrome

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas; frames product imagery.
- **Surface** (`{colors.surface}`): Default card and panel fill.
- **Surface Soft** (`{colors.surface-soft}`): Slightly raised nested surface.
- **Surface Raised** (`{colors.surface-raised}`): Buttons, raised chips, popovers.
- **Ink** (`{colors.ink}`): Near-white headings and primary text.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled labels.

### Accent
- **Primary Violet** (`{colors.primary}`): CTAs, active timeline clips, key highlights.
- **Primary Hover** (`{colors.primary-hover}`): Pressed/hover state for primary actions.
- **Primary Soft** (`{colors.primary-soft}`): Tinted violet fill for badges and selected clips.
- **Accent Cyan** (`{colors.accent-cyan}`): Rare secondary highlight for waveforms/links.

### Borders
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Input and raised-button outlines.

### Status
- **Success** (`{colors.success}`), **Warning** (`{colors.warning}`), **Danger** (`{colors.danger}`): Render/export and validation states.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `system-ui, -apple-system, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 64px hero — compressed, high-impact |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature cards |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, badges |
| `mono-label` | Timecodes, shortcuts, technical labels |

### Principles
- **Compression at display sizes**: -2.56px tracking at 64px tightens to near-zero by body — headlines feel engineered.
- **Three weights**: 400 (read), 500 (UI/interactive), 600 (headings). No 700 in chrome.
- **Mono as product voice**: monospace labels connect the marketing page to the editor's timecode UI.

## Layout

### Spacing System
Base unit is 8px (`{spacing.sm}`). The scale steps 4 → 8 → 12 → 16 → 24 → 40 → 64 → 96, with large jumps reserved for section rhythm.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: centered single column with generous top padding
- Feature sections: 2–3 column grids of dark cards
- Product imagery sits full-bleed or in rounded `{rounded.lg}` frames

### Whitespace Philosophy
- **Dark gallery**: large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections let bright product screenshots breathe.
- **Separation by hairline**: surfaces are distinguished by 1px `{colors.border}` lines and subtle surface-tint shifts, not drop shadows.
- **Color lives in the product**: chrome stays achromatic so embedded editor UI carries the visual energy.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inline chips, small spans |
| `sm` | 6px | Timeline clips, small controls |
| `md` | 10px | Buttons, inputs |
| `lg` | 14px | Cards, image frames |
| `xl` | 20px | Large feature panels |
| `pill` | 9999px | Badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Violet fill, white text, `{rounded.md}`. The default CTA ("Sign up", "Open in browser").
- **`button-secondary`** — Raised dark surface with `{colors.border-strong}` outline.
- **`button-ghost`** — Transparent on canvas, muted ink — tertiary nav actions.

### Pills & Badges
- **`badge`** — Tinted violet (`{colors.primary-soft}`) fill, violet text, full pill.

### Cards
- **`card`** — `{colors.surface}` fill, hairline border, `{rounded.lg}`. Holds feature copy + product imagery.
- **`card-raised`** — Softer raised surface for nested/highlighted content.

### Inputs
- **`input`** — Dark surface, `{colors.border-strong}` outline; focus shifts the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark sticky header, hairline bottom border, violet primary CTA right-aligned.

### Distinctive Components
- **`timeline-clip`** — The signature product motif: a `{colors.primary-soft}` clip with a `{colors.primary}` edge and a `{typography.mono-label}` timecode, echoing the editor's timeline.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`), not pure black — product screenshots need a frame.
- Let `{colors.primary}` mark actions and active states only.
- Separate surfaces with hairline borders and surface-tint steps, not shadows.
- Use monospace for timecodes and technical labels.
- Use the three-weight system: 400 / 500 / 600.

### Don't
- Don't introduce a second decorative accent — one violet is the system.
- Don't put chrome color near product imagery; keep chrome achromatic.
- Don't use heavy drop shadows on dark surfaces — borders do the separating.
- Don't drop below `{colors.ink-muted}` for any text that must read.

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Violet `{colors.primary}` on `{colors.on-primary}` text
- Background: Near-black `{colors.background}`
- Heading text: Near-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border (hairline): `{colors.border}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 64px Inter weight 600, line-height 1.05, letter-spacing -2.56px, `{colors.ink}`. Subtitle 18px weight 400, `{colors.ink-secondary}`. Violet CTA (`{colors.primary}`, 10px radius, 10px 20px padding) plus a raised secondary button."
- "Feature card: `{colors.surface}` fill, 1px `{colors.border}`, 14px radius, 24px padding. Title 20px Inter weight 600. Body 16px `{colors.ink-secondary}`."
- "Timeline clip chip: `{colors.primary-soft}` fill, 1px `{colors.primary}` edge, 6px radius, 12px JetBrains Mono timecode label in `{colors.primary}`."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Diffusion. Brand names and trademarks belong to their respective owners.