Skeleton v5
Token reference
Every Core API variable in the open Skeleton theme as text, grouped the way the workspace is — and the same variables as the one CSS file an app installs.
247 variables ·
[data-theme='untitled-skeleton-theme']Colors · 174
| Variable | Value |
|---|---|
| var(--color-primary-contrast-500) | |
| var(--color-primary-contrast-500) | |
| var(--color-primary-500) | |
| var(--color-primary-500) | |
| oklch(83.49% 0.07 19.81deg) | |
| oklch(77.4% 0.11 21.98deg) | |
| oklch(72.13% 0.15 24.9deg) | |
| oklch(67.39% 0.19 26.71deg) | |
| oklch(89.99% 0.04 14.04deg) | |
| oklch(63.72% 0.22 28.71deg) | |
| oklch(59.28% 0.21 28.53deg) | |
| oklch(54.92% 0.2 28.58deg) | |
| oklch(50.51% 0.19 28.72deg) | |
| oklch(46.22% 0.18 28.88deg) | |
| oklch(41.86% 0.17 29.23deg) | |
| var(--color-error-contrast-dark) | |
| var(--color-error-contrast-dark) | |
| var(--color-error-contrast-dark) | |
| var(--color-error-contrast-dark) | |
| var(--color-error-contrast-dark) | |
| var(--color-error-contrast-light) | |
| var(--color-error-contrast-light) | |
| var(--color-error-contrast-light) | |
| var(--color-error-contrast-light) | |
| var(--color-error-contrast-light) | |
| var(--color-error-contrast-light) | |
| var(--color-error-950) | |
| var(--color-error-50) | |
| oklch(80.13% 0.09 258.49deg) | |
| oklch(72.77% 0.13 258.15deg) | |
| oklch(65.96% 0.16 257.98deg) | |
| oklch(59.41% 0.19 258.65deg) | |
| oklch(87.39% 0.06 259.76deg) | |
| oklch(53.89% 0.22 260.25deg) | |
| oklch(47.81% 0.21 261.64deg) | |
| oklch(41.88% 0.2 262.85deg) | |
| oklch(35.89% 0.2 263.83deg) | |
| oklch(30.14% 0.18 264.4deg) | |
| oklch(24.48% 0.17 264.05deg) | |
| var(--color-primary-contrast-dark) | |
| var(--color-primary-contrast-dark) | |
| var(--color-primary-contrast-dark) | |
| var(--color-primary-contrast-dark) | |
| var(--color-primary-contrast-dark) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-contrast-light) | |
| var(--color-primary-950) | |
| var(--color-primary-50) | |
| var(--color-surface-950) | |
| var(--color-surface-50) | |
| oklch(78.51% 0.09 303.57deg) | |
| oklch(70.44% 0.13 304.44deg) | |
| oklch(62.83% 0.17 303.81deg) | |
| oklch(55.48% 0.2 302.75deg) | |
| oklch(86.66% 0.05 300.15deg) | |
| oklch(49.07% 0.23 300.46deg) | |
| oklch(45.39% 0.21 299.6deg) | |
| oklch(41.75% 0.19 298.26deg) | |
| oklch(37.84% 0.17 296.27deg) | |
| oklch(34.08% 0.15 293.97deg) | |
| oklch(30.18% 0.13 291.16deg) | |
| var(--color-secondary-contrast-dark) | |
| var(--color-secondary-contrast-dark) | |
| var(--color-secondary-contrast-dark) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-dark) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-contrast-light) | |
| var(--color-secondary-950) | |
| var(--color-secondary-50) | |
| oklch(91.62% 0.1 178.6deg) | |
| oklch(89.44% 0.11 177.16deg) | |
| oklch(87.13% 0.12 176.9deg) | |
| oklch(85.09% 0.13 175.45deg) | |
| oklch(94.05% 0.09 178.66deg) | |
| oklch(82.91% 0.13 174.95deg) | |
| oklch(72.85% 0.12 175.7deg) | |
| oklch(62.4% 0.1 175.99deg) | |
| oklch(51.26% 0.08 178.28deg) | |
| oklch(39.72% 0.06 179.74deg) | |
| oklch(27.27% 0.04 185.29deg) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-dark) | |
| var(--color-success-contrast-light) | |
| var(--color-success-contrast-light) | |
| var(--color-success-contrast-light) | |
| var(--color-success-contrast-light) | |
| var(--color-success-contrast-light) | |
| var(--color-success-950) | |
| var(--color-success-50) | |
| oklch(96.19% 0 none) | |
| oklch(81.41% 0 none) | |
| oklch(71.55% 0 none) | |
| oklch(61.67% 0 none) | |
| oklch(100% 0 none) | |
| oklch(51.03% 0 none) | |
| oklch(44.95% 0 none) | |
| oklch(38.67% 0 none) | |
| oklch(32.11% 0 none) | |
| oklch(25.2% 0 none) | |
| oklch(17.76% 0 none) | |
| var(--color-surface-contrast-dark) | |
| var(--color-surface-contrast-dark) | |
| var(--color-surface-contrast-dark) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-dark) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-contrast-light) | |
| var(--color-surface-950) | |
| var(--color-surface-50) | |
| oklch(82.91% 0.13 339.68deg) | |
| oklch(76% 0.18 345.55deg) | |
| oklch(70.27% 0.23 350.68deg) | |
| oklch(66.48% 0.25 355.85deg) | |
| oklch(90.73% 0.08 328.92deg) | |
| oklch(64.54% 0.26 2.48deg) | |
| oklch(59.37% 0.24 1.7deg) | |
| oklch(53.9% 0.22 0.5deg) | |
| oklch(48.45% 0.2 359.66deg) | |
| oklch(42.69% 0.17 357.71deg) | |
| oklch(36.93% 0.15 355.34deg) | |
| var(--color-tertiary-contrast-dark) | |
| var(--color-tertiary-contrast-dark) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-dark) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-contrast-light) | |
| var(--color-tertiary-950) | |
| var(--color-tertiary-50) | |
| oklch(92.83% 0.06 82.16deg) | |
| oklch(90.12% 0.08 80.33deg) | |
| oklch(87.59% 0.1 80.01deg) | |
| oklch(85.03% 0.12 78.35deg) | |
| oklch(95.67% 0.05 84.56deg) | |
| oklch(82.46% 0.14 76.71deg) | |
| oklch(76.34% 0.13 72.25deg) | |
| oklch(70.34% 0.13 68.09deg) | |
| oklch(63.99% 0.13 63.18deg) | |
| oklch(57.91% 0.13 57.97deg) | |
| oklch(51.69% 0.13 51.44deg) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-dark) | |
| var(--color-warning-contrast-light) | |
| var(--color-warning-contrast-light) | |
| var(--color-warning-contrast-light) | |
| var(--color-warning-contrast-light) | |
| var(--color-warning-contrast-light) | |
| var(--color-warning-950) | |
| var(--color-warning-50) |
Typography · 65
| Variable | Value |
|---|---|
| 1.067 | |
| inherit | |
| none | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| var(--color-primary-500) | |
| var(--color-primary-500) | |
| inherit | |
| none | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| underline | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| none | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| var(--color-surface-50) | |
| var(--color-surface-950) | |
| system-ui, sans-serif | |
| inherit | |
| inherit | |
| inherit | |
| normal | |
| normal | |
| inherit | |
| 0em | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| normal | |
| bold | |
| inherit | |
| inherit | |
| inherit | |
| inherit | |
| inherit |
Spacing · 1
| Variable | Value |
|---|---|
| 0.25rem |
Shape · 7
| Variable | Value |
|---|---|
| initial | |
| initial | |
| 1px | |
| 1px | |
| 1px | |
| 0.375rem | |
| 0.75rem |