Crown Design
Foundations

Palette

Crown's raw color palette — the source material for all semantic token roles.

The palette is the bottom layer of Crown's color system — raw ramps of hues and neutrals that feed into iconic brand colors and then semantic roles. In product UI, prefer semantic tokens over referencing palette values directly.

KP refers to King Power. GWL refers to Group Wide Loyalty.

How to read palette ramps

Each palette family is raw material, not a UI role. Lower numeric stops such as 010, 025, 050, and 075 are pale support colors for backgrounds and subtle fills. Middle stops such as 400, 500, and 600 carry the family identity. Higher stops such as 900, 925, 950, and 975 provide dark contrast values.

Alpha stops such as A10, A20, and A60 are transparent overlays built from a family anchor color and a shared opacity scale. They appear in the full inventory, but the ramps below focus on solid color stops so the hue progression stays easy to scan.

Brand

Brand palettes provide the raw material for iconic brand tokens. Use them when authoring or reviewing brand mappings; use semantic color roles in product UI.

KP

kp-blue
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
kp-navy
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
kp-teal
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
kp-gold
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
kp-dindang
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975

GWL

GWL Beige is Group Wide Loyalty's warm neutral brand foundation. It supports soft surfaces, low-emphasis brand areas, and premium editorial moments.

gwl-beige
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
gwl-blue
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
gwl-stormcloud
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
gwl-vogue
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975

Spectrum

Spectrum palettes are shared across brands. They are the raw source for accents, data categories, and functional semantic families such as Danger, Warning, Success, and Info.

red
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
orange
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
yellow
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
lime
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
green
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
teal
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
blue
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
indigo
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
violet
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
purple
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
pink
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975

Neutral & Base

Neutral and base palettes support surfaces, text, dividers, overlays, and fixed black or white values. Product UI should still consume these through Base, on-Base, or Static semantic roles.

Neutral is the main balanced greyscale family. It is the general raw material for non-brand structure when neither light nor dark alpha greyscale is intended.

neutral
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
nevada
010
025
050
075
100
200
300
400
500
600
700
800
900
925
950
975
pure
black
white

Zero contains fully transparent values. It is useful for explicit transparent states, reset values, and token slots that need a color value without visible paint.

zero
zero-black
zero-white

Full palette inventory

TokenLayerKing Power lightKing Power dark
palette-alpha-brand-10
--crown-palette-alpha-brand-10
global0.080.08
palette-alpha-brand-20
--crown-palette-alpha-brand-20
global0.120.12
palette-alpha-brand-30
--crown-palette-alpha-brand-30
global0.220.22
palette-alpha-brand-40
--crown-palette-alpha-brand-40
global0.320.32
palette-alpha-brand-50
--crown-palette-alpha-brand-50
global0.440.44
palette-alpha-brand-60
--crown-palette-alpha-brand-60
global0.50.5
palette-alpha-monotone-10
--crown-palette-alpha-monotone-10
global0.050.05
palette-alpha-monotone-20
--crown-palette-alpha-monotone-20
global0.080.08

On this page