brutalistv1.0.0·dark

Stark

Stark — Inverted Brutalist

brutalistdarklimemonoinverted

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

stark · rendered from tokens

Color

brand.primary

oklch(0.85 0.2 125)

brand.secondary

oklch(0.96 0 0)

brand.onBrand

oklch(0.16 0.02 125)

text.primary

oklch(0.96 0 0)

text.muted

oklch(0.72 0.005 125)

text.link

oklch(0.85 0.2 125)

surface.base

oklch(0.16 0 0)

surface.raised

oklch(0.205 0 0)

surface.sunken

oklch(0.11 0 0)

border.default

oklch(0.96 0 0)

state.success

oklch(0.78 0.17 145)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.82 0.16 90)

state.info

oklch(0.74 0.13 230)

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 Stark into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Stark flips brutalism into the dark. A near-black field, white borders that look chalk-drawn, and an acid lime that detonates against it. Loud, raw, and unmistakably digital.

Layout & Grid

White offset shadows on black, exposed grid lines, and zero rounding. States snap with no easing. Lime appears once per view, where it matters most.

Components

Buttons

Acid lime color.brand.primary blocks with dark onBrand text and a hard white shadow.sm. Outlines use the white color.border.default.

Panels

Black boxes with white offset shadow.md; the white color.brand.secondary provides flat fills and dividers.

Accessibility

Maximum contrast both ways: light and muted text pass WCAG AA on the dark surfaces, lime carries dark text only, and the focus outline is unmissable white.

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.md96 lines

1---

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

3id: stark

4name: Stark

5title: Stark — Inverted Brutalist

6version: 1.0.0

7category: brutalist

8tags: [brutalist, dark, lime, mono, inverted]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.85 0.2 125)", type: color }

17 secondary: { value: "oklch(0.96 0 0)", type: color }

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

19 text:

20 primary: { value: "{color.brand.secondary}", type: color }

21 muted: { value: "oklch(0.72 0.005 125)", type: color }

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

23 surface:

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

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

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

27 border:

28 default: { value: "{color.brand.secondary}", type: color }

29 state:

30 success: { value: "oklch(0.78 0.17 145)", type: color }

31 danger: { value: "oklch(0.68 0.2 25)", type: color }

32 warning: { value: "oklch(0.82 0.16 90)", type: color }

33 info: { value: "oklch(0.74 0.13 230)", 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: "3px 3px 0 oklch(0.96 0 0)", type: shadow }

59 md: { value: "6px 6px 0 oklch(0.96 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, stark white", type: descriptor }

69 zIndex:

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

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

72---

74# Stark Design System

76## Brand & Voice

77Stark flips brutalism into the dark. A near-black field, white borders that look

78chalk-drawn, and an acid lime that detonates against it. Loud, raw, and

79unmistakably digital.

81## Layout & Grid

82White offset shadows on black, exposed grid lines, and zero rounding. States

83snap with no easing. Lime appears once per view, where it matters most.

85## Components

86### Buttons

87Acid lime `color.brand.primary` blocks with dark `onBrand` text and a hard white

88`shadow.sm`. Outlines use the white `color.border.default`.

90### Panels

91Black boxes with white offset `shadow.md`; the white `color.brand.secondary`

92provides flat fills and dividers.

94## Accessibility

95Maximum contrast both ways: light and muted text pass WCAG AA on the dark

96surfaces, lime carries dark text only, and the focus outline is unmissable white.

Related systems

View →

Button

Concrete

95AAA

Concrete — Brutalist & Raw

brutalistbrutalistmono

View →

Button

Rivet

98AAA

Rivet — Industrial Brutalist

brutalistbrutalistindustrial

View →

Button

Slab

98AAA

Slab — Raw Brutalist

brutalistbrutalistraw