Color
Three layers: a palette of hues, semantic roles that say what a colour is for, and components that read roles only. Every pair meets WCAG 2.2 AA, and every value and ratio on this page is read from the live tokens.
Three layers
- Palette
--comb-palette-hue-step. Raw hues. Never used in a component. - Roles
--comb-color-*. What a colour means: text, icon, background, surface, border. The only layer components use. - ComponentsThe
kb-classes. They read roles, so one change to a role moves every screen.
Old names such as --ink-600, --gold-dark and --paper still work. They are aliases to a step or a role, marked deprecated, and new code does not use them.
Palette
Seven hues on a ten-step ramp. The neutral is warm grey cut from the paper hue, so text and paper share a temperature. Steps 700 and up reach 4.5:1 on every surface, 500 and 600 reach 3:1, and white reaches 4.5:1 on every 600.
Neutral
Warm grey, cut from the paper hue so text and paper share a temperature.
- 0
Reading - 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading - 1000
Reading
Gold
Brand. Step 400 is the KiBee gold; 600 is the primary fill.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Ruby
Danger, breach, destructive.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Teal
Success, done, live.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Sky
Information, in progress.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Amber
Warning. Warm, from the gold and olive family.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Olive
Discovery and quiet accents.
- 50
Reading - 100
Reading - 200
Reading - 300
Reading - 400
Reading - 500
Reading - 600
Reading - 700
Reading - 800
Reading - 900
Reading
Text
Every text role reaches 4.5:1 on the surfaces and backgrounds named beside it. Pick by meaning, not by looks.
| Example | Role | Meant for | Contrast | Usage |
|---|---|---|---|---|
--comb-color-textReading | on surface | Not measured | Body text and headings. | |
--comb-color-text-subtleReading | on surface | Not measured | Secondary text, ghost buttons, tab labels. | |
--comb-color-text-subtlestReading | on surface-sunken | Not measured | Hints, timestamps, placeholders and field help. | |
--comb-color-text-disabledReading | on surface | Not measured | Disabled controls only. Exempt from contrast. | |
--comb-color-text-inverseReading | on bg-neutral-bold | Not measured | Text on a dark plate. | |
--comb-color-text-inverse-subtleReading | on bg-neutral-bold | Not measured | Secondary text on a dark plate. | |
--comb-color-text-linkReading | on surface | Not measured | Links and text-only actions. | |
--comb-color-text-link-pressedReading | on surface | Not measured | A link while it is hovered or pressed. | |
--comb-color-text-brandReading | on bg-brand-subtle | Not measured | Brand-coloured labels on a gold tint. | |
--comb-color-text-dangerReading | on bg-danger-subtle | Not measured | Errors, SLA breach, destructive copy. | |
--comb-color-text-warningReading | on bg-warning-subtle | Not measured | Caution and at-risk states. | |
--comb-color-text-successReading | on bg-success-subtle | Not measured | Done, live, saved. | |
--comb-color-text-infoReading | on bg-info-subtle | Not measured | Information and in progress. | |
--comb-color-text-discoveryReading | on bg-discovery-subtle | Not measured | New and discovery. | |
--comb-color-text-on-boldReading | on bg-brand-bold | Not measured | Text and icons on any bold fill. | |
--comb-color-text-on-accentReading | on bg-accent | Not measured | Text on the gold accent fill. |
Icon
Icons and meaningful graphics reach 3:1 on every surface. An icon that carries a state also carries a word.
| Example | Role | Meant for | Contrast | Usage |
|---|---|---|---|---|
--comb-color-iconReading | on surface | Not measured | Default icons. | |
--comb-color-icon-subtleReading | on surface | Not measured | Quiet icons, chevrons, idle dots. | |
--comb-color-icon-brandReading | on surface | Not measured | Brand marks and the current item. | |
--comb-color-icon-dangerReading | on surface | Not measured | Alarm dots and error icons. | |
--comb-color-icon-warningReading | on surface | Not measured | Caution icons. | |
--comb-color-icon-successReading | on surface | Not measured | Online dots and saved ticks. | |
--comb-color-icon-infoReading | on surface | Not measured | Information icons. |
Background
Bold fills carry white text and are the only place a status gets loud. Subtle fills carry the matching text role.
| Example | Role | Meant for | Contrast | Usage |
|---|---|---|---|---|
--comb-color-bg-neutralReading | with text | Not measured | Neutral lozenges and badges. | |
--comb-color-bg-neutral-hoveredReading | with text | Not measured | Neutral fill while hovered. | |
--comb-color-bg-neutral-boldReading | with text-inverse | Not measured | Dark plates and tooltips. | |
--comb-color-bg-brand-boldReading | with text-on-bold | Not measured | The one primary action. | |
--comb-color-bg-brand-bold-hoveredReading | with text-on-bold | Not measured | Primary while hovered. | |
--comb-color-bg-brand-bold-pressedReading | with text-on-bold | Not measured | Primary while pressed. | |
--comb-color-bg-brand-subtleReading | with text-brand | Not measured | Gold lozenges and current rows. | |
--comb-color-bg-accentReading | with text-on-accent | Not measured | The gold fill: bars, highlights, avatars. | |
--comb-color-bg-selectedReading | with text | Not measured | Selected rows and chips. | |
--comb-color-bg-selected-boldReading | with text-on-bold | Not measured | A selected control that fills. | |
--comb-color-bg-disabledReading | with text-disabled | Not measured | A disabled control. | |
--comb-color-bg-danger-boldReading | with text-on-bold | Not measured | The danger button and alarm badge. | |
--comb-color-bg-danger-bold-hoveredReading | with text-on-bold | Not measured | Danger while hovered. | |
--comb-color-bg-danger-subtleReading | with text-danger | Not measured | Breach lozenges and error notices. | |
--comb-color-bg-warning-subtleReading | with text-warning | Not measured | Caution lozenges and notices. | |
--comb-color-bg-success-subtleReading | with text-success | Not measured | Done lozenges and notices. | |
--comb-color-bg-info-subtleReading | with text-info | Not measured | In-progress lozenges and notices. | |
--comb-color-bg-discovery-subtleReading | with text-discovery | Not measured | New and discovery. | |
--comb-color-bg-success-boldReading | with text-on-bold | Not measured | A filled success state. | |
--comb-color-bg-info-boldReading | with text-on-bold | Not measured | A filled information state. | |
--comb-color-bg-warning-boldReading | with text-on-bold | Not measured | A filled caution state. | |
--comb-color-bg-discovery-boldReading | with text-on-bold | Not measured | A filled discovery state. | |
--comb-color-bg-control-offReading | with surface-overlay | Not measured | The off track of a switch, with its white knob. | |
--comb-color-bg-inputReading | with text | Not measured | Field fill. | |
--comb-color-bg-input-hoveredReading | with text | Not measured | Field fill while hovered. |
Surface
Surfaces are opaque, so a text ratio is the same wherever the plate sits. The page ground is surface; plates are raised; menus and dialogs are overlay.
| Example | Role | Meant for | Contrast | Usage |
|---|---|---|---|---|
--comb-color-surfaceReading | with text | Not measured | The console ground. | |
--comb-color-surface-sunkenReading | with text | Not measured | Rails, board columns and wells. | |
--comb-color-surface-raisedReading | with text | Not measured | Plates and cards. | |
--comb-color-surface-overlayReading | with text | Not measured | Menus, popovers and dialogs. | |
--comb-color-surface-hoveredReading | with text | Not measured | A surface row while hovered. |
Border
Borders that identify a control or a state reach 3:1. Hairlines that only divide are decoration and say so.
| Example | Role | Meant for | Contrast | Usage |
|---|---|---|---|---|
--comb-color-borderReading | on surface | Not measured | Hairlines between areas. | |
--comb-color-border-subtleReading | on surface | Not measured | The quietest divider. | |
--comb-color-border-boldReading | on surface | Not measured | Hover edges and strong dividers. | |
--comb-color-border-inputReading | on surface | Not measured | Field, select and checkbox edges. | |
--comb-color-border-focusedReading | on surface | Not measured | The focus ring, on every surface. | |
--comb-color-border-brandReading | on surface | Not measured | Brand-coloured outlines. | |
--comb-color-border-selectedReading | on surface | Not measured | The edge of a selected row or chip. | |
--comb-color-border-dangerReading | on surface | Not measured | Error outlines. | |
--comb-color-border-warningReading | on surface | Not measured | Caution outlines. | |
--comb-color-border-successReading | on surface | Not measured | Success outlines. | |
--comb-color-border-infoReading | on surface | Not measured | Information outlines. |
Map and storefront sets
Two dark grounds exist inside the console: the visitors map and the plugin storefront hero. Their inks are only for those grounds.
| Example | Token | Value | Contrast | Usage |
|---|---|---|---|---|
Map ink--comb-map-ink | Reading | Not measured | Text on the visitors map. | |
Map muted--comb-map-muted | Reading | Not measured | Secondary text on the map. | |
Map hint--comb-map-hint | Reading | Not measured | Hints on the map. | |
Hero text--comb-hero-text | Reading | Not measured | Storefront hero copy. | |
Hero gold--comb-hero-gold | Reading | Not measured | Storefront hero accent. | |
Hero gold light--comb-hero-gold-light | Reading | Not measured | Storefront hero highlight. |
Using color
Each role is measured against the role it is meant for. Surfaces are opaque, so a ratio is the same wherever a plate sits. Ratios are rounded down, so a pair never reads as passing when it does not. A sample whose pair is weak is announced as an image with its ratio in its name, never as text.
- Pass Text roles reach 4.5:1. Icons, control edges and the focus ring reach 3:1.
- Exempt Disabled controls and decorative hairlines have no minimum, and never carry meaning alone.
- Fail A role that falls below its minimum. The test suite fails before it ships.
Do and don't
Gold once per view
A gold fill marks the main action, and a view has one. When two actions compete, one of them becomes secondary. Gold text is never set on paper: links use the link role, which is the dark end of gold.
Roles, not steps
Write color: var(--comb-color-text-danger), not a ruby step or --ruby-dark. The role already holds the contrast, and it can be retuned in one place.