All tokensjsp
Every semantic token pages and the JSP tier may use, read from dist/jsp/json/tokens.json. Primitives are deliberately not listed: components never use them.
Reference- Semantic tokens
- 212
- Built by
- npm run tokens
- Live
The Live column is what your browser resolves now, so responsive tokens change as you resize.
- Modes
Switch mode at the foot of the side nav to see the colour values flip.
- Utilities
A token's utility is its name without --ds-: --ds-color-surface-subtle → bg-surface-subtle.
border-width
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| border-width.default | --ds-border-width-default | 1px | … | 1px. Borders on inputs, cards, dividers and buttons. |
| border-width.strong | --ds-border-width-strong | 2px | … | 2px. Emphasised borders, such as a selected item. |
Colour
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| color.surface.page | --ds-color-surface-page | #ffffff | … | The page background behind everything else. |
| color.surface.default | --ds-color-surface-default | #ffffff | … | Cards, panels, inputs and other containers on the page. |
| color.surface.subtle | --ds-color-surface-subtle | #fafafa | … | Slightly set-apart areas: alternate rows, sidebars, code blocks. |
| color.surface.muted | --ds-color-surface-muted | #f5f5f5 | … | Stronger set-apart areas: tags, wells, selected rows. The darkest surface for default and subtle text. |
| color.surface.inverse | --ds-color-surface-inverse | #0a0a0a | … | Dark areas such as a footer or a tooltip. Use only text.inverse, icon.inverse and border.inverse on it. |
| color.surface.disabled | --ds-color-surface-disabled | #f5f5f5 | … | Background of disabled controls. |
| color.text.default | --ds-color-text-default | #0a0a0a | … | Body text and headings on page, default, subtle and muted surfaces. |
| color.text.subtle | --ds-color-text-subtle | #737373 | … | Secondary text: hints, metadata, captions. Meets 4.5:1 on page, default and subtle surfaces; on surface.muted use text.subtle-on-muted. |
| color.text.inverse | --ds-color-text-inverse | #fafafa | … | Text on surface.inverse. |
| color.text.disabled | --ds-color-text-disabled | #a3a3a3 | … | Text in disabled controls. Exempt from contrast minimums, so never use it for content that must be read. |
| color.text.link | --ds-color-text-link | #171717 | … | Inline links. Always underline links, because colour alone does not set them apart from body text. |
| color.text.link-hover | --ds-color-text-link-hover | #000000 | … | Inline links on hover. |
| color.text.subtle-on-muted | --ds-color-text-subtle-on-muted | #525252 | … | Secondary text when it sits on surface.muted, where text.subtle (grey.500) is 4.35:1 and under AA. Into Games TOKEN-CHANGES 1. |
| color.icon.default | --ds-color-icon-default | #0a0a0a | … | Icons that carry meaning, on light surfaces. |
| color.icon.subtle | --ds-color-icon-subtle | #737373 | … | Secondary icons, on light surfaces. Meets 3:1 on every light surface. |
| color.icon.inverse | --ds-color-icon-inverse | #fafafa | … | Icons on surface.inverse. |
| color.icon.disabled | --ds-color-icon-disabled | #a3a3a3 | … | Icons in disabled controls. Exempt from contrast minimums. |
| color.border.default | --ds-color-border-default | #737373 | … | Boundaries a user needs to see to find a control: inputs, checkboxes, cards that act as buttons. Meets 3:1 on every light surface – deliberately darker than shadcn's neutral-200 input border, which is 1.3:1 (WCAG 1.4.11). |
| color.border.subtle | --ds-color-border-subtle | #e5e5e5 | … | Decorative dividers and outlines only. Below 3:1, so never the only way to see a control. |
| color.border.strong | --ds-color-border-strong | #404040 | … | Emphasised boundaries, such as the secondary button outline or a selected item. |
| color.border.inverse | --ds-color-border-inverse | #fafafa | … | Borders on surface.inverse. |
| color.border.disabled | --ds-color-border-disabled | #e5e5e5 | … | Borders of disabled controls. |
| color.action.primary.background | --ds-color-action-primary-background | #171717 | … | Primary action fill, e.g. the main call to action on a screen. |
| color.action.primary.background-hover | --ds-color-action-primary-background-hover | #262626 | … | Primary action fill on hover. |
| color.action.primary.background-active | --ds-color-action-primary-background-active | #404040 | … | Primary action fill while pressed. |
| color.action.primary.text | --ds-color-action-primary-text | #fafafa | … | Label and icon colour on a primary action, in every state except disabled. |
| color.action.primary.border | --ds-color-action-primary-border | #171717 | … | Primary action border. Keep a border in every variant so sizes match. |
| color.action.secondary.background | --ds-color-action-secondary-background | #ffffff | … | Secondary action fill, e.g. an outlined alternative to the primary action. |
| color.action.secondary.background-hover | --ds-color-action-secondary-background-hover | #f5f5f5 | … | Secondary action fill on hover. |
| color.action.secondary.background-active | --ds-color-action-secondary-background-active | #e5e5e5 | … | Secondary action fill while pressed. |
| color.action.secondary.text | --ds-color-action-secondary-text | #0a0a0a | … | Label and icon colour on a secondary action, in every state except disabled. |
| color.action.secondary.border | --ds-color-action-secondary-border | #737373 | … | Secondary action border. Keep a border in every variant so sizes match. |
| color.action.tertiary.background | --ds-color-action-tertiary-background | #f5f5f5 | … | Tertiary action fill, e.g. a low-emphasis filled action. One step darker than surface.muted, so it stays visible on every light surface. |
| color.action.tertiary.background-hover | --ds-color-action-tertiary-background-hover | #e5e5e5 | … | Tertiary action fill on hover. |
| color.action.tertiary.background-active | --ds-color-action-tertiary-background-active | #d4d4d4 | … | Tertiary action fill while pressed. |
| color.action.tertiary.text | --ds-color-action-tertiary-text | #171717 | … | Label and icon colour on a tertiary action, in every state except disabled. |
| color.action.tertiary.border | --ds-color-action-tertiary-border | #f5f5f5 | … | Tertiary action border. Keep a border in every variant so sizes match. |
| color.action.ghost.background | --ds-color-action-ghost-background | rgba(255, 255, 255, 0) | … | Ghost action fill, e.g. toolbar or inline actions with no resting fill. |
| color.action.ghost.background-hover | --ds-color-action-ghost-background-hover | #f5f5f5 | … | Ghost action fill on hover. |
| color.action.ghost.background-active | --ds-color-action-ghost-background-active | #e5e5e5 | … | Ghost action fill while pressed. |
| color.action.ghost.text | --ds-color-action-ghost-text | #171717 | … | Label and icon colour on a ghost action, in every state except disabled. |
| color.action.ghost.border | --ds-color-action-ghost-border | rgba(255, 255, 255, 0) | … | Ghost action border. Keep a border in every variant so sizes match. |
| color.action.destructive.background | --ds-color-action-destructive-background | #c10007 | … | Filled destructive button. Pair with destructive.text-on-background. |
| color.action.destructive.background-hover | --ds-color-action-destructive-background-hover | #9f0712 | … | Filled destructive button on hover. |
| color.action.destructive.text-on-background | --ds-color-action-destructive-text-on-background | #ffffff | … | Label on a filled destructive button. |
| color.action.destructive.surface | --ds-color-action-destructive-surface | #fef2f2 | … | The light tint shadcn draws destructive buttons and badges on (its bg-destructive/10). |
| color.action.destructive.text | --ds-color-action-destructive-text | #c10007 | … | Destructive text and outline, on the page or on destructive.surface. This is what shadcn's --destructive bridges to. Meets 4.5:1 on both (Into Games TOKEN-CHANGES 2). |
| color.status.info.surface | --ds-color-status-info-surface | #dbeafe | … | Background of a info message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.info.border | --ds-color-status-info-border | #1447e6 | … | Border of a info message or banner. Meets 3:1 on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.info.text | --ds-color-status-info-text | #193cb8 | … | Text inside a info message, on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.info.icon | --ds-color-status-info-icon | #1447e6 | … | The icon that marks a info message. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.success.surface | --ds-color-status-success-surface | #dcfce7 | … | Background of a success message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.success.border | --ds-color-status-success-border | #008236 | … | Border of a success message or banner. Meets 3:1 on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.success.text | --ds-color-status-success-text | #016630 | … | Text inside a success message, on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.success.icon | --ds-color-status-success-icon | #008236 | … | The icon that marks a success message. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.warning.surface | --ds-color-status-warning-surface | #fef3c6 | … | Background of a warning message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.warning.border | --ds-color-status-warning-border | #bb4d00 | … | Border of a warning message or banner. Meets 3:1 on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.warning.text | --ds-color-status-warning-text | #973c00 | … | Text inside a warning message, on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.warning.icon | --ds-color-status-warning-icon | #bb4d00 | … | The icon that marks a warning message. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.error.surface | --ds-color-status-error-surface | #ffe2e2 | … | Background of a error message or banner. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.error.border | --ds-color-status-error-border | #c10007 | … | Border of a error message or banner. Meets 3:1 on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.error.text | --ds-color-status-error-text | #c10007 | … | Text inside a error message, on its status surface. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.status.error.icon | --ds-color-status-error-icon | #e7000b | … | The icon that marks a error message. Always show status with an icon and text as well as colour (WCAG 1.4.1). |
| color.focus.ring | --ds-color-focus-ring | #a3a3a3 | … | Focus indicator colour – shadcn's neutral-400 ring, matched exactly (ISS-16). 2.5:1 on the page, under WCAG 1.4.11's 3:1; shadcn draws it as a 3px ring at 50% plus a solid border on focus. |
Radius
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| radius.default | --ds-radius-default | 0.625rem | … | 10px. shadcn's --radius; only read directly by Sonner's toasts. |
| radius.control | --ds-radius-control | 0.5rem | … | 8px. Corners of buttons, inputs and other controls. |
| radius.container | --ds-radius-container | 0.875rem | … | 14px. Corners of cards, panels and dialogs. |
Shadows
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| shadow.raised | --ds-shadow-raised | 0 1px 2px 0 rgb(0 0 0 / 0.05) | … | Surfaces lifted just off the page: cards and panels. What shadcn's Card uses. |
| shadow.overlay | --ds-shadow-overlay | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | … | Floating layers attached to a trigger: popovers, menus, tooltips. |
| shadow.modal | --ds-shadow-modal | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | … | Layers above the whole page: dialogs, sheets and toasts. |
Spacing
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| space.component.3xs | --ds-space-component-3xs | 0.125rem | … | 2px. Hairline gaps, such as between an icon and a badge it overlaps. |
| space.component.2xs | --ds-space-component-2xs | 0.25rem | … | 4px. Tight gaps inside small components. |
| space.component.xs | --ds-space-component-xs | 0.5rem | … | 8px. Gap between an icon and its label; padding in small controls. |
| space.component.sm | --ds-space-component-sm | 0.75rem | … | 12px. Inline padding of small controls; gaps between related items. |
| space.component.md | --ds-space-component-md | 1rem | … | 16px. Default padding and gaps inside components. |
| space.component.lg | --ds-space-component-lg | 1.5rem | … | 24px. Inline padding of large controls; padding in cards and panels. |
| space.component.xl | --ds-space-component-xl | 2rem | … | 32px. Generous padding in large panels and dialogs. |
| space.layout.sm | --ds-space-layout-sm | 1remmd 1.5rem | … | 16px, then 24px from md. Gap between closely related blocks. |
| space.layout.md | --ds-space-layout-md | 1.5remmd 2rem · xl 2.5rem | … | 24px, then 32px from md, 40px from xl. Default gap between blocks in a section. |
| space.layout.lg | --ds-space-layout-lg | 2remmd 3rem · xl 4rem | … | 32px, then 48px from md, 64px from xl. Gap between page sections. |
| space.layout.xl | --ds-space-layout-xl | 3remmd 4rem · xl 6rem | … | 48px, then 64px from md, 96px from xl. Gap around major page regions, such as a hero. |
| space.control-x.xs | --ds-space-control-x-xs | 0.75rem | … | 12px at every breakpoint. Inline (left and right) padding of a control. Follows the control height step: 32px high → 12px, 40 → 20, 48 → 24, 56 → 32. Never add vertical padding; content is centred in size.control. |
| space.control-x.sm | --ds-space-control-x-sm | 0.75remxl 1.25rem | … | 12px, then 20px from xl. Inline (left and right) padding of a control. Follows the control height step: 32px high → 12px, 40 → 20, 48 → 24, 56 → 32. Never add vertical padding; content is centred in size.control. |
| space.control-x.md | --ds-space-control-x-md | 0.75remsm 1.25rem · xl 1.5rem | … | 12px, then 20px from sm, 24px from xl. Inline (left and right) padding of a control. Follows the control height step: 32px high → 12px, 40 → 20, 48 → 24, 56 → 32. Never add vertical padding; content is centred in size.control. |
| space.control-x.lg | --ds-space-control-x-lg | 0.75remxs 1.25rem · sm 1.5rem · xl 2rem | … | 12px, then 20px from xs, 24px from sm, 32px from xl. Inline (left and right) padding of a control. Follows the control height step: 32px high → 12px, 40 → 20, 48 → 24, 56 → 32. Never add vertical padding; content is centred in size.control. |
Fonts
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| font.family.sans | --ds-font-family-sans | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Typeface for all interface and body text. |
| font.family.mono | --ds-font-family-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace | … | Typeface for code and tabular figures. |
Focus
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| focus.ring-width | --ds-focus-ring-width | 2px | … | 2px. Width of the focus outline. Use with color.focus.ring and focus.ring-offset on :focus-visible. |
| focus.ring-offset | --ds-focus-ring-offset | 0.125rem | … | 2px. Gap between a control and its focus outline, so the ring sits on the surface behind. |
Layout
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| layout.gutter.sm | --ds-layout-gutter-sm | 1rem | … | 16px. Grid gutter and page side padding on small screens or in dense layouts. |
| layout.gutter.md | --ds-layout-gutter-md | 1.5rem | … | 24px. Default grid gutter and page side padding. |
| layout.gutter.lg | --ds-layout-gutter-lg | 2rem | … | 32px. Grid gutter and page side padding in spacious layouts on large screens. |
| layout.container.xs | --ds-layout-container-xs | 23rem | … | 368px. Content width from the xs breakpoint (400px). |
| layout.container.sm | --ds-layout-container-sm | 33rem | … | 528px. Content width from the sm breakpoint (560px). |
| layout.container.md | --ds-layout-container-md | 45rem | … | 720px. Content width from the md breakpoint (768px). |
| layout.container.lg | --ds-layout-container-lg | 60rem | … | 960px. Content width from the lg breakpoint (1000px). |
| layout.container.xl | --ds-layout-container-xl | 80rem | … | 1280px. Content width from the xl breakpoint (1440px). |
| layout.container.xxl | --ds-layout-container-xxl | 90rem | … | 1440px. Content width from the xxl breakpoint (1800px). |
| layout.container.prose | --ds-layout-container-prose | 40rem | … | 640px. Maximum width for running text, about 70 characters per line. |
| layout.container.form | --ds-layout-container-form | 35rem | … | 560px. Maximum width for single-column forms. |
Sizes
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| size.control.xs | --ds-size-control-xs | 2rem | … | 32px at every breakpoint. Fixed height of a control, such as a button. Steps down on smaller screens; never below 32px, above the 24px target size minimum (WCAG 2.5.8). Pair with the same size of space.control-x. |
| size.control.sm | --ds-size-control-sm | 2remxl 2.5rem | … | 32px, then 40px from xl. Fixed height of a control, such as a button. Steps down on smaller screens; never below 32px, above the 24px target size minimum (WCAG 2.5.8). Pair with the same size of space.control-x. |
| size.control.md | --ds-size-control-md | 2remsm 2.5rem · xl 3rem | … | 32px, then 40px from sm, 48px from xl. Fixed height of a control, such as a button. Steps down on smaller screens; never below 32px, above the 24px target size minimum (WCAG 2.5.8). Pair with the same size of space.control-x. |
| size.control.lg | --ds-size-control-lg | 2remxs 2.5rem · sm 3rem · xl 3.5rem | … | 32px, then 40px from xs, 48px from sm, 56px from xl. Fixed height of a control, such as a button. Steps down on smaller screens; never below 32px, above the 24px target size minimum (WCAG 2.5.8). Pair with the same size of space.control-x. |
| size.icon.xs | --ds-size-icon-xs | 0.75rem | … | 12px. Icons beside overline or 12px text. |
| size.icon.sm | --ds-size-icon-sm | 1rem | … | 16px. Icons beside 14–16px text and in small controls. |
| size.icon.md | --ds-size-icon-md | 1.25rem | … | 20px. Default icon size in controls. |
| size.icon.lg | --ds-size-icon-lg | 1.5rem | … | 24px. Icons in large controls and standalone icons. |
| size.icon.xl | --ds-size-icon-xl | 2rem | … | 32px. Feature and empty-state icons. |
Text styles
| Token | CSS variable | Value | Live | When to use it |
|---|---|---|---|---|
| text.display.xl.font-family | --ds-text-display-xl-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.xl text style. |
| text.display.xl.font-size | --ds-text-display-xl-font-size | 2.5remxs 3rem · sm 3.5rem · md 4.5rem · lg 6rem · xl 7.5rem · xxl 10rem | … | Font size for display.xl: 40px, then 48px from xs, 56px from sm, 72px from md, 96px from lg, 120px from xl, 160px from xxl. |
| text.display.xl.line-height | --ds-text-display-xl-line-height | 3remxs 3.5rem · sm 4rem · md 5rem · lg 6rem · xl 7.5rem · xxl 10rem | … | Line height for display.xl: 48px, then 56px from xs, 64px from sm, 80px from md, 96px from lg, 120px from xl, 160px from xxl. |
| text.display.xl.font-weight | --ds-text-display-xl-font-weight | 500 | … | Font weight for the display.xl text style. |
| text.display.xl.letter-spacing | --ds-text-display-xl-letter-spacing | -0.0625remsm -0.125rem · md -0.1875rem · lg -0.25rem · xl -0.3125rem · xxl -0.375rem | … | Letter spacing for display.xl: -1px, then -2px from sm, -3px from md, -4px from lg, -5px from xl, -6px from xxl. |
| text.display.lg.font-family | --ds-text-display-lg-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.lg text style. |
| text.display.lg.font-size | --ds-text-display-lg-font-size | 2.25remxs 2.5rem · sm 3rem · md 4rem · lg 5rem · xl 6rem · xxl 7.5rem | … | Font size for display.lg: 36px, then 40px from xs, 48px from sm, 64px from md, 80px from lg, 96px from xl, 120px from xxl. |
| text.display.lg.line-height | --ds-text-display-lg-line-height | 2.75remxs 3rem · sm 3.5rem · md 4.5rem · lg 5rem · xl 6rem · xxl 7.5rem | … | Line height for display.lg: 44px, then 48px from xs, 56px from sm, 72px from md, 80px from lg, 96px from xl, 120px from xxl. |
| text.display.lg.font-weight | --ds-text-display-lg-font-weight | 500 | … | Font weight for the display.lg text style. |
| text.display.lg.letter-spacing | --ds-text-display-lg-letter-spacing | -0.0625remmd -0.125rem · lg -0.1875rem · xl -0.25rem · xxl -0.3125rem | … | Letter spacing for display.lg: -1px, then -2px from md, -3px from lg, -4px from xl, -5px from xxl. |
| text.display.md.font-family | --ds-text-display-md-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.md text style. |
| text.display.md.font-size | --ds-text-display-md-font-size | 2remxs 2.25rem · sm 2.75rem · md 3.5rem · lg 4rem · xl 5rem · xxl 6rem | … | Font size for display.md: 32px, then 36px from xs, 44px from sm, 56px from md, 64px from lg, 80px from xl, 96px from xxl. |
| text.display.md.line-height | --ds-text-display-md-line-height | 2.5remxs 2.75rem · sm 3.25rem · md 4rem · lg 4.5rem · xl 5rem · xxl 6rem | … | Line height for display.md: 40px, then 44px from xs, 52px from sm, 64px from md, 72px from lg, 80px from xl, 96px from xxl. |
| text.display.md.font-weight | --ds-text-display-md-font-weight | 500 | … | Font weight for the display.md text style. |
| text.display.md.letter-spacing | --ds-text-display-md-letter-spacing | -0.0625remmd -0.125rem · xl -0.1875rem · xxl -0.25rem | … | Letter spacing for display.md: -1px, then -2px from md, -3px from xl, -4px from xxl. |
| text.display.sm.font-family | --ds-text-display-sm-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.sm text style. |
| text.display.sm.font-size | --ds-text-display-sm-font-size | 1.75remxs 2rem · sm 2.25rem · md 2.5rem · lg 3rem · xl 3.5rem · xxl 4rem | … | Font size for display.sm: 28px, then 32px from xs, 36px from sm, 40px from md, 48px from lg, 56px from xl, 64px from xxl. |
| text.display.sm.line-height | --ds-text-display-sm-line-height | 2remxs 2.25rem · sm 2.5rem · md 3rem · lg 3.5rem · xl 4rem · xxl 4.5rem | … | Line height for display.sm: 32px, then 36px from xs, 40px from sm, 48px from md, 56px from lg, 64px from xl, 72px from xxl. |
| text.display.sm.font-weight | --ds-text-display-sm-font-weight | 500 | … | Font weight for the display.sm text style. |
| text.display.sm.letter-spacing | --ds-text-display-sm-letter-spacing | 0remlg -0.0625rem | … | Letter spacing for display.sm: 0px, then -1px from lg. |
| text.display.xs.font-family | --ds-text-display-xs-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.xs text style. |
| text.display.xs.font-size | --ds-text-display-xs-font-size | 1.5remxs 1.75rem · sm 2rem · md 2.25rem · lg 2.5rem · xl 2.75rem · xxl 3rem | … | Font size for display.xs: 24px, then 28px from xs, 32px from sm, 36px from md, 40px from lg, 44px from xl, 48px from xxl. |
| text.display.xs.line-height | --ds-text-display-xs-line-height | 2remxs 2.25rem · sm 2.5rem · md 2.75rem · lg 3rem · xl 3.25rem · xxl 3.5rem | … | Line height for display.xs: 32px, then 36px from xs, 40px from sm, 44px from md, 48px from lg, 52px from xl, 56px from xxl. |
| text.display.xs.font-weight | --ds-text-display-xs-font-weight | 500 | … | Font weight for the display.xs text style. |
| text.display.xs.letter-spacing | --ds-text-display-xs-letter-spacing | 0remlg -0.0625rem | … | Letter spacing for display.xs: 0px, then -1px from lg. |
| text.display.xxs.font-family | --ds-text-display-xxs-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the display.xxs text style. |
| text.display.xxs.font-size | --ds-text-display-xxs-font-size | 1.25remxs 1.5rem · md 1.75rem · lg 2rem · xl 2.25rem · xxl 2.5rem | … | Font size for display.xxs: 20px, then 24px from xs, 28px from md, 32px from lg, 36px from xl, 40px from xxl. |
| text.display.xxs.line-height | --ds-text-display-xxs-line-height | 1.75remxs 2rem · md 2.25rem · lg 2.5rem · xl 2.75rem · xxl 3rem | … | Line height for display.xxs: 28px, then 32px from xs, 36px from md, 40px from lg, 44px from xl, 48px from xxl. |
| text.display.xxs.font-weight | --ds-text-display-xxs-font-weight | 500 | … | Font weight for the display.xxs text style. |
| text.display.xxs.letter-spacing | --ds-text-display-xxs-letter-spacing | 0rem | … | Letter spacing for display.xxs: 0px at every breakpoint. |
| text.heading.1.font-family | --ds-text-heading-1-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.1 text style. |
| text.heading.1.font-size | --ds-text-heading-1-font-size | 1.625remmd 1.75rem · xl 2rem | … | Font size for heading.1: 26px, then 28px from md, 32px from xl. |
| text.heading.1.line-height | --ds-text-heading-1-line-height | 2remmd 2.25rem · xl 2.5rem | … | Line height for heading.1: 32px, then 36px from md, 40px from xl. |
| text.heading.1.font-weight | --ds-text-heading-1-font-weight | 500 | … | Font weight for the heading.1 text style. |
| text.heading.1.letter-spacing | --ds-text-heading-1-letter-spacing | 0rem | … | Letter spacing for heading.1: 0px at every breakpoint. |
| text.heading.2.font-family | --ds-text-heading-2-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.2 text style. |
| text.heading.2.font-size | --ds-text-heading-2-font-size | 1.375remmd 1.5rem · xl 1.75rem | … | Font size for heading.2: 22px, then 24px from md, 28px from xl. |
| text.heading.2.line-height | --ds-text-heading-2-line-height | 1.75remmd 2rem · xl 2.25rem | … | Line height for heading.2: 28px, then 32px from md, 36px from xl. |
| text.heading.2.font-weight | --ds-text-heading-2-font-weight | 500 | … | Font weight for the heading.2 text style. |
| text.heading.2.letter-spacing | --ds-text-heading-2-letter-spacing | 0rem | … | Letter spacing for heading.2: 0px at every breakpoint. |
| text.heading.3.font-family | --ds-text-heading-3-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.3 text style. |
| text.heading.3.font-size | --ds-text-heading-3-font-size | 1.125remmd 1.25rem · xl 1.5rem | … | Font size for heading.3: 18px, then 20px from md, 24px from xl. |
| text.heading.3.line-height | --ds-text-heading-3-line-height | 1.5remmd 1.75rem · xl 2rem | … | Line height for heading.3: 24px, then 28px from md, 32px from xl. |
| text.heading.3.font-weight | --ds-text-heading-3-font-weight | 500 | … | Font weight for the heading.3 text style. |
| text.heading.3.letter-spacing | --ds-text-heading-3-letter-spacing | 0rem | … | Letter spacing for heading.3: 0px at every breakpoint. |
| text.heading.4.font-family | --ds-text-heading-4-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.4 text style. |
| text.heading.4.font-size | --ds-text-heading-4-font-size | 1remmd 1.125rem · xl 1.25rem | … | Font size for heading.4: 16px, then 18px from md, 20px from xl. |
| text.heading.4.line-height | --ds-text-heading-4-line-height | 1.5remxl 1.75rem | … | Line height for heading.4: 24px, then 28px from xl. |
| text.heading.4.font-weight | --ds-text-heading-4-font-weight | 500 | … | Font weight for the heading.4 text style. |
| text.heading.4.letter-spacing | --ds-text-heading-4-letter-spacing | 0rem | … | Letter spacing for heading.4: 0px at every breakpoint. |
| text.heading.5.font-family | --ds-text-heading-5-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.5 text style. |
| text.heading.5.font-size | --ds-text-heading-5-font-size | 1remxl 1.125rem | … | Font size for heading.5: 16px, then 18px from xl. |
| text.heading.5.line-height | --ds-text-heading-5-line-height | 1.5rem | … | Line height for heading.5: 24px at every breakpoint. |
| text.heading.5.font-weight | --ds-text-heading-5-font-weight | 500 | … | Font weight for the heading.5 text style. |
| text.heading.5.letter-spacing | --ds-text-heading-5-letter-spacing | 0rem | … | Letter spacing for heading.5: 0px at every breakpoint. |
| text.heading.6.font-family | --ds-text-heading-6-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the heading.6 text style. |
| text.heading.6.font-size | --ds-text-heading-6-font-size | 0.875rem | … | Font size for heading.6: 14px at every breakpoint. |
| text.heading.6.line-height | --ds-text-heading-6-line-height | 1.25rem | … | Line height for heading.6: 20px at every breakpoint. |
| text.heading.6.font-weight | --ds-text-heading-6-font-weight | 500 | … | Font weight for the heading.6 text style. |
| text.heading.6.letter-spacing | --ds-text-heading-6-letter-spacing | 0.03125remlg 0.0625rem | … | Letter spacing for heading.6: 0.5px, then 1px from lg. |
| text.body.lead.font-family | --ds-text-body-lead-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the body.lead text style. |
| text.body.lead.font-size | --ds-text-body-lead-font-size | 1.125remmd 1.25rem | … | Font size for body.lead: 18px, then 20px from md. |
| text.body.lead.line-height | --ds-text-body-lead-line-height | 1.625remmd 1.75rem | … | Line height for body.lead: 26px, then 28px from md. |
| text.body.lead.font-weight | --ds-text-body-lead-font-weight | 400 | … | Font weight for the body.lead text style. |
| text.body.lead.letter-spacing | --ds-text-body-lead-letter-spacing | 0rem | … | Letter spacing for body.lead: 0px at every breakpoint. |
| text.body.lg.font-family | --ds-text-body-lg-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the body.lg text style. |
| text.body.lg.font-size | --ds-text-body-lg-font-size | 1remmd 1.125rem | … | Font size for body.lg: 16px, then 18px from md. |
| text.body.lg.line-height | --ds-text-body-lg-line-height | 1.5remmd 1.75rem | … | Line height for body.lg: 24px, then 28px from md. |
| text.body.lg.font-weight | --ds-text-body-lg-font-weight | 400 | … | Font weight for the body.lg text style. |
| text.body.lg.letter-spacing | --ds-text-body-lg-letter-spacing | 0rem | … | Letter spacing for body.lg: 0px at every breakpoint. |
| text.body.md.font-family | --ds-text-body-md-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the body.md text style. |
| text.body.md.font-size | --ds-text-body-md-font-size | 1rem | … | Font size for body.md: 16px at every breakpoint. |
| text.body.md.line-height | --ds-text-body-md-line-height | 1.375rem | … | Line height for body.md: 22px at every breakpoint. |
| text.body.md.font-weight | --ds-text-body-md-font-weight | 400 | … | Font weight for the body.md text style. |
| text.body.md.letter-spacing | --ds-text-body-md-letter-spacing | 0rem | … | Letter spacing for body.md: 0px at every breakpoint. |
| text.body.sm.font-family | --ds-text-body-sm-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the body.sm text style. |
| text.body.sm.font-size | --ds-text-body-sm-font-size | 0.875rem | … | Font size for body.sm: 14px at every breakpoint. |
| text.body.sm.line-height | --ds-text-body-sm-line-height | 1.25rem | … | Line height for body.sm: 20px at every breakpoint. |
| text.body.sm.font-weight | --ds-text-body-sm-font-weight | 400 | … | Font weight for the body.sm text style. |
| text.body.sm.letter-spacing | --ds-text-body-sm-letter-spacing | 0rem | … | Letter spacing for body.sm: 0px at every breakpoint. |
| text.caption.font-family | --ds-text-caption-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the caption text style. |
| text.caption.font-size | --ds-text-caption-font-size | 0.75rem | … | Font size for caption: 12px at every breakpoint. |
| text.caption.line-height | --ds-text-caption-line-height | 1rem | … | Line height for caption: 16px at every breakpoint. |
| text.caption.font-weight | --ds-text-caption-font-weight | 400 | … | Font weight for the caption text style. |
| text.caption.letter-spacing | --ds-text-caption-letter-spacing | 0rem | … | Letter spacing for caption: 0px at every breakpoint. |
| text.label.font-family | --ds-text-label-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the label text style. |
| text.label.font-size | --ds-text-label-font-size | 1rem | … | Font size for label: 16px at every breakpoint. |
| text.label.line-height | --ds-text-label-line-height | 1.375rem | … | Line height for label: 22px at every breakpoint. |
| text.label.font-weight | --ds-text-label-font-weight | 500 | … | Font weight for the label text style. |
| text.label.letter-spacing | --ds-text-label-letter-spacing | 0rem | … | Letter spacing for label: 0px at every breakpoint. |
| text.overline.font-family | --ds-text-overline-font-family | 'Geist Sans', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | … | Font family for the overline text style. |
| text.overline.font-size | --ds-text-overline-font-size | 0.75rem | … | Font size for overline: 12px at every breakpoint. |
| text.overline.line-height | --ds-text-overline-line-height | 1rem | … | Line height for overline: 16px at every breakpoint. |
| text.overline.font-weight | --ds-text-overline-font-weight | 600 | … | Font weight for the overline text style. |
| text.overline.letter-spacing | --ds-text-overline-letter-spacing | 0.0625rem | … | Letter spacing for overline: 1px at every breakpoint. |
| text.overline.text-transform | --ds-text-overline-text-transform | uppercase | … | Text case for the overline text style. |
| text.code.font-family | --ds-text-code-font-family | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace | … | Font family for the code text style. |
| text.code.font-size | --ds-text-code-font-size | 0.875rem | … | Font size for code: 14px at every breakpoint. |
| text.code.line-height | --ds-text-code-line-height | 1.25rem | … | Line height for code: 20px at every breakpoint. |
| text.code.font-weight | --ds-text-code-font-weight | 400 | … | Font weight for the code text style. |
| text.code.letter-spacing | --ds-text-code-letter-spacing | 0rem | … | Letter spacing for code: 0px at every breakpoint. |