Atomic Design
Tokens first development.
Design KitGalleryv0.3.0
Component Gallery
A unified kitchen sink view of all neubrutalist UI components in the MetalHatsCats Design Kit.
Containers & Cards
NBCard Default
The base container with hard shadow and border.
NBFrameBox
An offset bracket-style frame for highlighting important notes or features.NBOffsetPanel: Playful tilted box.
Actions & Buttons
Content Elements
HeroArticle
The bold top-level header for articles.
"Neubrutalism is the rejection of the polished, the glossy, and the safe."
const theme = "neubrutalism";
console.log(`Shipping ${theme}...`);Quick answer
What is QuickAnswerBlock?
A summary block designed for SEO snippets and immediate TLDR answers.
Data & Lists
| Design Token | Value |
|---|---|
| --mhc-border | 4px |
| --mhc-radius | 14px |
| Plan | Basic | ProBest | Ultra |
|---|---|---|---|
| Borders | ✓ | ✓ | ✓ |
| Shadows | Small | Massive | Custom |
| Support | 24/7 | Dedicated |
Define
Set your design tokens.
Compose
Build layouts with cards.
Iterate
Refine patterns.
SEO Optimized
Built mapping to JSON-LD.
Dark First
Perfectly balanced contrast.
Specialty Items
Pros
- Fast rendering
- Strong identity
- SEO structures
Cons
- Bold aesthetic
- Higher visual weight
Bold headers improve user retention by 15%.
- Confidence
- 85%
- Metric
- Retention
People also ask
Is this responsive?
Yes, all components follow fluid layouts.
Can I customize colors?
Yes via CSS variables defined in :root.
About the Author
MetalHatsCats
Architect
Creating the neubrutalist web one pixel at a time.