# Discourse Design System

> High-contrast monochrome utility meets a vibrant purple energy, anchored by heavy-weight geometric display type and soft-pill interactive elements.

**Source:** https://discourse.org | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Discourse utilizes a high-contrast foundation of pure white (#ffffff) and deep charcoal (#333638), punctuated by a signature "Discourse Purple" (#7b5fe2). The visual language is defined by the heavy, expressive **Kaio** typeface for headlines (weights 800-900) contrasted against the functional clarity of **Inter** for UI and **Crimson Text** for editorial moments. Geometry is mixed: sharp 0px corners for structural containers are softened by 16px card radii and extreme 1600px pill shapes for primary actions. A secondary palette of vibrant, saturated accents (yellow, blue, green) is used sparingly for decorative surface backgrounds to denote different community archetypes.

## Signature DNA
1. **The Kaio Punch** (Heavyweight geometric display type at 800-900 weight, often with tight -1.8px tracking, creating a "built" rather than "written" feel. Seen on all major headers across `discourse.org`.)
2. **The Purple Pill** (Primary CTAs use a specific #7b5fe2 fill with a 1600px radius, creating a distinct "stadium" shape that floats over the high-contrast canvas.)
3. **Chromatic Sectioning** (Using saturated background blocks like #fff470 (yellow) or #28abe2 (blue) to break the monochrome flow, typically paired with sharp-edged containers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page canvas, button text, card backgrounds | 162 | 1 | `--color-white` |
| `{color.grey.dark}` | `#333638` | Primary body text, secondary button text | 1043 | 0.8 | Computed |
| `{color.border}` | `#eeeeee` | Default hairline dividers and section borders | 506 | 1 | `--color-border` |
| `{color.ink}` | `#0a0c10` | High-contrast display text | 2 | 1 | Brand Page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#7b5fe2` | Primary buttons, active borders, brand links | 23 | 1 | `--color-primary` |
| `{color.text.muted}` | `#6b7280` | Secondary labels, descriptions | 9 | 1 | `--color-text--muted` |
| `{color.yellow}` | `#fff470` | Decorative surface background (Community) | 4 | 1 | Computed |
| `{color.blue}` | `#28abe2` | Decorative surface background (Product) | 2 | 1 | Decorative only |
| `{color.purple.light}` | `#ffd7fe` | Decorative surface background (Pricing) | 5 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Kaio | 800, 900 | Display, Hero Headlines | Archivo Black | Proprietary |
| Inter | 400, 600, 700, 900 | UI, Navigation, Subheaders | Inter (Google) | OFL |
| Crimson Text | 400, 700 | Editorial body, quotes | Crimson Text | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.mega}` | 60px | 72px | -1.8px | 800 | Hero Title | `h1.hero-title` |
| `{type.display.lg}` | 48px | 57.6px | normal | 800 | Section Title | `h2.section-title` |
| `{type.heading.md}` | 32px | 35.2px | normal | 400 | Stats/Quotes | `span.stat__value` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 900 | Sub-sections | `h4` |
| `{type.body.lg}` | 20px | 30px | normal | 400 | Hero Description | `p.hero-description` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `section.hero-section` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Captions/Cites | `cite.testimonial-card__author` |
| `{type.label.xs}` | 12px | 14.4px | 1.2px | 700 | Stat Labels | `span.stat__label` |

### Principles
1. **Display weight is absolute.** Headlines never drop below 800 weight; the brand relies on the "heavy" look of Kaio to establish authority.
2. **Tight tracking on display.** Large hero text (60px) uses -1.8px letter spacing to create a dense, interlocking typographic block.
3. **Serif for trust.** Crimson Text is used specifically for long-form descriptions and founder names to provide a human, editorial counterpoint to the tech-heavy Inter.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 914 |
| `{space.sm}` | 16px | 139 |
| `{space.md}` | 24px | 142 |
| `{space.lg}` | 32px | 50 |
| `{space.xl}` | 48px | 91 |
| `{space.section}` | 96px | 7 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Section containers, large surfaces | Computed style |
| `{radius.control}` | 8px | Form inputs, small cards | `radius: 8px` |
| `{radius.card}` | 16px | Feature cards, pricing tiers | `radius: 16px` |
| `{radius.pill}` | 1600px | Primary and secondary buttons | `radius: 1600px` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.low}` | `rgba(25, 33, 61, 0.05) 0px 1px 4px 0px` | Standard cards | Card component |
| `{shadow.base}` | `rgba(0, 0, 0, 0.08) 0px 1px 4px 0px` | Hover states | Computed style |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (Try Free, Get Started)
**Pages observed:** `discourse.org`, `discourse.org/pricing`
**Spec:** Background `{color.primary}` (#7b5fe2) / Text `{color.white}` (#ffffff) / Radius `{radius.pill}` (1600px) / Padding 8px 24px / Typography 16px Bold
**States observed:** Default | Hover: captured (uses #8b6df8) | Active: captured

#### Text Input
**Role:** Newsletter and form entry
**Pages observed:** `discourse.org`, `discourse.org/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Border 1px `{color.grey.light}` (#c8cad0) / Radius `{radius.control}` (8px) / Padding 16px

### Tier 2: Patterns
#### Card
**Role:** Feature and pricing containers
**Pages observed:** `discourse.org`, `discourse.org/pricing`
**Spec:** Background `{color.white}` (#ffffff) / Radius `{radius.card}` (16px) / Padding 24px / Shadow `{shadow.low}`

#### Pill Button (Outline)
**Role:** Secondary actions (Talk to Sales)
**Pages observed:** `discourse.org`
**Spec:** Background transparent / Border 1px `{color.primary}` (#7b5fe2) / Text `{color.primary}` (#7b5fe2) / Radius `{radius.pill}` (1600px)

### Tier 3: Surface-specific
#### Decorative Color Card
**Role:** Highlighting community types
**Pages observed:** `discourse.org`
**Spec:** Background `{color.yellow}` (#fff470) or `{color.blue}` (#28abe2) / Radius `{radius.control}` (8px) / Border 0px

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px |
| Section padding | 96px |
| Column gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Hero titles drop to 40px; navigation collapses to hamburger; padding-inline reduced to 16px. |
| Desktop | 1440px | Full 12-column grid; 96px section rhythm. |

## Do's
- Use Kaio 800 for all section headers.
- Apply `{radius.pill}` (1600px) to all interactive buttons.
- Maintain high contrast between `{color.grey.dark}` text and `{color.white}` backgrounds.
- Use `{color.primary}` (#7b5fe2) for the primary path to conversion.
- Use Crimson Text for blockquotes and testimonial names to add warmth.

## Don'ts
- **Wrong:** Using a sub-brand accent like #28abe2 for a primary CTA. **Right:** Always use #7b5fe2. **Reason:** Accents are for decorative surface backgrounds only.
- Do not use a border radius on main section containers (keep them 0px).
- Do not use Kaio for body text; it is strictly a display face.
- Do not use shadows on primary buttons; keep them flat.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #7b5fe2;
  --color-primary-hover: #8b6df8;
  --color-white: #ffffff;
  --color-grey-dark: #333638;
  --color-border: #eeeeee;
  --font-display: 'Kaio', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --radius-pill: 1600px;
  --radius-card: 16px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Discourse Purple #7b5fe2, white text, and a 1600px border radius."
- "Generate a feature card with a white background, 16px border radius, and a subtle shadow of rgba(25, 33, 61, 0.05) 0px 1px 4px."
- "Design a hero section with a Kaio 800 headline at 60px and -1.8px letter spacing."

## Known gaps
- Hover states for secondary outline buttons were not explicitly captured in the token set.
- Mobile-specific typography tokens for mid-range headings (h3-h4) were not fully sampled.
- The exact transition timing for button hover states was not recorded.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://discourse.org | 1440px | 2026-06-06 |
| Pricing | https://discourse.org/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://discourse.org | 390px | 2026-06-06 |