Design Token vs Typography Scale

Design Token

By JR Brugger (Design Workflow)

Build a consistent design system with organized colors, spacing, fonts, and themes.

Typography Scale

By JR Brugger (Design Workflow)

Build a professional text sizing system for websites and apps with consistent headings and body copy.

Design Token

• Creates organized color palettes with global, semantic, and component-level tokens
• Defines spacing scales, typography hierarchies, and shadow systems
• Establishes naming conventions for design elements across your product
• Generates documentation for how and when to use each design token
• Supports theming and multi-brand design systems

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

Reach for Design Token when…

• You're building a new brand or design system from scratch
• You need consistent spacing, colors, and fonts across your product
• You're handing designs off to developers and want clear specs
• You're managing multiple themes or white-label products

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