57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
# Style Family: brutal
|
||
|
||
**Signature**: Raw, monospace, high-contrast borders, deliberately rough, system-font fallbacks visible.
|
||
**Reference products**: Many indie maker landing pages, Vercel templates (brutalist variants), Bauhaus-revival sites, Cobalt.tools.
|
||
**Best for**: indie projects, designer portfolios, statement marketing, hacker culture products.
|
||
|
||
## Token defaults
|
||
|
||
### Color
|
||
- **Primary**: high-saturation block colors — pure red, pure yellow, pure blue, pure black.
|
||
- **Background**: unapologetic — pure white `#ffffff` or pure black `#000000`. The "no pure black" rule from `modern-minimal` does not apply here; pure black is the point.
|
||
- **Borders**: thick (2–4px), pure black, on every container. Borders carry the visual weight that elsewhere is carried by shadows.
|
||
|
||
### Typography
|
||
- **Heading**: monospace, system font, or quirky display — JetBrains Mono, Space Mono, IBM Plex Mono, Departure Mono, Times New Roman (deliberate retro).
|
||
- **Body**: monospace or system serif. Geometric sans-serif is *out of family*.
|
||
- **Weights**: extreme contrast — 400 vs 800, no in-between.
|
||
|
||
### Radius
|
||
- **0 px**. Sharp corners always. This is the family's most non-negotiable trait.
|
||
|
||
### Spacing
|
||
- 8px base. Scale: 8 / 16 / 24 / 40 / 64.
|
||
- Spacing is uneven on purpose — asymmetric layouts are encouraged.
|
||
|
||
### Shadow
|
||
- **Hard shadows only**. `box-shadow: 4px 4px 0 0 #000;` (no blur). No soft elevation.
|
||
|
||
### Motion
|
||
- Snappy or none. No easing curves. Linear or step transitions. Hover states can be aggressive (color invert, hard offset).
|
||
|
||
## Anti-patterns *within this family*
|
||
|
||
- Soft shadows.
|
||
- Rounded corners.
|
||
- Pastels.
|
||
- "Design system polish" — uniform spacing, perfect alignment, careful hierarchy. Brutal embraces friction.
|
||
- Fade animations.
|
||
- Lucide / Phosphor icons. Use ASCII characters, emoji as ironic decoration, or system Unicode glyphs.
|
||
|
||
## Typical surfaces
|
||
|
||
This family does well on:
|
||
- Single-page indie landing
|
||
- Developer tool marketing
|
||
- Manifesto / values pages
|
||
- Designer portfolios
|
||
|
||
This family does poorly on:
|
||
- Anything where users spend more than ~10 minutes per session — the friction wears
|
||
- Enterprise / regulated industries
|
||
- Consumer apps with broad demographic reach
|
||
|
||
## Notes
|
||
|
||
Brutal is a statement, not a default. If the user picked it without realizing what it implies (no rounded corners, no soft shadows, no neat alignment), pause and double-check before generating tokens.
|