Design System
Inspired by Cursor

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm cream tones.

Download Cursor View Documentation
01 / Colors

Color Palette

Primary
Cursor Dark
#26251e
Primary text, headings
Cursor Cream
#f2f1ed
Page background
Cursor Light
#e6e5e0
Secondary surface
Pure White
#ffffff
Card surfaces
Accent & Semantic
Cursor Orange
#f54e00
Brand accent
Gold
#c08532
Secondary accent
Error
#cf2d56
Error, hover state
Success
#1f8a65
Success state
AI Timeline Colors
Thinking
#dfa88f
AI thinking state
Grep
#9fc9a2
Search operations
Read
#9fbbe0
File reading
Edit
#c0a8dd
Code editing
Surface Scale
Surface 100
#f7f7f4
Lightest surface
Surface 200
#f2f1ed
Page background
Surface 300
#ebeae5
Button default
Surface 400
#e6e5e0
Card backgrounds
Surface 500
#e1e0db
Active/pressed
02 / Typography

Typography Scale

Display Hero
Display Hero -- 72px / 400 / 1.10 / -2.16px / CursorGothic
Section Heading
Section Heading -- 36px / 400 / 1.20 / -0.72px / CursorGothic
Sub-heading
Sub-heading -- 26px / 400 / 1.25 / -0.325px / CursorGothic
Title Small
Title Small -- 22px / 400 / 1.30 / -0.11px / CursorGothic
Body Serif -- The AI-first code editor that helps you build software faster with intelligent assistance.
Body Serif -- 19.2px / 500 / 1.50 / jjannon (with cswh)
Body Serif Small -- Write code naturally with AI that understands your entire codebase.
Body Serif SM -- 17.28px / 400 / 1.35 / jjannon
Body Sans -- Standard UI text for navigation and interface elements
Body Sans -- 16px / 400 / 1.50 / CursorGothic
Button Label
Button Label -- 14px / 400 / 1.00 / CursorGothic
Caption -- Small metadata and labels
Caption -- 11px / 500 / 1.50 / CursorGothic
const editor = await cursor.init({ ai: true });
Mono Body -- 12px / 400 / 1.67 / berkeleyMono
AI OPERATIONS
System Micro -- 11px / 500 / uppercase / system-ui
03 / Buttons

Button Variants

Download Cursor
Primary Dark
Documentation
Primary Surface
Learn More
Ghost
AI-First
Pill Tag
Thinking
Timeline Pill
Grep
Timeline Pill
Read
Timeline Pill
Edit
Timeline Pill
04 / Cards

Card Examples

AI

Tab Autocomplete

Cursor predicts your next edit and suggests multi-line changes. Accept with a single tab press for flow-state coding.

Elevated

Chat with Codebase

Ask questions about your entire repository. Cursor understands project structure, dependencies, and conventions.

Agent

Agentic Editing

Describe what you want in natural language. Cursor's agent mode makes multi-file changes across your codebase.

05 / Forms

Form Elements

Default (warm border)
Focus (accent orange)
Error (warm crimson)
06 / Spacing

Spacing Scale

2
3
4
5
6
8
10
12
16
24
32
48
07 / Radius

Border Radius Scale

1.5px
Micro
2px
Inline
3px
Small
4px
Cards, inputs
8px
Buttons, cards
10px
Featured
9999px
Pills
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow
Level 1: Border Ring
oklab warm border
Level 1b: Medium
Emphasized border
Level 2: Ambient
Subtle glow
Level 3: Elevated
Modal / popover
Focus
Interactive focus