mdDesignMD
brutalistv1.0.0·light

Concrete

Concrete — Brutalist & Raw

brutalistmonohigh-contrastrawsharp
95
AAA
33 tokens
primarysecondarybaseraisedprimarydefaultsuccessdanger
Fork & edit

Live preview

concrete · rendered from tokens
Color
brand.primary
oklch(0.55 0.24 28)
brand.secondary
oklch(0.12 0 0)
brand.onBrand
oklch(0.99 0 0)
text.primary
oklch(0.12 0 0)
text.muted
oklch(0.40 0 0)
text.link
oklch(0.55 0.24 28)
surface.base
oklch(1 0 0)
surface.raised
oklch(0.97 0 0)
border.default
oklch(0.12 0 0)
state.success
oklch(0.50 0.16 150)
state.danger
oklch(0.52 0.22 28)
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
C
Confetti
A bright, joyful design language with playful motion.
Pro
$12/ mo
Unlimited exports
Private systems
Priority support
AM
Aria Moss
Owner
success
RK
Ravi Kohli
Editor
info
LP
Lena Park
Viewer
warning
Radius, shadow & spacing
sm
md
full
sm
md

Use this system

Three ways to drop Concrete into your workflow.

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

CCClaude Code
CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor
.cursor/rules/concrete.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

Loud, structural, and unapologetic. Concrete shows its bones: visible borders, hard offset shadows, monospace everything, and a single screaming accent.

Layout & Grid

Exposed grid lines, no rounded corners, generous borders. Components look stamped onto the page. Hover states snap rather than ease.

Components

Buttons

Solid color.brand.primary blocks with a hard shadow.sm offset that collapses on press. Borders are always border.default (near-black).

Accessibility

Maximum contrast by design — near-black text on pure white clears AAA. Focus states use a thick visible outline.

Do & Don't

  • Keep corners sharp — radius is always 0.
  • Use hard offset shadows, never soft blurs.
  • Don't soften the system with gradients or easing curves.

Tokens

Color (11)

Tokens

breakpoint
iconography
motion
radius
shadow
spacing
typography

Export

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

design.md
1---
2$schema: https://designmd.in/schema/v1.json
3id: concrete
4name: Concrete
5title: Concrete — Brutalist & Raw
6version: 1.0.0
7category: brutalist
8tags: [brutalist, mono, high-contrast, raw, sharp]
9author: designmd
10license: CC-BY-4.0
11updatedAt: 2026-06-19
12colorMode: [light]
13tokens:
14 color:
15 brand:
16 primary: { value: "oklch(0.55 0.24 28)", type: color }
17 secondary: { value: "oklch(0.12 0 0)", type: color }
18 onBrand: { value: "oklch(0.99 0 0)", type: color }
19 text:
20 primary: { value: "{color.brand.secondary}", type: color }
21 muted: { value: "oklch(0.40 0 0)", type: color }
22 link: { value: "{color.brand.primary}", type: color }
23 surface:
24 base: { value: "oklch(1 0 0)", type: color }
25 raised: { value: "oklch(0.97 0 0)", type: color }
26 border:
27 default: { value: "{color.brand.secondary}", type: color }
28 state:
29 success: { value: "oklch(0.50 0.16 150)", type: color }
30 danger: { value: "oklch(0.52 0.22 28)", type: color }
31 typography:
32 family:
33 sans: { value: "Departure Mono, ui-monospace, monospace", type: fontFamily }
34 mono: { value: "Departure Mono, ui-monospace, monospace", type: fontFamily }
35 scale:
36 sm: { value: "0.875rem", type: dimension }
37 base: { value: "1rem", type: dimension }
38 lg: { value: "1.25rem", type: dimension }
39 xl: { value: "1.75rem", type: dimension }
40 "2xl": { value: "2.5rem", type: dimension }
41 "3xl": { value: "4rem", type: dimension }
42 weight:
43 regular: { value: 400, type: fontWeight }
44 bold: { value: 700, type: fontWeight }
45 leading:
46 tight: { value: 1.1, type: number }
47 normal: { value: 1.45, type: number }
48 spacing:
49 base: { value: "0.25rem", type: dimension }
50 radius:
51 sm: { value: "0rem", type: dimension }
52 md: { value: "0rem", type: dimension }
53 full: { value: "0rem", type: dimension }
54 shadow:
55 sm: { value: "3px 3px 0 oklch(0.12 0 0)", type: shadow }
56 md: { value: "6px 6px 0 oklch(0.12 0 0)", type: shadow }
57 motion:
58 duration:
59 base: { value: "0ms", type: duration }
60 easing:
61 standard: { value: "steps(1, end)", type: cubicBezier }
62 breakpoint:
63 md: { value: "768px", type: dimension }
64 iconography:
65 style: { value: "blocky, 2.5px stroke, no rounded joins", type: descriptor }
66---
67
68# Concrete Design System
69
70## Brand & Voice
71Loud, structural, and unapologetic. Concrete shows its bones: visible borders,
72hard offset shadows, monospace everything, and a single screaming accent.
73
74## Layout & Grid
75Exposed grid lines, no rounded corners, generous borders. Components look stamped
76onto the page. Hover states snap rather than ease.
77
78## Components
79### Buttons
80Solid `color.brand.primary` blocks with a hard `shadow.sm` offset that collapses
81on press. Borders are always `border.default` (near-black).
82
83## Accessibility
84Maximum contrast by design — near-black text on pure white clears AAA. Focus
85states use a thick visible outline.
86
87## Do & Don't
88- Keep corners sharp — radius is always 0.
89- Use hard offset shadows, never soft blurs.
90- Don't soften the system with gradients or easing curves.

Related systems

View →
Button

Slab

98AAA

Slab — Raw Brutalist

brutalistbrutalistraw
View →
Button

Rivet

98AAA

Rivet — Industrial Brutalist

brutalistbrutalistindustrial
View →
Button

Stark

98AAA

Stark — Inverted Brutalist

brutalistbrutalistdark