Foundations

Color (Ferrum design system)

Color in Jeevy OS is an operational instrument, not a decorative palette. It sets the physical hierarchy of a screen, holds the eye where the work is, and reports the true state of the steel and the money.

v1.2.1

The six-rung surface ladder rising from chrome at L* 3.30 to active at L* 18.85, beside the four status tints with their measured AA contrast.

Our software competes with welding arcs, dust, grease on a capacitive screen and the glare of high-bay lighting. Under those conditions color cannot be ornament. In Ferrum it does three jobs: it builds depth, it steadies attention, and it tells the truth about a condition with no room for doubt.

Best practices

Use color as the exception, not the backdrop

Most of the interface is built from the neutral charcoal ladder and sand. Terracotta, green, amber and red are kept for the moments that matter: a state change, the one commit, an exception. A screen that spends color everywhere has nothing left to point with.

Never use color on its own

Every status pairs its color with a shape and a word: a green dot and Verified, an amber triangle and Action required, a red cross and Out of tolerance. A color-blind operator, or an estimator on a washed-out monitor, should never have to guess.

Hues name conditions, never actions

Success, warning and error say what condition a thing is in: the steel, the weld, the contract. They are never the fill of an ordinary button, because a green Save makes every real green on the floor mean a little less.

Design for glare

Overhead discharge lighting and greasy screens wash out anything subtle. Body text clears 4.5 : 1 with room to spare, so it reads from three feet away on a shop tablet; nothing important is grey on grey.

The monotonic surface ladder

Depth is lightness, not shadow. On a shop screen a soft drop shadow vanishes into the reflection, so Ferrum builds depth from a ladder of lightness (L*): four resting surfaces and two interactive states, each a measured step from the last.

Select a rung

--bg-elevated #1F242D, L* 14.07, +7.31 from the rung before. Work cards, data grids, modals and inspection drawers.

Rung	Token	Dark	Light	What it holds
Chrome, tier 1	`--bg-chrome`	#0A0C10, L* 3.30	#E7E9ED, L* 92.30	The 52px app rail and the frame around the whole viewport.
Chrome, tier 2	`--bg-chrome-2`	#0E1016, L* 4.71	#F1F3F5, L* 95.75	Secondary sidebars, docked trays and filter rails.
Canvas	`--bg-surface`	#12151C, L* 6.76	#F7F8FA, L* 97.56	The page itself: the scrolling workspace and the data canvas.
Card and panel	`--bg-elevated`	#1F242D, L* 14.07	#FFFFFF, L* 100.00	Work cards, data grids, modals and inspection drawers.
Hover	`--bg-hover`	#252B35, L* 17.36	#E5E8EE, L* 91.93	The stepped highlight on a row or tile under the pointer.
Active	`--bg-active`	#2D333F, L* 21.15	#DADFE7, L* 88.66	Pressed, selected or engaged.

The hover invariant

In dark mode a surface steps up as it is hovered and pressed: lighter, towards the eye, against the dark canvas. In light mode it steps down, pressing in like ink into paper. An elevated card at L* 14.07 hovers to 17.36 in dark, and from 100.00 down to 91.93 in light. Switch the terrace above to see the two directions. Change all six rungs together or none: moving two of them is how a canvas ends up darker than its own sidebar.

Scope of work, on --bg-elevated

Do: step surfaces in order, chrome to canvas to card, and put tables and metric cards on --bg-elevated so they lift cleanly off the canvas.

Avoid

Form fields drawn on chrome

Avoid: put inputs or a live data grid straight onto --bg-chrome, or fake depth with a one-off shadow or an unmapped background. Chrome is the frame; work on it reads as a hole.

Inclusive color and accessibility

Every text token is measured on both the canvas and the card, in both themes. The figures below are the lowest of those four grounds.

Primary text never falls below 15.6 : 1, which is what keeps a value readable through a face shield and a greasy screen protector. Muted text, the quietest thing we set, still clears 5.6 : 1, above the 4.5 : 1 AA floor. Every tier is measured, in both themes, in the specifications below.

Boundaries

WCAG asks 3 : 1 of the edge that identifies a control. Our structural edges are quieter than that on purpose, so a dense table is not a cage of lines, which means an edge must never be the only thing that marks a control: a field also has its label, its 32px height and its focus underline; a button its fill or its text.

TokenLightDarkContrast and role

--border

#dbdde1rgb(219, 221, 225)

#2f3033rgb(47, 48, 51)

Light 1.3 : 1, Fill onlyDark 1.4 : 1, Fill onlyCard outlines, table shells, field edges. Composited over the canvas and measured against it.

--border-strong

#c4c7ccrgb(196, 199, 204)

#484747rgb(72, 71, 71)

Light 1.6 : 1, Fill onlyDark 2.0 : 1, Fill onlyHovered and focused edges. Composited over the canvas and measured against it.

Architectural atmospheres

Ferrum's answer to a spinner is warmth. A nesting run, a generated BOM or a purchase-order reconciliation can take several seconds, and a frozen screen makes a shop owner wonder whether the terminal has locked up.

Thermal diffuse

--gradient-thermal-diffuse washes warm sand at 18% through terracotta at 28% into the deep ground, softened by a 40px ambient blur. It breathes behind empty states and loading panels: the system is working, and nothing is wrong.

Chakra orbit

--gradient-chakra-orbit runs sand to terracotta to the deep primary, and turns once every twelve seconds while a model is reasoning: alive, but too slow to tire the eye on a long shift. See it on the AI atmosphere page.

Accents and state logic

Terracotta is forging heat, and it carries the most weight on the screen, so it is rationed.

The terracotta limit

Filled terracotta never covers more than 8% of the visible screen, and there is exactly one filled primary button per screen or open drawer: the commit, such as Commit work order or Save changes. Every other action is an outline or a ghost.

Condition hues, not action triggers

Green reports material received, a weld inspected, a test passed. Amber reports a breached material floor, exhausted float, a load held at the railhead. Red reports a part out of tolerance, a tripped safety gate, a hard-blocked critical path. None of them ever fills a routine control.

Active, plasma table 2

Do: report that an operator is clocked in with an 8px green dot and the word, and flag a breached threshold with a quiet amber Margin at risk chip.

Avoid

Clock in

Avoid: make Clock in or Save a bright green button. It spends the color an emergency needs elsewhere on the floor. Red is kept for the irreversible and the out of tolerance, never a routine Cancel.

Platform considerations

Desktop and command centers

Dense tables, schedules and ledgers. Color steps back so the figures lead: quiet --border-subtle dividers between rows, and one rung of hover to show where the pointer is.

Shop-floor kiosks and wall monitors

Mounted on a bay column or built into a cutting table, read through gloves and dust. Status becomes larger, plainer tags, and every control carries at least a 44px hit area so a gloved thumb lands it first time.

Specifications and token mappings

All 117 colour tokens, light beside dark, with the contrast each earns where it is actually read. Values come from the token build, which reads the dark theme from the token file and the light theme from the portal's tokens.css; every ratio is computed.

Typographic tiers (7)

Measured as text on a card, the ground most text is read on.

TokenLightDarkContrast and role

--text-muted

#586371rgb(88, 99, 113)

#8F9CAArgb(143, 156, 170)

Light 6.1 : 1, AADark 5.6 : 1, AAColumn heads, hints, units and the empty-value mark. Measured as text on a card.

--text-on-identity

#0F172Argb(15, 23, 42)

Light 17.9 : 1, AAADark 1.1 : 1, Fill onlyDark text on a light identity fill, such as an avatar colour. Measured as text on a card.

--text-primary

#0F172Argb(15, 23, 42)

#FFFFFFrgb(255, 255, 255)

Light 17.9 : 1, AAADark 15.6 : 1, AAAValues, headings, anything a decision rests on. Measured as text on a card.

--text-sand

#6E5F4Crgb(110, 95, 76)

#E3D5C0rgb(227, 213, 192)

Light 6.2 : 1, AADark 10.8 : 1, AAAWarm-toned labels. Measured as text on a card.

--text-secondary

#475569rgb(71, 85, 105)

#A0B0C0rgb(160, 176, 192)

Light 7.6 : 1, AAADark 7.0 : 1, AAASupporting copy and secondary cells. Measured as text on a card.

--jv-text-muted-raw

#8F9CAArgb(143, 156, 170)

Light 2.8 : 1, Fill onlyDark 5.6 : 1, AARaw value #8F9CAA, reference only, bind to Semantic tokens instead. Measured as text on a card.

--jv-text-secondary-raw

#A0B0C0rgb(160, 176, 192)

Light 2.2 : 1, Fill onlyDark 7.0 : 1, AAARaw value #A0B0C0, reference only, bind to Semantic tokens instead. Measured as text on a card.

Surfaces and the monotonic ladder (20)

Measured as the ground for --text-primary. Translucent layers are composited over the canvas first.

TokenLightDarkContrast and role

--bg-active

#DADFE7rgb(218, 223, 231)

#2D333Frgb(45, 51, 63)

Light 13.3 : 1, AAADark 12.7 : 1, AAAPressed, active and selected. Measured with primary text.

--bg-chrome

#E7E9EDrgb(231, 233, 237)

#0A0C10rgb(10, 12, 16)

Light 14.7 : 1, AAADark 19.6 : 1, AAAApp shell, sidebar tier 1, top bar. Measured with primary text.

--bg-chrome-2

#F1F3F5rgb(241, 243, 245)

#0E1016rgb(14, 16, 22)

Light 16.0 : 1, AAADark 19.0 : 1, AAASidebar tier 2 and docked trays. Measured with primary text.

--bg-elevated

#FFFFFFrgb(255, 255, 255)

#1F242Drgb(31, 36, 45)

Light 17.9 : 1, AAADark 15.6 : 1, AAAResting cards, drawers, modals and dropdowns. Measured with primary text.

--bg-hover

#E5E8EErgb(229, 232, 238)

#252B35rgb(37, 43, 53)

Light 14.5 : 1, AAADark 14.2 : 1, AAAHover, always lighter than resting. Measured with primary text.

--bg-overlay

#0F172A at 45%rgba(15, 23, 42, 0.45)

#0A0C10 at 85%rgba(10, 12, 16, 0.85)

Light 5.8 : 1, AADark 19.4 : 1, AAAThe scrim behind a modal or drawer: bg-chrome #0A0C10 at 85%. Measured with primary text, over the canvas.

--bg-surface

#F7F8FArgb(247, 248, 250)

#12151Crgb(18, 21, 28)

Light 16.8 : 1, AAADark 18.3 : 1, AAAThe page canvas. Measured with primary text.

--bg-table-header

#EFF0F2rgb(239, 240, 242)

#262B33rgb(38, 43, 51)

Light 15.7 : 1, AAADark 14.2 : 1, AAAData-grid header row: a 3% lift over bg-elevated, opaque so sticky headers do not show rows through. Measured with primary text.

--nest-1

#0F172A at 3%rgba(15, 23, 42, 0.03)

#FFFFFF at 5%rgba(255, 255, 255, 0.05)

Light 15.8 : 1, AAADark 16.1 : 1, AAA Measured with primary text, over the canvas.

--nest-2

#0F172A at 6%rgba(15, 23, 42, 0.06)

#FFFFFF at 10%rgba(255, 255, 255, 0.1)

Light 14.9 : 1, AAADark 13.9 : 1, AAA Measured with primary text, over the canvas.

--nest-3

#0F172A at 9%rgba(15, 23, 42, 0.09)

#FFFFFF at 15%rgba(255, 255, 255, 0.15)

Light 14.0 : 1, AAADark 11.7 : 1, AAA Measured with primary text, over the canvas.

--overlay-active

#0F172A at 8%rgba(15, 23, 42, 0.08)

#FFFFFF at 12%rgba(255, 255, 255, 0.12)

Light 14.3 : 1, AAADark 13.0 : 1, AAA Measured with primary text, over the canvas.

--overlay-hover

#0F172A at 4%rgba(15, 23, 42, 0.04)

#FFFFFF at 8%rgba(255, 255, 255, 0.08)

Light 15.5 : 1, AAADark 14.8 : 1, AAA Measured with primary text, over the canvas.

--jv-bg-active-raw

#2D333Frgb(45, 51, 63)

Light 12.7 : 1, AAADark 1.2 : 1, Fill onlyRaw value #2D333F, reference only. Measured on a card.

--jv-bg-hover-raw

#252B35rgb(37, 43, 53)

Light 14.2 : 1, AAADark 1.1 : 1, Fill onlyL* 17.36. Measured on a card.

--jv-deep-navy

#1F242Drgb(31, 36, 45)

Light 1.1 : 1, Fill onlyDark 15.6 : 1, AAAL* 14.07. Measured with primary text.

--jv-navy

#12151Crgb(18, 21, 28)

Light 1.0 : 1, Fill onlyDark 18.3 : 1, AAARaw value #12151C, reference only, bind to Semantic tokens instead. Measured with primary text.

--jv-navy-chrome

#0A0C10rgb(10, 12, 16)

Light 1.1 : 1, Fill onlyDark 19.6 : 1, AAARaw value #0A0C10, reference only. Measured with primary text.

--jv-navy-chrome-2

#0E1016rgb(14, 16, 22)

Light 1.1 : 1, Fill onlyDark 19.0 : 1, AAARaw value #0E1016, reference only. Measured with primary text.

--jv-white

#FFFFFFrgb(255, 255, 255)

Light 17.9 : 1, AAADark 1.0 : 1, Fill onlyRaw value #FFFFFF, reference only, bind to Semantic tokens instead. Measured with primary text.

Borders and dividers (12)

Composited over a card and measured against it. Edges are quieter than 3 : 1 on purpose, so a control never relies on its edge alone.

TokenLightDarkContrast and role

--border

#0F172A at 12%rgba(15, 23, 42, 0.12)

#E3D5C0 at 14%rgba(227, 213, 192, 0.14)

Light 1.3 : 1, Fill onlyDark 1.4 : 1, Fill onlyStructural edges: card and container outlines. Measured on a card.

--border-card

#0F172A at 9%rgba(15, 23, 42, 0.09)

#E3D5C0 at 8%rgba(227, 213, 192, 0.08)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill onlyA resting card's edge in dark mode: sand at 8% on all four sides, a hairline rather than a wireframe box. Measured on a card.

--border-card-top

#0F172A at 12%rgba(15, 23, 42, 0.12)

#E3D5C0 at 8%rgba(227, 213, 192, 0.08)

Light 1.3 : 1, Fill onlyDark 1.2 : 1, Fill onlyA card's top edge. Measured on a card.

--border-hairline

#0F172A at 12%rgba(15, 23, 42, 0.12)

#F0E6D2 at 14%rgba(240, 230, 210, 0.14)

Light 1.3 : 1, Fill onlyDark 1.5 : 1, Fill only Measured on a card.

--border-strong

#0F172A at 22%rgba(15, 23, 42, 0.22)

#E3D5C0 at 26%rgba(227, 213, 192, 0.26)

Light 1.6 : 1, Fill onlyDark 2.0 : 1, Fill onlyEmphasised edges and selected filter chips. Measured on a card.

--border-subtle

#0F172A at 7%rgba(15, 23, 42, 0.07)

#E3D5C0 at 8%rgba(227, 213, 192, 0.08)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill onlyRepeating separators inside a list or table: row dividers, rules between fields. Measured on a card.

--error-border

#E5484D at 28%rgba(229, 72, 77, 0.28)

Light 1.4 : 1, Fill onlyDark 1.4 : 1, Fill onlyThe edge of an error-tinted area or banner. Measured on a card.

--info-border

#2FA8D5 at 25%rgba(47, 168, 213, 0.25)

Light 1.3 : 1, Fill onlyDark 1.5 : 1, Fill onlyThe edge of an info-tinted area or banner. Measured on a card.

--primary-border

#9C3B22 at 25%rgba(156, 59, 34, 0.25)

Light 1.5 : 1, Fill onlyDark 1.2 : 1, Fill onlyThe edge of a terracotta-tinted area. Measured on a card.

--purple-border

#7C6FE0 at 25%rgba(124, 111, 224, 0.25)

Light 1.3 : 1, Fill onlyDark 1.4 : 1, Fill onlyThe edge of a violet-tinted area. Measured on a card.

--success-border

#22B573 at 28%rgba(34, 181, 115, 0.28)

Light 1.3 : 1, Fill onlyDark 1.6 : 1, Fill onlyThe edge of a success-tinted area or banner. Measured on a card.

--warning-border

#E8A23D at 28%rgba(232, 162, 61, 0.28)

Light 1.2 : 1, Fill onlyDark 1.7 : 1, Fill onlyThe edge of a warning banner (the inline notification archetype). Measured on a card.

Terracotta accents and marks (14)

Link text is measured as text, everything else as a fill or mark against a card.

TokenLightDarkContrast and role

--link

#9C3B22rgb(156, 59, 34)

#DE8467rgb(222, 132, 103)

Light 6.9 : 1, AADark 5.6 : 1, AALink text only: Button variant link-accent. Measured as text on a card.

--primary

#9C3B22rgb(156, 59, 34)

Light 6.9 : 1, AADark 2.3 : 1, Fill onlyThe one filled commit button per viewport. Measured on a card.

--primary-active

#7E2F1Brgb(126, 47, 27)

Light 9.1 : 1, AAADark 1.7 : 1, Fill onlyThat button pressed. Measured on a card.

--primary-bright

#D97352rgb(217, 115, 82)

Light 3.2 : 1, Large text and UIDark 4.8 : 1, AAThe bright terracotta. Measured on a card.

--primary-glow

#9C3B22 at 20%rgba(156, 59, 34, 0.2)

Light 1.4 : 1, Fill onlyDark 1.1 : 1, Fill onlyTerracotta focus glow. Measured on a card.

--primary-hover

#B04327rgb(176, 67, 39)

Light 5.7 : 1, AADark 2.7 : 1, Fill onlyThat button on hover. Measured on a card.

--primary-mark

#C96645rgb(201, 102, 69)

Light 3.8 : 1, Large text and UIDark 4.1 : 1, Large text and UIA terracotta LINE or MARK on the surface: the active tab underline (--underline-accent), row hover and selected rules, chart series. Measured on a card.

--primary-soft

#9C3B22 at 16%rgba(156, 59, 34, 0.16)

Light 1.3 : 1, Fill onlyDark 1.1 : 1, Fill onlyLow-alpha tint (16%) of the solid base for soft backgrounds, chips and ghost hovers. Measured on a card.

--jv-terracotta

#9C3B22rgb(156, 59, 34)

Light 6.9 : 1, AADark 2.3 : 1, Fill onlyRaw value #9C3B22, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-terracotta-active

#7E2F1Brgb(126, 47, 27)

Light 9.1 : 1, AAADark 1.7 : 1, Fill onlyRaw value. Bind the semantic token, not this. Measured on a card.

--jv-terracotta-bright

#D97352rgb(217, 115, 82)

Light 3.2 : 1, Large text and UIDark 4.8 : 1, AARaw value. Bind the semantic token, not this. Measured on a card.

--jv-terracotta-hover

#B04327rgb(176, 67, 39)

Light 5.7 : 1, AADark 2.7 : 1, Fill onlyRaw value #B04327, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-terracotta-link

#DE8467rgb(222, 132, 103)

Light 2.8 : 1, Fill onlyDark 5.6 : 1, AALink text on dark surfaces. Measured on a card.

--jv-terracotta-mark

#C96645rgb(201, 102, 69)

Light 3.8 : 1, Large text and UIDark 4.1 : 1, Large text and UITerracotta for lines and marks drawn on the surface (tab underline, row rules, chart series), in both themes. Measured on a card.

Condition states (27)

Bright labels measured as text; base hues and tints as marks against a card.

TokenLightDarkContrast and role

--error

#E5484Drgb(229, 72, 77)

Light 3.9 : 1, Large text and UIDark 4.0 : 1, Large text and UI Measured on a card.

--error-active

#C43B40rgb(196, 59, 64)

Light 5.2 : 1, AADark 3.0 : 1, Large text and UI Measured on a card.

--error-bright

#973033rgb(151, 48, 51)

#F87171rgb(248, 113, 113)

Light 7.5 : 1, AAADark 5.6 : 1, AA Measured as text on a card.

--error-hover

#EC5F63rgb(236, 95, 99)

Light 3.3 : 1, Large text and UIDark 4.7 : 1, AA Measured on a card.

--error-soft

#E5484D at 16%rgba(229, 72, 77, 0.16)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill onlyLow-alpha tint (16%) of the solid base for soft backgrounds, chips and ghost hovers. Measured on a card.

--error-strong

#E5484D at 18%rgba(229, 72, 77, 0.18)

Light 1.3 : 1, Fill onlyDark 1.2 : 1, Fill onlyA slightly stronger error tint than error-soft. Measured on a card.

--info

#2FA8D5rgb(47, 168, 213)

Light 2.7 : 1, Fill onlyDark 5.7 : 1, AA Measured on a card.

--info-bright

#1A5E77rgb(26, 94, 119)

#7CB8FFrgb(124, 184, 255)

Light 7.2 : 1, AAADark 7.5 : 1, AAA Measured as text on a card.

--info-soft

#2FA8D5 at 16%rgba(47, 168, 213, 0.16)

Light 1.2 : 1, Fill onlyDark 1.3 : 1, Fill onlyLow-alpha tint (16%) of the solid base for soft backgrounds, chips and ghost hovers. Measured on a card.

--reported

#EA580Crgb(234, 88, 12)

Light 3.6 : 1, Large text and UIDark 4.4 : 1, Large text and UIReported issues and flagged items. Measured on a card.

--reported-soft

#EA580C at 16%rgba(234, 88, 12, 0.16)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill onlyThe tint behind a reported item. Measured on a card.

--success

#22B573rgb(34, 181, 115)

Light 2.6 : 1, Fill onlyDark 5.9 : 1, AA Measured on a card.

--success-bright

#136540rgb(19, 101, 64)

#3DDB94rgb(61, 219, 148)

Light 7.1 : 1, AAADark 8.7 : 1, AAA Measured as text on a card.

--success-soft

#22B573 at 16%rgba(34, 181, 115, 0.16)

Light 1.2 : 1, Fill onlyDark 1.3 : 1, Fill onlyLow-alpha tint (16%) of the solid base for soft backgrounds, chips and ghost hovers. Measured on a card.

--warning

#E8A23Drgb(232, 162, 61)

Light 2.2 : 1, Fill onlyDark 7.2 : 1, AAA Measured on a card.

--warning-bright

#76531Frgb(118, 83, 31)

#F2BD66rgb(242, 189, 102)

Light 6.9 : 1, AADark 9.1 : 1, AAA Measured as text on a card.

--warning-soft

#E8A23D at 16%rgba(232, 162, 61, 0.16)

Light 1.1 : 1, Fill onlyDark 1.3 : 1, Fill onlyLow-alpha tint (16%) of the solid base for soft backgrounds, chips and ghost hovers. Measured on a card.

--jv-error

#E5484Drgb(229, 72, 77)

Light 3.9 : 1, Large text and UIDark 4.0 : 1, Large text and UIRaw value #E5484D, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-error-active

#C43B40rgb(196, 59, 64)

Light 5.2 : 1, AADark 3.0 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-error-bright

#F87171rgb(248, 113, 113)

Light 2.8 : 1, Fill onlyDark 5.6 : 1, AARaw value. Bind the semantic token, not this. Measured as text on a card.

--jv-error-hover

#EC5F63rgb(236, 95, 99)

Light 3.3 : 1, Large text and UIDark 4.7 : 1, AARaw value. Bind the semantic token, not this. Measured on a card.

--jv-info

#2FA8D5rgb(47, 168, 213)

Light 2.7 : 1, Fill onlyDark 5.7 : 1, AARaw value #2FA8D5, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-info-bright

#7CB8FFrgb(124, 184, 255)

Light 2.1 : 1, Fill onlyDark 7.5 : 1, AAARaw value. Bind the semantic token, not this. Measured as text on a card.

--jv-success

#22B573rgb(34, 181, 115)

Light 2.6 : 1, Fill onlyDark 5.9 : 1, AARaw value #22B573, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-success-bright

#3DDB94rgb(61, 219, 148)

Light 1.8 : 1, Fill onlyDark 8.7 : 1, AAARaw value. Bind the semantic token, not this. Measured as text on a card.

--jv-warning

#E8A23Drgb(232, 162, 61)

Light 2.2 : 1, Fill onlyDark 7.2 : 1, AAARaw value #E8A23D, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-warning-bright

#F2BD66rgb(242, 189, 102)

Light 1.7 : 1, Fill onlyDark 9.1 : 1, AAARaw value. Bind the semantic token, not this. Measured as text on a card.

Gantt and progress bars (6)

Measured as a mark on a card: 3 : 1 is the floor for a bar a reader relies on.

TokenLightDarkContrast and role

--bar-in-progress

#4B96FFrgb(75, 150, 255)

Light 3.0 : 1, Fill onlyDark 5.3 : 1, AAA Gantt bar for work in progress. Measured on a card.

--bar-pending

#344054rgb(52, 64, 84)

Light 10.5 : 1, AAADark 1.5 : 1, Fill onlyA Gantt bar for work not yet started. Measured on a card.

--bar-stalled

#8B5CF6rgb(139, 92, 246)

Light 4.2 : 1, Large text and UIDark 3.7 : 1, Large text and UIA Gantt bar for stalled work. Measured on a card.

--jv-azure-bar

#4B96FFrgb(75, 150, 255)

Light 3.0 : 1, Fill onlyDark 5.3 : 1, AAGantt in-progress bar fill. Measured on a card.

--jv-purple-bar

#8B5CF6rgb(139, 92, 246)

Light 4.2 : 1, Large text and UIDark 3.7 : 1, Large text and UIGantt stalled bar fill, Purchasing's colour. Measured on a card.

--jv-slate-deep

#344054rgb(52, 64, 84)

Light 10.5 : 1, AAADark 1.5 : 1, Fill onlyGantt not-started bar fill. Measured on a card.

Violet and identity (17)

Identity hues for people, lanes and the On Order state; bright labels measured as text.

TokenLightDarkContrast and role

--avatar-blue

#2FA8D5rgb(47, 168, 213)

Light 2.7 : 1, Fill onlyDark 5.7 : 1, AAAvatar identity colour. Measured on a card.

--avatar-orange

#EA580Crgb(234, 88, 12)

Light 3.6 : 1, Large text and UIDark 4.4 : 1, Large text and UIAvatar identity colour. Measured on a card.

--avatar-slate

#6B7A94rgb(107, 122, 148)

Light 4.3 : 1, Large text and UIDark 3.6 : 1, Large text and UIAvatar identity colour. Measured on a card.

--neutral-soft

#667380rgb(102, 115, 128)

Light 4.9 : 1, AADark 3.2 : 1, Large text and UI Measured on a card.

--neutral-soft-16

#667380 at 16%rgba(102, 115, 128, 0.16)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill only Measured on a card.

--presence-out-of-office

#9B5FB0rgb(155, 95, 176)

Light 4.5 : 1, AADark 3.5 : 1, Large text and UI Measured on a card.

--violet

#7C6FE0rgb(124, 111, 224)

Light 4.0 : 1, Large text and UIDark 3.9 : 1, Large text and UIThe violet identity hue (On Order, in transit). Measured on a card.

--violet-bright

#423A94rgb(66, 58, 148)

#AAA1EBrgb(170, 161, 235)

Light 9.3 : 1, AAADark 6.7 : 1, AAViolet text and icons on a violet tint, such as the On Order chip. Measured as text on a card.

--violet-soft

#7C6FE0 at 16%rgba(124, 111, 224, 0.16)

Light 1.2 : 1, Fill onlyDark 1.2 : 1, Fill only Measured on a card.

--jv-indigo

#5B7FE0rgb(91, 127, 224)

Light 3.8 : 1, Large text and UIDark 4.1 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-plum

#9B5FB0rgb(155, 95, 176)

Light 4.5 : 1, AADark 3.5 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-rose

#D45C8Argb(212, 92, 138)

Light 3.7 : 1, Large text and UIDark 4.2 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-slate

#6B7A94rgb(107, 122, 148)

Light 4.3 : 1, Large text and UIDark 3.6 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-slate-soft

#667380rgb(102, 115, 128)

Light 4.9 : 1, AADark 3.2 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-teal

#2FA894rgb(47, 168, 148)

Light 2.9 : 1, Fill onlyDark 5.3 : 1, AARaw value. Bind the semantic token, not this. Measured on a card.

--jv-violet

#7C6FE0rgb(124, 111, 224)

Light 4.0 : 1, Large text and UIDark 3.9 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-violet-bright

#AAA1EBrgb(170, 161, 235)

Light 2.3 : 1, Fill onlyDark 6.7 : 1, AAThe violet ramp's bright half: text and icons on a violet tint, such as the On Order chip in Purchasing. Measured as text on a card.

Categorical rails (8)

Lane and category identity, measured as a mark on a card.

TokenLightDarkContrast and role

--jv-cat-cyan

#2990A2rgb(41, 144, 162)

Light 3.7 : 1, Large text and UIDark 4.2 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-gold

#96691Crgb(150, 105, 28)

Light 4.8 : 1, AADark 3.2 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-green

#1B7456rgb(27, 116, 86)

Light 5.7 : 1, AADark 2.7 : 1, Fill onlyRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-magenta

#A33FB0rgb(163, 63, 176)

Light 5.4 : 1, AADark 2.9 : 1, Fill onlyRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-orange

#EA580Crgb(234, 88, 12)

Light 3.6 : 1, Large text and UIDark 4.4 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-pink

#EC4899rgb(236, 72, 153)

Light 3.5 : 1, Large text and UIDark 4.4 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-rust

#B6703Ergb(182, 112, 62)

Light 3.9 : 1, Large text and UIDark 4.0 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

--jv-cat-teal2

#059669rgb(5, 150, 105)

Light 3.8 : 1, Large text and UIDark 4.1 : 1, Large text and UIRaw value. Bind the semantic token, not this. Measured on a card.

Warm sand suite (6)

The warm neutral, measured against a card.

TokenLightDarkContrast and role

--sand

#6E5F4Crgb(110, 95, 76)

#E3D5C0rgb(227, 213, 192)

Light 6.2 : 1, AADark 10.8 : 1, AAA Measured on a card.

--sand-active

#4A3F32rgb(74, 63, 50)

#C2B092rgb(194, 176, 146)

Light 10.3 : 1, AAADark 7.4 : 1, AAA Measured on a card.

--sand-hover

#5C4F3Frgb(92, 79, 63)

#D3C3A9rgb(211, 195, 169)

Light 7.9 : 1, AAADark 9.0 : 1, AAA Measured on a card.

--jv-sand

#E3D5C0rgb(227, 213, 192)

Light 1.4 : 1, Fill onlyDark 10.8 : 1, AAARaw value #E3D5C0, reference only, bind to Semantic tokens instead. Measured on a card.

--jv-sand-active

#C2B092rgb(194, 176, 146)

Light 2.1 : 1, Fill onlyDark 7.4 : 1, AAARaw value. Bind the semantic token, not this. Measured on a card.

--jv-sand-hover

#D3C3A9rgb(211, 195, 169)

Light 1.7 : 1, Fill onlyDark 9.0 : 1, AAARaw value. Bind the semantic token, not this. Measured on a card.

More in Foundations and concepts

Design principlesFour human commitments for software on a shop floor, and the engineering rule that keeps each one.Token architecture and tiersPrimitive, semantic and component tokens, and how one value cascades to a control.Typography and data formatsSix sizes, the one 10px tier, and when a number takes the data face.Data visualization and charts20 chart archetypes at three sizes, timeline rules, the series colour contract, and accessible charts.Layout patterns and shell slotsThe five shell slots, drawer anatomy, and density that steps inward.Light theme architectureWhy light mode is not an inverted ladder, the chrome hover fix, and the contrast math.