brutalistv1.0.0·light

Rivet

Rivet — Industrial Brutalist

brutalistindustrialorangemonoraw

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

rivet · rendered from tokens

Color

brand.primary

oklch(0.65 0.19 45)

brand.secondary

oklch(0.2 0.006 250)

brand.onBrand

oklch(0.16 0.01 45)

text.primary

oklch(0.16 0.006 250)

text.muted

oklch(0.42 0.01 250)

text.link

oklch(0.2 0.006 250)

surface.base

oklch(0.99 0.002 250)

surface.raised

oklch(0.965 0.003 250)

surface.sunken

oklch(0.93 0.004 250)

border.default

oklch(0.2 0.006 250)

state.success

oklch(0.52 0.16 150)

state.danger

oklch(0.54 0.22 25)

state.warning

oklch(0.68 0.16 80)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Rivet is the factory floor: safety-orange, steel-grey ink, and bolted-down borders. Hard offset shadows, stepped transitions, and zero rounding. It looks built, not designed — and that's the point.

Layout & Grid

Exposed structure, heavy rules, and stamped labels. Hierarchy comes from weight and the single orange. Components snap rather than glide.

Components

Buttons

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

Panels

Bordered boxes with offset shadow.md; tags are flat fills of the steel color.brand.secondary.

Accessibility

Brutal contrast by design: primary and muted text pass WCAG AA on every surface. Orange always carries dark text, and focus is an unmissable steel 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.md96 lines

1---

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

3id: rivet

4name: Rivet

5title: Rivet — Industrial Brutalist

6version: 1.0.0

7category: brutalist

8tags: [brutalist, industrial, orange, mono, raw]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.65 0.19 45)", type: color }

17 secondary: { value: "oklch(0.2 0.006 250)", type: color }

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

19 text:

20 primary: { value: "oklch(0.16 0.006 250)", type: color }

21 muted: { value: "oklch(0.42 0.01 250)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.002 250)", type: color }

25 raised: { value: "oklch(0.965 0.003 250)", type: color }

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

27 border:

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

29 state:

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

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

32 warning: { value: "oklch(0.68 0.16 80)", type: color }

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

34 typography:

35 family:

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

37 mono: { value: "Archivo 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.7rem", type: dimension }

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

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

45 weight:

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

47 bold: { value: 800, 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.2 0.006 250)", type: shadow }

59 md: { value: "6px 6px 0 oklch(0.2 0.006 250)", type: shadow }

60 motion:

61 duration:

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

63 easing:

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

65 breakpoint:

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

67 iconography:

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

69 zIndex:

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

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

72---

74# Rivet Design System

76## Brand & Voice

77Rivet is the factory floor: safety-orange, steel-grey ink, and bolted-down

78borders. Hard offset shadows, stepped transitions, and zero rounding. It looks

79built, not designed — and that's the point.

81## Layout & Grid

82Exposed structure, heavy rules, and stamped labels. Hierarchy comes from weight

83and the single orange. Components snap rather than glide.

85## Components

86### Buttons

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

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

90### Panels

91Bordered boxes with offset `shadow.md`; tags are flat fills of the steel

92`color.brand.secondary`.

94## Accessibility

95Brutal contrast by design: primary and muted text pass WCAG AA on every surface.

96Orange always carries dark text, and focus is an unmissable steel outline.

Related systems

View →

Button

Concrete

95AAA

Concrete — Brutalist & Raw

brutalistbrutalistmono

View →

Button

Slab

98AAA

Slab — Raw Brutalist

brutalistbrutalistraw

View →

Button

Stark

98AAA

Stark — Inverted Brutalist

brutalistbrutalistdark