Metal
Tokens
Design Tokens
Design tokens are a central location to store design related information such as colors, fonts, sizes and transitions.
Space
Core tokens for UI spacing. This scale is also used in the `Stack` as well as other components.
| Example | Description | Token |
|---|---|---|
4rem | Space XXL 64px | var(--space-xxl) |
2rem | Space XL 32px | var(--space-xl) |
1.5rem | Space L 24px | var(--space-l) |
1rem | Space M 16px | var(--space-m) |
0.5rem | Space S 8px | var(--space-s) |
0.25rem | Space XS 4px | var(--space-xs) |
1rem | Space Default Default space of m – 16px | var(--space-default) |
0rem | Space None Removes any existing space | var(--space-none) |
0.5rem | Space Control Inline undefined | var(--space-control-inline) |
Radius
| Example | Description | Token |
|---|---|---|
50% | Radius Circle | var(--radius-circle) |
9999px | Radius Full | var(--radius-full) |
6px | Radius L | var(--radius-l) |
4px | Radius M | var(--radius-m) |
3px | Radius S | var(--radius-s) |
0.02em | Radius Sharp | var(--radius-sharp) |
4px | Radius Default | var(--radius-default) |
3px | Radius Control undefined | var(--radius-control) |
Avatar
Size Tokens
| Example | Description | Token |
|---|---|---|
 2.25rem | Size Avatar L 36px | var(--size-avatar-l) |
1.5rem | Size Avatar M Default avatar size – 24px | var(--size-avatar-m) |
1.5rem | Size Avatar Default Default avatar size – 24px | var(--size-avatar-default) |
Icon
Size Tokens
| Example | Description | Token |
|---|---|---|
1.5rem | Size Icon Xl 24px | var(--size-icon-xl) |
1.25rem | Size Icon L 20px | var(--size-icon-l) |
1rem | Size Icon M 16px | var(--size-icon-m) |
0.75rem | Size Icon S 12px | var(--size-icon-s) |
1rem | Size Icon Default Default icon size – 16px | var(--size-icon-default) |
Typography
Standardized font scale, used in components like Text, Heading, Code and others.
| Example | Description | Token |
|---|---|---|
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.2.25rem | Font Size Xxxl Font Size XXXL - 36px | var(--font-size-xxxl) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.1.5rem | Font Size Xxl Font Size XXL - 24px | var(--font-size-xxl) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.1.25rem | Font Size Xl Font Size XL - 20px | var(--font-size-xl) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.1rem | Font Size L Font Size L - 16px | var(--font-size-l) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.0.875rem | Font Size M Font Size M - 14px | var(--font-size-m) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.0.8125rem | Font Size S Font Size S (Default) – 13px | var(--font-size-s) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.0.75rem | Font Size Xs Font Size XS - 12px | var(--font-size-xs) |
At Foundry, our institutional expertise, capital, industry relationships, and market intelligence empower participants within the crypto ecosystem.0.8125rem | Font Size Default Defaults to Font Size Medium - 13px | var(--font-size-default) |