Design System

Command
with
precision.

A macOS-native launcher with deep dark surfaces, a vivid coral-red accent, and tight, legible typography for developers.

17 color tokens 9 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deep dark neutrals with a vivid coral-red accent. 17 tokens across surfaces, text hierarchy, interaction, and semantic states.

Obsidian
#1C1C1E
Primary background
Onyx
#2C2C2E
Elevated surfaces
Charcoal
#38383A
Borders, dividers
Graphite
#48484A
Inactive states
Pewter
#636366
Placeholders
Silver
#8E8E93
Secondary text
Porcelain
#AEAEB2
Tertiary text
Cloud
#EBEBF5
Primary text
Snow
#FFFFFF
High-contrast text
Coral Red
#FF6363
Primary accent
Coral Glow
#FF8A8A
Hover accent
Coral Deep
#E05555
Pressed accent
Teal
#5AC8FA
Links, info
Mint
#34C759
Success
Amber
#FFD60A
Warning
Violet
#BF5AF2
Decorative
Typography

Type Scale

Inter as primary typeface. Tight metrics and compact line heights optimized for dense, functional developer interfaces.

Display Command precision 32px / 1.0 / -0.02em
Heading-lg Quick actions 24px / 1.2 / -0.02px
Heading Section heading 20px / 1.3 / -0.02px
Subheading Panel title 16px / 1.4 / -0.01px
Body Default text for commands and content 14px / 1.5 / 0
Body-sm Dense data, list subtitles 13px / 1.5 / 0.01px
Caption Meta info · Timestamps 12px / 1.4 / 0.02px
Micro KEYBOARD SHORTCUTS 11px / 1.4 / 0.04px

Keyboard Shortcuts

Copy: ⌘ C + Search: ⌘ K + Navigate: ↑ ↓ ⌤

Fonts

Primary Inter 400–700 · 11–32px
Mono Inter Mono 400–500 · 11–14px · Code & shortcuts
System -apple-system Fallback for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density for dense launcher UI. 14-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

22px
44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
default 8px
cards 12px
xl 16px
pill 9999px
Elevation

Depth & Surfaces

Surface color differentiation over shadows. 4 distinct levels with a tinted accent surface for selected states.

Depth Levels

Obsidian
Base page background
Level 0
Onyx
Elevated panels, cards
Level 1
Charcoal
Borders, dividers
Level 2
Surface Tint
Accent-highlighted surfaces, selected items
Level 3

Surface System

Obsidian #1C1C1E
Onyx #2C2C2E
Charcoal #38383A
Surface Tint rgba(255,99,99,0.06)
Components

Button Variants

Primary action (Coral Red), ghost, and secondary variants. Compact sizing for dense launcher interfaces.

Primary Action Button
Main call to action, command execution
.btn-primary
Coral Red (#FF6363) background, Snow (#FFFFFF) text, 8px radius. Hover lightens to Coral Glow (#FF8A8A).
Ghost Button
Secondary actions, navigation
.btn-ghost
Teal (#5AC8FA) text, Teal border, 8px radius. Hover adds subtle tinted background.
Secondary Button
Tertiary actions, less prominent
.btn-secondary
Cloud (#EBEBF5) text, Charcoal border. For actions that need presence without competing with primary.
Command List Item
Individual command in the launcher
.cmd-item
Search Files ⌘P
Clipboard History ⌘⇧V
Window Management ⌘⌥W
Selected state uses Surface Tint background with Coral Red left border. Keyboard shortcuts use Graphite badges.
Tag / Badge
Status indicators, categories
.tag
Extension Active Beta New
10px font, 500 weight, 4px radius. Color-coded by semantic meaning.
Guidelines

Do's & Don'ts

Do — Embrace
  • Obsidian (#1C1C1E) as primary background
  • Cloud (#EBEBF5) for all primary text
  • Coral Red (#FF6363) for accent & active states
  • 8px radius as default for all interactive elements
  • Charcoal (#38383A) for all borders and dividers
  • Inter Mono for keyboard shortcuts and code
  • Compact spacing with 8px element gaps
Don't — Avoid
  • Bright saturated backgrounds
  • Coral Red for text — use for backgrounds/borders
  • Hard sharp corners on interactive elements
  • Heavy drop shadows — use surface colors
  • Dense text blocks without padding
  • Font families outside Inter / Inter Mono
  • Coral Red for decorative-only elements