Colour
A faintly teal-tinted neutral world with warm ink for words. Orbit teal is a line of light: it draws rings, focus, live marks, selection and the one primary pill, and never fills a panel.
Orbit teal
The logo colour, #336A65, is the accent in light. In dark it becomes Orbit Mint: the same teal, lit. Each theme uses it three ways: as a fill for small marks, as a line for rings and arcs, and as light for the comet.
Orbit Teal
- Fill
--o-accent- Line
--o-accent-line- Light
--o-comet
Orbit Mint
- Fill
--o-accent- Line
--o-accent-line- Light
--o-comet
Primitive ramps
The raw ramps. Components never read these directly; they read the semantic tokens below, which the themes remap. Every grey carries a trace of the teal. Select a colour to copy its variable.
Teal
Mint and brand
Status
Grey
Semantic tokens
What components read. Light and dark remap every one of them, so a component never asks which theme it is in. Values below are read from the live stylesheet.
Backgrounds
Two planes and the tones inside them: the porcelain ground, one raised canvas, and wells and fills for depth.
--o-bg-groundThe ground the sidebar and header sit on.--o-bg-canvasThe page canvas, and everything raised in light.--o-bg-raisedMenus, popovers, dialogs and raised cards. Graphite in dark.--o-bg-sunkenWells: the secondary pill's hover, read-only fields, sunken cards.--o-bg-mutedSoft pills, the segmented track, neutral badges, skeletons.--o-bg-inverseTooltips and inverse pills.--o-bg-hoverThe one hover: nav rows, menu rows, ghost buttons, list rows.--o-bg-pressPressed rows: a command result, the search clear button.--o-bg-selectedThe active nav pill.--o-bg-overlayDims the page behind a dialog, the palette and the phone drawer.Text
Words stay achromatic. Four steps of ink, and two for text on a fill.
--o-fg-1Every word and figure.--o-fg-2Secondary text, descriptions, nav labels at rest.--o-fg-3Meta lines, hints, placeholders, timestamps, section titles.--o-fg-4Marks only, never text: dial ticks, separators, idle dots.--o-fg-inverseText on inverse surfaces: tooltips, inverse pills.--o-fg-on-accentText on the accent: the primary pill's label.Borders
Hairlines in three strengths. A surface carries a hairline or a shadow, never both.
--o-border-1Row dividers and outlined cards.--o-border-2Field edges, the nested nav orbit, the tape rail.--o-border-3Hover edges, the future arc of the day, scrollbar thumbs.Accent
Orbit teal in light, Orbit Mint in dark. Lines, rings, focus, live marks, selection and the one primary pill.
--o-accentThe primary pill, a switch that is on, live dots, the chart line.--o-accent-hoverThe primary pill's hover.--o-accent-pressReserved for a pressed accent fill. No component reads it yet.--o-accent-fgTeal as text: accent badges, nav counts, links.--o-accent-subtleThe palest wash, for small marks only.--o-accent-subtle-2Nav counts and accent badges.--o-accent-lineLines and rings: the empty-state orbit, a tab's underline, a badge's ring.--o-accent-glowThe only coloured shadow: under a hovered primary pill.--o-cometThe head of the comet that circles the primary pill.Status
For status only: paid, falling, strained, for your information. Each hue has a wash to sit on.
--o-positiveRising figures and good states: paid, fulfilled.--o-positive-subtleThe wash under a positive badge or delta.--o-negativeFalling figures, refunds, field errors, destructive actions.--o-negative-subtleThe wash under a negative badge or delta.--o-warningStrained states: an order waiting over a day, stock at zero.--o-warning-subtleThe wash under a warning badge.--o-infoInformational badges.--o-info-subtleThe wash under an info badge.Focus and selection
Keyboard focus is a 2px teal outline, 2px off the shape. Selected text takes a teal tint.
--o-focusThe focus ring on every interactive part.--o-selectionSelected text inside .o-root.Charts
One teal line over a wash that fades, the previous period in Mist, and gridlines you barely see.
--o-chart-1The series line.--o-chart-1-fillThe wash under the line.--o-chart-2The comparison line: the previous period.--o-chart-gridGridlines.Contrast
Measured live from the tokens on this page, against WCAG 2.2: 4.5:1 for text, 3:1 for large text. Every text token clears 4.5:1 on the canvas and on the ground, in both themes. Mist is only for marks that are not text, such as ticks and separators, so it is never used for words.
--o-fg-1Words and figures--o-fg-2Secondary text--o-fg-3Meta, hints, placeholders--o-fg-4Marks only, never text--o-accent-fgTeal text--o-positiveRising figures--o-negativeErrors, fallsText on fills
The pairs that put words on a coloured fill.
--o-fg-on-accent on --o-accentPrimary pill--o-fg-inverse on --o-bg-inverseTooltip, inverse pill--o-fg-1 on --o-bg-mutedSoft pill, neutral badge--o-accent-fg on --o-accent-subtle-2Nav count, accent badge--o-fg-2 on --o-bg-sunkenText in a well--o-fg-3 on --o-bg-sunkenHint in a well--o-fg-1 on --o-bg-raisedMenus and dialogsWhere teal may appear
The Line-of-Light Rule: Orbit teal is drawn, never poured. Anything it fills is small: a dot, a count, a switch track, a pale wash under a badge. These are all the places it goes.
- The Line-of-Light Rule. Teal appears in lines, rings, focus, live marks, selection and the one primary pill. No teal panels, headings or running text.
- The Ink Words Rule. Words and figures stay ink and its slate steps. A strained job turns its tile amber while its words stay ink.
- The Teal-in-the-Grey Rule. Every grey between white and ink carries a trace of teal (hue 172 to 190, chroma 0.012 or less). Canvas White stays pure and Brand Ink stays warm.
- Status hues are for status only: paid, falling, strained, for your information. Never a category or a decoration.
- Read semantic tokens, never primitives or hex. Tints come from color-mix, never a new colour.
Dark theme
Night is its own palette, not an inversion. The same components on both, with nothing branching on the theme.
| Role | Light | Dark |
|---|---|---|
| Accent | Orbit Teal, white label | Orbit Mint, Night On-Mint label |
| Lines and rings | Orbit Line (teal-500) | Night Line (teal-400) |
| The comet | Comet Light | Pure white |
| Words | Brand Ink, then Slate Ink and Quiet Slate | Night Ink, with slate steps at 76, 64 and 48% lightness |
| Ground and canvas | Porcelain under Canvas White | Night Ground under Night Canvas, Graphite raised |
| Status | Hues near 52 to 62% lightness on pale washes | Hues lifted to 72 to 80% on 14% washes |
| Shadows | Teal-tinted near-black | Black, with a faint white ring so they read on a dark ground |
In code
Read the semantic tokens, and make tints with color-mix so they follow the theme.
.order-note {
background: var(--o-bg-sunken);
color: var(--o-fg-2);
box-shadow: inset 0 0 0 1px var(--o-border-1);
}
/* A tint of a token, never a new hex. It follows light and dark for free. */
.order-note[data-strained] {
background: color-mix(in oklch, var(--o-warning) 12%, transparent);
}
/* Teal as a line of light: a rule under the heading, not a teal heading. */
.order-note__title {
color: var(--o-fg-1);
border-bottom: 1.5px solid var(--o-accent-line);
}