Design system · React + CSS variables · 16 components
Zyne
A quiet, accessibility-first design system. Every text pairing meets WCAG AA, status is never colour alone, and motion stays under 260ms.
Plum
Primary accent · plum-600 is 8.7:1 on white
50#F7F0F5
100#EEDDE8
200#DDBBD1
300#C493B3
400#A86D94
500#8C5079
600#6E3A5E
700#5A2F4D
800#46253C
900#31192A
Pine
Quiet secondary for data & avatars
50#EEF5F2
100#D5E7E0
200#A9CDBF
300#77AE9B
400#4B8E78
500#33735F
600#285D4D
700#1F4A3D
800#17372E
Mist
Cool plum-tinted neutrals · canvas, text, borders
0#FFFFFF
25#FCFBFC
50#F8F6F8
100#F1EEF1
200#E5E0E5
300#D4CDD4
400#ADA4AD
500#847A84
600#675D67
700#4F464F
800#372F37
900#221C22
Display
Source Serif 4 — Calm, editorial
UI
Hanken Grotesk — Clear before clever
Data
JetBrains Mono — INC-20481 · 04:12