Warp Brand System
Build
agentic,
on brand.
Everything needed to build Warp surfaces that look and sound unmistakably Warp. Use these tokens, patterns, and rules as the default source of truth.
01
Colors
Primary
Neutral Scale
Darken Scale
Lighten Scale
Secondary
Green Scale
Blue Scale
Purple Scale
Tertiary
Teal Scale
Pink Scale
Red Scale
Yellow Scale
02
Typography
Typography values below are pulled from the Web Tokens foundations set. All listed styles use Matter (sans) or Matter Mono (mono), weight 400, with explicit line-height and letter-spacing values.
Type families
Default Text + Short Text: Matter (Regular, 400)
Code + Caps Mono: Matter Mono (Regular, 400)
Default Text scale (rendered)
Short Text scale (rendered)
Code scale (rendered)
Caps Mono scale (rendered)
03
Components
Voice attributes
Truth-Seeking
Highly Technical
Researched
Matter-of-fact
Brand cards
Voice
Technical clarity first
Prefer concrete recommendations and explicit implementation
details.
Logo
Preserve lockup integrity
Keep glyph and wordmark proportions unchanged across all
placements.
Type
Matter Sans + Matter Mono
Use primary families whenever available; fallback cleanly
across platforms.
Buttons
Button tokens (Web-components)
Importance:
- Primary: background #FAF9F6, text #121212E5
- Secondary: background rgba(64,64,64,0.5), text #FAF9F6E5, backdrop blur 16px
States:
- Hover: rgba(41,41,41,0.5)
- Active: rgba(88,87,86,0.5)
- Focus: 0 0 0 4px rgba(255,255,255,0.2)
Size mapping:
- .75 => text 12px, padding 8px 12px, radius 4px
- 1 => text 16px, padding 12px 16px, radius 4px
- 1.125 => text 18px, padding 12px 16px, radius 6px
Component implementation rules
Use the Warp Web Components library as the source of truth.
Preserve spacing, radius, and interaction patterns from canonical components.
Keep UI language concise, objective, and technically precise.
Use button importance/state/size values from node 11:536 without ad-hoc overrides.
04
Logo & Imagery
Logo on different backgrounds
On white
On dark
On black
On accent color
Logo rules
Do not change glyph/wordmark scale ratio.
Do not add drop shadows.
Do not rotate or reflect the logo or glyph.
Do not swap glyph and wordmark placement.
Do not alter the wordmark shape.
Do not use non-brand colors or gradients.
05
Spacing & Layout
Base spacing
8px
sm
sm
16px
md
md
24px
lg
lg
32px
xl
xl
48px
2xl
2xl
Use a 12-column layout for desktop compositions.
Keep content container widths stable and readable.
Maintain visual rhythm through consistent spacing increments.
06
CSS Snippets
Design tokens
/* Warp core colors */
--warp-white: #FFFFFF;
--warp-off-white: #FAF9F6;
--warp-black: #121212;
--warp-green: #34895C;
--warp-blue: #2E5D9E;
--warp-purple: #754DAC;
--warp-teal: #4D9989;
--warp-pink: #A43787;
--warp-red: #C6372A;
--warp-yellow: #C0872A;
/* Warp typography */
--warp-font-sans: 'Matter', 'DM Sans', sans-serif;
--warp-font-mono: 'Matter Mono', 'Roboto Mono', monospace;
--text-1: 16px;
--text-1-line-height: 1.4;
--text-1-tracking: 0.5;
--code-075: 12px;
--code-075-line-height: 1;
--code-075-tracking: 5;
--caps-mono-075: 12px;
--caps-mono-075-tracking: 20;
Machine route
Machine-readable brand instructions are available at:
/brand/skill (rendered view)
/brand/skill.md (raw markdown)