Token | Value | Description | |
|---|---|---|---|
Vortex Design System | --vortex-font-family-heading | Hellix, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | — |
Vortex Design System | --vortex-font-family-body | Inter -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | — |
Aa | --vortex-font-size-50 | 0.625rem | — |
Aa | --vortex-font-size-75 | 0.75rem | — |
Aa | --vortex-font-size-100 | 0.875rem | — |
Aa | --vortex-font-size-125 | 1rem | — |
Aa | --vortex-font-size-150 | 1.125rem | — |
Aa | --vortex-font-size-175 | 1.25rem | — |
Aa | --vortex-font-size-200 | 1.5rem | — |
Aa | --vortex-font-size-225 | 1.625rem | — |
Aa | --vortex-font-size-250 | 1.75rem | — |
Aa | --vortex-font-size-275 | 2rem | — |
Aa | --vortex-font-size-300 | 2.25rem | — |
Aa | --vortex-font-size-325 | 2.5rem | — |
Aa | --vortex-font-size-350 | 2.625rem | — |
Aa | --vortex-font-size-375 | 3rem | — |
Aa | --vortex-font-size-400 | 3.5rem | — |
Aa | --vortex-font-size-425 | 4rem | — |
Aa | --vortex-font-size-450 | 4.5rem | — |
User Experience | --vortex-font-weight-light | 300 | — |
User Experience | --vortex-font-weight-regular | 400 | — |
User Experience | --vortex-font-weight-medium | 500 | — |
User Experience | --vortex-font-weight-semibold | 600 | — |
User Experience | --vortex-font-weight-bold | 700 | — |
User Experience | --vortex-font-weight-heavy | 800 | — |
User Experience | --vortex-font-weight-black | 900 | — |
Crafting Interfaces | --vortex-font-line-height-100 | 1 | — |
Crafting Interfaces | --vortex-font-line-height-200 | 1.1 | — |
Crafting Interfaces | --vortex-font-line-height-300 | 1.2 | — |
Crafting Interfaces | --vortex-font-line-height-350 | 1.25 | — |
Crafting Interfaces | --vortex-font-line-height-400 | 1.3 | — |
Crafting Interfaces | --vortex-font-line-height-500 | 1.4 | — |
Crafting Interfaces | --vortex-font-line-height-600 | 1.5 | — |
Design Engineering | --vortex-font-letter-spacing-densest | -0.03rem | — |
Design Engineering | --vortex-font-letter-spacing-denser | -0.0175rem | — |
Design Engineering | --vortex-font-letter-spacing-dense | -0.00875rem | — |
Design Engineering | --vortex-font-letter-spacing-normal | 0px | — |
Design Engineering | --vortex-font-letter-spacing-wide | 0.00875rem | — |
Design Engineering | --vortex-font-letter-spacing-wider | 0.0175rem | — |
Design Engineering | --vortex-font-letter-spacing-widest | 0.03rem | — |
Font
Font global tokens are used for typography and font styling.