Tokens
A list of available design tokens in EDS.Example | Token key | Token value |
|---|---|---|
| #FFF | ||
| #212121 | ||
| #EDEDED | ||
| #E4E4E4 | ||
| #EDEDED | ||
| #FAFAFA | ||
| #D9D9D9 | ||
| #FFF | ||
| #FAFAFA | ||
| #D5F2BB | ||
| #306317 | ||
| #D6E4FF | ||
| #1D39C4 | ||
| #FAEDB5 | ||
| #D89614 | ||
| #FAC8C3 | ||
| #C0262E | ||
| #A61D24 | ||
| #791A1F |
Example | Token key | Token value |
|---|---|---|
| #737373 | ||
| #212121 | ||
| #FFF | ||
| #9E9E9E | ||
| #3C8618 | ||
| #1D39C4 | ||
| #AD7914 | ||
| #C0262E |
Example | Token key | Token value |
|---|---|---|
| #E4E4E4 | ||
| #BDBDBD | ||
| #FFFFFF | ||
| #E4E4E4 | ||
| #BDBDBD | ||
| #C0262E | ||
| #6ABE39 | ||
| #597EF7 | ||
| #E8B339 | ||
| #E84749 |
Example | Token key | Token value |
|---|---|---|
| 1px | ||
| 2px |
Example | Token key | Token value | Pixel value* |
|---|---|---|---|
| 0 | 0px | ||
| auto | NaNpx | ||
| 0.25rem | 4px | ||
| 0.5rem | 8px | ||
| 0.75rem | 12px | ||
| 1rem | 16px | ||
| 1.5rem | 24px | ||
| 2rem | 32px | ||
| 2.5rem | 40px |
Example | Token key | Token value |
|---|---|---|
| none | ||
| 0px 1px 2px rgba(0, 0, 0, 0.2) | ||
| 0px 2px 4px rgba(0, 0, 0, 0.2) | ||
| 0px 2px 8px rgba(0, 0, 0, 0.2) | ||
| 0px 4px 16px rgba(0, 0, 0, 0.2) | ||
| -8px 8px 32px rgba(0, 0, 0, 0.2) |
Example | Token key | Token value |
|---|---|---|
| 0px | ||
| 2px | ||
| 4px | ||
| 8px | ||
| 16px | ||
| 9999px |
Example | Token key | Token value |
|---|---|---|
| 16px | ||
| 20px | ||
| 24px | ||
| 32px |
Example | Token key | Token value |
|---|---|---|
| xxsmall | 0.625rem | |
| xsmall | 0.75rem | |
| small | 0.875rem | |
| standard | 1rem | |
| medium | 1.25rem | |
| large | 2.5rem | |
| xlarge | 3rem | |
| xxlarge | 3.4375rem |
Example | Token key | Token value |
|---|---|---|
Heading 1 | 2.25rem | |
Heading 2 | 1.75rem | |
Heading 3 | 1.5rem | |
Heading 4 | 1.25rem | |
Heading 5 | 1.125rem | |
Heading 6 | 1rem |
Example | Token key | Token value |
|---|---|---|
| regular | 400 | |
| medium | 500 | |
| bold | 700 |
Example | Token key | Token value |
|---|---|---|
| nospace | 1 | |
| tight | 1.25 | |
| loose | 1.5 |
Example | Token key | Token value |
|---|---|---|
| sans | system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" | |
| mono | ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace |
Token key | Token value |
|---|---|
| xsmall | 0px |
| small | 576px |
| medium | 768px |
| large | 992px |
| xlarge | 1200px |
Media query type | Token key | Token value |
|---|---|---|
| min | xsmall | @media(min-width: 0px) |
| min | small | @media(min-width: 576px) |
| min | medium | @media(min-width: 768px) |
| min | large | @media(min-width: 992px) |
| min | xlarge | @media(min-width: 1200px) |
Media query type | Token key | Token value |
|---|---|---|
| max | xsmall | @media(max-width: 575px) |
| max | small | @media(max-width: 767px) |
| max | medium | @media(max-width: 991px) |
| max | large | @media(max-width: 1199px) |