Demo tools
Design tokens
The four palettes in dark and light, and the three type pairings. Values come from tokens.css; contrast is computed live from the same values.
Noir
Warm black and champagne. The Quiet Luxury default.
Noir · dark
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#110F0E - surface
#1A1715 - rule
#2C2724 - field
#6E655D - muted
#A69B91 - body
#CCC2B8 - ink
#F2ECE4 - em
#E3C79D - btn-bg
#E3C79D - btn-fg
#110F0E - badge-bg
#E3C79D - badge-fg
#110F0E - announce-bg
#0A0908 - announce-fg
#D8CDBF - input-bg
#171412 - card-input-bg
#0E0C0B - error
#D98B7E - sketch
#EDE4D8 - tone-a
#29231E - tone-b
#24201C - tone-c
#201E1D - tone-d
#2D2520 - tone-e
#2C1F1D - tone-a2
#221D19 - tone-c2
#1A1918 - tone-e2
#241A18
Noir · light
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#F7F2EC - surface
#EFE6DC - rule
#DDD1C4 - field
#8F8478 - muted
#6C6157 - body
#4B433C - ink
#1C1816 - em
#7A5A33 - btn-bg
#1C1816 - btn-fg
#F7F2EC - badge-bg
#1C1816 - badge-fg
#F7F2EC - announce-bg
#1C1816 - announce-fg
#F2EAE0 - input-bg
#FCF9F5 - card-input-bg
#FFFFFF - error
#7A2E26 - sketch
#1C1816 - tone-a
#EADFD1 - tone-b
#EFE6DC - tone-c
#E5E1DB - tone-d
#E0D4C5 - tone-e
#ECDCD6 - tone-a2
#E0D4C5 - tone-c2
#D9D4CD - tone-e2
#E3D0C9
Sage
Moss, oat and lichen. Soft and grounded.
Sage · dark
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#0F110F - surface
#171A17 - rule
#272C27 - field
#677064 - muted
#9DA697 - body
#C4CBBF - ink
#EEF0E9 - em
#C3CFA6 - btn-bg
#C3CFA6 - btn-fg
#0F110F - badge-bg
#C3CFA6 - badge-fg
#0F110F - announce-bg
#090B09 - announce-fg
#D3D9CC - input-bg
#141614 - card-input-bg
#0C0E0C - error
#D98B7E - sketch
#E6EBDF - tone-a
#252A22 - tone-b
#20241F - tone-c
#1D1F1D - tone-d
#2A2C24 - tone-e
#2A2321 - tone-a2
#1F231C - tone-c2
#191B19 - tone-e2
#221D1B
Sage · light
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#F3F4EE - surface
#E7EADF - rule
#D3D8CA - field
#838B7C - muted
#5E6657 - body
#434A3E - ink
#1A1D18 - em
#4C5E33 - btn-bg
#1A1D18 - btn-fg
#F3F4EE - badge-bg
#1A1D18 - badge-fg
#F3F4EE - announce-bg
#1A1D18 - announce-fg
#ECEFE6 - input-bg
#FAFBF7 - card-input-bg
#FFFFFF - error
#7A2E26 - sketch
#1A1D18 - tone-a
#E3E7D9 - tone-b
#E7EADF - tone-c
#E2E3DE - tone-d
#D9DDCC - tone-e
#E8DED8 - tone-a2
#D9DECC - tone-c2
#D6D8D1 - tone-e2
#DFD1CA
Clay
Terracotta and sand. Warm and sunlit.
Clay · dark
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#120E0C - surface
#1C1613 - rule
#2F2621 - field
#74665C - muted
#AE9C90 - body
#D2C3B8 - ink
#F4EBE4 - em
#E5A983 - btn-bg
#E5A983 - btn-fg
#120E0C - badge-bg
#E5A983 - badge-fg
#120E0C - announce-bg
#0B0807 - announce-fg
#DCCBBF - input-bg
#181210 - card-input-bg
#0F0B09 - error
#E38C86 - sketch
#F0E2D8 - tone-a
#2C221C - tone-b
#261E19 - tone-c
#211D1B - tone-d
#30241D - tone-e
#2F1F1B - tone-a2
#241B16 - tone-c2
#1C1816 - tone-e2
#261916
Clay · light
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#F7EFE8 - surface
#EFE2D7 - rule
#DECDBF - field
#958274 - muted
#6E5C50 - body
#4E4038 - ink
#1E1612 - em
#8A3F22 - btn-bg
#1E1612 - btn-fg
#F7EFE8 - badge-bg
#1E1612 - badge-fg
#F7EFE8 - announce-bg
#1E1612 - announce-fg
#F4E8DE - input-bg
#FCF7F3 - card-input-bg
#FFFFFF - error
#8A1F1F - sketch
#1E1612 - tone-a
#EFDFD0 - tone-b
#EFE2D7 - tone-c
#E8E1DA - tone-d
#E5D3C3 - tone-e
#EFD9D0 - tone-a2
#E5D2C1 - tone-c2
#DDD5CD - tone-e2
#E6CCC1
Stone
Graphite and chalk. Minimal and architectural.
Stone · dark
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#0F0F0F - surface
#181818 - rule
#2A2A29 - field
#6B6A67 - muted
#A3A19C - body
#C9C7C2 - ink
#F0EFEC - em
#D8D2C6 - btn-bg
#F0EFEC - btn-fg
#0F0F0F - badge-bg
#F0EFEC - badge-fg
#0F0F0F - announce-bg
#090909 - announce-fg
#D6D4CF - input-bg
#141414 - card-input-bg
#0B0B0B - error
#DE8E84 - sketch
#ECEAE6 - tone-a
#262523 - tone-b
#212120 - tone-c
#1D1D1D - tone-d
#2A2826 - tone-e
#2A2322 - tone-a2
#1F1E1D - tone-c2
#181818 - tone-e2
#221D1C
Stone · light
It's Giving Diva.
Silk, satin and sharp tailoring for the entrance you meant to make.
Muted caption text · Error message
New- bg
#F4F3F0 - surface
#E9E7E2 - rule
#D6D3CC - field
#878580 - muted
#605E59 - body
#43413D - ink
#191918 - em
#55524C - btn-bg
#191918 - btn-fg
#F4F3F0 - badge-bg
#191918 - badge-fg
#F4F3F0 - announce-bg
#191918 - announce-fg
#EFEDE8 - input-bg
#FBFAF8 - card-input-bg
#FFFFFF - error
#8A2A22 - sketch
#191918 - tone-a
#E6E3DD - tone-b
#E9E7E2 - tone-c
#E2E1DE - tone-d
#DCD8D0 - tone-e
#E8DFDB - tone-a2
#DCD8D0 - tone-c2
#D5D3CF - tone-e2
#E0D3CE
Type pairings
Classic · Cormorant Garamond / Hanken Grotesk
The Evening Edit
A classical serif with a clean grotesque. The Quiet Luxury default. Body copy sits at 15px with generous leading.
Label · 11px · 0.16em tracking
Editorial · Bodoni Moda / Jost
The Evening Edit
High-contrast Didone headlines with a geometric sans. Body copy sits at 15px with generous leading.
Label · 11px · 0.16em tracking
Soft · Fraunces / Manrope
The Evening Edit
A warm, rounded serif with a friendly sans. Body copy sits at 15px with generous leading.
Label · 11px · 0.16em tracking
Contrast (WCAG 2.2 AA)
| Palette | Mode | Checks passed | Tightest pair |
|---|---|---|---|
| Noir | dark | 18 / 18 | field on input-bg: 3.22:1 (needs 3:1) |
| Noir | light | 18 / 18 | muted on surface: 4.88:1 (needs 4.5:1) |
| Sage | dark | 18 / 18 | field on input-bg: 3.53:1 (needs 3:1) |
| Sage | light | 18 / 18 | field on bg: 3.19:1 (needs 3:1) |
| Clay | dark | 18 / 18 | field on input-bg: 3.35:1 (needs 3:1) |
| Clay | light | 18 / 18 | field on bg: 3.23:1 (needs 3:1) |
| Stone | dark | 18 / 18 | field on input-bg: 3.41:1 (needs 3:1) |
| Stone | light | 18 / 18 | field on bg: 3.32:1 (needs 3:1) |