--- title: "Taxonomy Color Key — one hue per component family · KYE Protocol™" description: "The KYE Protocol™ taxonomy color key: every top-level component family carries one distinguishable, WCAG-AA hue across light and dark themes, so you can tell a sector from a framework from a program at a glance." url: https://kyeprotocol.com/design-system/color-taxonomy/ lang: en source: "KYE Protocol" --- > The KYE Protocol™ taxonomy color key: every top-level component family carries one distinguishable, WCAG-AA hue across light and dark themes, so you can tell a sector from a framework from a program at a glance. 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 Canonical KYE™ surfaces referenced on this page: [KYE Protocol™](https://kyeprotocol.com/) · [KYE™ Sector Pack Foundry™](https://kyeprotocol.com/sector-pack-foundry/).