Guide 02 · raw family
Neo-Brutalist & Cyber Industrial
Nothing is hidden. Borders are borders, shadows are solid offsets, and the grid is visible on purpose. Neo-Brutalist does this loudly on a light ground with vivid accents. Cyber Industrial does it coldly on near-black with monospaced labels and status indicators. Both are cheap to render and quick to build — and both expose weak content instantly.
Preview the component
The same dashboard module in both raw styles, with Swiss Grid as the disciplined relative. Currently showing Neo-Brutalist.
Dashboard module
Deployment health
Build 4.2.0 is live on every regional edge. Response times stayed inside the target window during rollout.
Design specification
style: neo-brutalist description: exposed structure — thick black borders, hard offset shadows, vivid flat accents, no gloss industries: developer tools, music, streetwear, agencies, events, independent publishing typography: Archivo or Space Grotesk — 900 uppercase headings, tracking -0.02em, 400 body at 17px card-architecture: framed canvas — a solid accent block offset 10px behind a bordered white panel buttons: rectangular, 3px border, 5px 5px 0 shadow, translate(-2px,-2px) on hover, (2px,2px) on press navigation: inline exposed bar, 3px bottom rule, no blur border-radius: 0px — no exceptions, including inputs elevation: 8px 8px 0 #111111 (hard, unblurred) surface: flat #FFFFFF panels on a saturated ground animation: 120ms linear transforms, no fades accent-rule: one vivid hue per page, black text on it
style: cyber-industrial description: control-room interface — near-black ground, hairline panels, monospaced metadata, status dots industries: infrastructure, security, observability, gaming, logistics, crypto exchanges typography: IBM Plex Mono for labels and numbers, condensed sans for headings, 13px uppercase eyebrows card-architecture: data grid header with three monospaced metrics above a body block, 1px divider between buttons: square 4px radius, accent outline, mono label, filled only for the single primary action navigation: left rail, numeric indices, active hairline border-radius: 4px elevation: no drop shadow; 1px accent ring for focus surface: #15191E panels on #0D0F12 animation: 90ms snap, blinking cursor or status pulse accessibility: accent #C8FF2E on #0D0F12 for large text only; body copy stays #E8EDF2
style: swiss-grid (relative) description: the same honesty without the noise — rules, scale and position carry all the hierarchy industries: architecture, consulting, museums, legal typography: Helvetica or Inter, tight tracking, huge H1 card-architecture: column block, caption under media buttons: square, black fill or 1px outline navigation: flush-left labels on the baseline grid border-radius: 0px elevation: none animation: none, or 150ms opacity use-when: the client wants restraint, not attitude
Both raw styles need only borders, spacing and type weight — no images required to look finished.
Why raw styles build fast
There is almost nothing to render. A Neo-Brutalist page is flat fills, solid borders and shadows with zero blur radius, which means no compositing surprises, no gradient banding and no image pipeline. A junior developer can implement the entire component set from five values: border width, shadow offset, accent hue, type scale and press travel. That is the real argument for this family on a short deadline — it is the only aesthetic where the visual quality is almost entirely a function of spacing discipline rather than asset production.
The trade-off is that raw styles amplify content. A soft interface flatters a vague headline; a Neo-Brutalist interface sets it in 900 weight at forty-eight pixels and makes it the only thing on the screen. If the copy is not written yet, do not choose this family. Cyber Industrial has the same property applied to numbers: the layout expects real metrics with units and thresholds. Placeholder data looks obviously fake inside a monospaced data grid header.
Accessibility is where these two styles diverge sharply. Neo-Brutalist tends to pass contrast requirements by accident, because near-black text on white or on a bright accent is far above the minimum ratio. Its genuine risk is motion and hit area: the press-travel transform on buttons should be small, and the hard shadow must not be the only thing indicating a focused element — keep a distinct focus ring in a third colour. Cyber Industrial has the opposite problem. Neon accents on near-black usually clear the three-to-one threshold for large text but not the four-and-a-half-to-one needed for body copy, so the accent belongs on headings, borders and indicators while paragraphs stay in a light neutral.
Specification comparison
| Criterion | Neo-Brutalist | Cyber Industrial |
|---|---|---|
| Ground | Off-white or vivid accent | Near-black (#0D0F12) |
| Border | 3px solid ink | 1px hairline, low contrast |
| Radius | 0px | 4px |
| Elevation | Hard offset shadow | None; rings and dividers instead |
| Primary type | Heavy grotesque, uppercase | Monospace labels, condensed headings |
| Data density | Low to medium | High — built for it |
| Build time | Lowest of the ten styles | Low, but needs a status-colour system |
| Brand risk | Reads as informal or trend-driven | Reads as serious, can feel cold |
Pros and cons
Arguments for
- Fastest family to implement and the cheapest to keep consistent.
- Strong contrast by default, which helps on low-quality screens and in bright light.
- Memorable — a bordered, offset card is recognisable in a crowded market.
- Cyber Industrial handles genuinely dense dashboards without needing to invent new patterns.
Arguments against
- Long-form reading is tiring when every block is framed; you need wide margins to compensate.
- Neo-Brutalist can date quickly if you lean on a single trend colour.
- Regulated sectors often read raw styles as unfinished; expect stakeholder resistance.
- Neon-on-black palettes fail body-text contrast unless you keep the accent off paragraphs.
Choosing between them
Take Neo-Brutalist when the audience is technical or creative, the copy is confident, and you want the site to look hand-built rather than templated. It suits documentation sites, launch pages, small studios and anything with strong opinions. Take Cyber Industrial when the product is a monitoring, security or infrastructure tool and the interface will be looked at for hours: the dark ground reduces glare, the monospaced numbers align without effort, and status colour carries meaning instead of decoration.
Avoid both if your primary conversion path is a long form completed by a non-technical audience — move to Soft Minimal for that. If you like the honesty but need more formality, read Guide 04; Swiss Grid keeps the structural clarity and drops the attitude. And if you want the dark ground without the industrial coldness, compare against Guide 01 before deciding. When you verify your accent pairs, use the WCAG 2.2 quick reference rather than eyeballing them on a calibrated monitor.