Design Tokens Pilot
Pilot
Design tokens represent the values used within a design system to construct layouts and components, such as spacing and color. Because the tokens are an abstraction, the underlying value can change in different scenarios without affecting the designer or developer experience. Learn more about Design Tokens.
Token Values
Spacing
CSS Token Name | JavaScript Prop Name | Value | Example |
|---|---|---|---|
--space-0 | space0 | 0px | |
--space-100 | space100 | 4px | |
--space-200 | space200 | 8px | |
--space-300 | space300 | 16px | |
--space-400 | space400 | 24px | |
--space-500 | space500 | 32px | |
--space-600 | space600 | 64px | |
--space-negative-100 | spaceNegative100 | -4px | |
--space-negative-200 | spaceNegative200 | -8px | |
--space-negative-300 | spaceNegative300 | -16px | |
--space-negative-400 | spaceNegative400 | -24px | |
--space-negative-500 | spaceNegative500 | -32px | |
--space-negative-600 | spaceNegative600 | -64px |