Token | Value | Description | |
|---|---|---|---|
Umrel Design System | --umrel-font-family-title | Hellix, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | — |
Umrel Design System | --umrel-font-family-body | Inter -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | — |
Aa | --umrel-font-size-50 | 10px | — |
Aa | --umrel-font-size-75 | 12px | — |
Aa | --umrel-font-size-100 | 14px | — |
Aa | --umrel-font-size-125 | 16px | — |
Aa | --umrel-font-size-150 | 18px | — |
Aa | --umrel-font-size-175 | 20px | — |
Aa | --umrel-font-size-200 | 24px | — |
Aa | --umrel-font-size-225 | 26px | — |
Aa | --umrel-font-size-250 | 28px | — |
Aa | --umrel-font-size-275 | 32px | — |
Aa | --umrel-font-size-300 | 36px | — |
Aa | --umrel-font-size-325 | 40px | — |
Aa | --umrel-font-size-350 | 42px | — |
Aa | --umrel-font-size-375 | 48px | — |
Aa | --umrel-font-size-400 | 56px | — |
Aa | --umrel-font-size-425 | 64px | — |
Aa | --umrel-font-size-450 | 72px | — |
User Experience | --umrel-font-weight-light | 300 | — |
User Experience | --umrel-font-weight-regular | 400 | — |
User Experience | --umrel-font-weight-medium | 500 | — |
User Experience | --umrel-font-weight-semibold | 600 | — |
User Experience | --umrel-font-weight-bold | 700 | — |
User Experience | --umrel-font-weight-heavy | 800 | — |
User Experience | --umrel-font-weight-black | 900 | — |
Crafting Interfaces | --umrel-font-line-height-100 | 1px | — |
Crafting Interfaces | --umrel-font-line-height-200 | 1.1px | — |
Crafting Interfaces | --umrel-font-line-height-300 | 1.2px | — |
Crafting Interfaces | --umrel-font-line-height-350 | 1.25px | — |
Crafting Interfaces | --umrel-font-line-height-400 | 1.3px | — |
Crafting Interfaces | --umrel-font-line-height-500 | 1.4px | — |
Crafting Interfaces | --umrel-font-line-height-600 | 1.5px | — |
Design Engineering | --umrel-font-letter-spacing-densest | -0.48px | — |
Design Engineering | --umrel-font-letter-spacing-denser | -0.28px | — |
Design Engineering | --umrel-font-letter-spacing-dense | -0.14px | — |
Design Engineering | --umrel-font-letter-spacing-normal | 0px | — |
Design Engineering | --umrel-font-letter-spacing-wide | 0.14px | — |
Design Engineering | --umrel-font-letter-spacing-wider | 0.28px | — |
Design Engineering | --umrel-font-letter-spacing-widest | 0.48px | — |
Font
Font global tokens are used for typography and font styling.