Pre-composed CSS themes built on Ankh Studio design tokens. Import one file and get reset, tokens, and base styles.
Built on @ankh-studio/tokens - the foundational design tokens for the Ankh Studio design system.
npm install @ankh-studio/themes@import '@ankh-studio/themes/default.css';Or in HTML:
<link rel="stylesheet" href="node_modules/@ankh-studio/themes/dist/default.css">| Theme | Description |
|---|---|
default.css |
Grayscale - wireframing, prototyping |
blue.css |
Corporate blue - healthcare, enterprise |
purple.css |
Creative purple - consumer apps |
reset.css |
Reset only - bring your own tokens |
All themes include design tokens:
.card {
background: var(--color-surface-container);
padding: var(--space-4);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
}
.button {
background: var(--color-primary);
color: var(--color-on-primary);
font-family: var(--font-sans);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
transition: opacity var(--duration-short2) var(--easing-standard);
}- Colors - Primary, secondary, surface, error (auto light/dark)
- Spacing - 9-step scale (
--space-1to--space-9) - Typography - Fonts, sizes, weights, line heights
- Radius -
--radius-nonethrough--radius-full - Shadows -
--shadow-0through--shadow-5 - Motion - Durations and easings
See @ankh-studio/tokens for the complete token reference.
Colors adapt automatically via prefers-color-scheme. No configuration needed.
Requires browsers supporting:
- CSS
light-dark()function - OKLCH color space
- CSS Cascade Layers (
@layer)
Supported: Chrome 123+, Safari 17.5+, Firefox 120+
<html data-scaling="110">Options: 90, 95, 100 (default), 105, 110
<html data-radius="large">Options: none, small, medium (default), large
Each theme declares this layer order:
@layer reset, tokens, intention, palette, base, components;| Layer | Purpose |
|---|---|
reset |
Normalize browser defaults |
tokens |
Design tokens from @ankh-studio/tokens |
intention |
Cognitive-intention tokens (reserved for future use) |
palette |
Color palette overrides (reserved for future use) |
base |
Typography, links, focus states |
components |
Component-library styles (e.g. @ankh-studio/components) |
The components layer gives component authors a predictable place in the cascade. Styles in @layer components { ... } will always win over base but lose to unlayered application CSS. This means component packages can ship styles that integrate cleanly without specificity wars.
Unlayered CSS (the default) automatically overrides all layered styles:
@import '@ankh-studio/themes/default.css';
/* This wins over any layered rule, no !important needed */
.button { background: hotpink; }If your app uses its own cascade layers, declare them after components:
@layer reset, tokens, intention, palette, base, components, app;
@layer app {
.button { background: hotpink; }
}- Architecture Decision Records - Design decisions and proposals
- Contributing - How to contribute
- Expand cascade layer ordering:
reset, tokens, intention, palette, base, components - Add
intentionandpalettelayers (reserved, per ADR-001) - Add
componentslayer for component-library styles - Document cascade layers and override patterns in README
- Initial release with default, blue, purple themes
- CSS reset included
- Automatic dark mode via
prefers-color-scheme
MIT