Theme: Aurora
Modern, color-confident preset toned to the WireKit brand magenta (hue 306°, near #ab35ff from the official logo). Less monochrome than Default; more color-forward than Cupertino. Cool-tinted surfaces, brand-tinged borders and shadows, spring-y but restrained easing curve. A separate --color-wk-accent-brand token preserves the brand-exact value for decorative-only surfaces (logo backplate, hero glyphs); the interactive accent uses a WCAG-AA-clean lightness so button labels stay legible.
Scope: Aurora re-tones the brand / accent surface only. The semantic intents --color-wk-success, --color-wk-warning and --color-wk-danger are intentionally inherited from the WireKit default palette — they keep their universally legible green / amber / red meanings whatever the preset. If you want semantics that harmonize with Aurora's magenta, override those tokens in your own :root block below the preset.
info is not one of them, and neither of its two tokens inherits--color-wk-info does not belong beside the other three. There are two info tokens and they answer to different things, so do not re-tone one expecting the other to follow: --color-wk-info is the fifth chart dataset color, declared as a fixed cyan in both themes and not a semantic intent at all. Overriding it changes charts and silently nothing else.
The one that reaches your message text is --color-wk-info-text, and it is defined as var(--color-wk-accent-content). So it is not inherited from the default palette either — it FOLLOWS the accent, which is exactly what this preset re-tones. Aurora's informational text is already magenta. If you want it to stay blue, pin it explicitly, in both modes:
:root { --color-wk-info-text: var(--color-blue-700); }
.dark { --color-wk-info-text: var(--color-blue-400); }
The second line is not optional. WireKit sets dark on <html>, where your :root rule outranks WireKit's own dark default, so a blue pinned for light mode keeps applying in dark mode: blue-700 measures 2.85:1 on Aurora's dark background, and blue-400 measures 7.39:1.
Token-cascade lock-step. When you change the accent hue, the dependent token families must follow in lock-step or the theme reads as visually inconsistent. The hue-touching tokens are the 4 --color-wk-accent* tokens, --color-wk-text (a whisper of hue), the 2 --color-wk-code* tokens, and the 4 --shadow-wk-* casts. In light mode the surface + border families (--color-wk-bg*, --color-wk-border*) are deliberately neutral (zero chroma) — they read as true white / gray like the default theme and stay neutral when you retint the hue. In dark mode the surfaces keep a subtle hue tint (conventional for dark themes), so there the --color-wk-bg* / --color-wk-border* families track the hue too. Forgetting the .dark shadow set is the most common drift (the symptom is "cards look flat in dark mode" because the light shadows' 0.04 alpha is invisible against a dark background).
One-line retint via --theme-hue. Aurora is built on a single hue variable. Once the preset is applied, you can shift the entire palette to any hue by setting --theme-hue in your own :root block AFTER @wirekitStyles:
:root { --theme-hue: 264; } /* blue Aurora — #2b62ef, next to Tailwind's blue-600 */
:root { --theme-hue: 277; } /* indigo Aurora — #5957ed */
:root { --theme-hue: 293; } /* violet Aurora — #7c49e3, Tailwind's violet-600 hue */
:root { --theme-hue: 24; } /* crimson Aurora — #d40728 */
The hex beside each hue is the light-mode accent it produces at Aurora's own
oklch(0.55 0.22 …), so you can check a hue against it before pasting. Hue 264 is Tailwind's
blue rather than an indigo, and 24 is crimson rather than an orange: at L=0.55 an orange needs
a hue nearer 60, and it comes out brown rather than warm.
One line is enough outside the cool band, and not inside it. At the same lightness a green, teal or cyan renders far brighter than a magenta or a red, so the near-white accent foreground loses contrast against it: accent-fg on accent is 5.28:1 at the default hue 306 and 3.64:1 at hue 189, its worst point. Across the wheel, L=0.55 clears WCAG AA everywhere except roughly 113°–247° — the green-through-blue band, where the accent needs one step down. That co-tune is three declarations and it is written out under Cool hues below.
/* WireKit Theme: Aurora — brand magenta, rounded, soft shadows.
Single-source hue: every hue-dependent token reads from
--theme-hue (defaults to 306 = brand magenta). Override --theme-hue
in your own :root block AFTER the preset to retint the entire
palette in one line — see "Cool hues" below for the one band where
that line needs company.
WCAG AA verified at L=0.55 for the active accent — accent-fg
(near-white) on accent clears 5.28:1 AT THIS HUE. The L=0.58 initial
draft cleared AA here too, at 4.64:1; what it did not clear was the
REST of the wheel. A lightness is not hue-independent: the same L=0.55
measures 3.64:1 around hue 189, because a cyan carries more luminance
than a magenta does at one and the same lightness. Swept across all
360 hues, L=0.55 falls below AA on 135 of them and L=0.58 on 232 — so
the step down buys headroom for retinting, not a pass at the brand
hue. Verified via `php artisan wirekit:doctor:a11y --theme-contrast`.
The brand-exact magenta (≈ oklch(0.605 0.27 306), #ab35ff) is
preserved in --color-wk-accent-brand for DECORATIVE-only surfaces
(logo backplate, hero glyphs) where body text never sits on top;
the interactive --color-wk-accent reads from the AA-clean L=0.55.
Note on `--color-wk-accent-content`: this is the "accent as TEXT
on a neutral background" token (inline links, breadcrumbs,
keyboard hints). Darker + more chroma-rich than accent so it
stays legible at body-text size — distinct from `accent-fg`
which is the foreground color ON the accent surface (white-ish
text printed on a primary button).
A plain `:root` / `.dark`, deliberately — do not wrap these in
`:where()` and do not put them in an `@theme` block. WireKit's own
defaults are `:where()`-wrapped (specificity 0) precisely so that
your override wins no matter which stylesheet the browser reads
last. Copy the wrap and your block sits at specificity 0 as well,
which hands the decision back to load order — and in the standard
setup, where `@wirekitStyles` adds its <link> after your compiled
`app.css`, the defaults are what loads last. The theme then
silently does nothing except for the handful of tokens WireKit
never declares. `@theme` fails the same way for a different
reason: it compiles into a cascade layer, and unlayered CSS beats
layered CSS whatever the specificity. */
:root {
--theme-hue: 306;
--color-wk-accent: oklch(0.55 0.22 var(--theme-hue));
--color-wk-accent-hover: oklch(0.49 0.22 var(--theme-hue));
--color-wk-accent-content: oklch(0.42 0.22 var(--theme-hue));
--color-wk-accent-fg: oklch(0.99 0.005 var(--theme-hue));
/* The focus ring tracks the accent. Without this line it inherits the DEFAULT ring,
which is a near-black neutral — so every interactive surface on the page was magenta
and the ring around the one the reader is standing on was black. 5.44:1 on white,
comfortably past the 3:1 WCAG 1.4.11 asks of a focus indicator. */
--color-wk-ring: oklch(0.55 0.22 var(--theme-hue));
/* Brand-exact tokens — decorative use only (pair with a surface,
no body text on top). Preserve the logo magenta at L=0.605. */
--color-wk-accent-brand: oklch(0.605 0.27 var(--theme-hue));
--color-wk-accent-brand-fg: oklch(0.99 0.005 var(--theme-hue));
/* Modestly rounded — 6 px base, 4 px sm, 6 px md, 8 px lg, 12 px xl.
Dashboard-tuned; flip to the aurora-soft variant below for a
more generous marketing-page scale. */
--radius-wk: 0.375rem;
--radius-wk-sm: 0.25rem;
--radius-wk-md: 0.375rem;
--radius-wk-lg: 0.5rem;
--radius-wk-xl: 0.75rem;
/* Cool-tinted surfaces — every surface tint reads the same
--theme-hue so re-tinting stays cohesive. */
--color-wk-bg: oklch(1 0 0);
--color-wk-bg-elevated: oklch(1 0 0);
--color-wk-bg-muted: oklch(0.972 0 0);
--color-wk-bg-subtle: oklch(0.985 0 0);
/* Foreground text — softened off pure-neutral near-black and given a
whisper of the theme hue so it belongs to Aurora rather than reading
as stark monochrome on the tinted surfaces. WCAG AAA at 16.3:1. */
--color-wk-text: oklch(0.24 0.02 var(--theme-hue));
/* Inline <code> — CI magenta on a light magenta-tint highlight, so inline
code reads as part of the brand. WCAG AA at 5.74:1, hue-stable. */
--color-wk-code: oklch(0.52 0.24 var(--theme-hue));
--color-wk-code-bg: oklch(0.97 0.02 var(--theme-hue));
--color-wk-border: oklch(0.91 0 0);
/* Form-control borders, so these are contrast-bound, not stylistic: 3:1
against the input fill (WCAG 1.4.11). A softer 0.82 reads beautifully on a
card edge but only reaches 1.75:1 around an input, and hover has to move
AWAY from the fill, never toward it. */
--color-wk-border-strong: oklch(0.66 0 0);
--color-wk-border-strong-hover: oklch(0.58 0 0);
/* Soft, layered shadows — closer to Tailwind UI than to Default. */
--shadow-wk-sm: 0 1px 2px 0 oklch(0.2 0.03 var(--theme-hue) / 0.04),
0 1px 1px 0 oklch(0.2 0.03 var(--theme-hue) / 0.03);
--shadow-wk-md: 0 4px 6px -1px oklch(0.2 0.03 var(--theme-hue) / 0.06),
0 2px 4px -2px oklch(0.2 0.03 var(--theme-hue) / 0.04);
--shadow-wk-lg: 0 10px 15px -3px oklch(0.2 0.03 var(--theme-hue) / 0.08),
0 4px 6px -4px oklch(0.2 0.03 var(--theme-hue) / 0.05);
--shadow-wk-xl: 0 20px 25px -5px oklch(0.2 0.03 var(--theme-hue) / 0.09),
0 8px 10px -6px oklch(0.2 0.03 var(--theme-hue) / 0.04);
/* Softer badges — flat tinted chips (no outline, no inset ring) instead of
the bordered default. Restore the harder look by setting these back to
the global defaults (--border-wk-width / the inset-ring shadow). */
--border-wk-badge-width: 0px;
--shadow-wk-badge: none;
--transition-wk-easing: cubic-bezier(0.16, 1, 0.3, 1);
}
.dark {
/* Dark mode reads from the same --theme-hue (inherited from the
light block — no need to redeclare unless overriding). */
--color-wk-accent: oklch(0.68 0.20 var(--theme-hue));
--color-wk-accent-hover: oklch(0.74 0.20 var(--theme-hue));
--color-wk-accent-content: oklch(0.82 0.18 var(--theme-hue));
--color-wk-accent-fg: oklch(0.15 0.025 var(--theme-hue));
/* Same reason as light mode, and the default it would otherwise inherit is near-white
here rather than near-black. 6.31:1 against the dark page background. */
--color-wk-ring: oklch(0.68 0.20 var(--theme-hue));
--color-wk-accent-brand: oklch(0.7 0.27 var(--theme-hue));
--color-wk-accent-brand-fg: oklch(0.15 0.025 var(--theme-hue));
--color-wk-bg: oklch(0.16 0.025 var(--theme-hue));
--color-wk-bg-elevated: oklch(0.21 0.028 var(--theme-hue));
--color-wk-bg-muted: oklch(0.235 0.027 var(--theme-hue));
--color-wk-bg-subtle: oklch(0.275 0.025 var(--theme-hue));
--color-wk-bg-input: oklch(0.185 0.025 var(--theme-hue));
/* Foreground text — a barely-warm off-white (vs pure neutral) carrying
the same whisper of theme hue as the light block. WCAG AAA at 17.3:1. */
--color-wk-text: oklch(0.96 0.012 var(--theme-hue));
/* Inline <code> — light magenta on a dark magenta-tint highlight. WCAG AA at 7.56:1. */
--color-wk-code: oklch(0.8 0.16 var(--theme-hue));
--color-wk-code-bg: oklch(0.27 0.04 var(--theme-hue));
--color-wk-border: oklch(0.31 0.024 var(--theme-hue));
/* Same contrast floor as light, reached from the other side — on a dark
fill the border BRIGHTENS away from it. Verified across the whole
theme-hue range, not at one sample hue. */
--color-wk-border-strong: oklch(0.52 0.02 var(--theme-hue));
--color-wk-border-strong-hover: oklch(0.60 0.02 var(--theme-hue));
/* Shadows MUST be redeclared in dark mode — light-mode shadows
use 0.04–0.09 alpha which is effectively invisible against a
dark surface. Pure-black core + accent-hue secondary cast at
0.30–0.45 alpha keeps cards readable as "lifted". */
--shadow-wk-sm: 0 1px 2px 0 oklch(0 0 0 / 0.30),
0 1px 1px 0 oklch(0 0 0 / 0.20);
--shadow-wk-md: 0 4px 6px -1px oklch(0 0 0 / 0.35),
0 2px 4px -2px oklch(0.2 0.03 var(--theme-hue) / 0.25);
--shadow-wk-lg: 0 10px 15px -3px oklch(0 0 0 / 0.40),
0 4px 6px -4px oklch(0.2 0.03 var(--theme-hue) / 0.30);
--shadow-wk-xl: 0 20px 25px -5px oklch(0 0 0 / 0.45),
0 8px 10px -6px oklch(0.2 0.03 var(--theme-hue) / 0.30);
}
Tailwind v4 normalizes oklch() notation at build time. When you paste the Aurora block above into your app.css and run npm run build, the built CSS contains oklch(55% .22 306) rather than the source oklch(0.55 0.22 306). These are byte-different but color-identical. When you grep the built output to verify the paste landed, search for the percentage form. The same applies to every OKLCH value in this guide.
Muted text on <x-wirekit:: / <x-wirekit::cta variant="accent"> renders at the full accent foreground — by design. A colored accent surface (Aurora's accent is L=0.55) lacks the contrast headroom for AA-safe text muting: the accent-fg / accent pair is ~5.3:1, so any opacity blend would fall below the 4.5:1 WCAG AA floor. WireKit therefore renders muted text on variant="accent" at the full --color-wk-accent-fg, so it always clears AA — no action is needed on your side. For visibly de-emphasized secondary text on a dark band, use variant="dark" instead; its non-colored surface has the headroom for real muting.
Prefer the CLI? wirekit:theme writes the block above into your app.css for you:
# 1. Apply the Aurora preset to your app.css.
php artisan wirekit:theme aurora
# 2. Rebuild your CSS bundle.
npm run build
Aurora-soft variant — marketing-page scale
The Aurora block above is dashboard-tuned (modest radii). For marketing / landing-page contexts where a softer pillow-y feel reads better, override the radius scale:
:root {
--radius-wk: 0.75rem; /* 12px */
--radius-wk-sm: 0.5rem; /* 8px */
--radius-wk-md: 0.75rem; /* 12px */
--radius-wk-lg: 1rem; /* 16px */
--radius-wk-xl: 1.5rem; /* 24px */
}
Paste this after the Aurora block to override only the radius tokens. The color, surface, and shadow scales remain Aurora's.
Color presets
Aurora is single-hue: the whole palette is driven by one variable, --theme-hue. To recolor it, apply the Aurora block above, then set --theme-hue once in your own :root block after @wirekitStyles. Every dependent token — accent, surfaces, borders, shadows — follows automatically.
Every hue below clears WCAG AA on the accent button and on inline code with nothing but the single declaration in the last column.
The table is a starting set rather than the choices on offer: any hue works, and the ones here are named because a name is easier to paste than a number. Violet sits on Tailwind's own violet-600 hue so it reads as a different color from the magenta default rather than as a neighbor of it — at the brand hue the two would be eight degrees apart, which is close enough that a reader who deliberately retinted would conclude nothing had happened.
| Preset | --theme-hue |
One-line override |
|---|---|---|
| Magenta (brand, default) | 306 |
:root { --theme-hue: 306; } |
| Pink | 350 |
:root { --theme-hue: 350; } |
| Red | 22 |
:root { --theme-hue: 22; } |
| Orange | 55 |
:root { --theme-hue: 55; } |
| Amber | 82 |
:root { --theme-hue: 82; } |
| Blue | 255 |
:root { --theme-hue: 255; } |
| Indigo | 275 |
:root { --theme-hue: 275; } |
| Violet | 293 |
:root { --theme-hue: 293; } |
For example, to ship Aurora in your brand blue, paste the Aurora block, then add one line:
/* Aurora, recolored to blue — every token follows --theme-hue */
:root {
--theme-hue: 255;
}
That single declaration shifts the accent, the cool-tinted surfaces, the borders, and the shadow casts together — the palette stays cohesive. Mix and match: keep Aurora's magenta accent but warm the surfaces, or vice versa, by overriding individual --color-wk-* tokens after the preset.
Cool hues (green, teal, cyan)
Hues in roughly the 113°–247° band are the exception, and the reason is perceptual rather than arbitrary: at one and the same OKLCH lightness a green or a cyan carries far more luminance than a magenta or a red. Aurora's L=0.55 accent therefore renders bright enough there that the near-white --color-wk-accent-fg label drops below the 4.5:1 WCAG AA floor — 4.04:1 at hue 150, 3.64:1 at its worst point near 189. The inline-code pair behaves the same way over a slightly narrower band.
Stepping the accent ladder down one notch restores it. L=0.49 clears AA across the entire wheel (worst case 4.62:1), so the block below works for any hue in the band — change the first line and nothing else:
/* Aurora, recolored to teal. The accent ladder steps down because a cool hue
renders brighter at the same lightness than the magenta it is replacing. */
:root {
--theme-hue: 185;
--color-wk-accent: oklch(0.49 0.22 var(--theme-hue));
--color-wk-accent-hover: oklch(0.43 0.22 var(--theme-hue));
--color-wk-code: oklch(0.46 0.24 var(--theme-hue));
}
/* Repeating Aurora's own dark values is NOT redundant. The block above is a
plain `:root`, which carries the same specificity as the preset's `.dark`
rule and comes after it, so an accent written there would win in dark mode
too — and 0.49 is a light-mode value that reads far too dark behind a
near-black dark-mode label. */
.dark {
--color-wk-accent: oklch(0.68 0.2 var(--theme-hue));
--color-wk-accent-hover: oklch(0.74 0.2 var(--theme-hue));
}
Three ready-made hues in that band: Green 150, Teal 185, Cyan 215.
Whatever hue you land on, php artisan wirekit:doctor a11y measures your resolved tokens and prints the accent, hover and code pairings with their ratios — that is the check, and it takes a second.
Accessibility
Aurora's interactive accent is tuned to a WCAG-clean lightness — L=0.55 in light mode, L=0.68 in dark — so the near-white accent foreground clears 5.28:1 (AA) on the accent surface at the brand hue. The brand-exact magenta (brighter, lower-contrast) is kept separately in --color-wk-accent-brand for decorative-only use, so it never carries interactive text.
A lightness is not hue-independent. Retinting moves the accent's luminance even though L never changes, so L=0.55 is AA across most of the wheel and not across the green-to-blue band — worst case 3.64:1 near hue 189, against 5.28:1 at the brand hue. Every hue in the table above holds AA on one line; the band that does not is Cool hues, where the accent ladder steps down to L=0.49 and then clears AA everywhere (worst case 4.62:1). Dark mode is unaffected either way: L=0.68 behind the near-black dark label stays above 6.1:1 at every hue.
Two things to verify in your own build:
- Muted text on
variant="accent"hero / CTA surfaces renders at the full--color-wk-accent-fg(a colored accent has no AA-safe muting headroom), so it always clears AA — no action needed. Usevariant="dark"when you want visibly de-emphasized secondary text. - Semantic intents (
success/warning/danger/info) are inherited unchanged from the default palette, so their legibility is identical to every other theme.