Cursor is the AI-native code editor where agents turn ideas into code. Everything is warm-shifted: a warm off-white canvas (#f2f1ed) replaces pure white, body text runs #26251e with a yellow undertone, CursorGothic compresses display headings, jjannon serif carries body, berkeleyMono handles code, and #f54e00 accents.
DeveloperMinimal
Prompt Template
Base Template
Design a Cursor-inspired interface. - CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings; - jjannon serif for body text with OpenType "cswh" (contextual swash alternates); - berkeleyMono for code and technical labels; - Warm off-white background (#f2f1ed) instead of pure white -- the entire system is warm-shifted; - Primary text color #26251e (warm near-black with yellow undertone). Colors: #26251e, #f2f1ed, #e6e5e0, #ffffff with #f54e00 accent. Typography: - Background:.
Variant Prompts
📱 Mobile
Design a mobile app with Cursor aesthetics. Use Cursor color identity with #f54e00 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Cursor style. Use Cursor color identity with #f54e00 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Cursor design language. Use Cursor color identity with #f54e00 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Cursor visual identity. Use Cursor color identity with #f54e00 accents. Compelling, conversion-focused.
Usage Examples
Cursor App
WebBuild a web app with Cursor design language and #f54e00 color system.
Cursor Dashboard
DashboardCreate a dashboard using Cursor style with data visualization and - Background: typography.
✅ Best For
- Developer
- Code editors and IDE UIs
- Developer productivity tool sites
❌ Avoid For
- Mass-market e-commerce
- Warm lifestyle products
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.