Design System

Tokens

The foundational variables of the 4MAN brutalist system — extracted from the source app's FM token object. Hard shadows, thick ink borders, one electric yellow.

01 Color

Core

ink #0f0f0f Primary text, borders, hard shadows
ink-strong #0a0a0a Darkest — shadow casts
ink-soft #3a3a3a Secondary text
accent #ffd60a Brand yellow — CTAs, highlights
accent-deep #ffb200 Pressed / deep accent
accent-soft #fff1c2 Accent tint background

Surface

bg #f0eee9 Page — warm paper
surface #ffffff Cards, panels
surface-muted #f5f5f5 Sunken / alt rows
surface-sunken #ececec Wells, code blocks
mute #6b6b6b Muted text / icons
mute-soft #9a9a9a Disabled / hint text
line #e5e5e5 Hairline dividers

State

success #16a34a Go / confirm
success-soft #dcfce7 Success background
error #dc2626 Stop / destructive
error-soft #fee2e2 Error background
warn #fbbf24 Caution
warn-soft #fff6bf Warning background

02 Typography

Families

Aa Bb 123 ก ข
font-display / body 'Bai Jamjuree', 'Noto Sans Thai', system-ui, sans-serif Primary — headings, UI & body. Thai-capable. Weights 400–700.
Aa Bb 123 ก ข
font-mono 'JetBrains Mono', ui-monospace, monospace Numerics, labels, badges, dates. Weights 400–600.

Type scale

Build it bold text-xs 11px Overline, caption
Build it bold text-sm 13px Dense UI, labels — most common
Build it bold text-base 14px Body
Build it bold text-lg 16px Subhead
Build it bold text-xl 20px Section title
Build it bold text-2xl 24px Large title
Build it bold text-3xl 32px Display
Build it bold text-hero clamp(40px, 7vw, 76px) Hero numerals — weight 800, lh 0.95

Weights

regular 400
medium 500
semibold 600
bold 700
black 800

03 Spacing

2px-step scale. Core rhythm is 8 / 10 / 12.

space-1 2px Hairline gap
space-2 4px Tight
space-3 6px Chip padding
space-4 8px Core · base unit
space-5 10px Core · default gap
space-6 12px Core · card padding
space-7 14px Comfortable
space-8 16px Section gap
space-9 18px Loose
space-10 20px Card interior
space-12 24px Block separation
space-16 40px Hero / empty-state

04 Radius

radius-xs 6px Inputs, tags
radius-sm 8px Chips
radius-md 12px Default — cards, tiles
radius-lg 16px Large cards, frames
radius-xl 18px Hero panels
radius-pill 999px Buttons, badges
radius-circle 50% Avatars, dots

05 Border

3px solid ink is the brutalist signature.

border-w 3px Primary — the brutalist baseline (164 uses)
border-w-soft 2px Secondary / dense UI
border-w-heavy 4px Heavy accent bars
border-w-hair 1px Internal list dividers

06 Shadow

Hard offset, zero blur. The elevation ladder.

shadow-hard 3px 3px 0 #0a0a0a sh1 · default raised (92 uses)
shadow-pop 5px 5px 0 #0a0a0a sh2 · emphasized / active
shadow-max 6px 6px 0 #0a0a0a sh3 · max elevation

07 Motion

motion-fast 120ms Hover, color, press
motion-base 180ms Menus, fades, modals
motion-slow 300ms Width reveals
ease-out cubic-bezier(.3,.7,.4,1) Primary snappy ease
ease-overshoot cubic-bezier(.2,.9,.3,1.2) Entrance overshoot — modals, notifs
press translate(2px,2px) + shadow collapse Active button feedback