Colors
Neutral first. Colour only marks meaning — a tool type, a state — or the single call to action. Every token has a light and a dark value and switches with the theme.
Rules
- One green per view. Solid
accentis reserved for the action the view exists for. Rows, cards and dialogs never add a second one. - Location is white, not green. The selected sidebar item, tab or segment is the
selectedsurface withshadow-card(dark adds a 1pxselected-edgering). - A choice you made is an outline with a check (the chip Toggle, in a ToggleGroup). Form checks — Checkbox, RadioGroup, Slider — use
link. - Canvases are the exception: a selected workflow step is blue (
selection). faintis below 4.5:1 in both themes. Use it only for 12px secondary text that never carries meaning on its own.- Colours that must be told apart differ in lightness, not hue alone.
Surfaces
app-bgbg-app-bgWindow background behind the panels (the 4px gutter around sidebar, chat and editor).
panelbg-panelPanels: chat, editor browser, project sidebar. Dark is a blue-green tinted near-black, never a neutral grey.
panel-homebg-panel-homeThe home page's main panel (Build, Agents, Skills) and the Login page; a touch darker than `panel` in light. The BoxField's ground.
panel-edgebg-panel-edge1px border on panels, cards, menus and tabs.
surfacebg-surfaceCards, inputs, dropdown sheets, buttons, the composer.
selectedbg-selectedFill of the selected sidebar row or nav item (with `shadow-card`; dark adds a 1px inset ring of `selected-edge`). Selected is this surface, never green.
selected-edgebg-selected-edgeInset 1px ring on a selected row in dark.
hoverbg-hoverHover fill for rows, menu items, icon buttons.
secondarybg-secondaryTrack of the view switcher, the idle send button, focus halo of inputs.
chipbg-chipNeutral chip fill: connector mention chips, 'Used by' chips.
calloutbg-calloutCallout block in the instructions editor.
code-surfacebg-code-surfaceInline code and code blocks: `bg-code-surface` (not `code`, which would clash with the `text-code` style).
bubblebg-bubbleThe person's chat bubble. Darker than `panel-home` (#f3f3f3) so it shows on the page glow, as in the platform design.
linebg-lineDividers inside cards and lists, input and button borders.
dimbg-dimFocus overlay behind the runs hover card; fades in over 600ms ease-in.
tooltipbg-tooltipTooltip and toast fill (inverted ink); text on it is `panel`.
island-glowbg-island-glowThe soft light in the top-left corner of a page panel (`panel-home`): Build, lists, settings, the chat page. Drawn as `bg-page-glow`.
Text
surface in each theme.inkbg-inkPrimary text and icons on `panel`, `surface`, `selected`. 15:1+ in both themes.
ink-strongbg-ink-strongText of the ONE selected item in a list (sidebar session, nav). Dark: pure white is reserved for this.
ink-navbg-ink-navUnselected sidebar items and recent conversations. Dark: 80% white, so the selected item stands out.
ink-2bg-ink-2Agent replies in chat, menu icons, values that sit next to `ink` labels.
mutedbg-mutedDescriptions, meta lines, unselected tab icons, section headers. 5.3:1 on `surface` light, 7:1 dark.
faintbg-faintTimestamps, uppercase labels, placeholders, chevrons. Below 4.5:1 in both themes (2.8:1 light, 3.3:1 dark): source value kept, use only for 12px secondary text that is never the only carrier of meaning.
Action
accent is the one call to action per view; text actions and checks use link.accentbg-accentTHE call-to-action green: Create agent, Publish, Save changes, Connect. One per view. Same value in both themes.
accent-edgebg-accent-edge1px border of a green primary button (accent mixed 70/30 with white).
accent-inkbg-accent-inkText and icons on `accent` fills: Primary buttons, the CTA, Send, count badges. 5.4:1.
linkbg-linkText actions and checks: 'Clear all', 'Reset all', the check in a selected menu row, the Live tag. Not a fill.
Status
danger for destructive actions and failures, warn for needs-connecting and unsaved changes.okbg-okStatus only: healthy and live states, added lines (+) in diffs. Charts use chart-1.
successbg-successDone and positive states: progress fills, completed checks, success text ("This subdomain is available"), the success Alert. Not for actions: the call to action is `accent`.
success-softbg-success-softFill of the success Alert, the Live and New tags, positive status tags (Connected, On track) and the published check.
warnbg-warnNot-connected tools, the unsaved-changes dot, the connect notice text, an environment that is “Not set up yet”. 6.6:1 on `warn-soft` light, 6.1:1 dark.
warn-softbg-warn-softFill of the connect notice and of a not-connected object chip.
dangerbg-dangerDelete in menus, removed lines (−) in diffs, failed trace steps, the danger zone.
danger-softbg-danger-softFill of danger buttons in Settings.
Objects
object-greenbg-object-greenApplication chips (inline and in Details), managed-service tiles and Trigger steps on the workflow canvas.
object-green-softbg-object-green-softFill of application chips, managed-service tiles and Trigger step tags.
object-purplebg-object-purpleSkill chips (inline and in Details) and Agent steps on the workflow canvas.
object-purple-softbg-object-purple-softFill of skill chips and Agent step tags.
object-bluebg-object-blueVariable chips ({} RECIPIENT_EMAIL, set in mono) and App call steps on the workflow canvas.
object-blue-softbg-object-blue-softFill of variable chips and App call step tags.
selectionbg-selectionThe selected step on the workflow canvas (border and soft glow), and the Composer's element picker: its on icon and the outline on hovered elements.
selection-softbg-selection-softFill of elements picked with the Composer's element picker.
avatarbg-avatarOwner avatar disc.
avatar-inkbg-avatar-inkInitials on your own `avatar` disc (white in light; near-black in dark, where the disc is light).
Charts
chart-1bg-chart-1First series in charts (Model, Schedule, Running apps…). Same value as ok today, but independent of status.
chart-2bg-chart-2Second series in charts.
chart-3bg-chart-3Third series in charts.
Using colours in code
// Tailwind (with @major/ui/tailwind.css)
<div className="bg-surface text-ink border border-line" />
<p className="text-muted">Edited 2 days ago</p>
/* Plain CSS — the same file defines the variables */
.card { background: var(--color-surface); color: var(--color-ink); }
// JavaScript (charts, canvas)
import { tokens } from "@major/ui/lib/major-tokens";
tokens.color["chart-1"].light; // "#2e9a7c"