Frontend & UI
design-skills · Brutalism
Raw concrete-inspired layouts, Darker Grotesque display, red and ochre.
What it is
A guideline skill for brutalist UI drawn from 1950s raw concrete architecture: unadorned, functional, deliberately jarring. Darker Grotesque display type, #DD614C red and #DAA144 ochre on white.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Why it matters for design
- Bold unadorned elements drop decoration, so structure and copy carry the weight.
- Two strong accents, red and ochre, replace gradients and shadows entirely.
- The accessibility floor still applies, so jarring layouts keep contrast and visible focus.
What it covers
- Brand
- Style foundations
- Accessibility
- Rules: do
- Quality gates
- Example constraint language
How to install
design-skills · Brutalism
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/brutalism/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Tell Codex the tone is bold and unadorned before it picks components.
-
Anchor every rule to a token or threshold, as the quality gates demand.
-
Pair each do-rule with a concrete don’t-example when reviewing the output.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.