Back to Library
C

Cursor

Cursor

Visit Website

AI 优先代码编辑器。 sleek 深色界面,渐变强调,AI 驱动的编程体验。

深色 IDE渐变强调AI 集成代码编辑器紫色系

Color Palette

primary
secondary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size14px
Line Height1.6
Weights400, 500, 600

Heading Scale

h1Cursor Heading
h2Cursor Heading
h3Cursor Heading
h4Cursor Heading

DESIGN.md

# Cursor Design System

## Visual Theme & Atmosphere
AI-powered coding. Sleek dark interface with purple-indigo gradients (#6366F1 → #8B5CF6). The design signals next-generation development — where AI is not a feature but the foundation.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #6366F1 | Indigo accent |
| Secondary | #8B5CF6 | Purple gradient |
| Background | #0D0D0D | Dark IDE bg |
| Surface | #1A1A1A | Panels, sidebars |
| Text | #E2E2E2 | Soft white |
| Muted | #6B7280 | Secondary text |
| Border | #2A2A2A | Dark dividers |

## Typography Rules
- **Fonts**: Inter + JetBrains Mono
- **Base Size**: 14px

## Component Stylings
- **Editor**: Dark theme, syntax highlighting
- **AI Chat**: Inline conversation panel
- **Completions**: Ghost text suggestions

## Agent Prompt Guide
Dark IDE theme, purple gradients, AI chat interface patterns.

Frequently Asked Questions

What is Cursor's design style?

AI 优先代码编辑器。 sleek 深色界面,渐变强调,AI 驱动的编程体验。

What is Cursor's primary color?

Cursor uses #6366F1 as primary color, #0D0D0D for background, and #E2E2E2 for text.

What fonts does Cursor use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 14px.

How to use Cursor design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Cursor's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems