Design Tokens
EthioWDS uses design tokens for colors, typography, spacing, and more so you can keep visual consistency and theme your apps easily.
Overview
Design tokens are named variables that define the design decisions of the system. They can be overridden for theming.
Token Categories
- Colors — palette, semantic colors, contrast
- Typography — font families, sizes, weights, line heights
- Spacing — margins, padding, gaps
- Breakpoints — responsive breakpoints (see Breakpoints)
- Border radius, shadows, transitions — see component and theme documentation
Using Tokens
Add the design system to your project to get all tokens. Override in your own styles or via theming and custom properties.