Skip to content
All AI Kits
Design system Pro AI Kit13 components

Cursor-inspired Agent Workbench

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.

Desktop · 1440 × 8229
Cursor homepage — desktop reference

Foundations

The visual decisions behind the system

A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.

Style identity

Cursor-inspired Agent Workbench

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.

warm charcoal agent workspace with quiet navigation and command grammar theme
Visit website

Typography

Font families

Cursor Gothic-style display sans (unlicensed substitute in source)

Editorial hero, navigation, agent demo headings, and interface copy

Inter, Helvetica Neue, Arial, sans-serif
Weights
400, 500, 600
Sizes
12–88px
Line height
0.92–1.6
Tracking
-0.08em to 0

Fallback: 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, monospace
Weights
400, 500, 600
Sizes
10–16px
Line height
1.35–1.6
Tracking
0 to 0.04em

Fallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Palette

Core colors

Dark canvas

#12110e

Primary dark page background

Dark surface

#1a1915

Card, code, and specimen surfaces

Dark raised

#25231d

Hover, selected, and raised control surface

Dark border

#39362d

Hairline structure on dark mode

Dark text

#f2f0ea

Primary dark-mode content

Dark muted

#aaa69a

Secondary dark-mode content

Light canvas

#f5f4ef

Primary light page background

Light surface

#ffffff

Light card and specimen surface

Light raised

#ecebe3

Hover, selected, and raised light surface

Light border

#d9d7cc

Hairline structure on light mode

Accent

#c8f36a

Primary action and selected state

Accent secondary

#86c8ff

Focus, secondary action, or supporting signal

Warm

#ffbd73

Attention and editorial emphasis

Ready

#7ce5aa

Success, ready, or healthy state

Type scale

Responsive hierarchy

RoleSizeWeightLine heightTracking
Display76px4000.94-0.075em
Hero mobile38px4001.02-0.05em
Section heading48px5001.04-0.06em
Product heading24px6001.2-0.025em
Body large18px4001.6-0.01em
Body16px4001.550
Interface label14px5001.4-0.01em
Metadata12px5001.450.02em

Spacing & shape

Layout rhythm

Density
editorial hero with dense workbench islands
Base unit
4px
Max width
1200px
Section gap
84–116px
Card padding
18–24px
Element gap
8–14px

System metrics

Radius

Compact 6pxControl 8pxPanel 12pxFrame 18pxPill 999px

Spacing

1 4px2 8px3 12px4 16px5 20px

Motion

Fast 150msControl 180msNormal 240msReveal 500msEase cubic-bezier(0.2, 0.8, 0.2, 1)

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 #c8f36a55

Keyboard focus indication

Surfaces & shape

Dark canvas

#12110e

Dark-first page and specimen background

Dark panel

#1a1915

Primary dark content surface

Light canvas

#f5f4ef

Light page and specimen background

Light panel

#ffffff

Primary light content surface

Guidelines

Do

  • Keep the workbench hierarchy task → agent → follow-up.
  • Use sidebars and panels to preserve project context.
  • Show model, status, command, and time metadata close to the action.
  • Make chat and command surfaces keyboard friendly.

Don't

  • ×Do not copy Cursor's screenshots, code, logo, or product text.
  • ×Do not use a generic dashboard as a substitute for an agent workbench.
  • ×Do not hide commands behind icon-only controls.
  • ×Do not make the lime accent the page background.

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.

Concept

A complete visual language, ready to inspect.

Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.

Assigned collection

Cursor-inspired AI Interface Elements

13 published components in collection order

Components

Built from the same system

Production-ready specimens from this AI Kit's approved collection.

Open collection
Run agent ↗ Review changes ▶
0
17
Cursor Editor Agent Teams
0
25
Agent Changes Terminal Agent task Refactor search 3 files changed
0
34
Editor Agent Terminal Editor surface selected.
0
14
Refactor search Agent editing 3 files In progress 12 changes Review
0
24
Auth refactor 12 changes Billing tests 4 files Docs cleanup Ready
0
24
Agent active 12 changes Review
0
19
Agent instructions Apply repository rules to every run. Project rules Active
0
25
⌘ Run agent R Apply changes A Open chat C
0
20
Can you trace the failing request? Found it—the retry handler drops the auth header. Send
0
27
AI Agent edited 3 files Auth refactor · now 12 changes LC Tests completed Billing flow · 6m ago Passed
0
20
Cursor Explorer Search Agent Workspace Agent workbench Repository tools beside the editor canvas.
0
21

More like this

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.

Runway-inspired Real-World Studio

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.

Observable-inspired Signal Notebook

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.

Replit-inspired Build Canvas

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.

Published AI Kit Protected source files for Pro members
Cursor-inspired Agent Workbench AI Kit - Frontend Forever