Style Guide
DraftPen design system
Colors
Color palette and semantic color tokens used throughout DraftPen
Core Color Palette
Apple-inspired base colors that form the foundation of the design system
Primary Blue
#0071e3
--color-primary
Light Gray
#f5f5f7
--color-background
Dark Gray
#1d1d1f
--color-text
Medium Gray
#86868b
--color-muted
Success Green
#28cd41
--color-success
Warning Orange
#ff9f0a
--color-warning
Destructive Red
#ff3b30
--color-destructive
Semantic Colors
Functional color tokens that map to specific UI purposes
Background
Page backgrounds
var(--color-background)
Foreground
Primary text color
var(--color-text)
Muted
Secondary text, borders
var(--color-muted)
Muted Background
Subtle backgrounds
rgba(0,0,0,0.03)
Primary
Buttons, links, accents
var(--color-primary)
Primary Foreground
Text on primary color
white
Destructive
Error states, delete actions
var(--color-destructive)
Success
Success states, confirmations
var(--color-success)
Warning
Warning states, alerts
var(--color-warning)
Color Variables
CSS custom properties defined in design-tokens.css
1:root {
2 /* Core colors */
3 --color-primary: #0071e3;
4 --color-background: #f5f5f7;
5 --color-text: #1d1d1f;
6 --color-muted: #86868b;
7 --color-success: #28cd41;
8 --color-warning: #ff9f0a;
9 --color-destructive: #ff3b30;
10
11 /* Semantic mappings */
12 --background: var(--color-background);
13 --foreground: var(--color-text);
14 --muted: var(--color-muted);
15 --muted-foreground: var(--color-muted);
16 --muted-background: rgba(0,0,0,0.03);
17 --primary: var(--color-primary);
18 --primary-foreground: white;
19 --destructive: var(--color-destructive);
20 --destructive-foreground: white;
21 --success: var(--color-success);
22 --success-foreground: white;
23 --warning: var(--color-warning);
24 --warning-foreground: var(--color-text);
25
26 /* Dark mode overrides would be defined here */
27}Usage Guidelines
Best practices for using colors in the DraftPen interface
- Always use semantic color tokens instead of hard-coded values
- Use the primary blue sparingly for important actions and focus states
- Maintain sufficient contrast ratios between text and background colors (minimum 4.5:1)
- Use light grays for backgrounds and subtle UI elements
- Reserve destructive red for critical actions like deletion
- Use success green for confirmation and completion states
- Use warning orange for alerting users to potential issues
- Apply colors consistently across similar UI elements
- Consider color blindness and accessibility when designing interfaces
Examples
Examples of color usage in common UI components
Buttons
Text
Primary text - high contrast for readability
Secondary text - lower contrast for less important content
Accent text - for links and emphasized content
Error text - for error messages and warnings