Design Tokens
The foundational elements that define the visual language of the Archimede Design System.
What are Design Tokens?
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. They are used in place of hard-coded values in order to maintain a scalable and consistent visual system.
Colors
Color palette and usage
The color system includes primary, secondary, and neutral colors, along with semantic colors for feedback and status.
View Colors →Typography
Fonts, sizes, and styles
The typography system defines font families, weights, sizes, and line heights to ensure readability and hierarchy.
View Typography →Spacing
Margins, padding, and layout
The spacing system provides consistent measurements for margins, padding, and layout grids.
View Spacing →Using Design Tokens
Design tokens are implemented as CSS variables and can be accessed in your code. They help maintain consistency and make it easier to update the design system globally.
For example, instead of using a hard-coded color value like #1F2937, you would use the token var(--color-primary).