Implementing a Brutalist Design System in Tailwind CSS

Consumer applications often lean on soft gradients, blurred backdrops, and rounded corners. For a highly technical Learning Management System, we needed something functional, stark, and fast.

We engineered a Brutalist Design System for Dokkho Tech.

Tailwind Configuration

To achieve this, we heavily customized our ailwind.config.js. We replaced standard shadow utilities with hard, solid offsets:

javascript
boxShadow: {
'brutal': '4px 4px 0px 0px rgba(0,0,0,1)',
'brutal-lg': '8px 8px 0px 0px rgba(0,0,0,1)',
}


Coupled with stark CSS variables (--background: 214 20% 98%), we created a high-contrast interface that prioritizes readability over decoration.

Every component in our Design System forces the user to focus on the content and the code. Pure utility.