Color tokens

Every --helia- token that resolves to a color, read out of tokens.css and semantic.css: the name, the value each theme gives it, and the ratio each ink reaches on the two grounds a page draws text on. A palette that moves without this page moving fails validate, so what is here is what the package ships.

The overview says what the layers are for and shows the rest of the scales. A value written as a var() chain or a color-mix() is resolved here to the color it computes to, and an ink that reads a Starlight variable resolves through the fallback tokens.css declares, which restates Starlight’s own value.

Primitives

The shared layer in tokens.css. Every other color resolves to one of these or sits beside them, and the theme flip moves them rather than moving what reads them.

--helia-accent-lowL #e7e8eaD #25272atokens.css

--helia-accentL #1f2226D #f0f1f2tokens.css

--helia-accent-highL #111318D #fffffftokens.css

--helia-surface-canvasL #ffffffD #090b10tokens.css

--helia-surface-raisedL #ffffffD #0d1017tokens.css

--helia-surface-mutedL #f5f5f7D #11151dtokens.css

--helia-hairlineL #dfe3e8D #242936tokens.css

--helia-sl-whiteL hsl(224, 10%, 10%)D hsl(0, 0%, 100%)tokens.css

--helia-sl-gray-2L hsl(224, 10%, 23%)D hsl(224, 6%, 77%)tokens.css

--helia-sl-gray-3L hsl(224, 7%, 36%)D hsl(224, 6%, 56%)tokens.css

--helia-sl-gray-4L hsl(224, 6%, 56%)D hsl(224, 7%, 36%)tokens.css

--helia-sl-text-invertL hsl(224, 10%, 10%)D #25272atokens.css

Surfaces

The grounds a page draws on, from the canvas behind everything to the muted card. A site tints the whole set through --helia-surface-tint, so a product surface stays on the scale.

--helia-surface-paper-baseL #f5f5f7D #0d1017semantic.css

--helia-surface-borderL #d2d2d7D #242936semantic.css

--helia-paper-whiteL #ffffffD #ffffffsemantic.css

--helia-surface-paperL #f5f5f7D #0d1017semantic.css

--helia-surface-cardL #ffffffD #0d1017semantic.css

--helia-surface-card-mutedL #f5f5f7D #11151dsemantic.css

--helia-surface-hoverL #ecededD #20232asemantic.css

Inks

Text color by role rather than by hue. Primary carries titles and values, secondary carries description, muted carries metadata.

--helia-ink-primaryL hsl(224, 10%, 10%)D hsl(0, 0%, 100%)semantic.css

--helia-ink-secondaryL hsl(224, 10%, 23%)D hsl(224, 6%, 77%)semantic.css

--helia-ink-mutedL hsl(224, 7%, 36%)D hsl(224, 6%, 56%)semantic.css

--helia-ink-blackL #111318D #111318semantic.css

--helia-ink-cautionL #a85c1fD #cd7b33semantic.css

--helia-ink-adaptiveL #111318D #ffffffsemantic.css

Status inks

The advisory meanings chosen as text. Anything that sets a status color on a word takes one of these; the fills below are for an icon, a rim, or an edge.

--helia-tone-success-inkL #0b7048D #2fb878semantic.css

--helia-tone-warning-inkL #8f5300D #e9a445semantic.css

--helia-tone-critical-inkL #c0273aD #ff7b86semantic.css

--helia-tone-important-inkL #1f62c4D #6ea8ffsemantic.css

Accents

The whole color vocabulary a part is handed. A part never learns a subject name: a composition maps its own subjects onto an accent and passes it as --accent.

--helia-product-accentL #667085D #667085semantic.css

--helia-accent-secondaryL #667085D #667085semantic.css

--helia-product-helia-aotL #2b75bfD #2b75bfsemantic.css

--helia-product-helia-coreL #a8762bD #a8762bsemantic.css

--helia-product-helia-dspL #a133bcD #a133bcsemantic.css

--helia-product-helia-edgeL #a3162aD #a3162asemantic.css

--helia-product-helia-mlL #4c12a1D #4c12a1semantic.css

--helia-product-helia-profilerL #16914aD #16914asemantic.css

--helia-product-helia-rtL #53bbb5D #53bbb5semantic.css

--helia-product-kit-compressionL #4caf50D #4caf50semantic.css

--helia-product-kit-physioL #046aafD #046aafsemantic.css

--helia-product-kit-sleepL #f737c9D #f737c9semantic.css

--helia-product-accent-sourceL #667085D #667085semantic.css

--helia-brand-ambiq-blueL #0047baD #0047basemantic.css

--helia-accent-blueL #1769e0D #1769e0semantic.css

--helia-accent-cyanL #00a7b5D #00a7b5semantic.css

--helia-accent-greenL #00a36cD #00a36csemantic.css

--helia-accent-orangeL #e17827D #e17827semantic.css

--helia-accent-pinkL #d34c80D #d34c80semantic.css

--helia-accent-purpleL #6e5ae6D #6e5ae6semantic.css

--helia-accent-redL #d9414eD #d9414esemantic.css

--helia-accent-slateL #667085D #667085semantic.css

--helia-accent-cyan-inkL #008f9dD #008f9dsemantic.css

--helia-accent-green-inkL #008d5dD #008d5dsemantic.css

--helia-accent-orange-inkL #c6611cD #c6611csemantic.css

Advisory tones

One fill per callout and badge variant, plus the theme-aware set a chip rim reads. These are strokes and fills, not text.

--helia-tone-tipL #008d68D #008d68semantic.css

--helia-tone-successL #2f8f3eD #2f8f3esemantic.css

--helia-tone-importantL #3970c3D #3970c3semantic.css

--helia-tone-warningL #c66a22D #c66a22semantic.css

--helia-tone-criticalL #b92f3bD #b92f3bsemantic.css

--helia-tone-compatibilityL #16889aD #16889asemantic.css

--helia-tone-experimentalL #7460c8D #7460c8semantic.css

--helia-tone-deprecatedL #ad612bD #ad612bsemantic.css

--helia-tone-neutralL #111318D hsl(0, 0%, 100%)semantic.css

--helia-tone-blueL #1769e0D #4d9bffsemantic.css

--helia-tone-cyanL #008c96D #28b8c2semantic.css

--helia-tone-greenL #087a51D #2fb878semantic.css

--helia-tone-orangeL #ba5c16D #e88b43semantic.css

--helia-tone-purpleL #6651d9D #8b7affsemantic.css

Chart palette

Six series colors, plus the gridline and the tick ink. None of them is an advisory tone: a series color carries no meaning, and aliasing the tones put a chart in the callout vocabulary. The order is the order a chart uses them, so the first two are the pair that has to separate at a glance — a blue against the page ink — and the rest is a slate ramp at decreasing weight; a chart that needs a seventh hue is a chart that needs splitting.

--helia-chart-1L #4f8ff7D #7fb0ffsemantic.css

--helia-chart-2L hsl(224, 10%, 10%)D hsl(0, 0%, 100%)semantic.css

--helia-chart-3L #4e586cD #9ba5basemantic.css

--helia-chart-4L #656f84D #828ca2semantic.css

--helia-chart-5L #768096D #6a758asemantic.css

--helia-chart-6L #8892a8D #596378semantic.css

--helia-chart-gridL #dfe3e8D #242936semantic.css

--helia-chart-inkL hsl(224, 7%, 36%)D hsl(224, 6%, 56%)semantic.css

Shadow inks

The three shadow colors the elevation steps are built from. Each one is a black at a low alpha, so a shadow darkens whatever it falls on rather than tinting it.

--helia-shadow-color-softL rgb(0 0 0 / 12%)D rgb(0 0 0 / 12%)semantic.css

--helia-shadow-colorL rgb(0 0 0 / 16%)D rgb(0 0 0 / 16%)semantic.css

--helia-shadow-color-strongL rgb(0 0 0 / 18%)D rgb(0 0 0 / 18%)semantic.css

Generative art

Surfaces, strokes, and planes for the abstract media treatments. They are a palette for artwork rather than for interface, which is why they sit apart from the accents.

--helia-field-baseL #e5e9ecD #171a20semantic.css

--helia-field-mix-coolL #545ee8D #545ee8semantic.css

--helia-field-mix-lightL #f7fbffD #f7fbffsemantic.css

--helia-media-graphiteL #e8eaedD #17191dsemantic.css

--helia-media-slateL #eff1f3D #10141asemantic.css

--helia-media-wireL #f5f5f3D #111216semantic.css

--helia-media-inkL #24272cD #f0f2f4semantic.css

--helia-media-strokeL #15171aD #f4f5f6semantic.css

--helia-media-planeL #cbd0d6D #252b33semantic.css

--helia-media-plane-borderL #b5bcc5D #353d48semantic.css

--helia-media-plane-altL #747c87D #697381semantic.css

--helia-media-plane-highL #e1e4e7D #171c22semantic.css

--helia-media-wire-lineL #858b93D #6c737esemantic.css

Ink on surface

Each ink drawn on the canvas and on the card, in both themes, with the contrast ratio computed from the two resolved values. AA marks a pair at or above 4.5:1, which is the WCAG AA threshold for body text.

Ink	canvas · light	canvas · dark	card · light	card · dark
--helia-ink-primary	Aa17.70AA	Aa19.68AA	Aa17.70AA	Aa19.03AA
--helia-ink-secondary	Aa11.74AA	Aa11.13AA	Aa11.74AA	Aa10.76AA
--helia-ink-muted	Aa7.02AA	Aa5.83AA	Aa7.02AA	Aa5.63AA
--helia-ink-caution	Aa4.98AA	Aa6.07AA	Aa4.98AA	Aa5.87AA
--helia-tone-success-ink	Aa6.13AA	Aa7.73AA	Aa6.13AA	Aa7.47AA
--helia-tone-warning-ink	Aa6.17AA	Aa9.24AA	Aa6.17AA	Aa8.94AA
--helia-tone-critical-ink	Aa5.85AA	Aa7.90AA	Aa5.85AA	Aa7.64AA
--helia-tone-important-ink	Aa5.83AA	Aa8.16AA	Aa5.83AA	Aa7.89AA