Theme: Minimal
The UI disappears behind the content. No radius, no shadows, no decorative borders. For data-dense interfaces, admin tools, and developer dashboards:
/* WireKit Theme: Minimal — Radical reduction, function over form.
Inherits fully from the Default baseline (neutral palette, dark mode,
WCAG-verified contrasts). Only structural tokens are overridden.
WCAG fixes vs. previous version:
— ring-wk-width 2px (was 1px) → meets 2.4.11 minimum focus area
— opacity-wk-hover 0.75 (was 0.7) → meets 1.4.3 on white (~5.73:1)
— bg-input neutral-200 → borderless inputs clearly visible on white bg */
@theme {
/* Radius — square everything. calc() cascade makes sm/md/lg/xl all 0. */
--radius-wk: 0px;
/* Shadows — none. Elevation via background color, not decoration. */
--shadow-wk-sm: none;
--shadow-wk-md: none;
--shadow-wk-lg: none;
--shadow-wk-none: none;
/* Typography — headings recede, content leads. */
--font-wk-heading-weight: 500;
--font-wk-letter-spacing: 0.01em;
/* Borders — none. bg-input differentiation replaces visual borders. */
--border-wk-width: 0px;
/* Focus ring — WCAG 2.4.11: 2px meets minimum area (perimeter × 2px).
0px offset: ring sits flush — shows the boundary borders would. */
--ring-wk-width: 2px;
--ring-wk-offset: 0px;
/* Motion — snappier than default (150ms). */
--transition-wk-duration: 100ms;
/* Hover — WCAG 1.4.3: 0.75 renders primary button text at ~5.73:1.
Previous 0.7 yielded ~4.36:1 which failed AA on white backgrounds. */
--opacity-wk-hover: 0.75;
/* Input visibility — without borders, inputs need a visible background
tint. neutral-200 (#e5e5e5) on white provides clear differentiation.
Placeholder text (neutral-500) on neutral-200: 3.62:1 (AA large ✓).
Body text (neutral-950) on neutral-200: ~15:1 ✓
Note: boundary contrast (1.26:1) is below WCAG 1.4.11's 3:1 —
for full compliance, add a 1px border override (see tip below). */
--color-wk-bg-input: var(--color-neutral-200);
}
@layer theme {
.dark {
/* Dark input bg: neutral-800 on neutral-950 page bg (~1.31:1).
More visible than neutral-900 (~1.30:1). Same WCAG note applies. */
--color-wk-bg-input: var(--color-neutral-800);
}
}
Minimal removes all shadows and borders. For full WCAG 1.4.11 compliance on form inputs (3:1 boundary contrast), add a component-specific border:
WireKit::personalize('input', ['base' => 'border border-[var(--color-wk-border)]']);
WireKit::personalize('textarea', ['base' => 'border border-[var(--color-wk-border)]']);
WireKit::personalize('select', ['base' => 'border border-[var(--color-wk-border)]']);
Dropdowns and popovers rely on bg-elevated for visual separation. For stronger overlay contrast:
WireKit::personalize('dropdown.panel', ['base' => 'border border-[var(--color-wk-border)]']);
Design notes
Minimal strips the interface down to its structure: zero radius, no shadows, no decorative borders, and snappier motion (100 ms). Elevation is communicated by background color alone rather than by decoration. The result is information-dense and tool-like — the deliberate opposite of a "designed" surface.
Best for: admin panels, data tables, developer dashboards, and internal tooling where scanning speed beats personality. Avoid it for customer-facing marketing pages, where warmth and visual hierarchy matter more than density.
Accessibility
Removing borders and shadows is a genuine accessibility risk, so Minimal compensates deliberately:
- Inputs stay visible — without borders, inputs carry a neutral-200 background tint; body text on it reads at ~15:1 and placeholder text at ~3.6:1.
- Focus is unmissable — the ring is bumped to 2px to meet the WCAG 2.4.11 minimum focus-area requirement (a 1px ring would fail once borders are gone).
- Hover stays legible — hover opacity is 0.75 so primary-button label text holds ~5.73:1 (WCAG 1.4.3 AA); the previous 0.7 dropped to ~4.36:1 and failed.
For full WCAG 1.4.11 boundary contrast (3:1) on form controls, add the 1px input border shown in the tip above.