Getting started
SLAB.
A neo-brutalist design system - high-contrast, raw, deliberately unpolished. SLAB rejects soft gradients, blurred shadows, and timid minimalism in favor of thick ink borders, hard offset shadows, and 100%-saturated color.
The fictional product surface used to demo the system is SLAB Studio - an AI site and asset builder. There is no underlying codebase; SLAB is an original neo-brutalist library.
Core principles
- Thick ink borders. 2–6px solid, always
#0B0B0B. The single most defining trait. - Hard offset shadows. Zero blur.
Npx Npx 0 #0B0B0B. Shadows are structural, not atmospheric. - Full-strength color. No tinting or softening. Primaries at 100% saturation, flat, against black borders.
- Snap motion. 90–150ms with a slight overshoot. Physical, mechanical - not smooth or floaty.
- Warm neutrals. Paper is
#FBF7EE, never cold gray. Ink is#0B0B0B, never pure black.
Getting started
Content Voice
Copy in SLAB matches the visual energy - imperative, punchy, confident. Short declaratives. Verbs first.
Writing rules
| Rule | Guidance | Example |
|---|---|---|
| Voice | Imperative, punchy, confident | "Build it. Make it loud." "Ship it." |
| Person | Speaks to you; 1st plural for product | "Your storefront" / "our platform" |
| Casing | Sentence case for headlines | UPPERCASE for mono labels & eyebrows only |
| Numerals | Raw and proud - don't spell out | $48 in mono · ★ 1,280 |
| Emoji | None. Geometric glyphs only. | ▸ → ★ · ✦ |
| Punctuation | Arrows & middots as structural separators | SLAB STUDIO · AI BUILDER |
Visual Foundations
Color
Full-saturation primaries used flat at full strength - no tinting, no shading, no softening. Colors live against black borders, never gradients.
Brand primaries
Structural neutrals
Pairing rule
- Dark fills (violet / pink / coral / ink) → white or lime text
- Bright fills (lime / yellow / blue) → ink-black text
- Never tint or shade - use colors at full strength only
Visual Foundations
Typography
Two families only. Archivo for all UI and display - heavy weights, tight tracking, tight leading. Space Mono for labels, metadata, prices, code, and eyebrows - uppercase with wide tracking. No serif anywhere.
| Token | Value | Use |
|---|---|---|
| --font-display | "Archivo" | All UI, headlines, buttons |
| --font-body | "Archivo" | Body copy, descriptions |
| --font-mono | "Space Mono" | Labels, eyebrows, code, prices |
| --type-hero | clamp(48px, 7vw, 96px) | Landing / hero titles |
| --type-h1 | 40px | Page titles |
| --type-h2 | 30px | Section headers |
| --type-base | 16px | Body text |
| --tracking-label | 0.08em | Uppercase mono labels |
Visual Foundations
Borders & Radii
The defining trait of SLAB. Ink-black, 2–6px, always solid. 3px is the workhorse. Ghost/empty states use a dashed border. Radii are minimal - square is the default mood.
| Token | Value | Use |
|---|---|---|
| --border-thin | 2px | Dividers, secondary rules |
| --border-base | 3px | Components - the workhorse |
| --border-thick | 4px | Emphasis, selected states |
| --border-mega | 6px | Hero containers, top chrome |
| --radius-none | 0px | Hard-edged tiles |
| --radius-sm | 4px | Buttons, inputs, chips |
| --radius-md | 8px | Cards, modals |
| --radius-lg | 14px | Larger cards only |
| --radius-pill | 999px | Chips, suggestion buttons only |
Visual Foundations
Shadows
Hard offset, zero blur - Npx Npx 0 #0B0B0B. Shadows are structural, not atmospheric. There are no blurred or ambient shadows in this system, ever.
Visual Foundations
Motion
Snappy with a touch of overshoot. Everything is mechanical and physical - not smooth or floaty. Hover lifts. Press slams.
Tokens
| Token | Value | Use |
|---|---|---|
| --ease-snap | cubic-bezier(.2,.9,.3,1.3) | All interactive motion - slight overshoot |
| --ease-out | cubic-bezier(0,0,0.2,1) | Standard deceleration - non-interactive reveals |
| --dur-fast | 90ms | Hover, press states |
| --dur-base | 150ms | Reveals, panel transitions |
| --dur-slow | 300ms | Panels, modals, deliberate transitions |
Hover / Press mechanic
- Hover: element lifts up-left
translate(-2px, -2px)and hard shadow grows (xs → sm/md) - Press: element slams down into its own shadow -
translate(4px, 4px)and shadow collapses to 0 - No fades, no easing-into-place. Everything is mechanical.
Hover & click each button →
See the full motion reference at guidelines/motion.html →
Visual Foundations
Iconography
Geometric, single-weight glyphs. SLAB uses Unicode geometric symbols as icons, rendered in Archivo/Space Mono.
- For richer production sets, substitute Lucide (CDN) at 2.5–3px stroke to match border weight
- Or use Phosphor Bold - same heavy-stroke feel
- Icons in square chips: ink border + hard shadow when used as app/integration tiles
- Never draw icons with soft shadows or filled gradients
System
Components
21 components across 4 categories. Each has a spec page with variants, states, props, do/don't, live demos, and usage snippets.
Core
Forms
Feedback
UI / Complex
Browse all components at guidelines/components.html →
System
Guidelines
9 guideline pages covering every aspect of the system - from color to motion to dark mode.
Searchable directory of all 20 components. Filter by category, click through to spec pages.
21 components · 21 pagesSnap easing, lift/slam mechanics, live demos, do/don't rules.
--ease-snap · 90msField anatomy, validation states, single + two-column form layouts.
Input · Select · CheckboxFull Table specimen - variants, row states, sorting, pagination, empty + skeleton states.
10 exports · interactiveLight vs dark side-by-side. Semantic token flip, component behavior, implementation guide.
data-theme · tokensFull color system - primaries, secondaries, neutrals, on-color usage.
12 colors · 4 pagesArchivo + Space Mono. Type scale, weights, tracking, line-height rules.
Archivo · Space Mono4px spacing scale, border widths, radii, and the hard offset shadow system.
xs / sm / md / lg / xlSetup guides for Claude Code, Lovable, GitHub, Figma, Cursor, Storybook and v0. Universal context block included.
7 tools · full coverageSystem
UI Kits
5 ready-made product surfaces built entirely with SLAB components and tokens - fork them to start a new design.
Full-width desktop app. Sidebar nav, Builder, Library and Storefront screens.
Desktop Multi-screenResponsive single-file layout. Mobile bottom tabs, tablet/desktop sidebar.
Mobile ResponsiveE-commerce product surface. Product grid, detail page, cart and checkout screens.
Commerce Multi-screenComplete task manager. Filter pills, priority badges, snap motion on every interaction.
App InteractiveFull type specimen. Display scale, body type, mono labels - all sizes and weights in context.
Archivo Space MonoIntegrations
Integrations
SLAB is plain CSS + HTML - zero build step, zero dependencies. It drops into any toolchain. Here's how to wire it up with the most common tools.
Give Claude Code full SLAB context so it generates on-spec components without guessing token names.
- Copy
SKILL.mdto your project root asCLAUDE.md- Claude reads this file automatically as project instructions. - Keep
styles.cssin your project scope so Claude can resolve all--slab-*token names before writing anyvar(--*). - Reference tokens directly in prompts: "use
--slab-violetfor primary actions,--shadow-mdfor card elevation." - For new variants, give Claude the spec page path as context: "following guidelines/components/button.html, add a loading state."
Seed your Lovable project with SLAB's aesthetic rules so the AI generates on-brand components from message one.
- Create a new Lovable project and upload
styles.cssto the project root. - Reference it in your app entry:
<link rel="stylesheet" href="styles.css"> - In your very first message, paste the SLAB context block below - borders, shadows, fonts, and key colors.
- For specific components, paste the HTML source from a spec page in
guidelines/components/as reference.
System
Tokens & File Structure
Import styles.css once - it pulls in all token files. Everything is plain CSS custom properties; no build step required.
.container / .surface-* / .text-* / .border-*, plus the .slab-marquee ticker strip and .slab-tilt-* sticker rotation helpers. Import styles.css and they're ready - no extra import needed.