A focused workbench language for agent-led software creation: warm charcoal surfaces, large editorial type, task statuses, side-by-side Desktop and CLI demos, command cues, follow-up chat, and automation activity. It is an original study without Cursor's marks, screenshots, code, or protected copy. Responsive previews and 13 evidence-backed interface elements.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A focused workbench language for agent-led software creation: warm charcoal surfaces, large editorial type, task statuses, side-by-side Desktop and CLI demos, command cues, follow-up chat, and automation activity. It is an original study without Cursor's marks, screenshots, code, or protected copy.
Reference style: warm charcoal agent workspace with quiet navigation and command grammarTypography
Cursor Gothic-style display sans (unlicensed substitute in source)
Editorial hero, navigation, agent demo headings, and interface copy
Inter, Helvetica Neue, Arial, sans-serifFallback: Helvetica Neue, Arial, ui-sans-serif, system-ui, sans-serif
System monospace
Technical metadata, counts, command cues, and code-like labels
SFMono-Regular, Menlo, Consolas, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
Dark canvas
#12110ePrimary dark page background
Dark surface
#1a1915Card, code, and specimen surfaces
Dark raised
#25231dHover, selected, and raised control surface
Dark border
#39362dHairline structure on dark mode
Dark text
#f2f0eaPrimary dark-mode content
Dark muted
#aaa69aSecondary dark-mode content
Light canvas
#f5f4efPrimary light page background
Light surface
#ffffffLight card and specimen surface
Light raised
#ecebe3Hover, selected, and raised light surface
Light border
#d9d7ccHairline structure on light mode
Accent
#c8f36aPrimary action and selected state
Accent secondary
#86c8ffFocus, secondary action, or supporting signal
Warm
#ffbd73Attention and editorial emphasis
Ready
#7ce5aaSuccess, ready, or healthy state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 76px | 400 | 0.94 | -0.075em |
| Hero mobile | 38px | 400 | 1.02 | -0.05em |
| Section heading | 48px | 500 | 1.04 | -0.06em |
| Product heading | 24px | 600 | 1.2 | -0.025em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface label | 14px | 500 | 1.4 | -0.01em |
| Metadata | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Iconography
Use icons to clarify task state or tool affordances; use visible /, @, and ! command cues for text grammar. Do not recreate Cursor's product mark or copy its demo frames.
System metrics
Radius
Spacing
Motion
Elevation
Panel
0 18px 50px rgba(0, 0, 0, 0.18)Large preview and focused content frame
Overlay
0 24px 80px rgba(0, 0, 0, 0.32)Menu, dialog, or floating command surface
Focus ring
0 0 0 3px #c8f36a55Keyboard focus indication
Surfaces & shape
Dark canvas
#12110eDark-first page and specimen background
Dark panel
#1a1915Primary dark content surface
Light canvas
#f5f4efLight page and specimen background
Light panel
#ffffffPrimary light content surface
Guidelines
Imagery
Use original code-like line art, neutral workbench frames, and task diagrams. Do not reuse Cursor's photography, screen recordings, or demo screenshots.
Layout
Use a 1200px rail, large proposition type, and desktop two-column demo frames that collapse to one column below 900px. Mobile keeps the active task and composer in view before secondary context.
Assigned collection
13 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
