Color Palette
Background Colors (Dark Theme)
Primary BG
#1a1a1e
Elevated BG
#232328
Surface BG
#2d2d35
Hover BG
#3a3a42
Background Colors (Light Theme)
Primary BG
#fafafa
Elevated BG
#ffffff
Surface BG
#f5f5f5
Hover BG
#ebebeb
Text Colors (Dark Theme)
Aa
Text Primary
#e8e8e8
Aa
Text Secondary
#a0a0a8
Aa
Text Muted
#6b6b75
Text Colors (Light Theme)
Aa
Text Primary
#1a1a1e
Aa
Text Secondary
#4a4a52
Aa
Text Muted
#8a8a92
Accent & Semantic Colors
Accent (Coral)
#e07a5f
Success
#81b29a
Warning
#f2cc8f
Info
#7eb8da
Category Colors (Skill Visualization)
Orchestrator
#e07a5f
Research
#81b29a
Operational
#f2cc8f
Interactive
#7eb8da
Typography
Heading 1 — Inter / System Sans
Heading 2 — Section Title
Heading 3 — Subsection
Heading 4 — Minor heading
Body text with bold emphasis and italic style. This is what normal paragraph text looks like. The line height is set for comfortable reading on dark backgrounds.
This is a link styled with coral accent. Inline code uses monospace with coral tint.
This is a blockquote for important statements or quotes.Small text for captions and secondary information.
Tables
| Task | Frequency | Description | Status |
|---|---|---|---|
| Email triage | Daily | Review all work email, summarize key items, flag urgent | Active |
| Content drafting | 3x/week | Draft blog posts, LinkedIn posts, social content | Pending |
| Deal research | Per deal | Deep research on founders, companies | In Progress |
| Portfolio review | Weekly | Check news, updates on portfolio companies | Overdue |
Buttons
Standard Buttons
Semantic Buttons
Button Sizes
Badges / Tags
Default Accent Success Warning Danger Info
In Context
Daily Weekly Monthly As Needed
Alerts / Notices
Info: This is an informational message providing context or tips.
Success: The operation completed successfully.
Warning: Please review this item before proceeding.
Error: Something went wrong. Please try again.
Form Elements
Cards
Default Card
Simple card with border. Use for grouping related content.
Muted Card
Card with surface background. Use for less prominent content.
Elevated Card
Card with shadow. Use for important, prominent content.
Code Blocks
/* Claude Design System - CSS Variables */
:root {
--bg-primary: #1a1a1e;
--bg-elevated: #232328;
--text-primary: #e8e8e8;
--accent: #e07a5f;
--success: #81b29a;
--warning: #f2cc8f;
--info: #7eb8da;
}