[ 05 ]   Design System

The Abrink kit. Tokens, type, components.

A working system, not a swatch board. Everything you've seen above is built from the tokens below.

Surfaces & ink

5 / palette
#1B1916
Umber
#221F1B
Umber 2
#EFEAE2
Bone
#E5DFD3
Bone 2
#D9D2C3
Line
Coral
signal
Sage
positive
Slate
info
Gold
warn
Ink
foreground

Wordmark

/ logo
Abrink
Archivo · 500 · −0.04em

Typography

Archivo · Geist · JetBrains Mono
Display 56Archivo 500 / 1.0
Heading 32Archivo 500 / 1.05
Subhead 22Archivo 500 / 1.2
Body lg 17 · The smallest tool that removes the largest friction.Geist 400 / 1.45
Body sm 14 · Caption + supporting copy.Geist 400 / 1.55
[ 01 ] · Marker · MonoJetBrains Mono 500

Buttons

/ pill 999
PrimarySecondarySignalGhost

Badges

/ status
ResolvedPendingReviewShipped

Imagery — soft topography

/ CSS gradients

Imagery in Abrink is never an illustration of AI. It's a soft, blurred suggestion of place — fields, water, dusk — to keep the focus on the work.

Card anatomy

/ 22px radius
[ 01 ]
Numbered
Dark surface card with mono marker.
/ logo
Sample
Light case-study tile, gradient art over.

Spacing

/ 4px base
8 · xs
16 · sm
24 · md
48 · lg
96 · xl

Radii

/ tokens
61422pill

Voice

/ tone

Plainspoken, direct, slightly dry. We say “tool”, not “platform”. We say “ship”, not “launch”. We never say “revolutionize”.

QuietSpecificWorkshop-yNo hype