Theme Showcase
The full ShockStack design token system. Pick any built-in theme from the header selector and all values update live.
Accent Colors
Seven semantic accent colors shared across all built-in themes. Click any swatch to copy its hex value.
Surface Colors
Backgrounds, foregrounds, borders, and selection colors that define the UI chrome.
Typography
Font families, size scale, and weight demos.
Sans — Inter
The quick brown fox jumps over the lazy dog
--font-sans Mono — JetBrains Mono
const x = () => 42;
--font-mono Size Scale
xs ShockStack 0.75rem sm ShockStack 0.875rem base ShockStack 1rem lg ShockStack 1.125rem xl ShockStack 1.25rem 2xl ShockStack 1.5rem 3xl ShockStack 1.875rem 4xl ShockStack 2.25rem 5xl ShockStack 3rem Weights
Normal
400 Medium 500 Semibold 600 Bold 700 Spacing Scale
Consistent spacing tokens mapped to CSS custom properties.
spacing-1 spacing-2 spacing-3 spacing-4 spacing-5 spacing-6 spacing-8 spacing-10 spacing-12 spacing-16 spacing-20 spacing-24 Border Radius
Radius tokens from sharp to fully rounded.
none 0 sm 0.25rem md 0.375rem lg 0.5rem xl 0.75rem 2xl 1rem full 9999px Shadows
Elevation levels from subtle to dramatic.
shadow-sm shadow-md shadow-lg shadow-xl Component Examples
Common UI patterns built with the design token system.
Buttons
Badges
Purple Pink Green Cyan Orange Red Yellow
Cards
Default Card
A standard card with secondary background and default border.
Interactive Card
Hover for purple border accent and elevation shadow.
Accent Card
Highlighted with accent background tint and border.
Form Inputs
Links
Code Block
tokens.config.ts
import StyleDictionary from "style-dictionary";
export default {
source: ["tokens/**/*.json"],
platforms: {
css: { transformGroup: "css" },
ts: { transformGroup: "js" }
}
};Token Reference
Complete mapping of every token with its CSS variable, Tailwind class, and theme values.
| Token | CSS Variable | Tailwind | DRACULA Value | ALUCARD Value | NORD Value | GRUVBOX Value | GRUVBOX LIGHT Value | GRUVBOX SOFT Value | GRUVBOX HARD Value | CATPPUCCIN MOCHA Value | TOKYO NIGHT Value | ONE DARK Value | SOLARIZED DARK Value | SOLARIZED LIGHT Value | MIDNIGHT Value | DAWN Value |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| spacing-0 | --ss-spacing-0 | — | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| spacing-1 | --ss-spacing-1 | — | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem |
| spacing-2 | --ss-spacing-2 | — | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem |
| spacing-3 | --ss-spacing-3 | — | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem |
| spacing-4 | --ss-spacing-4 | — | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem |
| spacing-5 | --ss-spacing-5 | — | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem |
| spacing-6 | --ss-spacing-6 | — | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem |
| spacing-8 | --ss-spacing-8 | — | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem | 2rem |
| spacing-10 | --ss-spacing-10 | — | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem | 2.5rem |
| spacing-12 | --ss-spacing-12 | — | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem |
| spacing-16 | --ss-spacing-16 | — | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem | 4rem |
| spacing-20 | --ss-spacing-20 | — | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem | 5rem |
| spacing-24 | --ss-spacing-24 | — | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem | 6rem |
| spacing-32 | --ss-spacing-32 | — | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem | 8rem |
| spacing-40 | --ss-spacing-40 | — | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem | 10rem |
| spacing-48 | --ss-spacing-48 | — | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem | 12rem |
| spacing-64 | --ss-spacing-64 | — | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem | 16rem |
| font-family-sans | --ss-font-family-sans | — | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif | Inter, ui-sans-serif, system-ui, sans-serif |
| font-family-mono | --ss-font-family-mono | — | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace | 'JetBrains Mono', ui-monospace, monospace |
| font-size-xs | --ss-font-size-xs | — | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem |
| font-size-sm | --ss-font-size-sm | — | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem | 0.875rem |
| font-size-base | --ss-font-size-base | — | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem |
| font-size-lg | --ss-font-size-lg | — | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem | 1.125rem |
| font-size-xl | --ss-font-size-xl | — | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem | 1.25rem |
| font-size-2xl | --ss-font-size-2xl | — | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem |
| font-size-3xl | --ss-font-size-3xl | — | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem | 1.875rem |
| font-size-4xl | --ss-font-size-4xl | — | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem | 2.25rem |
| font-size-5xl | --ss-font-size-5xl | — | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem | 3rem |
| font-weight-normal | --ss-font-weight-normal | — | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 | 400 |
| font-weight-medium | --ss-font-weight-medium | — | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 | 500 |
| font-weight-semibold | --ss-font-weight-semibold | — | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 | 600 |
| font-weight-bold | --ss-font-weight-bold | — | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 | 700 |
| font-leading-none | --ss-font-leading-none | — | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| font-leading-tight | --ss-font-leading-tight | — | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 | 1.25 |
| font-leading-snug | --ss-font-leading-snug | — | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 | 1.375 |
| font-leading-normal | --ss-font-leading-normal | — | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 | 1.5 |
| font-leading-relaxed | --ss-font-leading-relaxed | — | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 | 1.625 |
| font-leading-loose | --ss-font-leading-loose | — | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
| radius-none | --ss-radius-none | — | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| radius-sm | --ss-radius-sm | — | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem | 0.25rem |
| radius-md | --ss-radius-md | — | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem |
| radius-lg | --ss-radius-lg | — | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem | 0.5rem |
| radius-xl | --ss-radius-xl | — | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem | 0.75rem |
| radius-2xl | --ss-radius-2xl | — | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem | 1rem |
| radius-full | --ss-radius-full | — | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px | 9999px |
| shadow-sm | --ss-shadow-sm | — | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| shadow-md | --ss-shadow-md | — | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
| shadow-lg | --ss-shadow-lg | — | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
| shadow-xl | --ss-shadow-xl | — | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
| z-0 | --ss-z-0 | — | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| z-10 | --ss-z-10 | — | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 |
| z-20 | --ss-z-20 | — | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 |
| z-30 | --ss-z-30 | — | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 | 30 |
| z-40 | --ss-z-40 | — | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 | 40 |
| z-50 | --ss-z-50 | — | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| breakpoint-sm | --ss-breakpoint-sm | — | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px | 640px |
| breakpoint-md | --ss-breakpoint-md | — | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px | 768px |
| breakpoint-lg | --ss-breakpoint-lg | — | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px | 1024px |
| breakpoint-xl | --ss-breakpoint-xl | — | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px | 1280px |
| breakpoint-2xl | --ss-breakpoint-2xl | — | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px | 1536px |
| color-bg-primary | --ss-color-bg-primary | bg-bg-primary | #282a36 | #f8f8f2 | #2e3440 | #282828 | #fbf1c7 | #32302f | #1d2021 | #1e1e2e | #1a1b26 | #282c34 | #002b36 | #fdf6e3 | #0b1020 | #faf4ed |
| color-bg-secondary | --ss-color-bg-secondary | bg-bg-secondary | #44475a | #e8e8e0 | #3b4252 | #3c3836 | #f2e5bc | #3c3836 | #282828 | #313244 | #24283b | #353b45 | #073642 | #eee8d5 | #121a2f | #fffaf3 |
| color-bg-tertiary | --ss-color-bg-tertiary | bg-bg-tertiary | #1e1f29 | #ffffff | #242933 | #1d2021 | #ebdbb2 | #282828 | #141617 | #181825 | #16161e | #21252b | #001f27 | #e7dfc9 | #060b16 | #f2e9de |
| color-fg-primary | --ss-color-fg-primary | text-fg-primary | #f8f8f2 | #282a36 | #eceff4 | #ebdbb2 | #3c3836 | #ebdbb2 | #ebdbb2 | #cdd6f4 | #c0caf5 | #abb2bf | #93a1a1 | #586e75 | #e6edf7 | #575279 |
| color-fg-secondary | --ss-color-fg-secondary | text-fg-secondary | #6272a4 | #44475a | #d8dee9 | #d5c4a1 | #504945 | #d5c4a1 | #d5c4a1 | #bac2de | #a9b1d6 | #9da5b4 | #839496 | #657b83 | #a8b3cf | #797593 |
| color-fg-muted | --ss-color-fg-muted | text-fg-muted | #6272a4 | #6272a4 | #81a1c1 | #a89984 | #665c54 | #bdae93 | #bdae93 | #a6adc8 | #9aa5ce | #7f848e | #657b83 | #839496 | #7f8aa8 | #9893a5 |
| color-accent-purple | --ss-color-accent-purple | bg-accent-purple | #bd93f9 | #7c3aed | #b48ead | #d3869b | #8f3f71 | #d3869b | #d3869b | #cba6f7 | #bb9af7 | #c678dd | #6c71c4 | #6c71c4 | #a78bfa | #907aa9 |
| color-accent-pink | --ss-color-accent-pink | bg-accent-pink | #ff79c6 | #db2777 | #d087a5 | #fb4934 | #af3a03 | #fb4934 | #fb4934 | #f5c2e7 | #f7768e | #e06c75 | #d33682 | #d33682 | #f472b6 | #d7827e |
| color-accent-green | --ss-color-accent-green | bg-accent-green | #50fa7b | #16a34a | #a3be8c | #b8bb26 | #79740e | #b8bb26 | #b8bb26 | #a6e3a1 | #9ece6a | #98c379 | #859900 | #859900 | #34d399 | #56949f |
| color-accent-cyan | --ss-color-accent-cyan | bg-accent-cyan | #8be9fd | #0891b2 | #88c0d0 | #8ec07c | #427b58 | #8ec07c | #8ec07c | #89dceb | #7dcfff | #56b6c2 | #2aa198 | #2aa198 | #22d3ee | #286983 |
| color-accent-orange | --ss-color-accent-orange | bg-accent-orange | #ffb86c | #ea580c | #d08770 | #fe8019 | #af3a03 | #fe8019 | #fe8019 | #fab387 | #ff9e64 | #d19a66 | #cb4b16 | #cb4b16 | #fb923c | #ea9d34 |
| color-accent-red | --ss-color-accent-red | bg-accent-red | #ff5555 | #dc2626 | #bf616a | #fb4934 | #9d0006 | #cc241d | #cc241d | #f38ba8 | #f7768e | #e06c75 | #dc322f | #dc322f | #f87171 | #b4637a |
| color-accent-yellow | --ss-color-accent-yellow | bg-accent-yellow | #f1fa8c | #ca8a04 | #ebcb8b | #fabd2f | #b57614 | #fabd2f | #fabd2f | #f9e2af | #e0af68 | #e5c07b | #b58900 | #b58900 | #facc15 | #d6a24d |
| color-border-default | --ss-color-border-default | border-border-default | #44475a | #d1d5db | #4c566a | #504945 | #d5c4a1 | #665c54 | #3c3836 | #45475a | #414868 | #4b5263 | #094252 | #d8d0b8 | #26314d | #dfdad9 |
| color-border-muted | --ss-color-border-muted | border-border-muted | #383a4a | #e5e7eb | #434c5e | #665c54 | #e6d9b5 | #7c6f64 | #504945 | #313244 | #2f354f | #3e4451 | #0c313a | #e6dec7 | #1a2340 | #ebe5e2 |
| color-selection | --ss-color-selection | bg-selection | #44475a | #ddd6fe | #434c5e | #504945 | #d5c4a1 | #504945 | #3c3836 | #45475a | #33467c | #3e4451 | #073642 | #eee8d5 | #1f2a44 | #ece4d8 |
| color-current-line | --ss-color-current-line | bg-current-line | #44475a | #f3f4f6 | #3b4252 | #3c3836 | #ebdbb2 | #3c3836 | #282828 | #313244 | #24283b | #2c313c | #073642 | #eee8d5 | #121a2f | #f2e9de |