Design Tokens
Design tokens are the foundational values of the design system — colors, typography, spacing, and more — maintained as SCSS variables.
What Are Tokens?
Tokens represent design decisions as code. Instead of hardcoding #492b7c, you use $purple-800 (or the semantic alias $brand-primary). This ensures:
- Consistent visuals across all products
- Centralized updates when design changes
- Self-documenting code
Available Token Categories
| Category | Import Path | Contents |
|---|---|---|
| All tokens | @yellowcard/b2b-design-system/scss | Everything below |
| Colors | @yellowcard/b2b-design-system/scss/colors | 90+ color variables |
| Typography | @yellowcard/b2b-design-system/scss/typography | Font sizes, weights, line heights |
Quick Start
scss
// Import all tokens
@use '@yellowcard/b2b-design-system/scss' as *;
// Or import specific categories
@use '@yellowcard/b2b-design-system/scss/colors' as *;
@use '@yellowcard/b2b-design-system/scss/typography' as *;Token Sections
- Colors — Full color palette with visual swatches
- Typography Tokens — Font sizes and weights
- SCSS Usage — Import patterns and best practices