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
GWL
GWL Beige is Group Wide Loyalty's warm neutral brand foundation. It supports soft surfaces, low-emphasis brand areas, and premium editorial moments.
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.
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.
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.
Full palette inventory
| Token | Layer | King Power light | King Power dark |
|---|---|---|---|
palette-alpha-brand-10--crown-palette-alpha-brand-10 | global | 0.08 | 0.08 |
palette-alpha-brand-20--crown-palette-alpha-brand-20 | global | 0.12 | 0.12 |
palette-alpha-brand-30--crown-palette-alpha-brand-30 | global | 0.22 | 0.22 |
palette-alpha-brand-40--crown-palette-alpha-brand-40 | global | 0.32 | 0.32 |
palette-alpha-brand-50--crown-palette-alpha-brand-50 | global | 0.44 | 0.44 |
palette-alpha-brand-60--crown-palette-alpha-brand-60 | global | 0.5 | 0.5 |
palette-alpha-monotone-10--crown-palette-alpha-monotone-10 | global | 0.05 | 0.05 |
palette-alpha-monotone-20--crown-palette-alpha-monotone-20 | global | 0.08 | 0.08 |