BlueSlate / reference
BlueSlate.Tokens.css

Start a dark interface with framework-neutral Blue Slate v0.5.0 tokens.
DownloadView source file Read related standard
Useful when

My interface styling is inconsistent.
What you should change

Map semantic variables to your own components. Candidate-active tokens do not supply a component library or prove accessibility.
Use only the parts that help. These are starting points, not rigid requirements.
View resource

/* Generated from BlueSlate.Tokens.toml v0.5.0. Do not edit. */
:root {
  color-scheme: dark;
  --bs-palette-abyss-hex: #050913;
  --bs-palette-abyss-oklch: oklch(0.140499 0.023636 263.451);
  --bs-palette-abyss: oklch(0.140499 0.023636 263.451);
  --bs-palette-deep-navy-hex: #0B1728;
  --bs-palette-deep-navy-oklch: oklch(0.203331 0.038347 257.213);
  --bs-palette-deep-navy: oklch(0.203331 0.038347 257.213);
  --bs-palette-navy-hex: #172536;
  --bs-palette-navy-oklch: oklch(0.260455 0.037543 253.857);
  --bs-palette-navy: oklch(0.260455 0.037543 253.857);
  --bs-palette-slate-hex: #262F39;
  --bs-palette-slate-oklch: oklch(0.301038 0.022052 251.263);
  --bs-palette-slate: oklch(0.301038 0.022052 251.263);
  --bs-palette-steel-hex: #40423F;
  --bs-palette-steel-oklch: oklch(0.376139 0.005681 134.902);
  --bs-palette-steel: oklch(0.376139 0.005681 134.902);
  --bs-palette-steel-blue-hex: #192E46;
  --bs-palette-steel-blue-oklch: oklch(0.296104 0.051680 252.826);
  --bs-palette-steel-blue: oklch(0.296104 0.051680 252.826);
  --bs-palette-ocean-blue-hex: #29384A;
  --bs-palette-ocean-blue-oklch: oklch(0.335603 0.037625 253.387);
  --bs-palette-ocean-blue: oklch(0.335603 0.037625 253.387);
  --bs-palette-dusk-hex: #36485A;
  --bs-palette-dusk-oklch: oklch(0.393979 0.038243 248.824);
  --bs-palette-dusk: oklch(0.393979 0.038243 248.824);
  --bs-palette-blue-grey-hex: #53606A;
  --bs-palette-blue-grey-oklch: oklch(0.481638 0.022774 241.125);
  --bs-palette-blue-grey: oklch(0.481638 0.022774 241.125);
  --bs-palette-cool-grey-hex: #6F7E87;
  --bs-palette-cool-grey-oklch: oklch(0.583926 0.022470 234.134);
  --bs-palette-cool-grey: oklch(0.583926 0.022470 234.134);
  --bs-palette-mist-blue-hex: #627786;
  --bs-palette-mist-blue-oklch: oklch(0.557827 0.034013 239.306);
  --bs-palette-mist-blue: oklch(0.557827 0.034013 239.306);
  --bs-palette-mist-grey-hex: #768892;
  --bs-palette-mist-grey-oklch: oklch(0.615741 0.025814 232.128);
  --bs-palette-mist-grey: oklch(0.615741 0.025814 232.128);
  --bs-palette-pale-mist-hex: #98A2A2;
  --bs-palette-pale-mist-oklch: oklch(0.704224 0.011405 196.898);
  --bs-palette-pale-mist: oklch(0.704224 0.011405 196.898);
  --bs-palette-sea-foam-hex: #B9C9C5;
  --bs-palette-sea-foam-oklch: oklch(0.822514 0.018297 179.220);
  --bs-palette-sea-foam: oklch(0.822514 0.018297 179.220);
  --bs-palette-off-white-hex: #E1E7DB;
  --bs-palette-off-white-oklch: oklch(0.920072 0.017258 128.671);
  --bs-palette-off-white: oklch(0.920072 0.017258 128.671);
  --bs-palette-electric-cyan-hex: #00D8FF;
  --bs-palette-electric-cyan-oklch: oklch(0.813624 0.145407 217.106);
  --bs-palette-electric-cyan: oklch(0.813624 0.145407 217.106);
  --bs-palette-arctic-cyan-hex: #65F2FF;
  --bs-palette-arctic-cyan-oklch: oklch(0.889353 0.121810 203.665);
  --bs-palette-arctic-cyan: oklch(0.889353 0.121810 203.665);
  --bs-palette-pink-hex: #ED72B6;
  --bs-palette-pink-oklch: oklch(0.716016 0.168988 347.887);
  --bs-palette-pink: oklch(0.716016 0.168988 347.887);
  --bs-palette-teal-hex: #21C6B8;
  --bs-palette-teal-oklch: oklch(0.746046 0.125970 185.650);
  --bs-palette-teal: oklch(0.746046 0.125970 185.650);
  --bs-palette-aqua-teal-hex: #3AD1C3;
  --bs-palette-aqua-teal-oklch: oklch(0.780700 0.124203 185.745);
  --bs-palette-aqua-teal: oklch(0.780700 0.124203 185.745);
  --bs-palette-amber-hex: #FF884D;
  --bs-palette-amber-oklch: oklch(0.748399 0.162037 45.458);
  --bs-palette-amber: oklch(0.748399 0.162037 45.458);
  --bs-palette-brass-hex: #D9A441;
  --bs-palette-brass-oklch: oklch(0.750664 0.129510 79.849);
  --bs-palette-brass: oklch(0.750664 0.129510 79.849);
  --bs-palette-violet-hex: #9C7CFF;
  --bs-palette-violet-oklch: oklch(0.676716 0.187069 291.882);
  --bs-palette-violet: oklch(0.676716 0.187069 291.882);
  --bs-palette-indigo-hex: #6A5BFF;
  --bs-palette-indigo-oklch: oklch(0.583404 0.233344 280.448);
  --bs-palette-indigo: oklch(0.583404 0.233344 280.448);
  --bs-palette-danger-hex: #FF5C74;
  --bs-palette-danger-oklch: oklch(0.695469 0.197538 15.244);
  --bs-palette-danger: oklch(0.695469 0.197538 15.244);
  --bs-palette-success-hex: #30D58C;
  --bs-palette-success-oklch: oklch(0.774431 0.168049 158.327);
  --bs-palette-success: oklch(0.774431 0.168049 158.327);
  --bs-palette-verified-hex: #6FE3A4;
  --bs-palette-verified-oklch: oklch(0.831541 0.139538 157.579);
  --bs-palette-verified: oklch(0.831541 0.139538 157.579);
  --bs-semantic-surface-canvas: oklch(0.140499 0.023636 263.451);
  --bs-semantic-surface-canvas-recessed: oklch(0.203331 0.038347 257.213);
  --bs-semantic-surface-panel: oklch(0.260455 0.037543 253.857);
  --bs-semantic-surface-panel-raised: oklch(0.301038 0.022052 251.263);
  --bs-semantic-surface-panel-accent: oklch(0.296104 0.051680 252.826);
  --bs-semantic-surface-overlay: oklch(0.203331 0.038347 257.213);
  --bs-semantic-surface-popover: oklch(0.203331 0.038347 257.213);
  --bs-semantic-surface-input: oklch(0.203331 0.038347 257.213);
  --bs-semantic-surface-table: oklch(0.203331 0.038347 257.213);
  --bs-semantic-surface-disabled: oklch(0.203331 0.038347 257.213);
  --bs-semantic-content-primary: oklch(0.920072 0.017258 128.671);
  --bs-semantic-content-emphasis: oklch(0.920072 0.017258 128.671);
  --bs-semantic-content-secondary: oklch(0.822514 0.018297 179.220);
  --bs-semantic-content-tertiary: oklch(0.704224 0.011405 196.898);
  --bs-semantic-content-disabled: oklch(0.583926 0.022470 234.134);
  --bs-semantic-content-link: oklch(0.889353 0.121810 203.665);
  --bs-semantic-content-link-hover: oklch(0.960 0.036 197.000);
  --bs-semantic-content-code: oklch(0.822514 0.018297 179.220);
  --bs-semantic-content-code-accent: oklch(0.716016 0.168988 347.887);
  --bs-semantic-structure-border: oklch(0.393979 0.038243 248.824);
  --bs-semantic-structure-border-soft: oklch(0.481638 0.022774 241.125);
  --bs-semantic-structure-border-strong: oklch(0.583926 0.022470 234.134);
  --bs-semantic-structure-border-translucent: oklch(0.557827 0.030197 286.812 / 0.28);
  --bs-semantic-intent-primary: oklch(0.813624 0.145407 217.106);
  --bs-semantic-intent-secondary: oklch(0.557827 0.034013 239.306);
  --bs-semantic-intent-success: oklch(0.774431 0.168049 158.327);
  --bs-semantic-intent-info: oklch(0.676716 0.187069 291.882);
  --bs-semantic-intent-warning: oklch(0.748399 0.162037 45.458);
  --bs-semantic-intent-danger: oklch(0.695469 0.197538 15.244);
  --bs-semantic-intent-attention: oklch(0.750664 0.129510 79.849);
  --bs-semantic-intent-taxonomy: oklch(0.676716 0.187069 291.882);
  --bs-semantic-intent-archive: oklch(0.583404 0.233344 280.448);
  --bs-semantic-intent-verified: oklch(0.831541 0.139538 157.579);
  --bs-semantic-interaction-action: oklch(0.813624 0.145407 217.106);
  --bs-semantic-interaction-action-secondary: oklch(0.746046 0.125970 185.650);
  --bs-semantic-interaction-hover: oklch(0.889353 0.121810 203.665);
  --bs-semantic-interaction-active: oklch(0.296104 0.051680 252.826);
  --bs-semantic-interaction-disabled: oklch(0.583926 0.022470 234.134);
  --bs-semantic-interaction-focus: oklch(0.889353 0.121810 203.665);
  --bs-semantic-validation-valid: oklch(0.831541 0.139538 157.579);
  --bs-semantic-validation-valid-border: oklch(0.774431 0.168049 158.327);
  --bs-semantic-validation-invalid: oklch(0.695469 0.197538 15.244);
  --bs-semantic-validation-invalid-border: oklch(0.695469 0.197538 15.244);
  --bs-component-panel-background: oklch(0.260455 0.037543 253.857);
  --bs-component-panel-raised-background: oklch(0.301038 0.022052 251.263);
  --bs-component-panel-border: oklch(0.393979 0.038243 248.824);
  --bs-component-button-primary-background: oklch(0.813624 0.145407 217.106);
  --bs-component-button-secondary-background: oklch(0.746046 0.125970 185.650);
  --bs-component-button-danger-background: oklch(0.695469 0.197538 15.244);
  --bs-component-button-foreground: oklch(0.140499 0.023636 263.451);
  --bs-component-button-focus: oklch(0.889353 0.121810 203.665);
  --bs-component-button-disabled: oklch(0.583926 0.022470 234.134);
  --bs-component-input-background: oklch(0.203331 0.038347 257.213);
  --bs-component-input-foreground: oklch(0.920072 0.017258 128.671);
  --bs-component-input-border: oklch(0.393979 0.038243 248.824);
  --bs-component-input-valid: oklch(0.774431 0.168049 158.327);
  --bs-component-input-invalid: oklch(0.695469 0.197538 15.244);
  --bs-component-tab-background: oklch(0.203331 0.038347 257.213);
  --bs-component-tab-active: oklch(0.296104 0.051680 252.826);
  --bs-component-tab-foreground: oklch(0.822514 0.018297 179.220);
  --bs-component-table-background: oklch(0.203331 0.038347 257.213);
  --bs-component-table-header: oklch(0.260455 0.037543 253.857);
  --bs-component-table-border: oklch(0.481638 0.022774 241.125);
  --bs-component-code-background: oklch(0.140499 0.023636 263.451);
  --bs-component-code-foreground: oklch(0.822514 0.018297 179.220);
  --bs-component-code-keyword: oklch(0.813624 0.145407 217.106);
  --bs-component-code-string: oklch(0.831541 0.139538 157.579);
  --bs-component-code-number: oklch(0.750664 0.129510 79.849);
  --bs-component-chip-neutral: oklch(0.822514 0.018297 179.220);
  --bs-component-chip-active: oklch(0.813624 0.145407 217.106);
  --bs-component-chip-verified: oklch(0.831541 0.139538 157.579);
  --bs-component-chip-warning: oklch(0.748399 0.162037 45.458);
  --bs-component-chip-taxonomy: oklch(0.676716 0.187069 291.882);
  --bs-component-chip-archive: oklch(0.583404 0.233344 280.448);
  --bs-component-alert-info: oklch(0.676716 0.187069 291.882);
  --bs-component-alert-success: oklch(0.774431 0.168049 158.327);
  --bs-component-alert-warning: oklch(0.748399 0.162037 45.458);
  --bs-component-alert-danger: oklch(0.695469 0.197538 15.244);
  --bs-foundation-radius-small: 0.375rem;
  --bs-foundation-radius-default: 0.625rem;
  --bs-foundation-radius-large: 0.875rem;
  --bs-foundation-radius-extra-large: 1.25rem;
  --bs-foundation-radius-pill: 50rem;
  --bs-foundation-spacing-zero: 0;
  --bs-foundation-spacing-one: 0.25rem;
  --bs-foundation-spacing-two: 0.5rem;
  --bs-foundation-spacing-three: 1rem;
  --bs-foundation-spacing-four: 1.5rem;
  --bs-foundation-spacing-five: 3rem;
  --bs-foundation-elevation-small: 0 0.125rem 0.5rem oklch(0 0 0 / 0.22);
  --bs-foundation-elevation-panel: 0 0.5rem 1.5rem oklch(0 0 0 / 0.30), inset 0 1px 0 oklch(0.920072 0.015742 120.888 / 0.05);
  --bs-foundation-elevation-floating: 0 1.25rem 4.375rem oklch(0 0 0 / 0.38), inset 0 1px 0 oklch(0.920072 0.015742 120.888 / 0.07);
  --bs-foundation-elevation-inset: inset 0 1px 2px oklch(0 0 0 / 0.30);
  --bs-foundation-focus-ring-width: 0.25rem;
  --bs-foundation-focus-ring-opacity: 0.3;
  --bs-foundation-focus-ring-color: oklch(0.889353 0.121810 203.665);
  --bs-font-display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --bs-font-sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --bs-font-mono: "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}