---
version: alpha
name: Diagram
description: Playful AI-design-tool energy — a bright near-white canvas, ink-black display type set tight and bold, and a saturated electric-blue accent backed by candy gradients (magenta, violet, cyan). The "magic" motif of Diagram's Magician/Genius products reads as colorful, rounded, friendly chrome over crisp neutral structure.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f7f9"
  surface-muted: "#eef0f3"
  ink: "#0d0d12"
  ink-secondary: "#5b606b"
  ink-tertiary: "#8a8f9a"

  # Brand accent — electric blue
  primary: "#2b5bff"
  primary-hover: "#1f47d6"

  # Playful spectrum (magic/gradient motif)
  magenta: "#ff2e93"
  violet: "#8b3dff"
  cyan: "#00c2ff"
  lime: "#7fe23f"
  amber: "#ffb020"

  # Borders + lines
  border: "#e6e8ec"
  border-strong: "#d2d6dd"

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

  # Status
  success: "#16a34a"
  danger: "#e5484d"

typography:
  display-hero:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.15px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  mono-caption:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    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-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Diagram Design System

## Overview

Diagram was an AI-for-design studio whose products (Magician, Genius, Automator) put generative magic inside Figma, and its marketing surface mirrored that personality: a clean, near-white canvas given energy by a saturated spectrum of candy colors. Where most developer-tool sites lean monochrome, Diagram leaned playful — rainbow gradients, sparkle motifs, and rounded pill chrome over otherwise crisp, structural neutrals. The result reads as Bold, Colorful, and Playful without tipping into noise: the color lives in accents and illustration, while the reading layer stays disciplined ink-on-white.

The type system is a tight, heavy geometric sans (Inter as the closest open proxy). Display headlines are set large at weight 700 with meaningful negative tracking (-1.2px to -1.7px), giving the brand a confident, modern-product voice. Body copy relaxes to weight 400 at comfortable line-height for readability. The hierarchy is compact — display, section, sub-heading, card-title, body — with strong weight contrast doing most of the work rather than a sprawling scale.

The signature move is the spectrum accent set: electric blue (`{colors.primary}`) as the primary action color, backed by magenta, violet, cyan, lime, and amber used for gradients, illustration, and the "AI magic" sparkle language. These bright hues never carry reading text on white — they live in fills, gradient washes, icons, and decorative chrome. Pills (`{rounded.pill}`) are everywhere: buttons, badges, and tags all round fully, reinforcing the friendly, approachable tone.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with deep ink (`{colors.ink}`) reading text
- Heavy geometric sans (Inter proxy) at weight 700 for display, tight negative tracking
- Electric-blue primary action color (`{colors.primary}`) with a candy spectrum behind it
- Playful gradient/sparkle motif: magenta, violet, cyan, lime, amber as accents only
- Fully-rounded pill chrome on buttons, badges, and tags
- Soft neutral surfaces (`{colors.surface-soft}`) and hairline borders for structure
- Color is decorative/illustrative; reading layer stays achromatic ink-on-white

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, display headlines, dark buttons.
- **White** (`{colors.background}`): Page background and card surfaces.
- **Electric Blue** (`{colors.primary}`): Primary CTA fill and active states. Hover darkens to `{colors.primary-hover}`.

### Playful Spectrum
- **Magenta** (`{colors.magenta}`): Gradient stop, illustration, sparkle accents.
- **Violet** (`{colors.violet}`): Gradient stop, AI-magic motif.
- **Cyan** (`{colors.cyan}`): Gradient stop, highlight accents.
- **Lime** (`{colors.lime}`): Secondary accent in illustration.
- **Amber** (`{colors.amber}`): Warm accent, badge/highlight pops.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Captions, muted metadata, placeholders.

### Surface & Border
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, section tints.
- **Surface Muted** (`{colors.surface-muted}`): Badge backgrounds, inset panels.
- **Border** (`{colors.border}`): Hairline card and divider lines.
- **Border Strong** (`{colors.border-strong}`): Secondary button outline, input borders.

### Status
- **Success** (`{colors.success}`): Positive states.
- **Danger** (`{colors.danger}`): Errors, destructive actions.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Arial, sans-serif` (open proxy for Diagram's heavy geometric brand sans).
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline, weight 700, tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large card headers |
| `card-title` | Feature card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized body, nav labels |
| `button-ui` | Buttons and links |
| `caption` | Metadata, tags, badges |
| `mono-caption` | Code labels, technical strings |

### Principles
- **Weight carries hierarchy**: 700 for display/section, 600 for sub-heads and buttons, 400 for body. Contrast comes from weight, not a huge scale.
- **Tight display tracking**: Negative letter-spacing (-1.2px to -1.7px) at large sizes for a confident, modern-product feel; body stays neutral.
- **Restrained scale**: A compact set of sizes keeps the page calm so the color can be loud.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro-step. Large jumps (`{spacing.3xl}`, `{spacing.4xl}`) drive generous section rhythm.

### Grid & Container
- Max content width: approximately 1200px, centered.
- Hero: centered single-column with large top padding and a gradient wash behind.
- Feature sections: 2–3 column card grids on soft surfaces.

### Whitespace Philosophy
- **Calm structure, loud color**: Generous white space and neutral surfaces let the candy spectrum and gradients pop without overwhelming.
- **Pill rhythm**: Fully-rounded buttons and badges repeat across the page as a unifying shape language.
- **Soft sectioning**: Sections separate via `{colors.surface-soft}` tints and hairline `{colors.border}` lines rather than heavy rules.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric blue fill, white text, full pill. The default CTA.
- **`button-dark`** — Ink fill, white text, full pill. Alternate high-contrast CTA.
- **`button-secondary`** — White surface with `{colors.border-strong}` outline, pill.

### Badges
- **`badge`** — Muted surface, secondary ink text, full pill. Tags and labels.

### Cards
- **`card`** — White surface, hairline border, `{rounded.lg}`.
- **`card-feature`** — Soft surface, `{rounded.xl}`, larger padding for hero feature blocks.

### Inputs
- **`input`** — White surface, strong-border outline, `{rounded.md}`. Focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White header with hairline bottom border. Weight-600 nav labels, pill CTA right.

## Do's and Don'ts

### Do
- Keep reading text ink-on-white; let the spectrum live in fills, gradients, and illustration.
- Use full pills for buttons, badges, and tags — it's the core shape language.
- Set display type heavy (700) with tight negative tracking.
- Use electric blue as the single primary action color; reserve magenta/violet/cyan for gradients and sparkle accents.
- Lean on soft neutral surfaces and hairline borders for structure.

### Don't
- Don't run bright spectrum colors as body text on white — contrast and tone both suffer.
- Don't use sharp corners on interactive chrome — pills define the brand.
- Don't let gradients invade the reading layer; they're decorative.
- Don't add a competing second action color — blue (or ink) is the CTA.
- Don't tighten body tracking; negative tracking is for display only.

---

## 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 Diagram. Brand names and trademarks belong to their respective owners.