The short version
Color System
By JR Brugger (Design Workflow)
Build complete color palettes with accessible shades and dark/light mode variants.
Typography Scale
By JR Brugger (Design Workflow)
Build a professional text sizing system for websites and apps with consistent headings and body copy.
What each one does
Color System
- Generates full tonal scales (light to dark) for your brand colors
- Creates semantic color sets for success, warning, error, and info states
- Tests all color combinations for accessibility compliance (WCAG AA/AAA)
- Builds matching dark mode and light mode palettes
- Provides usage guidance for each color in your system
Typography Scale
- Generates a mathematical scale of text sizes from captions to large headings
- Defines line heights and letter spacing for optimal readability
- Provides font weight and pairing recommendations
- Creates responsive rules so text scales gracefully on mobile devices
- Documents usage guidelines for each text style
When to pick each one
Reach for Color System when…
- You're building a brand identity and need a complete color palette
- You need to ensure your design meets accessibility standards
- You're creating a pitch deck or marketing site and want professional color choices
- You need dark mode colors that match your existing brand
Reach for Typography Scale when…
- You're designing a website, app, or marketing site and need consistent text sizing
- You want your headings and body copy to look harmonious without manual tweaking
- You're building a design system or brand guide
- You need typography rules that work across desktop and mobile
Quick facts
| Color System | Typography Scale | |
|---|---|---|
| Made by | JR Brugger (Design Workflow) | JR Brugger (Design Workflow) |
| Category | Design & Creative | Design & Creative |
| Source | View ↗ | View ↗ |
| Detail page | Open | Open |