Discord

Identity

Productivity & SaaS

Bundled OpenDesign package for Discord, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

Ag
gg sansDisplay
Ag
gg sansBody400 / 500 / 600 / 700 / 800
Ag
gg monoMono400 / 500 / 600 / 700 / 800
--text-4xl · 56pxThe quick brown fox
--text-3xl · 32pxThe quick brown fox
--text-2xl · 24pxThe quick brown fox
--text-xl · 20pxThe quick brown fox
--text-lg · 18pxThe quick brown fox
--text-base · 16pxThe quick brown fox
--text-sm · 14pxThe quick brown fox
--text-xs · 12pxThe quick brown fox

Palette

--bg#313338Page background — defines the brand canvas.
--surface#2b2d31Card / lifted container background.
--surface-warm#1e1f22Tertiary surface tier (kami warm-sand).
--fg#dbdee1Primary text color.
--fg-2#f2f3f5Secondary text tier (kami dark-warm).
--muted#949ba4Subtext / captions.
--meta#80848eTertiary FG / metadata tier (kami stone).
--borderrgba(255, 255, 255, 0.06)Default border / card edge.
--border-soft#3f4147Inner row separator that should not visually compete.
--accent#5865f2Brand accent. ≤2 visible uses per screen (lint enforced).
--accent-on#ffffffFG when --accent is the bg.
--success#23a55aSuccess state.
--warn#f0b232Warning state.
--danger#f23f43Danger state.

Also named in DESIGN.md

Blurple Hover#4752c4Hover/active for blurple.
Blurple Soft#7289daLegacy blurple, secondary accent in marketing.
Background Floating#111214Floating popovers, tooltips, autocomplete.
Light Bg Tertiary#e3e5e8Deepest light surface.
Header Secondary#b5bac1Muted headers.

Imagery & layout

Radius

--radius-sm4px
--radius-md8px
--radius-lg16px
--radius-pill9999px

Spacing

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-8 · 32px
--space-12 · 40px

Elevation

--elev-raised

Layout

Layout rules

Component kit