--- title: "Theme: Brutalist" description: High-contrast, hard-edged brutalist theme — thick borders, zero radius, stark shadows. visibility: guest draft: false --- # Theme: Brutalist Raw honesty — the structure is visible. No hiding, no decoration. Requires `config/wirekit.php` → `'mono' => 'jetbrains-mono'`: ```css /* 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.