Tokens
Every token the system declares, with its value in each theme. Components read the semantic tier; only chart code reads a primitive, and it says why.
The tier rule is a claim about direction, and the graph is where you check it. Open the visualiser on any row to see what a token resolves through and, more to the point, which roles and components consume it.
Colour
428 tokens. A blank cell means the token keeps the value it has in the first theme. These are the values the system ships with; the Configure panel previews an override without changing them.
| Token | Light | Dark | Usage |
|---|---|---|---|
--dt-color-white | oklch(1 0 0) | — | |
--dt-color-black | oklch(0 0 0) | — | |
--dt-color-transparent | oklch(0 0 0 / 0) | — | |
--dt-color-neutral-050 | oklch(0.979 0 0) | — | |
--dt-color-neutral-100 | oklch(0.958 0 0) | — | |
--dt-color-neutral-200 | oklch(0.928 0 0) | — | |
--dt-color-neutral-300 | oklch(0.870 0 0) | — | |
--dt-color-neutral-400 | oklch(0.715 0 0) | — | |
--dt-color-neutral-500 | oklch(0.556 0 0) | — | |
--dt-color-neutral-600 | oklch(0.464 0 0) | — | |
--dt-color-neutral-700 | oklch(0.371 0 0) | — | |
--dt-color-neutral-800 | oklch(0.285 0 0) | — | |
--dt-color-neutral-900 | oklch(0.191 0 0) | — | |
--dt-color-neutral-950 | oklch(0.168 0 0) | — | |
--dt-color-primary-050 | oklch(0.971 0.016 45) | — | |
--dt-color-primary-100 | oklch(0.939 0.038 45) | — | |
--dt-color-primary-200 | oklch(0.892 0.070 45) | — | |
--dt-color-primary-300 | oklch(0.820 0.112 45) | — | |
--dt-color-primary-400 | oklch(0.735 0.148 45) | — | |
--dt-color-primary-500 | oklch(0.660 0.166 45) | — | |
--dt-color-primary-600 | oklch(0.585 0.162 45) | — | |
--dt-color-primary-700 | oklch(0.505 0.140 45) | — | |
--dt-color-primary-800 | oklch(0.430 0.117 45) | — | |
--dt-color-primary-900 | oklch(0.372 0.097 45) | — | |
--dt-color-primary-950 | oklch(0.262 0.070 45) | — | |
--dt-color-secondary-050 | oklch(0.977 0.014 305) | — | |
--dt-color-secondary-100 | oklch(0.946 0.033 305) | — | |
--dt-color-secondary-200 | oklch(0.902 0.063 305) | — | |
--dt-color-secondary-300 | oklch(0.827 0.110 305) | — | |
--dt-color-secondary-400 | oklch(0.740 0.163 305) | — | |
--dt-color-secondary-500 | oklch(0.667 0.200 305) | — | |
--dt-color-secondary-600 | oklch(0.594 0.216 305) | — | |
--dt-color-secondary-700 | oklch(0.518 0.190 305) | — | |
--dt-color-secondary-800 | oklch(0.444 0.158 305) | — | |
--dt-color-secondary-900 | oklch(0.381 0.128 305) | — | |
--dt-color-secondary-950 | oklch(0.279 0.095 305) | — | |
--dt-color-green-050 | oklch(0.972 0.021 150) | — | |
--dt-color-green-100 | oklch(0.940 0.045 150) | — | |
--dt-color-green-200 | oklch(0.885 0.077 150) | — | |
--dt-color-green-300 | oklch(0.806 0.116 150) | — | |
--dt-color-green-400 | oklch(0.714 0.146 150) | — | |
--dt-color-green-500 | oklch(0.627 0.149 150) | — | |
--dt-color-green-600 | oklch(0.535 0.128 150) | — | |
--dt-color-green-700 | oklch(0.447 0.106 150) | — | |
--dt-color-green-800 | oklch(0.373 0.086 150) | — | |
--dt-color-green-900 | oklch(0.315 0.070 150) | — | |
--dt-color-green-950 | oklch(0.228 0.052 150) | — | |
--dt-color-amber-050 | oklch(0.980 0.024 75) | — | |
--dt-color-amber-100 | oklch(0.953 0.055 75) | — | |
--dt-color-amber-200 | oklch(0.903 0.104 75) | — | |
--dt-color-amber-300 | oklch(0.848 0.146 75) | — | |
--dt-color-amber-400 | oklch(0.793 0.163 75) | — | |
--dt-color-amber-500 | oklch(0.740 0.158 75) | — | |
--dt-color-amber-600 | oklch(0.653 0.140 75) | — | |
--dt-color-amber-700 | oklch(0.540 0.116 75) | — | |
--dt-color-amber-800 | oklch(0.450 0.095 75) | — | |
--dt-color-amber-900 | oklch(0.386 0.079 75) | — | |
--dt-color-amber-950 | oklch(0.270 0.056 75) | — | |
--dt-color-red-050 | oklch(0.971 0.015 25) | — | |
--dt-color-red-100 | oklch(0.936 0.033 25) | — | |
--dt-color-red-200 | oklch(0.885 0.062 25) | — | |
--dt-color-red-300 | oklch(0.808 0.108 25) | — | |
--dt-color-red-400 | oklch(0.712 0.170 25) | — | |
--dt-color-red-500 | oklch(0.637 0.208 25) | — | |
--dt-color-red-600 | oklch(0.577 0.215 25) | — | |
--dt-color-red-700 | oklch(0.505 0.191 25) | — | |
--dt-color-red-800 | oklch(0.444 0.161 25) | — | |
--dt-color-red-900 | oklch(0.396 0.134 25) | — | |
--dt-color-red-950 | oklch(0.258 0.092 25) | — | |
--dt-color-cyan-050 | oklch(0.977 0.013 230) | — | |
--dt-color-cyan-100 | oklch(0.951 0.026 230) | — | |
--dt-color-cyan-200 | oklch(0.901 0.050 230) | — | |
--dt-color-cyan-300 | oklch(0.828 0.081 230) | — | |
--dt-color-cyan-400 | oklch(0.746 0.115 230) | — | |
--dt-color-cyan-500 | oklch(0.685 0.140 230) | — | |
--dt-color-cyan-600 | oklch(0.588 0.135 230) | — | |
--dt-color-cyan-700 | oklch(0.500 0.114 230) | — | |
--dt-color-cyan-800 | oklch(0.424 0.094 230) | — | |
--dt-color-cyan-900 | oklch(0.366 0.077 230) | — | |
--dt-color-cyan-950 | oklch(0.262 0.056 230) | — | |
--dt-color-violet-050 | oklch(0.977 0.014 305) | — | |
--dt-color-violet-100 | oklch(0.946 0.033 305) | — | |
--dt-color-violet-200 | oklch(0.902 0.063 305) | — | |
--dt-color-violet-300 | oklch(0.827 0.110 305) | — | |
--dt-color-violet-400 | oklch(0.740 0.163 305) | — | |
--dt-color-violet-500 | oklch(0.667 0.200 305) | — | |
--dt-color-violet-600 | oklch(0.594 0.216 305) | — | |
--dt-color-violet-700 | oklch(0.518 0.190 305) | — | |
--dt-color-violet-800 | oklch(0.444 0.158 305) | — | |
--dt-color-violet-900 | oklch(0.381 0.128 305) | — | |
--dt-color-violet-950 | oklch(0.279 0.095 305) | — | |
--dt-color-spectrum-red-400 | oklch(0.700 0.200 25) | — | |
--dt-color-spectrum-red-500 | oklch(0.630 0.230 25) | — | |
--dt-color-spectrum-amber-400 | oklch(0.840 0.150 80) | — | |
--dt-color-spectrum-amber-500 | oklch(0.790 0.165 75) | — | |
--dt-color-spectrum-green-400 | oklch(0.780 0.175 150) | — | |
--dt-color-spectrum-green-500 | oklch(0.700 0.190 150) | — | |
--dt-color-spectrum-cyan-400 | oklch(0.800 0.130 210) | — | |
--dt-color-spectrum-cyan-500 | oklch(0.715 0.140 210) | — | |
--dt-color-spectrum-blue-400 | oklch(0.700 0.180 262) | — | |
--dt-color-spectrum-blue-500 | oklch(0.600 0.215 262) | — | |
--dt-color-spectrum-magenta-400 | oklch(0.720 0.210 335) | — | |
--dt-color-spectrum-magenta-500 | oklch(0.640 0.250 335) | — | |
--dt-surface-base | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-subtle | oklch(0.979 0 0) | oklch(0.191 0 0) | |
--dt-surface-raised | oklch(1 0 0) | oklch(0.191 0 0) | |
--dt-surface-sunken | oklch(0.958 0 0) | oklch(0 0 0) | |
--dt-surface-overlay | oklch(1 0 0) | oklch(0.285 0 0) | |
--dt-surface-inverse | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-surface-disabled | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-surface-scrim | oklch(0.145 0.005 264 / 0.5) | oklch(0 0 0 / 0.7) | |
--dt-text-primary | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-text-secondary | oklch(0.464 0 0) | oklch(0.715 0 0) | |
--dt-text-tertiary | oklch(0.556 0 0) | oklch(0.556 0 0) | |
--dt-text-disabled | oklch(0.715 0 0) | oklch(0.464 0 0) | |
--dt-text-inverse | oklch(0.979 0 0) | oklch(0.191 0 0) | |
--dt-text-on-scrim | oklch(0.979 0 0) | oklch(0.979 0 0) | Text over a darkened photograph. Light in both modes, because a scrim over a photo is dark in both. |
--dt-text-on-scrim-secondary | oklch(0.928 0 0) | oklch(0.928 0 0) | Supporting text over a darkened photograph. |
--dt-text-on-scrim-strong | oklch(1 0 0) | oklch(1 0 0) | Pure white over a photograph or video, for large type that would read grey in the near-white. |
--dt-text-on-scrim-brand | oklch(0.892 0.070 45) | oklch(0.892 0.070 45) | A light brand step for a title over a darkened photograph or video. |
--dt-surface-glass | color-mix(in oklab, oklch(1 0 0) 72%, transparent) | color-mix(in oklab, oklch(0.285 0 0) 72%, transparent) | The overlay surface, translucent. Pair with --dt-backdrop-glass. |
--dt-surface-glass-strong | color-mix(in oklab, oklch(1 0 0) 88%, transparent) | color-mix(in oklab, oklch(0.285 0 0) 88%, transparent) | Glass that lets less through. |
--dt-surface-glass-tint | color-mix(in oklab, oklch(0.191 0 0) 8%, transparent) | color-mix(in oklab, oklch(0.979 0 0) 8%, transparent) | A faint wash of ink over content: a ring, a chip, an active pill. |
--dt-surface-glass-inverse | color-mix(in oklab, oklch(0.168 0 0) 58%, transparent) | color-mix(in oklab, oklch(0.168 0 0) 58%, transparent) | Dark glass in both modes, for a card over a photograph. |
--dt-border-glass | color-mix(in oklab, oklch(0.191 0 0) 10%, transparent) | color-mix(in oklab, oklch(0.979 0 0) 10%, transparent) | |
--dt-border-glass-inverse | color-mix(in oklab, oklch(0.979 0 0) 14%, transparent) | color-mix(in oklab, oklch(0.979 0 0) 14%, transparent) | |
--dt-scrim-bottom | linear-gradient(to top, color-mix(in oklab, oklch(0.168 0 0) 80%, transparent), color-mix(in oklab, oklch(0.168 0 0) 40%, transparent) 45%, transparent) | linear-gradient(to top, color-mix(in oklab, oklch(0.168 0 0) 80%, transparent), color-mix(in oklab, oklch(0.168 0 0) 40%, transparent) 45%, transparent) | Image scrim rising from the bottom edge. |
--dt-scrim-top | linear-gradient(to bottom, color-mix(in oklab, oklch(0.168 0 0) 80%, transparent), color-mix(in oklab, oklch(0.168 0 0) 40%, transparent) 45%, transparent) | linear-gradient(to bottom, color-mix(in oklab, oklch(0.168 0 0) 80%, transparent), color-mix(in oklab, oklch(0.168 0 0) 40%, transparent) 45%, transparent) | Image scrim falling from the top edge. |
--dt-scrim-full | color-mix(in oklab, oklch(0.168 0 0) 55%, transparent) | color-mix(in oklab, oklch(0.168 0 0) 55%, transparent) | An even wash over a whole image. |
--dt-scrim-fade-bottom | linear-gradient(to top, oklch(1 0 0) 40%, transparent) | linear-gradient(to top, oklch(0.168 0 0) 40%, transparent) | The page surface fading up, behind a floating bottom bar. |
--dt-text-link | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-text-link-hover | oklch(0.371 0 0) | oklch(0.870 0 0) | |
--dt-text-link-visited | oklch(0.371 0 0) | oklch(0.870 0 0) | |
--dt-border-subtle | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-border-default | oklch(0.928 0 0) | oklch(0.371 0 0) | |
--dt-border-strong | oklch(0.715 0 0) | oklch(0.556 0 0) | |
--dt-border-inverse | oklch(0.371 0 0) | oklch(0.870 0 0) | |
--dt-border-disabled | oklch(0.928 0 0) | oklch(0.285 0 0) | |
--dt-surface-action | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-surface-action-hover | oklch(0.285 0 0) | oklch(0.928 0 0) | |
--dt-surface-action-active | oklch(0.371 0 0) | oklch(0.870 0 0) | |
--dt-text-on-action | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-action-secondary | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-surface-action-secondary-hover | oklch(0.928 0 0) | oklch(0.371 0 0) | |
--dt-surface-action-secondary-active | oklch(0.870 0 0) | oklch(0.464 0 0) | |
--dt-text-on-action-secondary | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-border-action-secondary | oklch(0 0 0 / 0) | oklch(0 0 0 / 0) | |
--dt-surface-action-ghost | oklch(0 0 0 / 0) | — | |
--dt-surface-action-ghost-hover | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-surface-action-ghost-active | oklch(0.928 0 0) | oklch(0.371 0 0) | |
--dt-text-on-action-ghost | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-surface-action-danger | oklch(0.577 0.215 25) | oklch(0.637 0.208 25) | |
--dt-surface-action-danger-hover | oklch(0.505 0.191 25) | oklch(0.712 0.170 25) | |
--dt-surface-action-danger-active | oklch(0.444 0.161 25) | oklch(0.808 0.108 25) | |
--dt-text-on-action-danger | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-action-disabled | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-text-on-action-disabled | oklch(0.715 0 0) | oklch(0.464 0 0) | |
--dt-surface-selected | oklch(0.958 0 0) | oklch(0.285 0 0) | |
--dt-surface-selected-hover | oklch(0.928 0 0) | oklch(0.371 0 0) | |
--dt-text-on-selected | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-border-selected | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-surface-action-brand | oklch(0.585 0.162 45) | oklch(0.660 0.166 45) | |
--dt-surface-action-brand-hover | oklch(0.505 0.140 45) | oklch(0.735 0.148 45) | |
--dt-surface-action-brand-active | oklch(0.430 0.117 45) | oklch(0.820 0.112 45) | |
--dt-text-on-action-brand | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-action-brand-secondary | oklch(0.594 0.216 305) | oklch(0.667 0.200 305) | |
--dt-surface-action-brand-secondary-hover | oklch(0.518 0.190 305) | oklch(0.740 0.163 305) | |
--dt-surface-action-brand-secondary-active | oklch(0.444 0.158 305) | oklch(0.827 0.110 305) | |
--dt-text-on-action-brand-secondary | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-text-link-brand | oklch(0.505 0.140 45) | oklch(0.735 0.148 45) | |
--dt-text-link-brand-hover | oklch(0.430 0.117 45) | oklch(0.820 0.112 45) | |
--dt-surface-selected-brand | oklch(0.971 0.016 45) | oklch(0.262 0.070 45) | |
--dt-surface-selected-brand-hover | oklch(0.939 0.038 45) | oklch(0.372 0.097 45) | |
--dt-text-on-selected-brand | oklch(0.372 0.097 45) | oklch(0.939 0.038 45) | |
--dt-border-selected-brand | oklch(0.585 0.162 45) | oklch(0.660 0.166 45) | |
--dt-focus-ring-color-brand | oklch(0.585 0.162 45) | oklch(0.735 0.148 45) | |
--dt-surface-success | oklch(0.535 0.128 150) | oklch(0.627 0.149 150) | |
--dt-surface-success-subtle | oklch(0.972 0.021 150) | oklch(0.228 0.052 150) | |
--dt-border-success | oklch(0.885 0.077 150) | oklch(0.373 0.086 150) | |
--dt-text-success | oklch(0.373 0.086 150) | oklch(0.806 0.116 150) | |
--dt-text-on-success | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-warning | oklch(0.740 0.158 75) | oklch(0.793 0.163 75) | |
--dt-surface-warning-subtle | oklch(0.980 0.024 75) | oklch(0.270 0.056 75) | |
--dt-border-warning | oklch(0.903 0.104 75) | oklch(0.450 0.095 75) | |
--dt-text-warning | oklch(0.386 0.079 75) | oklch(0.848 0.146 75) | |
--dt-text-on-warning | oklch(0.168 0 0) | oklch(0.168 0 0) | |
--dt-surface-danger | oklch(0.577 0.215 25) | oklch(0.637 0.208 25) | |
--dt-surface-danger-subtle | oklch(0.971 0.015 25) | oklch(0.258 0.092 25) | |
--dt-border-danger | oklch(0.885 0.062 25) | oklch(0.444 0.161 25) | |
--dt-text-danger | oklch(0.444 0.161 25) | oklch(0.808 0.108 25) | |
--dt-text-on-danger | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-info | oklch(0.588 0.135 230) | oklch(0.685 0.140 230) | |
--dt-surface-info-subtle | oklch(0.977 0.013 230) | oklch(0.262 0.056 230) | |
--dt-border-info | oklch(0.901 0.050 230) | oklch(0.424 0.094 230) | |
--dt-text-info | oklch(0.366 0.077 230) | oklch(0.828 0.081 230) | |
--dt-text-on-info | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-focus-ring-color | oklch(0.191 0 0) | oklch(0.979 0 0) | |
--dt-focus-ring-offset-color | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-viz-1 | oklch(0.585 0.162 45) | oklch(0.735 0.148 45) | |
--dt-viz-2 | oklch(0.667 0.200 305) | oklch(0.740 0.163 305) | |
--dt-viz-3 | oklch(0.588 0.135 230) | oklch(0.746 0.115 230) | |
--dt-viz-4 | oklch(0.740 0.158 75) | oklch(0.793 0.163 75) | |
--dt-viz-5 | oklch(0.535 0.128 150) | oklch(0.714 0.146 150) | |
--dt-viz-6 | oklch(0.637 0.208 25) | oklch(0.712 0.170 25) | |
--dt-spectrum-1 | oklch(0.630 0.230 25) | oklch(0.700 0.200 25) | |
--dt-spectrum-2 | oklch(0.790 0.165 75) | oklch(0.840 0.150 80) | |
--dt-spectrum-3 | oklch(0.700 0.190 150) | oklch(0.780 0.175 150) | |
--dt-spectrum-4 | oklch(0.715 0.140 210) | oklch(0.800 0.130 210) | |
--dt-spectrum-5 | oklch(0.600 0.215 262) | oklch(0.700 0.180 262) | |
--dt-spectrum-6 | oklch(0.640 0.250 335) | oklch(0.720 0.210 335) | |
--dt-button-primary-bg | oklch(0.191 0 0) | — | |
--dt-button-primary-bg-hover | oklch(0.285 0 0) | — | |
--dt-button-primary-bg-active | oklch(0.371 0 0) | — | |
--dt-button-primary-fg | oklch(1 0 0) | — | |
--dt-button-primary-border | oklch(0 0 0 / 0) | — | |
--dt-button-secondary-bg | oklch(0.958 0 0) | — | |
--dt-button-secondary-bg-hover | oklch(0.928 0 0) | — | |
--dt-button-secondary-bg-active | oklch(0.870 0 0) | — | |
--dt-button-secondary-fg | oklch(0.191 0 0) | — | |
--dt-button-secondary-border | oklch(0 0 0 / 0) | — | |
--dt-button-ghost-bg | oklch(0 0 0 / 0) | — | |
--dt-button-ghost-bg-hover | oklch(0.958 0 0) | — | |
--dt-button-ghost-bg-active | oklch(0.928 0 0) | — | |
--dt-button-ghost-fg | oklch(0.191 0 0) | — | |
--dt-button-ghost-border | oklch(0 0 0 / 0) | — | |
--dt-button-danger-bg | oklch(0.577 0.215 25) | — | |
--dt-button-danger-bg-hover | oklch(0.505 0.191 25) | — | |
--dt-button-danger-bg-active | oklch(0.444 0.161 25) | — | |
--dt-button-danger-fg | oklch(1 0 0) | — | |
--dt-button-danger-border | oklch(0 0 0 / 0) | — | |
--dt-button-brand-bg | oklch(0.585 0.162 45) | — | |
--dt-button-brand-bg-hover | oklch(0.505 0.140 45) | — | |
--dt-button-brand-bg-active | oklch(0.430 0.117 45) | — | |
--dt-button-brand-fg | oklch(1 0 0) | — | |
--dt-button-brand-border | oklch(0 0 0 / 0) | — | |
--dt-button-brand-secondary-bg | oklch(0.594 0.216 305) | — | |
--dt-button-brand-secondary-bg-hover | oklch(0.518 0.190 305) | — | |
--dt-button-brand-secondary-bg-active | oklch(0.444 0.158 305) | — | |
--dt-button-brand-secondary-fg | oklch(1 0 0) | — | |
--dt-button-brand-secondary-border | oklch(0 0 0 / 0) | — | |
--dt-button-disabled-bg | oklch(0.958 0 0) | — | |
--dt-button-disabled-fg | oklch(0.715 0 0) | — | |
--dt-button-disabled-border | oklch(0 0 0 / 0) | — | |
--dt-input-bg | oklch(1 0 0) | — | |
--dt-input-bg-hover | oklch(1 0 0) | — | |
--dt-input-bg-disabled | oklch(0.958 0 0) | — | |
--dt-input-fg | oklch(0.191 0 0) | — | |
--dt-input-fg-placeholder | oklch(0.556 0 0) | — | |
--dt-input-fg-disabled | oklch(0.715 0 0) | — | |
--dt-input-border | oklch(0.928 0 0) | — | |
--dt-input-border-hover | oklch(0.715 0 0) | — | |
--dt-input-border-focus | oklch(0.191 0 0) | — | |
--dt-input-border-error | oklch(0.577 0.215 25) | — | |
--dt-input-border-disabled | oklch(0.928 0 0) | — | |
--dt-input-hint-color | oklch(0.464 0 0) | — | |
--dt-input-error-color | oklch(0.444 0.161 25) | — | |
--dt-card-bg | oklch(1 0 0) | — | |
--dt-card-fg | oklch(0.191 0 0) | — | |
--dt-card-border-color | oklch(0.928 0 0) | — | |
--dt-card-selected-border | oklch(0.191 0 0) | — | |
--dt-card-selected-bg | oklch(0.958 0 0) | — | |
--dt-card-media-fg | oklch(0.979 0 0) | — | |
--dt-card-media-fg-secondary | oklch(0.928 0 0) | — | |
--dt-card-media-fg-strong | oklch(1 0 0) | — | |
--dt-card-media-fg-brand | oklch(0.892 0.070 45) | — | |
--dt-card-media-border | color-mix(in oklab, var(--dt-color-neutral-050) 14%, transparent) | — | |
--dt-card-media-min-height | 256px | — | |
--dt-social-bg | oklch(1 0 0) | — | |
--dt-social-fg | oklch(0.191 0 0) | — | |
--dt-social-muted | oklch(0.464 0 0) | — | |
--dt-social-rule | oklch(0.928 0 0) | — | |
--dt-social-on-image | oklch(1 0 0) | — | |
--dt-social-on-image-muted | oklch(0.979 0 0) | — | |
--dt-price-color | oklch(0.191 0 0) | — | |
--dt-price-sale-color | oklch(0.444 0.161 25) | — | |
--dt-price-compare-color | oklch(0.556 0 0) | — | |
--dt-price-unit-color | oklch(0.464 0 0) | — | |
--dt-rating-color | oklch(0.740 0.158 75) | — | |
--dt-rating-empty-color | oklch(0.715 0 0) | — | |
--dt-rating-count-color | oklch(0.464 0 0) | — | |
--dt-product-subtitle-color | oklch(0.464 0 0) | — | |
--dt-product-soldout-overlay | color-mix(in oklab, var(--dt-surface-overlay) 72%, transparent) | — | |
--dt-swatch-border | oklch(0.715 0 0) | — | |
--dt-swatch-ring | oklch(0.191 0 0) | — | |
--dt-variant-bg | oklch(1 0 0) | — | |
--dt-variant-bg-hover | oklch(0.979 0 0) | — | |
--dt-variant-fg | oklch(0.191 0 0) | — | |
--dt-variant-border | oklch(0.928 0 0) | — | |
--dt-variant-selected-bg | oklch(0.958 0 0) | — | |
--dt-variant-selected-fg | oklch(0.191 0 0) | — | |
--dt-variant-selected-border | oklch(0.191 0 0) | — | |
--dt-variant-unavailable-fg | oklch(0.715 0 0) | — | |
--dt-variant-unavailable-border | oklch(0.928 0 0) | — | |
--dt-variant-note-color | oklch(0.464 0 0) | — | |
--dt-gallery-control-bg | color-mix(in oklab, var(--dt-surface-overlay) 88%, transparent) | — | |
--dt-gallery-control-bg-hover | oklch(1 0 0) | — | |
--dt-gallery-control-fg | oklch(0.191 0 0) | — | |
--dt-gallery-thumb-border | oklch(0.958 0 0) | — | |
--dt-gallery-thumb-selected-border | oklch(0.191 0 0) | — | |
--dt-store-cover-bg | oklch(0.958 0 0) | — | |
--dt-store-logo-bg | oklch(1 0 0) | — | |
--dt-store-logo-ring | oklch(1 0 0) | — | |
--dt-store-meta-color | oklch(0.464 0 0) | — | |
--dt-store-open-color | oklch(0.373 0.086 150) | — | |
--dt-store-closed-color | oklch(0.444 0.161 25) | — | |
--dt-store-closed-scrim | oklch(0.145 0.005 264 / 0.5) | — | |
--dt-fulfilment-track-bg | oklch(0.958 0 0) | — | |
--dt-fulfilment-thumb-bg | oklch(1 0 0) | — | |
--dt-fulfilment-fg | oklch(0.464 0 0) | — | |
--dt-fulfilment-fg-selected | oklch(0.191 0 0) | — | |
--dt-fulfilment-detail-color | oklch(0.556 0 0) | — | |
--dt-fulfilment-detail-color-selected | oklch(0.464 0 0) | — | |
--dt-menu-item-divider | oklch(0.958 0 0) | — | |
--dt-menu-item-bg-hover | oklch(0.979 0 0) | — | |
--dt-menu-item-card-bg | oklch(1 0 0) | — | |
--dt-menu-item-card-border | oklch(0.958 0 0) | — | |
--dt-menu-item-description-color | oklch(0.464 0 0) | — | |
--dt-menu-item-soldout-color | oklch(0.715 0 0) | — | |
--dt-menu-thumb-bg | oklch(0.958 0 0) | — | |
--dt-modifier-divider | oklch(0.958 0 0) | — | |
--dt-modifier-control-border | oklch(0.715 0 0) | — | |
--dt-modifier-control-bg | oklch(1 0 0) | — | |
--dt-modifier-control-accent | oklch(0.191 0 0) | — | |
--dt-modifier-control-mark | oklch(1 0 0) | — | |
--dt-modifier-delta-color | oklch(0.464 0 0) | — | |
--dt-modifier-hint-color | oklch(0.464 0 0) | — | |
--dt-modifier-pill-bg | oklch(0.958 0 0) | — | |
--dt-modifier-pill-fg | oklch(0.464 0 0) | — | |
--dt-modifier-error-color | oklch(0.444 0.161 25) | — | |
--dt-modifier-error-pill-bg | oklch(0.971 0.015 25) | — | |
--dt-dietary-vegetarian-bg | oklch(0.972 0.021 150) | — | |
--dt-dietary-vegetarian-fg | oklch(0.373 0.086 150) | — | |
--dt-dietary-vegan-bg | oklch(0.972 0.021 150) | — | |
--dt-dietary-vegan-fg | oklch(0.373 0.086 150) | — | |
--dt-dietary-spicy-bg | oklch(0.971 0.015 25) | — | |
--dt-dietary-spicy-fg | oklch(0.444 0.161 25) | — | |
--dt-dietary-gluten-free-bg | oklch(0.977 0.013 230) | — | |
--dt-dietary-gluten-free-fg | oklch(0.366 0.077 230) | — | |
--dt-dietary-popular-bg | oklch(0.980 0.024 75) | — | |
--dt-dietary-popular-fg | oklch(0.386 0.079 75) | — | |
--dt-dietary-new-bg | oklch(0.971 0.016 45) | — | |
--dt-dietary-new-fg | oklch(0.505 0.140 45) | — | |
--dt-dietary-default-bg | oklch(0.958 0 0) | — | |
--dt-dietary-default-fg | oklch(0.464 0 0) | — | |
--dt-cart-line-divider | oklch(0.958 0 0) | — | |
--dt-cart-thumb-bg | oklch(0.958 0 0) | — | |
--dt-cart-thumb-border | oklch(0.958 0 0) | — | |
--dt-cart-thumb-fg | oklch(0.556 0 0) | — | |
--dt-cart-detail-color | oklch(0.464 0 0) | — | |
--dt-cart-note-color | oklch(0.464 0 0) | — | |
--dt-cart-thumb-radius | 12px | — | |
--dt-cart-thumb-size-sm | 48px | — | |
--dt-cart-thumb-size-md | 64px | — | |
--dt-summary-bg | oklch(1 0 0) | — | |
--dt-summary-border | oklch(0.958 0 0) | — | |
--dt-summary-divider | oklch(0.958 0 0) | — | |
--dt-summary-label-color | oklch(0.464 0 0) | — | |
--dt-summary-value-color | oklch(0.191 0 0) | — | |
--dt-summary-muted-color | oklch(0.556 0 0) | — | |
--dt-summary-hint-color | oklch(0.556 0 0) | — | |
--dt-summary-discount-color | oklch(0.373 0.086 150) | — | |
--dt-summary-total-color | oklch(0.191 0 0) | — | |
--dt-summary-radius | 16px | — | |
--dt-summary-padding | 24px | — | |
--dt-promo-chip-bg | oklch(0.972 0.021 150) | — | |
--dt-promo-chip-fg | oklch(0.191 0 0) | — | |
--dt-promo-chip-border | oklch(0.885 0.077 150) | — | |
--dt-promo-chip-icon | oklch(0.373 0.086 150) | — | |
--dt-promo-chip-description | oklch(0.464 0 0) | — | |
--dt-order-status-complete | oklch(0.191 0 0) | — | |
--dt-order-status-on-complete | oklch(1 0 0) | — | |
--dt-order-status-current | oklch(0.191 0 0) | — | |
--dt-order-status-upcoming | oklch(0.715 0 0) | — | |
--dt-order-status-line | oklch(0.928 0 0) | — | |
--dt-order-status-delayed | oklch(0.740 0.158 75) | — | |
--dt-order-status-on-delayed | oklch(0.168 0 0) | — | |
--dt-order-status-delayed-text | oklch(0.386 0.079 75) | — | |
--dt-order-status-cancelled | oklch(0.577 0.215 25) | — | |
--dt-order-status-on-cancelled | oklch(1 0 0) | — | |
--dt-order-status-cancelled-text | oklch(0.444 0.161 25) | — | |
--dt-order-status-marker-size | 24px | — | |
--dt-order-status-line-width | 2px | — | |
--dt-order-status-step-min-width | calc(48px * 3) | — | |
--dt-dialog-bg | oklch(1 0 0) | — | |
--dt-dialog-fg | oklch(0.191 0 0) | — | |
--dt-dialog-border-color | oklch(0.958 0 0) | — | |
--dt-dialog-scrim | oklch(0.145 0.005 264 / 0.5) | — | |
--dt-sheet-button-bg | oklch(0.958 0 0) | — | |
--dt-table-bg | oklch(1 0 0) | — | |
--dt-table-fg | oklch(0.191 0 0) | — | |
--dt-table-border-color | oklch(0.958 0 0) | — | |
--dt-table-header-bg | oklch(0.979 0 0) | — | |
--dt-table-header-fg | oklch(0.464 0 0) | — | |
--dt-table-row-bg-hover | oklch(0.979 0 0) | — | |
--dt-table-row-bg-selected | oklch(0.958 0 0) | — | |
--dt-table-row-bg-striped | oklch(0.979 0 0) | — | |
--dt-surface-brand | oklch(0.585 0.162 45) | oklch(0.660 0.166 45) | |
--dt-surface-brand-gradient | linear-gradient(135deg, oklch(0.660 0.166 45), oklch(0.430 0.117 45)) | linear-gradient(135deg, oklch(0.735 0.148 45), oklch(0.505 0.140 45)) | |
--dt-text-on-brand | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-brand-muted | oklch(0.971 0.016 45) | oklch(0.262 0.070 45) | |
--dt-text-on-brand-muted | oklch(0.372 0.097 45) | oklch(0.939 0.038 45) | |
--dt-border-brand | oklch(0.892 0.070 45) | oklch(0.430 0.117 45) | |
--dt-text-brand | oklch(0.505 0.140 45) | oklch(0.735 0.148 45) | A word or heading set in the primary brand hue. |
--dt-text-wordmark | oklch(0.191 0 0) | oklch(0.979 0 0) | The wordmark. Ink by default; a theme points it at a brand text role. |
--dt-text-headline | oklch(0.191 0 0) | oklch(0.979 0 0) | Display and heading text. Ink by default; a theme points it at a brand text role. |
--dt-surface-brand-secondary | oklch(0.594 0.216 305) | oklch(0.667 0.200 305) | A full-bleed fill in the second brand hue. |
--dt-text-on-brand-secondary | oklch(1 0 0) | oklch(0.168 0 0) | |
--dt-surface-brand-secondary-muted | oklch(0.977 0.014 305) | oklch(0.279 0.095 305) | The pale tint of the second brand hue. |
--dt-text-on-brand-secondary-muted | oklch(0.381 0.128 305) | oklch(0.946 0.033 305) | |
--dt-border-brand-secondary | oklch(0.902 0.063 305) | oklch(0.444 0.158 305) | |
--dt-text-brand-secondary | oklch(0.518 0.190 305) | oklch(0.740 0.163 305) | A word or eyebrow set in the second brand hue. |
--dt-surface-brand-duotone | linear-gradient(135deg, oklch(0.585 0.162 45), oklch(0.594 0.216 305)) | linear-gradient(135deg, oklch(0.660 0.166 45), oklch(0.667 0.200 305)) | Both brand hues in one sweep. Carries white text. |
--dt-bubble-sent-bg | oklch(0.191 0 0) | — | |
--dt-bubble-sent-fg | oklch(1 0 0) | — | |
--dt-bubble-received-bg | oklch(0.958 0 0) | — | |
--dt-bubble-received-fg | oklch(0.191 0 0) | — | |
--dt-bubble-meta-fg | oklch(0.556 0 0) | — | |
--dt-bubble-author-fg | oklch(0.464 0 0) | — | |
--dt-bubble-read-fg | oklch(0.191 0 0) | — | |
--dt-bubble-failed-fg | oklch(0.444 0.161 25) | — | |
--dt-presence-online | oklch(0.535 0.128 150) | — | |
--dt-presence-away | oklch(0.740 0.158 75) | — | |
--dt-presence-offline | oklch(0.556 0 0) | — | |
--dt-chat-surface | oklch(1 0 0) | — | |
--dt-chat-border | oklch(0.958 0 0) | — | |
--dt-chat-divider-fg | oklch(0.556 0 0) | — | |
--dt-typing-dot | oklch(0.556 0 0) | — | |
--dt-quick-replies-border | oklch(0.928 0 0) | — |
Spacing and dimension
91 tokens. A blank cell means the token keeps the value it has in the first theme.
| Token | Light | Product context | Marketing context | Social context | dt-type-scale | Usage |
|---|---|---|---|---|---|---|
--dt-dim-0 | 0px | — | — | — | — | |
--dt-dim-1 | 4px | — | — | — | — | |
--dt-dim-2 | 8px | — | — | — | — | |
--dt-dim-3 | 12px | — | — | — | — | |
--dt-dim-4 | 16px | — | — | — | — | |
--dt-dim-5 | 20px | — | — | — | — | |
--dt-dim-6 | 24px | — | — | — | — | |
--dt-dim-7 | 28px | — | — | — | — | |
--dt-dim-8 | 32px | — | — | — | — | |
--dt-dim-9 | 36px | — | — | — | — | |
--dt-dim-10 | 40px | — | — | — | — | |
--dt-dim-11 | 44px | — | — | — | — | |
--dt-dim-12 | 48px | — | — | — | — | |
--dt-dim-14 | 56px | — | — | — | — | |
--dt-dim-16 | 64px | — | — | — | — | |
--dt-dim-20 | 80px | — | — | — | — | |
--dt-dim-24 | 96px | — | — | — | — | |
--dt-dim-28 | 112px | — | — | — | — | |
--dt-dim-32 | 128px | — | — | — | — | |
--dt-dim-40 | 160px | — | — | — | — | |
--dt-dim-48 | 192px | — | — | — | — | |
--dt-dim-56 | 224px | — | — | — | — | |
--dt-dim-64 | 256px | — | — | — | — | |
--dt-dim-hair | 1px | — | — | — | — | |
--dt-dim-hair-2 | 2px | — | — | — | — | |
--dt-dim-container-sm | 640px | — | — | — | — | |
--dt-dim-container-md | 768px | — | — | — | — | |
--dt-dim-container-lg | 1024px | — | — | — | — | |
--dt-dim-container-xl | 1280px | — | — | — | — | |
--dt-dim-container-2xl | 1536px | — | — | — | — | |
--dt-breakpoint-sm | 640px | — | — | — | — | |
--dt-breakpoint-md | 768px | — | — | — | — | |
--dt-breakpoint-lg | 1024px | — | — | — | — | |
--dt-breakpoint-xl | 1280px | — | — | — | — | |
--dt-breakpoint-2xl | 1536px | — | — | — | — | |
--dt-space-inset-2xs | 4px | — | — | — | — | |
--dt-space-inset-xs | 8px | — | — | — | — | |
--dt-space-inset-sm | 12px | — | — | — | — | |
--dt-space-inset-md | 16px | — | — | — | — | |
--dt-space-inset-lg | 24px | — | — | — | — | |
--dt-space-inset-xl | 32px | — | — | — | — | |
--dt-space-inset-2xl | 48px | — | — | — | — | |
--dt-space-stack-2xs | 4px | — | — | — | — | |
--dt-space-stack-xs | 8px | — | — | — | — | |
--dt-space-stack-sm | 12px | — | — | — | — | |
--dt-space-stack-md | 16px | — | — | — | — | |
--dt-space-stack-lg | 24px | — | — | — | — | |
--dt-space-stack-xl | 40px | 32px | 48px | 24px | — | |
--dt-space-stack-2xl | 64px | 48px | 96px | 40px | — | |
--dt-space-inline-2xs | 4px | — | — | — | — | |
--dt-space-inline-xs | 8px | — | — | — | — | |
--dt-space-inline-sm | 12px | — | — | — | — | |
--dt-space-inline-md | 16px | — | — | — | — | |
--dt-space-inline-lg | 24px | — | — | — | — | |
--dt-space-inline-xl | 32px | — | — | — | — | |
--dt-space-inline-2xl | 48px | — | — | — | — | |
--dt-space-section | 96px | 48px | 128px | 64px | — | |
--dt-space-section-compact | 64px | — | — | — | — | |
--dt-space-gutter | 24px | 16px | 32px | 16px | — | |
--dt-space-gutter-wide | 40px | — | — | — | — | |
--dt-layout-stack-related | 8px | — | — | — | — | |
--dt-layout-stack-group | 16px | — | — | — | — | |
--dt-layout-stack-block | 32px | — | — | — | — | |
--dt-layout-stack-section | 64px | — | — | — | — | |
--dt-layout-inline-related | 8px | — | — | — | — | |
--dt-layout-inline-group | 12px | — | — | — | — | |
--dt-layout-inline-block | 24px | — | — | — | — | |
--dt-layout-inline-section | 48px | — | — | — | — | |
--dt-layout-text-eyebrow | 12px | — | — | — | — | |
--dt-layout-text-subcopy | 12px | — | — | — | — | |
--dt-layout-text-paragraph | 16px | — | — | — | — | |
--dt-layout-module-padding | 96px | 96px | 96px | 96px | — | |
--dt-layout-module-gap | 40px | — | — | — | — | |
--dt-layout-scale | 1 | — | — | — | 2.5 | |
--dt-layout-module-padding-sm | 64px | 32px | 80px | 40px | — | |
--dt-layout-module-padding-md | 96px | 96px | 96px | 96px | — | |
--dt-layout-module-padding-lg | 128px | 64px | 160px | 96px | — | |
--dt-layout-module-padding-xl | 160px | 96px | 192px | 128px | — | |
--dt-layout-module-inset | 32px | 24px | 48px | 24px | — | |
--dt-layout-page-width | 1280px | — | — | — | — | |
--dt-layout-page-width-narrow | 768px | — | — | — | — | |
--dt-layout-page-width-wide | 1536px | — | — | — | — | |
--dt-layout-page-gutter | 24px | 24px | 24px | 24px | — | |
--dt-size-step | 48px | — | — | — | — | |
--dt-size-container-narrow | 768px | — | — | — | — | |
--dt-size-container-default | 1280px | — | — | — | — | |
--dt-size-container-wide | 1536px | — | — | — | — | |
--dt-bubble-padding | 8px 12px | — | — | — | — | |
--dt-bubble-gap | 4px | — | — | — | — | |
--dt-bubble-run-gap | 12px | — | — | — | — | |
--dt-quick-replies-gap | 8px | — | — | — | — |
Radius
28 tokens. A blank cell means the token keeps the value it has in the first theme.
| Token | Light | Product context | Marketing context | Social context | Usage |
|---|---|---|---|---|---|
--dt-radius-raw-0 | 0px | — | — | — | |
--dt-radius-raw-2 | 2px | — | — | — | |
--dt-radius-raw-4 | 4px | — | — | — | |
--dt-radius-raw-6 | 6px | — | — | — | |
--dt-radius-raw-8 | 8px | — | — | — | |
--dt-radius-raw-12 | 12px | — | — | — | |
--dt-radius-raw-16 | 16px | — | — | — | |
--dt-radius-raw-24 | 24px | — | — | — | |
--dt-radius-raw-full | 9999px | — | — | — | |
--dt-radius-none | 0px | — | — | — | |
--dt-radius-control | 8px | — | — | — | |
--dt-radius-container | 16px | — | — | — | |
--dt-radius-overlay | 24px | — | — | — | |
--dt-radius-media | 12px | — | — | 16px | |
--dt-radius-pill | 9999px | — | — | — | |
--dt-button-radius | 9999px | — | — | 9999px | |
--dt-input-radius | 8px | — | — | — | |
--dt-card-radius | 16px | 16px | 24px | 24px | |
--dt-dialog-radius | 24px | — | — | — | |
--dt-popover-radius | 16px | — | — | — | |
--dt-table-radius | 16px | — | — | — | |
--dt-bubble-radius | 16px | — | — | — | |
--dt-bubble-radius-tight | calc(8px / 2) | — | — | — | |
--dt-store-cover-radius | 12px | — | — | — | |
--dt-store-logo-radius | 12px | — | — | — | |
--dt-fulfilment-radius | 16px | — | — | — | |
--dt-fulfilment-thumb-radius | 12px | — | — | — | |
--dt-menu-thumb-radius | 12px | — | — | — |
Motion
13 tokens.
| Token | Value | Usage |
|---|---|---|
--dt-duration-instant | 0ms | |
--dt-duration-50 | 50ms | |
--dt-duration-100 | 100ms | |
--dt-duration-150 | 150ms | |
--dt-duration-200 | 200ms | |
--dt-duration-300 | 300ms | |
--dt-duration-400 | 400ms | |
--dt-duration-600 | 600ms | |
--dt-easing-linear | linear | |
--dt-easing-standard | cubic-bezier(0.2, 0.8, 0.2, 1) | |
--dt-easing-decelerate | cubic-bezier(0, 0, 0, 1) | |
--dt-easing-accelerate | cubic-bezier(0.3, 0, 1, 1) | |
--dt-easing-emphasis | cubic-bezier(0.2, 0, 0, 1.2) |
Line height
16 tokens.
| Token | Value | Usage |
|---|---|---|
--dt-line-height-2xs | 16px | |
--dt-line-height-xs | 16px | |
--dt-line-height-sm | 20px | |
--dt-line-height-md | 24px | |
--dt-line-height-lg | 28px | |
--dt-line-height-xl | 32px | |
--dt-line-height-2xl | 36px | |
--dt-line-height-3xl | 40px | |
--dt-line-height-4xl | 48px | |
--dt-line-height-5xl | 52px | |
--dt-line-height-6xl | 64px | |
--dt-line-height-7xl | 76px | |
--dt-line-height-8xl | 88px | |
--dt-line-height-9xl | 104px | |
--dt-line-height-10xl | 124px | |
--dt-line-height-11xl | 148px |
Font weight
7 tokens.
| Token | Value | Usage |
|---|---|---|
--dt-font-weight-light | 300 | |
--dt-font-weight-regular | 400 | |
--dt-font-weight-medium | 500 | |
--dt-font-weight-semibold | 600 | |
--dt-font-weight-bold | 700 | |
--dt-font-weight-extrabold | 800 | |
--dt-button-font-weight | 500 |
Letter spacing
7 tokens.
| Token | Value | Usage |
|---|---|---|
--dt-tracking-tightest | -0.04em | |
--dt-tracking-tighter | -0.03em | |
--dt-tracking-tight | -0.02em | |
--dt-tracking-snug | -0.01em | |
--dt-tracking-normal | 0em | |
--dt-tracking-wide | 0.02em | |
--dt-tracking-wider | 0.06em |
Elevation, z-order and the rest
93 tokens. A blank cell means the token keeps the value it has in the first theme.
| Token | Light | Product context | Marketing context | Social context | Usage |
|---|---|---|---|---|---|
--dt-shadow-raw-none | none | — | — | — | |
--dt-shadow-raw-1 | 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 2px 6px 0 oklch(0 0 0 / 0.04) | — | — | — | |
--dt-shadow-raw-2 | 0 4px 14px 0 oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0 0 0 / 0.04) | — | — | — | |
--dt-shadow-raw-3 | 0 12px 32px 0 oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-shadow-raw-4 | 0 16px 40px 0 oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-shadow-raw-5 | 0 24px 64px 0 oklch(0 0 0 / 0.22), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-shadow-raw-inset | inset 0 0 0 1px oklch(0 0 0 / 0.08) | — | — | — | |
--dt-border-width-default | 1px | — | — | — | |
--dt-border-width-strong | 2px | — | — | — | |
--dt-focus-ring-width | 2px | — | — | — | |
--dt-focus-ring-offset | 2px | — | — | — | |
--dt-elevation-0 | none | — | — | — | |
--dt-elevation-1 | 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 2px 6px 0 oklch(0 0 0 / 0.04) | — | — | — | |
--dt-elevation-2 | 0 4px 14px 0 oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0 0 0 / 0.04) | — | — | — | |
--dt-elevation-3 | 0 12px 32px 0 oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-elevation-4 | 0 16px 40px 0 oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-elevation-5 | 0 24px 64px 0 oklch(0 0 0 / 0.22), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-elevation-inset | inset 0 0 0 1px oklch(0 0 0 / 0.08) | — | — | — | |
--dt-z-behind | -1 | — | — | — | |
--dt-z-base | 0 | — | — | — | |
--dt-z-raised | 10 | — | — | — | |
--dt-z-front | 20 | — | — | — | |
--dt-z-sticky | 100 | — | — | — | |
--dt-z-dropdown | 200 | — | — | — | |
--dt-z-overlay | 300 | — | — | — | |
--dt-z-dialog | 400 | — | — | — | |
--dt-z-toast | 500 | — | — | — | |
--dt-z-tooltip | 600 | — | — | — | |
--dt-opacity-0 | 0 | — | — | — | |
--dt-opacity-10 | 0.1 | — | — | — | |
--dt-opacity-20 | 0.2 | — | — | — | |
--dt-opacity-30 | 0.3 | — | — | — | |
--dt-opacity-40 | 0.4 | — | — | — | |
--dt-opacity-50 | 0.5 | — | — | — | |
--dt-opacity-60 | 0.6 | — | — | — | |
--dt-opacity-70 | 0.7 | — | — | — | |
--dt-opacity-80 | 0.8 | — | — | — | |
--dt-opacity-90 | 0.9 | — | — | — | |
--dt-opacity-100 | 1 | — | — | — | |
--dt-opacity-ghost | 0.2 | — | — | — | |
--dt-opacity-disabled | 0.4 | — | — | — | |
--dt-opacity-muted | 0.6 | — | — | — | |
--dt-opacity-strong | 0.8 | — | — | — | |
--dt-motion-micro | 0ms linear | — | — | — | |
--dt-motion-enter | 0ms linear | — | — | — | |
--dt-motion-exit | 0ms linear | — | — | — | |
--dt-motion-emphasis | 0ms linear | — | — | — | |
--dt-button-border-width | 1px | — | — | — | |
--dt-button-transition | 0ms linear | — | — | — | |
--dt-button-height-sm | 32px | — | — | — | |
--dt-button-height-md | 40px | 40px | 48px | 44px | |
--dt-button-height-lg | 48px | — | — | — | |
--dt-input-border-width | 1px | — | — | — | |
--dt-input-transition | 0ms linear | — | — | — | |
--dt-input-height-sm | 32px | — | — | — | |
--dt-input-height-md | 40px | — | — | — | |
--dt-input-height-lg | 48px | — | — | — | |
--dt-card-border-width | 1px | 1px | 0px | 0px | |
--dt-card-elevation | none | none | none | none | |
--dt-card-elevation-hover | 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 2px 6px 0 oklch(0 0 0 / 0.04) | 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 2px 6px 0 oklch(0 0 0 / 0.04) | 0 4px 14px 0 oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0 0 0 / 0.04) | none | |
--dt-card-transition | 0ms linear | — | — | — | |
--dt-dialog-elevation | 0 16px 40px 0 oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-sheet-shadow | 0 16px 40px 0 oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-dialog-border-width | 1px | — | — | — | |
--dt-dialog-enter | 0ms linear | — | — | — | |
--dt-dialog-exit | 0ms linear | — | — | — | |
--dt-popover-elevation | 0 12px 32px 0 oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.06) | — | — | — | |
--dt-table-border-width | 1px | — | — | — | |
--dt-table-row-height | 48px | — | — | — | |
--dt-table-row-height-compact | 36px | — | — | — | |
--dt-blur-raw-4 | 4px | — | — | — | |
--dt-blur-raw-8 | 8px | — | — | — | |
--dt-blur-raw-12 | 12px | — | — | — | |
--dt-blur-raw-16 | 16px | — | — | — | |
--dt-blur-raw-24 | 24px | — | — | — | |
--dt-blur-raw-40 | 40px | — | — | — | |
--dt-blur-glass | 16px | — | — | — | |
--dt-blur-chip | 8px | — | — | — | |
--dt-backdrop-glass | saturate(1.6) blur(16px) | — | — | — | |
--dt-presence-size | 12px | — | — | — | |
--dt-typing-dot-size | calc(12px / 2) | — | — | — | |
--dt-typing-beat | var(--dt-duration-300) var(--dt-easing-emphasis) | — | — | — | |
--dt-fulfilment-thumb-shadow | 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 2px 6px 0 oklch(0 0 0 / 0.04) | — | — | — | |
--dt-store-cover-max-height | 256px | — | — | — | |
--dt-store-logo-size | 64px | — | — | — | |
--dt-fulfilment-inset | 4px | — | — | — | |
--dt-menu-item-gap | 16px | — | — | — | |
--dt-menu-item-padding | 16px | — | — | — | |
--dt-menu-thumb-size | 96px | — | — | — | |
--dt-menu-grid-min | 307.2px | — | — | — | |
--dt-menu-section-gap | 12px | — | — | — | |
--dt-modifier-row-min-height | 44px | — | — | — | |
--dt-modifier-control-size | 20px | — | — | — |
Texture
5 tokens. A blank cell means the token keeps the value it has in the first theme.
| Token | Light | Dark | Usage |
|---|---|---|---|
--dt-pattern-size | 24px | — | The repeat interval for a dot or grid texture. |
--dt-pattern-ink | oklch(0.715 0 0) | oklch(0.556 0 0) | The line or dot colour. Follows the border-strength role, so it adapts to dark mode and a mono theme on its own. |
--dt-pattern-dots | radial-gradient(var(--dt-pattern-ink) 1px, transparent 1.5px) 0 0 / var(--dt-pattern-size) var(--dt-pattern-size) | — | |
--dt-pattern-grid | linear-gradient(var(--dt-pattern-ink) 1px, transparent 1px) 0 0 / var(--dt-pattern-size) var(--dt-pattern-size), linear-gradient(90deg, var(--dt-pattern-ink) 1px, transparent 1px) 0 0 / var(--dt-pattern-size) var(--dt-pattern-size) | — | |
--dt-surface-texture | none | — | The active choice. Configure or a theme repoints this at one of the two patterns above. |
Type styles
Families and the complete roles the system ships. A role travels as a set: family, size, line height, weight and tracking.
| Family | Stack |
|---|---|
--dt-font-family-sans | "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
--dt-font-family-secondary | var(--dt-font-family-sans) |
--dt-font-family-serif | ui-serif, Georgia, "Times New Roman", serif |
--dt-font-family-mono | "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace |
Type scale
| Style | Size | Line height | Weight | Tracking |
|---|---|---|---|---|
dt-font-size-2xs | 11px | — | — | — |
dt-font-size-xs | 12px | — | — | — |
dt-font-size-sm | 14px | — | — | — |
dt-font-size-md | 16px | — | — | — |
dt-font-size-lg | 19px | — | — | — |
dt-font-size-xl | 23px | — | — | — |
dt-font-size-2xl | 28px | — | — | — |
dt-font-size-3xl | 33px | — | — | — |
dt-font-size-4xl | 40px | — | — | — |
dt-font-size-5xl | 48px | — | — | — |
dt-font-size-6xl | 58px | — | — | — |
dt-font-size-7xl | 69px | — | — | — |
dt-font-size-8xl | 83px | — | — | — |
dt-font-size-9xl | 100px | — | — | — |
dt-font-size-10xl | 120px | — | — | — |
dt-font-size-11xl | 144px | — | — | — |
dt-text-display-2xl | 144px | — | 500 | -0.04em |
dt-text-display-2xl-line | 148px | — | — | — |
dt-text-display-xl | 100px | — | 500 | -0.04em |
dt-text-display-xl-line | 104px | — | — | — |
dt-text-display-lg | 69px | — | 500 | -0.04em |
dt-text-display-lg-line | 76px | — | — | — |
dt-text-display-md | 58px | — | 500 | -0.04em |
dt-text-display-md-line | 64px | — | — | — |
dt-text-display-sm | 48px | — | 500 | -0.03em |
dt-text-display-sm-line | 52px | — | — | — |
dt-text-heading-xl | 40px | — | 500 | -0.03em |
dt-text-heading-xl-line | 48px | — | — | — |
dt-text-heading-lg | 33px | — | 500 | -0.02em |
dt-text-heading-lg-line | 40px | — | — | — |
dt-text-heading-md | 28px | — | 500 | -0.02em |
dt-text-heading-md-line | 36px | — | — | — |
dt-text-heading-sm | 23px | — | 500 | -0.01em |
dt-text-heading-sm-line | 32px | — | — | — |
dt-text-heading-xs | 19px | — | 500 | 0em |
dt-text-heading-xs-line | 28px | — | — | — |
dt-text-body-lg | 19px | — | 400 | 0em |
dt-text-body-lg-line | 28px | — | — | — |
dt-text-body-md | 16px | — | 400 | 0em |
dt-text-body-md-line | 24px | — | — | — |
dt-text-body-sm | 14px | — | 400 | 0em |
dt-text-body-sm-line | 20px | — | — | — |
dt-text-body-xs | 12px | — | 400 | 0em |
dt-text-body-xs-line | 16px | — | — | — |
dt-text-label-lg | 16px | — | 500 | 0em |
dt-text-label-lg-line | 24px | — | — | — |
dt-text-label-md | 14px | — | 500 | 0em |
dt-text-label-md-line | 20px | — | — | — |
dt-text-label-sm | 12px | — | 500 | 0em |
dt-text-label-sm-line | 16px | — | — | — |
dt-text-eyebrow | 11px | — | 600 | 0.06em |
dt-text-eyebrow-line | 16px | — | — | — |
dt-text-code-md | 14px | — | 400 | 0em |
dt-text-code-md-line | 20px | — | — | — |
dt-text-code-sm | 12px | — | 400 | 0em |
dt-text-code-sm-line | 16px | — | — | — |
dt-button-font-size-sm | 14px | — | — | — |
dt-button-font-size-md | 14px | — | — | — |
dt-button-font-size-lg | 16px | — | — | — |
dt-input | 14px | — | — | — |
dt-table-header | 12px | — | 500 | 0.02em |
From the stylesheet
| Style | Size | Line height | Weight | Tracking |
|---|---|---|---|---|
body | 16px | 24px | 400 | 0em |
code | 14px | 24px | 400 | — |
pre | 14px | 24px | 400 | — |
kbd | 14px | 24px | 400 | — |