brutalistv1.0.0·light

Slab

Slab — Raw Brutalist

brutalistrawyellowmonohigh-contrast

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

slab · rendered from tokens

Color

brand.primary

oklch(0.86 0.18 95)

brand.secondary

oklch(0.55 0.22 25)

brand.onBrand

oklch(0.16 0 0)

text.primary

oklch(0.14 0 0)

text.muted

oklch(0.4 0 0)

text.link

oklch(0.55 0.22 25)

surface.base

oklch(1 0 0)

surface.raised

oklch(0.975 0 0)

surface.sunken

oklch(0.93 0 0)

border.default

oklch(0.17 0 0)

state.success

oklch(0.52 0.16 150)

state.danger

oklch(0.52 0.22 25)

state.warning

oklch(0.7 0.16 85)

state.info

oklch(0.5 0.15 250)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Slab into your workflow.

Save the file for your tool — your agent then generates UI in Slab, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/slab.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Slab is loud on purpose. Thick black borders, hard offset shadows, and a screaming industrial yellow. Nothing eases — states snap. It looks stamped onto the page, structural and unbothered.

Layout & Grid

Exposed grid lines, heavy rules, and zero rounding. Components read like printed labels. Hierarchy comes from weight and size, not subtlety.

Components

Buttons

Yellow color.brand.primary blocks with dark onBrand text and a hard shadow.sm that collapses on press. Borders are color.border.default black.

Cards

Bordered boxes with offset shadow.md. Tags use the red color.brand.secondary as a flat fill.

Accessibility

Maximal contrast by design — primary and muted text pass WCAG AA on every surface. The yellow only ever carries dark text, and focus is an unmissable black outline.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: slab

4name: Slab

5title: Slab — Raw Brutalist

6version: 1.0.0

7category: brutalist

8tags: [brutalist, raw, yellow, mono, high-contrast]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.86 0.18 95)", type: color }

17 secondary: { value: "oklch(0.55 0.22 25)", type: color }

18 onBrand: { value: "oklch(0.16 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.14 0 0)", type: color }

21 muted: { value: "oklch(0.4 0 0)", type: color }

22 link: { value: "{color.brand.secondary}", type: color }

23 surface:

24 base: { value: "oklch(1 0 0)", type: color }

25 raised: { value: "oklch(0.975 0 0)", type: color }

26 sunken: { value: "oklch(0.93 0 0)", type: color }

27 border:

28 default: { value: "oklch(0.17 0 0)", type: color }

29 state:

30 success: { value: "oklch(0.52 0.16 150)", type: color }

31 danger: { value: "oklch(0.52 0.22 25)", type: color }

32 warning: { value: "oklch(0.7 0.16 85)", type: color }

33 info: { value: "oklch(0.5 0.15 250)", type: color }

34 typography:

35 family:

36 sans: { value: "Space Grotesk, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "Space Mono, ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.25rem", type: dimension }

42 xl: { value: "1.75rem", type: dimension }

43 "2xl": { value: "2.5rem", type: dimension }

44 "3xl": { value: "3.75rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 700, type: fontWeight }

48 leading:

49 tight: { value: 1.05, type: number }

50 normal: { value: 1.45, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0rem", type: dimension }

55 md: { value: "0rem", type: dimension }

56 full: { value: "0rem", type: dimension }

57 shadow:

58 sm: { value: "4px 4px 0 oklch(0.16 0 0)", type: shadow }

59 md: { value: "8px 8px 0 oklch(0.16 0 0)", type: shadow }

60 motion:

61 duration:

62 base: { value: "0ms", type: duration }

63 easing:

64 standard: { value: "steps(1, end)", type: cubicBezier }

65 breakpoint:

66 md: { value: "768px", type: dimension }

67 iconography:

68 style: { value: "blocky 3px stroke, square joins", type: descriptor }

69 zIndex:

70 dropdown: { value: 1000, type: number }

71 modal: { value: 1300, type: number }

72---

74# Slab Design System

76## Brand & Voice

77Slab is loud on purpose. Thick black borders, hard offset shadows, and a

78screaming industrial yellow. Nothing eases — states snap. It looks stamped onto

79the page, structural and unbothered.

81## Layout & Grid

82Exposed grid lines, heavy rules, and zero rounding. Components read like printed

83labels. Hierarchy comes from weight and size, not subtlety.

85## Components

86### Buttons

87Yellow `color.brand.primary` blocks with dark `onBrand` text and a hard

88`shadow.sm` that collapses on press. Borders are `color.border.default` black.

90### Cards

91Bordered boxes with offset `shadow.md`. Tags use the red `color.brand.secondary`

92as a flat fill.

94## Accessibility

95Maximal contrast by design — primary and muted text pass WCAG AA on every

96surface. The yellow only ever carries dark text, and focus is an unmissable

97black outline.

Related systems

View →

Button

Concrete

95AAA

Concrete — Brutalist & Raw

brutalistbrutalistmono

View →

Button

Rivet

98AAA

Rivet — Industrial Brutalist

brutalistbrutalistindustrial

View →

Button

Stark

98AAA

Stark — Inverted Brutalist

brutalistbrutalistdark