Kanban Live Design system
Foundations & components

The Kanban Live design system

A warm, calm foundation for the app UI — tokens, type, and the core components used across the board, tables, and forms. Toggle the theme (top right) to preview every token in light and dark. Copy this file into the app project as your starting point.

01 · Color tokens
Light — neutrals
bg
#F6F2EC
surface
#FFFFFF
surface-2
#FBF8F3
border
#EAE3D8
text
#211C16
text-2
#6E6459
text-3
#9A8F81
border-str
#DDD3C4
Dark — neutrals
bg
#17130E
surface
#211C15
surface-2
#1C1710
border
#312A20
text
#F6F2EC
text-2
#B0A594
text-3
#7E7362
border-str
#3E3527
Brand
accent
#E8442E
accent-2
#F5A623
logo red
#E7411A
logo cream
#FCE788
Status
requires
#E5372A
new
#F5A623
on order
#8A7E6E
stocked
#35A46B
02 · Typography
Space Grotesk · display & headings
Lean inventory
Section heading
Card title
Hanken Grotesk · body & UI · ui-monospace · codes

Body copy sits at 16px with generous line height for calm, readable screens. Secondary text steps down to 14px in text-3 for metadata.

LabelAN3C20A
03 · Buttons & status
Buttons
Primary Secondary Ghost link Download
Chip / filter Disabled
Bin status system
Empty18
Requires stock5
On order2
Stocked48
04 · Forms & cards
Form fields
Empty
Bin card · left-border status
AN4-6A
Bolt, hex HD 1/4-28
DLF_1A · B5
AN4-14A
Bolt hex HD 1/4 UNF
DLF_1A · B1
PartDescriptionLocationStatus
AN3C20AHex HD bolt CRS 10-32DLF_1A · A4
MS21042-08Nut, self-lockingDLF_2A · C3
AN4-6ABolt, hex HD 1/4-28DLF_1A · B5
05 · App shell & board
Kanban Live
Board
Parts
Reports
History
Users
Settings
Board Main Stores · DLF_1A
Search parts…
CO
Empty
AN4-6A
Bolt hex HD
Requires stock
AN3C20A
Hex HD bolt CRS
Stocked
AN4-14A
Bolt hex HD UNF

Shell pattern: fixed 210px sidebar (surface-2, active item in accent), a surface top bar with site selector · search · avatar, and a bg-toned content area. Board columns reuse the left-border bin cards from §4.