All color tokens in the Levanzo design system. Click any swatch to copy its hex value. Split swatches show day (left) and night (right) — click each half independently.
Split = day / night · click each half
Click single swatches to copy hex
Accent color series
8 families, 5 stops each: deep · base · mid · light · faint. Click any stop to copy its hex.
Terracotta
Primary action, links, interactive elements
--terracotta-[stop]
Day · Levanzo
Terracotta
deep
#7A3520
rgb(122 53 32)
Terracotta
base
#B86240
rgb(184 98 64)
Terracotta
mid
#CC8060
rgb(204 128 96)
Terracotta
light
#E0A888
rgb(224 168 136)
Terracotta
faint
#F2D4C4
rgb(242 212 196)
Night · Notte
Terracotta
deep
#F4C4A8
rgb(244 196 168)
Terracotta
base
#D48C64
rgb(212 140 100)
Terracotta
mid
#C07048
rgb(192 112 72)
Terracotta
light
#8A4830
rgb(138 72 48)
Terracotta
faint
#4A2418
rgb(74 36 24)
Sage
Success, availability, have badge
--sage-[stop]
Day · Levanzo
Sage
deep
#2C4828
rgb(44 72 40)
Sage
base
#688060
rgb(104 128 96)
Sage
mid
#88A080
rgb(136 160 128)
Sage
light
#AABCA4
rgb(170 188 164)
Sage
faint
#D0DCC8
rgb(208 220 200)
Night · Notte
Sage
deep
#C4D8BC
rgb(196 216 188)
Sage
base
#8AA884
rgb(138 168 132)
Sage
mid
#6E8868
rgb(110 136 104)
Sage
light
#4A6044
rgb(74 96 68)
Sage
faint
#283828
rgb(40 56 40)
Gold
Warnings, due soon, time-sensitive
--gold-[stop]
Day · Levanzo
Gold
deep
#6A4A10
rgb(106 74 16)
Gold
base
#A87830
rgb(168 120 48)
Gold
mid
#C89848
rgb(200 152 72)
Gold
light
#E0BC78
rgb(224 188 120)
Gold
faint
#F2DEB0
rgb(242 222 176)
Night · Notte
Gold
deep
#F4DCA0
rgb(244 220 160)
Gold
base
#D0A454
rgb(208 164 84)
Gold
mid
#B88838
rgb(184 136 56)
Gold
light
#7A5820
rgb(122 88 32)
Gold
faint
#3C2C10
rgb(60 44 16)
Rust
Error states, destructive actions, alerts
--rust-[stop]
Day · Levanzo
Rust
deep
#6A1C10
rgb(106 28 16)
Rust
base
#A83828
rgb(168 56 40)
Rust
mid
#C85848
rgb(200 88 72)
Rust
light
#DE8878
rgb(222 136 120)
Rust
faint
#F2C4B8
rgb(242 196 184)
Night · Notte
Rust
deep
#F4BEB0
rgb(244 190 176)
Rust
base
#D87060
rgb(216 112 96)
Rust
mid
#BC4838
rgb(188 72 56)
Rust
light
#7A2A20
rgb(122 42 32)
Rust
faint
#3A1410
rgb(58 20 16)
Teal
Information, links, data highlights
--teal-[stop]
Day · Levanzo
Teal
deep
#1C4A50
rgb(28 74 80)
Teal
base
#3A7A80
rgb(58 122 128)
Teal
mid
#5A9EA4
rgb(90 158 164)
Teal
light
#8CC0C4
rgb(140 192 196)
Teal
faint
#C0DDE0
rgb(192 221 224)
Night · Notte
Teal
deep
#B0DCE0
rgb(176 220 224)
Teal
base
#6AAEB4
rgb(106 174 180)
Teal
mid
#3A7A80
rgb(58 122 128)
Teal
light
#245054
rgb(36 80 84)
Teal
faint
#102830
rgb(16 40 48)
Plum
Special states, premium features, ferments
--plum-[stop]
Day · Levanzo
Plum
deep
#3C2848
rgb(60 40 72)
Plum
base
#705880
rgb(112 88 128)
Plum
mid
#9078A0
rgb(144 120 160)
Plum
light
#B4A0C4
rgb(180 160 196)
Plum
faint
#D8CDE8
rgb(216 205 232)
Night · Notte
Plum
deep
#D0C4E0
rgb(208 196 224)
Plum
base
#A088B8
rgb(160 136 184)
Plum
mid
#806098
rgb(128 96 152)
Plum
light
#503868
rgb(80 56 104)
Plum
faint
#281C38
rgb(40 28 56)
Ochre
Nutrition, harvest, seasonal indicators
--ochre-[stop]
Day · Levanzo
Ochre
deep
#5A3808
rgb(90 56 8)
Ochre
base
#946020
rgb(148 96 32)
Ochre
mid
#B88040
rgb(184 128 64)
Ochre
light
#D4A870
rgb(212 168 112)
Ochre
faint
#EDD0A8
rgb(237 208 168)
Night · Notte
Ochre
deep
#EDD0A0
rgb(237 208 160)
Ochre
base
#D0A868
rgb(208 168 104)
Ochre
mid
#A87838
rgb(168 120 56)
Ochre
light
#6A4A18
rgb(106 74 24)
Ochre
faint
#30220A
rgb(48 34 10)
Slate
Neutral data, metadata, structural chrome
--slate-[stop]
Day · Levanzo
Slate
deep
#283040
rgb(40 48 64)
Slate
base
#486078
rgb(72 96 120)
Slate
mid
#6882A0
rgb(104 130 160)
Slate
light
#98B0C8
rgb(152 176 200)
Slate
faint
#C8D8E8
rgb(200 216 232)
Night · Notte
Slate
deep
#C0D0E4
rgb(192 208 228)
Slate
base
#88A4C0
rgb(136 164 192)
Slate
mid
#587898
rgb(88 120 152)
Slate
light
#305060
rgb(48 80 96)
Slate
faint
#182838
rgb(24 40 56)
Structural tokens
Surfaces
Page backgrounds, cards, and layering hierarchy.
Backgrounds & surfaces — click day or night half to copy
Paper
--paper
Day
#EEE8DC
rgb(238 232 220)
Night
#1E1A14
rgb(30 26 20)
Cards, modals, inputs
Cream
--cream
Day
#EAE4D8
rgb(234 228 216)
Night
#1A1710
rgb(26 23 16)
Main page background
Cream dark
--cream-dark
Day
#DDD6C8
rgb(221 214 200)
Night
#221E18
rgb(34 30 24)
Hovered rows
Parchment
--parchment
Day
#D0C9B8
rgb(208 201 184)
Night
#2A2520
rgb(42 37 32)
Deepest background
Manila
--manila
Day
#E2DACC
rgb(226 218 204)
Night
#262018
rgb(38 32 24)
Sidebar panels
Manila dark
--manila-dark
Day
#D5CEBB
rgb(213 206 187)
Night
#2E2820
rgb(46 40 32)
Sidebar hover
Manila deeper
--manila-deeper
Day
#C7BFA9
rgb(199 191 169)
Night
#38302A
rgb(56 48 42)
Sidebar active
Surface raised
--surface-raised
Day
#E8E2D8
rgb(232 226 216)
Night
#1E1A14
rgb(30 26 20)
Calendar cells, raised
Text scale
6-stop ramp from headings to disabled text.
Day (Levanzo)
Ink
--ink
#28201A
rgb(40 32 26)
Headings
Ink soft
--ink-soft
#403228
rgb(64 50 40)
Body text
Ink mid
--ink-mid
#685848
rgb(104 88 72)
Section labels
Ink muted
--ink-muted
#887060
rgb(136 112 96)
Timestamps
Ink light
--ink-light
#A89080
rgb(168 144 128)
Subtle labels
Ink faint
--ink-faint
#C4B4A0
rgb(196 180 160)
Disabled text
Night (Notte)
Ink
--ink
#E4D8C0
rgb(228 216 192)
Headings
Ink soft
--ink-soft
#CEBEAA
rgb(206 190 170)
Body text
Ink mid
--ink-mid
#A89070
rgb(168 144 112)
Section labels
Ink muted
--ink-muted
#847058
rgb(132 112 88)
Timestamps
Ink light
--ink-light
#60503A
rgb(96 80 58)
Subtle labels
Ink faint
--ink-faint
#443828
rgb(68 56 40)
Disabled text
Navigation chrome
Nav bar, sidebar, and section header backgrounds.
Nav tokens — click day or night half to copy
Nav bg
--nav-bg
Day
#2C2418
rgb(44 36 24)
Night
#100E0A
rgb(16 14 10)
Top nav / activity bar
Sidebar bg
--sidebar-bg
Day
#E2DACC
rgb(226 218 204)
Night
#1E1A14
rgb(30 26 20)
Left sidebar
Sidebar hover
--sidebar-hover
Day
#D5CEBB
rgb(213 206 187)
Night
#262018
rgb(38 32 24)
Sidebar item hover
Header bg
--header-bg
Day
#E2DACC
rgb(226 218 204)
Night
#1E1A14
rgb(30 26 20)
Section headers
Semantic tokens
Borders, dividers, pills, and table chrome.
UI state tokens — click day or night half to copy
Border
--border
Day
Night
Card edges, row dividers
Border strong
--border-strong
Day
Night
Focus ring, separators
Divider
--divider
Day
#C7BFA9
rgb(199 191 169)
Night
#38302A
rgb(56 48 42)
Horizontal rules
Pill active bg
--pill-active-bg
Day
#28201A
rgb(40 32 26)
Night
#C07048
rgb(192 112 72)
Selected filter pill
Pill active text
--pill-active-text
Day
#E8E2D4
rgb(232 226 212)
Night
#1A1710
rgb(26 23 16)
Pill text on active bg
Table header bg
--table-header-bg
Day
#C8C2B6
rgb(200 194 182)
Night
#221E18
rgb(34 30 24)
Table column header
Table header text
--table-header-text
Day
#887060
rgb(136 112 96)
Night
#847058
rgb(132 112 88)
Column header text
Usage notes
Base stop
The primary text or fill color. Meets contrast against --cream in day and --paper in night.
Deep stop
For text on light tint backgrounds (faint/light stops as bg). Too harsh on plain --cream.
Light + faint stops
Badge backgrounds and hover tints. Always pair with deep or base for text.