Dark Mode

# Design System
Inspired by Cursor

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized in warm dark 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

Project Name
Default (warm border)
Repository
Focus (accent orange)
API Key
Error (warm crimson)
Instructions

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