Design system · taxonomy color key

One distinguishable colour for every component family

Every top-level family in the KYE Protocol™ component graph carries its own colour, checked for WCAG-AA contrast on both the light and dark themes. The colour tells you what kind of thing you are looking at before you read a single word — a sector reads blue, a framework reads violet, a program reads teal, and an agent reads amber.

The hues below are the single source of truth for the platform. The colour values live in design-system/tokens/color.json, the family-to-role bindings live in color-mapping.json, and every surface reaches them through the var(--role) token rather than a hardcoded hex.

How you read this colour key

Each card shows one component family with two swatches: the primary hue you see on solid elements, and the soft tint you see behind badges, pills, and panels. Reach for this key when you build a surface, so related things share a colour and unrelated things never collide on the page.

The primary swatch is the strong fill you use for buttons, dots, headings, and active borders.
The soft swatch is the low-opacity tint you use for chip backgrounds, panel washes, and hover states.
Industries reuse the sector hue and rails reuse the engine hue, because each is the same family at a different grain.
Stakeholders keep the KYE™ accent violet as the brand anchor, so every other family is told apart against it.

Stakeholders

The brand anchor — primary KYE™ accent violet. Every other family is told apart against this purple.

var(--accent) · light #5B3DF5 · dark #6366F1

Sectors and industries

Market blue — the buying-audience hue. Industries share it as coarser-grained sectors.

var(--sector) · light #1D4ED8 · dark #3B82F6

Frameworks

Governance violet — regulatory authority, distinct from sector blue and jurisdiction slate.

var(--framework) · light #6D28D9 · dark #A78BFA

Jurisdictions

Neutral slate — reference geography, deliberately desaturated against the chromatic families.

var(--jurisdiction) · light #475569 · dark #94A3B8

Reports

Evidence cyan — reports and reference artefacts, distinct from sector blue and program teal.

var(--report) · light #0E7490 · dark #22D3EE

Agents

Runtime amber — principals acting on your behalf, audit-me, distinct from tool orange and feature gold.

var(--agent) · light #B45309 · dark #F59E0B

Tools

Side-effect orange — capabilities with consequences, distinct from agent amber and feature gold.

var(--tool) · light #C2410C · dark #FB923C

Programs and Foundry

Program teal — commercial commitments, with Foundry as a program subtype, distinct from the greens.

var(--program) · light #0F766E · dark #2DD4BF

SKUs

Success green — buyable and shippable line items, the commercial primary.

var(--success) · light #047857 · dark #10B981

Engines and rails

Runtime rose — the engine core, shared by rails that wrap engines, distinct from accent violet.

var(--engine) · light #BE185D · dark #F472B6

Workflows

Sequence indigo — ordered runtime sequences, distinct from stakeholder accent and sector blue.

var(--workflow) · light #3730A3 · dark #818CF8

Templates

Generative fuchsia — reusable starting points, distinct from engine rose and accent violet.

var(--template) · light #A21CAF · dark #E879F9

Profiles

Protocol sky — the locked identity layer, distinct from sector blue and report cyan.

var(--profile) · light #0369A1 · dark #38BDF8

Apps

Product grass-green — first-class product surfaces, distinct from SKU green and program teal.

var(--app) · light #15803D · dark #4ADE80

Features

Capability gold — runtime capabilities, distinct from agent amber and tool orange.

var(--feature) · light #A16207 · dark #FACC15

Pages

Neutral ink — pages render in default text; per-kind accents layer on top, not a separate family.

var(--text) · light #0B1020 · dark #F8FAFC

Programs and the Sector Pack Foundry share one teal, because Foundry is a program subtype rather than a separate family. SKUs hold success green, apps hold a brighter grass-green, and programs hold teal — three adjacent but clearly separate greens for the three commercial families. Frameworks, sectors, jurisdictions, and reports each hold a distinct cool hue, so the four reference families never read as the same blue on a crowded page.

The canonical chip

Every surface that labels a component-class instance renders it through one component: .kye-chip[data-kye-class="…"]. The chip reads its hue from the bound semantic role, so a sector chip is always sector blue and an agent chip is always agent amber, on every page, in both themes. There is exactly one chip component — adding a class never forks it.

Stakeholder Sector Industry Framework Jurisdiction Report Agent Tool Program SKU Engine Rail Workflow Template Profile App Feature Page

Alias families

Six families the protocol names but that are not separate classes reuse their parent class's hue: Foundry is a program, a regulatory regime groups frameworks, a region is a coarser jurisdiction, a role and an adopter are stakeholder identities, and a connector is an integration tool.

Foundry Regulatory regime Region Role Connector Adopter