Theme: Brutalist
Raw honesty — the structure is visible. No hiding, no decoration. Requires config/wirekit.php → 'mono' => 'jetbrains-mono':
/* WireKit Theme: Brutalist — Raw honesty, visible structure.
Inherits from Default: neutral-palette bg/text, opacity-disabled 0.5,
ring-offset white/neutral-950.
Prerequisite: config/wirekit.php → 'mono' => 'jetbrains-mono'
WCAG: border neutral-900 on white = 18.4:1 AAA ✓
opacity 0.85 near-black button = ~8.9:1 AAA ✓
IMPORTANT: border-color tokens MUST be set explicitly — inherited
neutral-300 = 1.45:1 on white (WCAG 1.4.11 FAIL + invisible borders
defeat the entire Brutalist aesthetic). */
@theme {
/* Font — JetBrains Mono everywhere. Sans = Mono.
Brutalist makes no distinction between body and code text.
JetBrains Mono FIRST (fix: was ui-monospace first — wrong priority,
system monospace would win over the bundled font). */
--font-wk-sans: 'JetBrains Mono', ui-monospace, monospace;
--font-wk-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Typography — 700 headings as statement, 0.04em tracking for
monospace breathing room (overrides Default's -0.01em),
1.4 line-height tighter than Default (1.5) for mono aesthetic. */
--font-wk-heading-weight: 700;
--font-wk-letter-spacing: 0.04em;
--font-wk-line-height: 1.4;
/* Radius — absolute zero. Through the calc() cascade: 0px everywhere.
Buttons, cards, inputs, modals — all rectangles, no exceptions. */
--radius-wk: 0px;
/* Shadows — hard 2D offset, zero blur. currentColor = CSS color
property of the element. Dark text → black shadow (sticker effect).
Dark mode: explicit neutral-300 (currentColor uncontrollable). */
--shadow-wk-sm: 2px 2px 0 0 currentColor;
--shadow-wk-md: 3px 3px 0 0 currentColor;
--shadow-wk-lg: 5px 5px 0 0 currentColor;
--shadow-wk-none: none;
/* Motion — none. 0ms = instant reaction. Easing irrelevant at 0ms.
Paradoxically the most accessible setting — no vestibular risk. */
--transition-wk-duration: 0ms;
/* Borders — 2px visible, intentional. WCAG 1.4.11 FIX: border-color
must be explicit. Inherited neutral-300 = 1.45:1 on white (FAIL).
neutral-900 = 18.4:1 → clearly visible + design-authentic. */
--border-wk-width: 2px;
--color-wk-border: var(--color-neutral-900); /* 18.4:1 AAA ✓ */
--color-wk-border-hover: var(--color-neutral-950); /* 19.0:1 AAA ✓ */
/* Form controls read --color-wk-border-strong, not --color-wk-border. Without
these the inputs fall back to the stock neutral (3.1:1) and this preset's
defining heavy border stops applying where a border matters most. */
--color-wk-border-strong: var(--color-neutral-900); /* 18.4:1 AAA ✓ */
--color-wk-border-strong-hover: var(--color-neutral-950); /* 19.0:1 AAA ✓ */
--color-wk-border-subtle: var(--color-neutral-700); /* 9.6:1 AAA ✓ */
/* Focus ring — 3px exceeds WCAG 2.4.11 minimum (2px).
0px offset: ring sits directly on the element. */
--ring-wk-width: 3px;
--ring-wk-offset: 0px;
/* Hover — 0.85 subtler than Default. Brutalist communicates state
through strong borders; opacity does less heavy lifting.
neutral-900 button at 0.85 on white: ~8.9:1 AAA ✓ */
--opacity-wk-hover: 0.85;
/* Accent — neutral-900 (fix: was zinc-900, minimal blue cast).
Pure zero-chroma black. accent-hover/content inherited from Default. */
--color-wk-accent: var(--color-neutral-900);
--color-wk-accent-fg: var(--color-white); /* ~18:1 AAA ✓ */
--color-wk-ring: var(--color-neutral-900);
}
@layer theme {
.dark {
/* Shadows dark — explicit neutral-300 instead of currentColor.
Controlled light-gray shadow on dark surfaces.
(fix: was zinc-300 → neutral-300 for palette consistency.) */
--shadow-wk-sm: 2px 2px 0 0 var(--color-neutral-300);
--shadow-wk-md: 3px 3px 0 0 var(--color-neutral-300);
--shadow-wk-lg: 5px 5px 0 0 var(--color-neutral-300);
/* Borders dark — symmetric to light: bright borders on dark bg.
Not inheriting Default's neutral-600/500/700 — too subtle for
Brutalist's structural requirement.
neutral-100 on neutral-950: 16.0:1 AAA ✓ */
--color-wk-border: var(--color-neutral-100); /* 16.0:1 AAA ✓ */
--color-wk-border-hover: var(--color-neutral-50); /* 18.1:1 AAA ✓ */
/* Form controls take their edge from --color-wk-border-strong, not from
--color-wk-border. Without these two lines they fall back to the stock
neutral and this preset's defining heavy border stops applying to
inputs — the one place a border matters most. */
--color-wk-border-strong: var(--color-neutral-100); /* 16.0:1 AAA ✓ */
--color-wk-border-strong-hover: var(--color-neutral-50); /* 18.1:1 AAA ✓ */
--color-wk-border-subtle: var(--color-neutral-300); /* 13.6:1 AAA ✓ */
/* Accent dark — inverted: white on black.
(fix: accent-fg was zinc-900 → neutral-900 for palette consistency.) */
--color-wk-accent: var(--color-white);
--color-wk-accent-fg: var(--color-neutral-900);
--color-wk-ring: var(--color-white);
}
}
Design notes
Brutalist makes the structure loud: 2px visible borders, zero radius, stark hard-edged shadows, and JetBrains Mono. It favors raw honesty over decoration — nothing is softened or hidden. Every boundary is shown rather than implied.
Best for: portfolios, editorial sites, statement landing pages, and design-forward brands that want presence. Avoid it for dense forms, where heavy borders add visual noise and slow scanning.
Accessibility
High contrast is the entire point, which makes Brutalist one of the most legible presets: borders are neutral-900 on white at 18.4:1 (AAA) and near-black buttons read at ~8.9:1 (AAA). The 2px border weight is an intentional WCAG 1.4.11 fix — a 1px neutral-300 border would be 1.45:1 and fail boundary contrast (and be nearly invisible). There are no motion-heavy or translucency effects, so there is no vestibular risk.