Color

Crown's color system is role-based, not palette-based. Product UI should use semantic color roles rather than raw hex values or palette shades. A role keeps the design intent stable while each brand and theme resolves to its own actual color.

For example, in KP light mode:

palette.KP Blue.700
-> theme.fll.primary.state0.light
-> color.Primary.Foreground.Default

The palette value provides the material, the iconic brand token assigns it to a brand intent, and the semantic role exposes the UI-facing API.

Color token chain

The chain lets Crown keep one semantic API across KP, GWL, and WF while each brand keeps its own color expression. Designers can reason about placement and meaning. Engineers can use stable token names without hard-coding brand colors.

Raw palette families

Raw palette families are the source material for the color system. They define ramps, neutrals, pure colors, greyscale values, social colors, and alpha scales. Palette names describe color material, not UI purpose.

Brand palette families include KP ramps such as KP Navy, KP Blue, KP Teal, KP Gold, and KP Dindang, plus GWL ramps such as GWL Beige, GWL Stormcloud, GWL Vogue, and GWL Blue.

Shared palette families include spectrum ramps such as Red, Orange, Yellow, Lime, Green, Teal, Sky, Blue, Indigo, Violet, Purple, and Pink; neutral families such as Nevada, Neutral, Pure, LightGreyscale, and DarkGreyscale; and alpha groups such as brand, spectrum, and monotone alpha.

Use raw palette values when authoring or reviewing higher-level tokens. In product UI, prefer semantic roles so brand and theme changes continue to resolve correctly.

Iconic brand colors

Iconic brand colors translate palette material into brand intent. This is where KP, GWL, and WF can assign different palette values to the same conceptual slots while the semantic layer above stays stable.

Designers can inspect iconic tokens to understand brand placement decisions. Engineers should normally consume the semantic roles instead of referencing iconic paths directly.

Semantic roles

Semantic roles are the public color API. They describe how a color should be used, not which palette shade it resolves to.

Each family can expose three placement roles:

State names describe interaction or emphasis:

Placement guidance

• Use Base for app backgrounds, surfaces, panels, and cards.
• Use on-Base.Content for text and icons on standard surfaces.
• Use Primary for main brand actions and high-visibility emphasis.
• Use Secondary for supporting branded emphasis.
• Use Danger, Warning, Success, and Info only when the color carries meaning.
• Use Static when a color must not invert between light and dark modes.
• Use CTA for the highest-priority commercial action on a page or flow.
• Prefer semantic roles over raw palette and iconic paths in application code.

Live semantic preview

Switch brands or themes from the header to see the same semantic tokens re-resolve.

Primary

Secondary

Danger

Info

Success

Warning

Static

CTA

Full color inventory