Neo-Brutalist Design System

SLAB.

High-contrast. Raw. Deliberately unpolished.

Thick ink borders. Hard offset shadows. 100%-saturated color. A design system that rejects softness — because the best UIs don't need to apologize for their presence.

20Components
9Guideline pages
4UI Kits
21Spec pages
Browse components Read the docs
Ink borders · 2–6px
Hard offset shadows · 0 blur
Snap motion · 90–150ms
Full dark mode support
TypeScript types included
Archivo + Space Mono
React · CSS tokens · HTML

Components

View all 20
21 components
Core
Primary
Ghost
Button
core
Surface content
Card
core
ActiveDraftHigh
Badge
core
Active ✓Draft
Tag / Chip
core
IconButton
core
Forms
Input
forms
High priority
Select
forms
Checked
Unchecked
Checkbox
forms
On
Off
Switch
forms
Feedback
MC
ZK
LP
Avatar
feedback
!Check this first.
Callout
feedback
Overview
Data
Settings
Tabs
feedback
✓ Saved successfully.
✕ Upload failed.
Toast
feedback
Progress
feedback
Skeleton
feedback
UI / Complex
NameStatusRev.
Studio●$12k
Drop●—
Signal●$28k
Table
ui
Confirm action
Are you sure?
Modal
ui
Top placement
Hover me
Tooltip
ui
$28.9k
Revenue↑ 12%
Stat / KPI
ui
HomeCampaignsSLAB
Breadcrumb
ui
LightDark
ThemeToggle
ui

Guidelines

Component directory
Components→

All 20 components in a searchable directory. Filter by category, click through to full spec pages.

20 components · 21 pages
Motion→

Snap easing, lift/slam mechanics, live demos, do/don't rules. The motion system explained.

--ease-snap · 90ms · 150ms
Form Patterns→

Field anatomy, validation states, single + two-column form layouts with all form components composed together.

Input · Select · Checkbox · Switch
Tables→

Full Table component specimen — all variants, row states, sorting, pagination, empty and skeleton states.

10 exports · interactive
Dark Mode→

Light vs dark side-by-side. Semantic token flip, component behavior, implementation guide.

data-theme · semantic tokens
Colors→

Full color system — primaries, secondaries, neutrals, on-color usage. Token names and hex values.

12 colors · 4 pages
Typography→

Archivo (display) + Space Mono (labels). Type scale, weights, tracking, line-height rules.

Archivo · Space Mono
Spacing & Shadows→

4px spacing scale, border widths, radii, and the signature hard offset shadow system (0 blur).

xs / sm / md / lg / xl
Integrations→

Setup guides for Claude Code, Lovable, GitHub, Figma, Cursor, Storybook and v0. Universal context block included.

7 tools · full coverage

UI Kits

BUILD
Desktop app
SLAB Studio

Full-width desktop app. Sidebar nav, Builder, Library and Storefront screens.

DesktopMulti-screenSidebar nav
Mobile
Studio Mobile

Responsive single-file layout. Mobile bottom tabs, tablet/desktop sidebar. Same system.

MobileResponsiveBottom nav
Tasks · 4
Design tokens
Build components
Write guidelines
App kit
Todo App

Complete task manager built with SLAB. Filter pills, priority badges, snap motion on every interaction.

AppInteractiveDark mode
Aa
Archivo · Space Mono
Type kit
Typography

Full type specimen. Display scale, body type, mono labels, all sizes and weights in context.

ArchivoSpace MonoType scale

Tokens

View source

Color palette — 12 primaries

lime
pink
violet
yellow
blue
coral
teal
neon
ink
paper
white
smoke

Hard offset shadows — 0 blur, zero ambient

xs · 2px
sm · 4px
md · 6px
lg · 8px
xl · 12px
pink
violet
lime

Motion — hover & press every button

--ease-snap: cubic-bezier(.2,.9,.3,1.3) · --dur-fast: 90ms · --dur-base: 150ms