A brutalist-inspired UI design system for React components.
This is open-sourced by Spicadust Inc. and the preview is hosted here.
Brutalist CSS is a side project out of our first product Sphaere, a modern workspace to manage information retrieval and organization. Built with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui primitives.
This design system draws inspiration from three influential movements:
Brutalism — Raw, honest, and unapologetic. No decorative elements, no rounded corners. Just bold borders, harsh shadows, and high contrast.
Bauhaus — Form follows function. Every element serves a purpose. Typography is treated as a visual element with weight and presence.
Swiss Modern — Clean grids, systematic spacing, and restrained color palettes. Clarity over complexity.
Our color selection is curated from 和色大辞典.
npm install
npm run devStack: React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Radix UI
Structure:
src/components/ui/— Brutalist-styled componentssrc/index.css— Design tokens and CSS layersrc/App.tsx— Component showcase
MIT