Design Tokens — Coconut Design System

Primary Palette

Accent

--accent

#744F28

Accent Dark

--accent-dark

#5C3D1E

Accent Container

--accent-container

#F0E6DA

On Accent Container

--on-accent-container

#2C1A06

Semantic Colors

Green

Green 50

--green-50

#E6F4EA

Green 100

--green-100

#C8E6C9

Green 500

--green-500

#2D6A4F

Green 600

--green-600

#1B5E3A

Green 700

--green-700

#005A2F

Red

Red 50

--red-50

#FCE8E6

Red 100

--red-100

#FECACA

Red 500

--red-500

#BA1A1A

Red 600

--red-600

#9C1414

Red 700

--red-700

#7F1D1D

Orange

Orange 50

--orange-50

#FEF7E0

Orange 100

--orange-100

#FDE68A

Orange 500

--orange-500

#8B5000

Orange 600

--orange-600

#6D3D00

Orange 700

--orange-700

#78350F

Blue

Blue 50

--blue-50

#EFF6FF

Blue 100

--blue-100

#DBEAFE

Blue 500

--blue-500

#1D4ED8

Blue 600

--blue-600

#1E40AF

Blue 700

--blue-700

#1E3A8A

Other

Purple

--purple

#7B5E8E

Cyan

--cyan

#4A7A8A

Neutral Palette

Gray 50

--gray-50

#F8F6F4

Gray 100

--gray-100

#F0EDEA

Gray 200

--gray-200

#DDD9D5

Gray 300

--gray-300

#C0BBB5

Gray 400

--gray-400

#9A948E

Gray 500

--gray-500

#7E8389

Gray 700

--gray-700

#3C3835

Gray 900 / Navy

--gray-900

#101820

Typography Scale

Page Title 1.25rem / 700 Dashboard Overview

Card Title 0.9rem / 700 Server Status

Section 0.82rem / 600 Network Configuration

Body 0.78rem / 500 System uptime: 99.97% over the last 30 days.

Label 0.72rem / 600 SIDEBAR LABEL

Tiny 0.65rem / 600 RACK UNIT LABEL

Mono JetBrains Mono srv-prod-01 · v2.4.1

Elevation & Shadows

--shadow

Level 1 — Cards

--shadow-md

Level 2 — Hover

--shadow-lg

Level 3 — Modals

Border Radius

6px

Buttons

8px

Badges

12px

--radius

16px

--radius-lg

All Tokens Reference

Token	Light Value	Dark Value	Usage
`--bg`	#f3f4f6	#020617	Page background
`--white`	#ffffff	#1e293b	Card / Surface
`--border`	--gray-200	#3b4f6a	All borders
`--muted`	--gray-500	#94a3b8	Secondary text
`--text`	--gray-900	#ffffff	Primary text
`--accent`	#744F28	#C4956A	Primary action
`--green-50`	#E6F4EA	rgba(…,0.12)	Badge / callout background
`--green-500`	#2D6A4F	#7AB08A	Success / Online
`--green-600`	#1B5E3A	#A7F3D0	Hover / pressed
`--green-700`	#005A2F	#D1FAE5	Dark emphasis
`--red-50`	#FCE8E6	rgba(…,0.12)	Badge / callout background
`--red-500`	#BA1A1A	#FCA5A5	Error / Critical
`--red-600`	#9C1414	#FECACA	Hover / pressed
`--red-700`	#7F1D1D	#FEE2E2	Dark emphasis
`--orange-50`	#FEF7E0	rgba(…,0.12)	Badge / callout background
`--orange-500`	#8B5000	#FCD34D	Warning
`--orange-600`	#6D3D00	#FDE68A	Hover / pressed
`--blue-50`	#EFF6FF	rgba(…,0.12)	Info background
`--blue-500`	#1D4ED8	#60A5FA	Info / link
`--sidebar-w`	240px		Sidebar width
`--topbar-h`	56px		Topbar height
`--radius`	12px		Default radius
`--radius-lg`	16px		Card radius
`--mono`	JetBrains Mono		Code, IPs, versions