Colour

Core palette

Click to copy the hex value.

Seven, and no eighth

The dark surface of the site — footer, logo plate, consent banner, nav bar — is Schwarz, one of the seven. It used to be an eighth token, an anthracite #1B2022 sampled out of the mockups and declared as --cf-anthrazit because it could not be mixed from the palette. That was the reason to keep it and it was not a good enough one: anthracite and black differ by 1.2:1, which is a difference nobody can see except as a mistake when the two land next to each other — and they did, on the solid button, whose rest state was anthracite and whose hover was black.

So the eighth colour is gone. --surface-inverse resolves to --cf-schwarz, every dark plate in the system is the same black, and the palette is exactly the seven the manual names. Where a dark surface needs a second value — the solid button's hover, a raised panel inside a dark section — it comes from the neutral ramp, which is where every other surface in the system already comes from.

A step away from the page is a ratio, not a grey

--surface-sunken was grey-100, #E7E7E7. That number is only meaningful against --surface-base, CF-Grau — and no page in this system is painted CF-Grau. Every page carries .page-wash, and the wash is background-attachment: fixed at background-size: cover. Fixed and cover together mean it spans the viewport rather than the document, so it does not scroll with the page: what is behind any element is a function of where that element currently sits on screen, and it runs the full CF-Grau-to-white every single time. The panel steps were calibrated against a colour that exists in the top row of pixels and nowhere else.

Measured on patterns/landing-page.html at 1280 × 900, walking the process card's note block down the viewport and sampling the wash beside it out of the same screenshot row:

An absolute grey inside the wash's own range is raised at the top of the screen, gone at two thirds of it, and sunken below that: one block that changes which way it steps as the reader scrolls past. Nothing renders wrong — the material simply is not one. A veil is the same declaration made relative. Six per cent black removes six per cent of whatever light is there, which is a constant 0.858 ratio in linear light at both ends of the wash, so the step is the same step everywhere.

Contrast moves with the surface and the floor is the CF-Grau end: --text-secondary measures 5.19:1 there, 6.48:1 in the middle and 8.03:1 at the white end; --text-primary never drops below 11.91:1. --text-muted still may not sit on it, for exactly the reason it may not sit on CF-Grau itself.

Ramps

Each accent is mixed with white (100–300) and with black (700–900). Step 500 is always the brand colour. UI states — hover, disabled, backgrounds — use these steps only, never opacity on the 500.

Neutral scale

The actual working palette. CF-Grau is step 300 — the anchor, not white.

--grey-400 (#919191) does not come from the manual but from the Figma redesign: it is the colour of every mono label and meta line. That is why it sits deliberately next to --grey-500 in the scale.

Semantic tokens

Components use these only — never a ramp value directly.

Every one of those fours is a layout fact rather than a timing one: objects that share a row, or a pinned stage, enter and leave together and no animation range can separate them. So either three pages are wrong or the sentence is, and the practice the system actually follows — everywhere, without exception — is one light per object. The per-screen reading is a consequence of that wherever objects are sequential, and only there.

Gradients — one ramp, three rakes

There is only one gradient in this brand: lime falling away to CF-Grau, with Glas where the two meet. Lime is the light source, CF-Grau is the surface, and the single thing that varies is where Glas sits — how steeply the light rakes across. Three positions are sanctioned, in the same way four angles and four dash ratios are, and all three are measured off the designer's own files rather than chosen. Anything else is drift.

The three swatches above are .material-rake, the shipping class, not a drawing of it — --mid and --far move the rake and --mirror reads the band from the other end, for a face turning away. It is the light layer with its one free parameter exposed; .material-light is the same ramp at the designer's 132.36° with his inset stops kept verbatim. → Materials

The two halves — sweep and bloom

Four of the six gradients in the Figma dump are radial. The ramp is the same one; what changes is whether the light arrives as a sweep across a face or as a bloom out of a point. Both halves are classes for the same reason — the ramp is written once and the rake, the angle and the shape are parameters.

Where artwork meets the page

Two gradients that carry no colour of their own. Both are the light family doing the two jobs a wash has to do when a full-bleed image is dropped into a page made of CF-Grau: end, and be read over.

The dissolve

The landing-page hero was cut off with a knife. Measured on the rendered page at 1280 × 1400, the last row of artwork is rgb(42,41,55) at the left and rgb(198,237,167) at the middle, and the next row down is the page wash at rgb(233,237,238) — a step of about 190 levels, in three channels at once, across one pixel.

The designer's mockup has no edge at all. The artwork decays continuously into CF-Grau and the page simply carries on. Measured off assets/source/mockups/landing-page.jpg as the mean absolute channel deviation from #CFCFCF over each full row — which is what alpha is, when the thing composites onto CF-Grau — the decay runs from y 598 to y 804 in an 804 px hero: the last 25.6 %. Fitting a = (1 − t)^k across the band gives k = 1.31, 1.43, 1.46, 1.46 at the four quartiles, so the token is that power law at k = 1.45, sampled at the quartiles.

It is a mask, not an overlay, and that is why it can be one token. An overlay has to be painted the colour of whatever is behind it, so it would have to know that the hero sits on the page wash and at what point of the ramp. A mask hands the question back to the page: the artwork stops being there, and whatever the page is at that height is what you see. .cf-hero therefore carries no background of its own — an opaque one would only have swapped the artwork's seam for a second, flatter one, since the wash is fixed-attachment and no colour declared on the hero can match it at that height.

The reading scrim

The hero sets black display type, a black hairline and a 12 px mono line over a loop nobody controls the frames of. Sampled off the rendered page in the text column, the artwork behind the headline reached rgb(48,55,59) and behind the kicker rgb(70,70,81). Both failed their floors, on the page as shipped.

Worst backdrop pixel anywhere inside each element's box, with the type hidden, at 375 / 768 / 1280 / 1920. The still frame the designer composed does not fail: in the mockup the left column is pale grey-blue the whole way down and the colour is all on the right. The loop drifts a dark violet plane under the type instead. The scrim restores the composition rather than correcting it, and how much of it there is was set by what the mockup already looks like, not by the contrast target.

CF-Grau and nothing else — the page's own surface, bleeding up into the artwork exactly where the type sits. White would frost it and black would bruise it; both would read as a plate laid on top, which is the failure mode this has to avoid. It runs at 63.43°, --angle-a, so it rises from the bottom-left corner where the text block is and is gone by the top right, where the artwork is at its best and the glass button needs something complicated behind it to be worth being glass.

Its stops are lengths, not percentages, and that is the one thing here that had to be got right rather than merely chosen. A percentage stop is a percentage of the gradient line, whose length is 0.894·W + 0.447·H — so the same 38 % is 587 px in a 1280 × 896 hero and 402 px in a 768 × 828 one. But the scrim has to cover a text column, and a text column is 44ch wide and four display lines tall whatever the viewport is. Projecting its far corner onto the 63.43° axis puts it at 578 px at 768, 603 px at 1280 and 603 px at 1920 — one number, because the column is one size. With percentage stops the headline read 4.46:1 at 1280 but only 3.58:1 at 768; with 39rem it reads 4.13 – 4.46:1 at every width. The min(39rem, 62 %) is for phones, where the whole gradient line is 623 px and a flat 39rem plateau would sheet the entire picture.

The foil

Carry the same light far enough and it splits. Lime → Weiss → Glas → Sky → Violett is the brand's own spectrum: it is the order of the column on Farben > Dosierung, and it is what the hero artwork does across a single isometric plane — lime at the lit edge, a white hot spot, then cyan, blue and violet in the falloff.

Iridescence comes from hue travel inside a narrow luminance band, not from more saturation. Sky and Violett are therefore taken at their 300 tints, which keeps the four chromatic stops between OKLab L 0.820 and 0.945 — 166° of hue (118° → 284°) across 0.125 of lightness. At their 500 values the band opens to 0.31 and the ramp reads as a fade rather than a foil.

Weiss is the deliberate exception. At L 1.000 it sits above that band, and that is precisely why it reads as a specular hot spot rather than as one more step in the ramp. Counting it, the full span is 0.180. Both numbers matter: the band is what keeps the ramp iridescent, the hot spot is what makes it catch.

Gradient in the letters

.text-foil is the opt-in way to put a gradient inside letterforms. It uses the cool half of the spectrum — no lime — so a screen that has already spent its one lime moment can still carry it. Every sample along it clears 11.9:1 on black, which is past AA at any size; on a light surface it fails, so it is an inverse-surface material only. Its counterpart for light surfaces is .text-foil--ink, below.

One foil moment per screen — the brand's own unit for the lime rule, and the right unit here too, because the constraint is what the eye takes in at once rather than what a URL contains. A page whose light-surface headline and whose footer never share a screen may carry one of each, which is the case on both designed pages. Two on one screen is one too many.

Three places the foil lands, governed differently

The exemption is not a loophole. A headline in foil is a decision about that headline; a black button in foil is the component's own colour, the same way the primary button's colour is the light ramp. A 12 px mono label does not compete with a display headline, and three black buttons on a page are three buttons rather than three emphases — none of which has spent the page's lime, which is the entire reason the foil exists. The precedent is the manual's app icon (Farben > Anwendung): a black plate whose mark carries the ramp while the plate stays black.

What the budget does still forbid is a foil headline and a black button in one eyeful. At that point the headline is no longer the only iridescent thing on screen, which is the condition the rule exists to protect. Neither designed page hits this today — the footer's headline is paired with the primary button, not the solid one. → Buttons

Its stops are not chosen separately. They are the spectrum's own, with lime removed and the remaining band renormalised onto 0–100 %: Weiss (18−18)/82 = 0 %, Glas (32−18)/82 = 17 %, Sky (64−18)/82 = 56 %, Violett (100−18)/82 = 100 %. Keeping the white hot spot is the point — it gives the letterform an edge for the light to land on. Started at Glas instead, the same ramp reads as a flat mint tint rather than as foil.

That arithmetic is written into the token as calc(), not pasted in as finished numbers, so the two gradients cannot drift apart: move --spectrum-cool or --rake-near and the foil follows. This is why the rakes and the spectrum's stops are each declared twice — once as a bare number (--rake-near-n), once as the percentage built from it — because calc() cannot divide a percentage by a percentage, and the renormalisation needs to. Weiss and Violett are 0 % and 100 % by construction, being the ends of the band itself.

The angle is 116.57° (90° + 26.57°, the shallow isometric rake) and not the spectrum's 132.36°. A headline is a wide, short box: at the steeper angle the ramp completes inside the first two or three letters. The shallow rake spreads it across the whole line.

<p class="cf-footer__title text-foil">Jetzt Projekt starten!</p>

The shadow half — .text-foil--ink

Every stop in the foil above sits above OKLab L 0.82, so on the page's own CF-Grau it lands between 1.1:1 and 1.5:1. That left the two designed pages — a CF-Grau-to-white wash almost end to end — with no gradient type at all, and the only foil moment on either of them down in the black footer. --gradient-foil-ink is the same material seen from the other side. Not a second gradient: the other half of the one that already exists.

It is built by the rule the foil is built by. Iridescence is hue travel inside a narrow luminance band, so the band moves and the hue travel does not. The ramps are white-mixes and black-mixes of one palette, so the dark mirror falls straight out of them:

Two decimal places of hue apart across three stops, and a band 0.025 wider. It reads as the same material because it is. The stops are the spectrum's own once again — the lit half drops Weiss and rebases off the hot spot, so the shadow half drops the hot spot too and rebases off the near rake: Glas (32−32)/(100−32) = 0 %, Sky (64−32)/(100−32) = 47 %, Violett 100 %. Same 116.57° rake, same reason.

It has no hot spot, and that is the one place the mirror is not symmetric. The foil's Weiss sits deliberately above its band as a specular. The ink mirror of that would be a stop below L 0.311, and there is no room for its opposite either — the lightest ink that still clears 4.5:1 on CF-Grau is about L 0.44, which is where Glas 800 already sits. So the shadow half is the falloff without the highlight, which is what the shadow side of a foil actually looks like. Completing it with Schwarz at 0 % would put a 0.426 span on a ramp whose whole claim is a 0.115 one, and it would read as a fade to black rather than as foil.

The 800s are not a taste choice. They are the lightest rung of the ramp that clears AA on the page's own grey: Glas 700, the obvious pick for a lighter and prettier ink, is 1.5:1 on CF-Grau. Measured on the shipped page header at 375 / 768 / 1280 / 1920, worst sample against the real backdrop: 5.45 / 5.51 / 5.56 / 5.56:1. Against flat CF-Grau it is 5.24:1 and against white 8.16:1, so the worst case is the top of the page wash — this ink darkens as it travels, so unlike the lit half it gets safer further down the page.

<h1 class="cf-page-header__title text-foil text-foil--ink">Über uns</h1>

The rake swings

Holographic stock is not a picture of a spectrum. It is a surface that hands you a different part of one from every angle, which is why a foil sample book is photographed tilting and a printed one looks dead. Static, the foil is the photograph. The swing is the tilt: the angle the light crosses the letterforms at opens and closes by exactly one brand angle as the type travels up the viewport, scrubbed from scroll position so it tracks the reader's hand and runs backwards when they scroll back.

The contrast floor is unchanged by construction, and that is the reason it is an angle and not a slide. Turning a linear gradient changes where each stop lands, never which stops are present — the whole ramp is inside the box at every frame. So the worst sample of the swinging foil is the worst sample of the static one: 11.9:1 on black, 5.24:1 on CF-Grau. Nothing needs re-measuring per frame, which is a property of the mechanism rather than a lucky result. The two alternatives both would have needed it: a specular band composited over the type raises contrast on the lit half and lowers it on the ink half, and a ramp painted wider than its clip box and slid across leaves the glyphs standing in two thirds of the ramp at any instant, which reads as changing colour rather than as catching light.

90° to 116.57°, and the swing is itself a brand angle. Both endpoints are sanctioned — 90° is the flat rake and 116.57° is 90° + 26.57° — and the distance between them is 26.57°, the isometric angle. The swing cannot drift off the four permitted angles wherever it is stopped, because it is bounded by two of them. It stays shallow throughout on purpose: a headline is a wide short box, and the foil took the shallow rake in the first place because at 132.36° the ramp completes inside the first two or three letters.

116.57° is what you see head-on, which is why the swing turns round at the halfway mark instead of running straight through. You see a material as drawn when you are square to it, so timeline 50 % — the type at the middle of the viewport — is where the rake is the designer's value, and either edge of the screen is an oblique line of sight where it flattens to 90°. That is also the value everything falls back to when the swing cannot run: no @property, no scroll timeline, reduced motion, print, forced colours.

That model has two axes and this is one of them. A view() timeline can say how far the type is above or below the middle of the screen; it cannot say how far to the side of the reader it is, because it measures the element and the model is about the reader. The second axis is a second squareness, multiplied into the same rake so the band cannot be left, and it is measured rather than assumed. → The Line of Sight

.cf-btn--solid does not swing. Its foil is the component's own colour rather than an emphasis, its clip box is the whole button on purpose, and a label whose light shifts while the reader is aiming at it is a different thing from a headline catching it. It reads --gradient-foil from :root, which is static, so it is untouched.

The foil, moving

Everything above is light that has settled. There is one member of the family that has not: the band that crosses a placeholder while the thing it stands for is still on its way. It is the same three chromatic stops as the foil, taken down to 18 % alpha and swept across the object at 26.57° on a 2.4-second loop, and it is documented here rather than only on its component because every decision in it is a colour decision.

Three stops, and they are the cool half on purpose

Weiss, Glas and Sky 300 — the foil's own chromatic run with lime removed. That is not a shortening for convenience, it is the same reason --gradient-foil drops lime: this band loops for as long as the wait lasts, and lime is a moment. A lit stop that returns every 2.4 seconds until the network answers is the one thing the dosage rule cannot survive — it would be the longest-running lime on the site, on the one element that is not even content yet.

The three are mixed with transparent in oklab, and the band itself interpolates in oklab behind an @supports test, the same way every other gradient in the family does. This is also the only member of the family that is transparent rather than opaque: the foil, the wash and the three rakes all paint a surface, and this one passes over one. That is what puts it above the contour it crosses — light is layer 5 and a contour is layer 4 — and it is why the alpha is the parameter that had to be argued.

18 %, and why the ceiling is 52 %

A band that lightens a contour can only take contrast away from it, so the cap is worth being exact about. Worst case is the whitest stop over the blackest contour on the page's own CF-Grau, composited the way CSS actually composites it — in sRGB, not in linear light:

Measured off rendered pixels across eight frames of one period, the worst inked pixel on the shipped ghost is 9.57:1. So contrast did not choose 18 %: anything under 52 % clears the floor. What the arithmetic gives is the ceiling, not the value — 18 % is chosen for restraint, because lime is not the only light in this system that has to stay a moment rather than become a surface. Raise the token past 0.52 and the ghost fails quietly, which is exactly the kind of failure a written-down ceiling exists to prevent.

The movement is part of the colour

A holographic surface hands you a different part of the spectrum from every angle, and the foil's rake swing is that tilt scrubbed from the reader's scroll. This band is the other way a foil moves: the surface holds still and the light travels across it. Three numbers carry it, and each is a decision:

This is the one place in the system where a continuous loop is honest. Everything else that moves here is answering the reader — a hover, a scroll, a page changing. A loop with no input behind it is usually decoration pretending to be feedback. Here something genuinely is still happening, and it stops when it stops being true.

The component, its markup and the rest of the presence ladder are on Arrival. Everything above is the part that belongs to colour.

The page wash

The page is not flat grey. It is a very slow vertical gradient from CF-Grau at the top to white at the bottom — in the original across the full page height of roughly 5,800 px. It lets the content come into the light as you scroll, and it is why individual sections never need a background colour of their own.

It is the foil, reversed, at the amplitude of atmosphere

The wash used to be the one gradient in the system with no hue in it at all — two neutral stops, zero chroma, a member of no family. It is now the foil's own ramp run backwards, because the page descends from shadow into light: CF-Grau at the top, Weiss at the bottom, so Violett → Sky → Glas → Weiss. The stop positions are --foil-stops' own, subtracted from 100 % — that is what “reversed” means arithmetically, and it is why nothing here is picked by hand. Weiss lands at 100 % by construction, so the bottom of the page is the same #FFFFFF it has always been.

The lightness path is unchanged, exactly and by construction. Each chromatic stop is the neutral wash's own OKLab L at that position, so the interpolated lightness of the four-stop ramp is identical to the two-stop one it replaces. Only the hue moves. That is this brand's definition of iridescence taken to its limit — hue travel inside a narrow luminance band, with the band held at zero width relative to the ramp that was already there.

The three hues are --foil-stops' three, to the digit. Hue travel across them is 104.5°, which is the lit foil's own figure; the band they span is 0.120, against the foil's 0.090 and the ink foil's 0.115. By the family's own defining metric this is a family member.

Chroma 0.005 is the whole budget, and the ceiling is set by something already on this surface: no channel may move further from the neutral than the grain does. Worst channel deviation over the whole ramp is 4 of 255, inside the roughly five levels of grain the wash already carries. Black text measures 13.51:1 at the top against 13.48:1 before, and --text-secondary 5.88:1 against 5.87:1 — both marginally better, because a stop nudged off the achromatic axis at fixed L loses no luminance.

Banding — and why hue is the first half of the fix

Over 5,800 px, 8-bit sRGB cannot resolve a ramp between two colours this close and the wash bands into visible steps. Two layers work on that, and they are not substitutes.

The first is the chroma above. A neutral ramp is quantization-bound: #CFCFCF to #FFFFFF is 49 greys and there is no fiftieth, because R, G and B are locked together and cross every 8-bit boundary in the same place. That is also why greyscale ramps are the standard diagnostic for banding — with no hue component, nothing masks the step. Put chroma on the ramp and the three channels cross at different places, so it has more rungs to stand on.

Measured off rendered pixels in Chromium, 4,000 px tall, oklab interpolation, with Skia's own gradient dither left on — what actually paints, rather than what the arithmetic predicts:

Two and a half times the levels, and three quarters of the steps are now one or two channels moving instead of three — a partial contour rather than a full one. The neutral ramp's 51 is not a shortcoming of the renderer. It is the ceiling: 49 greys plus dither noise.

The second is --grain — one tile of static, greyscale fractal noise generated inline in SVG — which rides on top of the ramp inside the same background and hides the edges that are left. It sits under the content, never over it, so it cannot touch the text. Decorrelation weakens each edge; grain hides what remains. Use the .page-wash utility and you get both layers.

Grain is not the wash's alone, and its strength is not one number. Any member of the light family painted across a whole screen has the wash's problem, so all three wallpapers carry the same filter primitive for primitive — the two dark ones since the run that measured them, the light one since it was drawn. What does not carry over is the 8 %. The grain's own mean is a floor lift wherever it lands: on a ramp that ends at white that costs nothing and the strength can be chosen for the grain, and on a near-black ground it is the first thing anybody sees. So the rule is the least grain that clears the banding, which is 8 % on the wash and 4 % on a dark ground. Measured over the video-call frame, the share of it sitting in a flat plateau of eight pixels or more goes 53.1 % → 0.6 % at 4 % and 0.4 % at 8 %, while mean luminance goes 9.49 → 12.84 → 16.31. The second four per cent buys two tenths of a point and doubles the lift.

Nor is the first trick free to apply anywhere. It costs a hue budget, and the wash could afford one only because it had the foil's own 104.5° of travel going spare.

<!-- on <body> or the outermost wrapper -->
<body class="page-wash">

The three hexes are re-derivable, not hand-tuned — recompute the ramp and you get them back — and they carry the same trap the #DBFC60 waypoint does: they are literals, so they do not follow --cf-grau. Move CF-Grau and they must be recomputed, or the wash quietly stops starting where the page starts. At this chroma the 8-bit grid is coarser than the target, so each hex lands 2.5–4.2° off its hue and within 0.001 of the chroma. That is the grid, not the arithmetic.

Lime is never flat

Lime never appears as a flat fill. Wherever it fills an area, it fills it with a gradient — one of the light family above, running out of lime into Glas and away to CF-Grau. A rhombus painted #E1FF00 edge to edge is not the light layer; it is a yellow shape. The ramp is what makes it light.

This follows from the rule the whole palette is built on and had simply never been written down as its own line. Light in this brand is a source and a falloff — that is what the three rakes are, what the bloom is, what the foil is. A flat lime plane has no source and no falloff, so it has nothing to say about where the light is coming from, and it reads as the one thing the manual never draws: a coloured surface.

Which ramp, on a small mark

The objection to the rule is always the same: a 40 px cap or an 8 px marker has no room for a ramp. It has exactly as much room as it needs, because the ramp is sized to the element and not to the page — the process cards' lit faces are 120 units in a 640 box and read as light at 352 px. Pick by what the mark is:

The last row is the one that is easy to get wrong, because it looks like an exception and is not: it is the same ramp, run over a shorter distance, for the same reason the three rakes exist. What changes on black is not the material — it is where the falloff stops being light and starts being a surface.

Aim the axis at a vertex, not across an edge

This is the part that decides whether a small lit face reads as light or as a yellow shape, and it is pure geometry. A linear gradient's stops run perpendicular to its axis — so if the axis is perpendicular to one of the shape's own edges, that entire edge sits on a single stop. Put lime at offset 0 and the whole edge is pure lime: a band, not a highlight.

On the isometric rhombus this is easy to walk into, because the shape's edges are at 26.57° and 63.43° — the two angles a rake is most likely to be drawn on. The plot's cap hit it exactly: an axis at 63.43° put its full upper-left edge on the lime stop, and a 40 px mark with a lime edge is a yellow mark. Running the same ramp down the rhombus's vertical diagonal instead — 90°, still a brand angle — puts lime on the apex alone and lets it fall away with the shape. Same ramp, same rake, a third of the lime.

Three exceptions, and each is a technical one

The fourth thing that looks like an exception is not one: the flat lime cube on Illustration is a labelled don't, drawn wrong on purpose.

Lime is light, not ink

No lime letterforms on a dark surface. Not a headline, not a label, not a nav marker, not a syntax colour. Type on black is white — at whatever strength the hierarchy needs — or it is the foil, which is the palette's own answer to colour inside letterforms and is built from the cool half of the spectrum precisely so that it never spends the screen's lime.

Lime keeps everything it was already doing on black, because none of it is type: the lit contour of one icon, the cap of one plot column, the focus ring, a 2 px edge along a banner. The line is between a source of light in the composition and the colour of the words. Lime is the first and never the second.

Why, given that it passes

Lime on black measures 18.5:1. It clears AA at any size with room to spare, and it is still wrong — which is the useful part of this rule, because it is a case where the contrast check has nothing to say and the type is bad anyway.

#E1FF00 sits at 87.5 % of white's luminance while carrying the highest chroma in the palette. On a pure-black ground that is close to the maximum luminance step and the maximum saturation step at the same time — the exact combination that blooms. Light-on-dark type already fringes for readers with astigmatism, which is a large share of them; adding maximum chroma to a near-white luminance widens the halo instead of narrowing it, and the eye cannot bring all of a saturated edge into focus at once. Dark-theme guidance elsewhere reaches the same conclusion by another route: saturated accents visually vibrate against a dark surface, so they get desaturated for dark UI rather than carried across from the light one.

Desaturating lime is the move this system does not make. Lime is the brand's light — one moment per screen, the thing everything else is measured against — and a dimmed, dark-mode-safe lime would be a second lime that is neither the light nor the brand. So lime stays exactly itself and stops being used for a job it was never good at. The seven colours do not change; the rule about where the letters take their colour from does.

What replaces it

Ink and shape, which is what the system uses everywhere else. The site nav has stated this since it was written — the current page is marked by weight of ink, not by a lime ground — and the documentation sidebar you are reading was, until this change, the loudest counter-example to it. Three steps of one white carry a whole navigation column:

The title and the marker share an alpha and still cannot be confused, because they are different objects: a tracked mono label and a sans link carrying a plate. That is the general shape of the replacement — where lime was doing the work of distinguishing one thing from another, the distinction moves into ink strength, type texture or a plate, all of which survive greyscale, forced colours and a monochrome print.

Dosage

Contrast

Checked combinations. The target is WCAG 2.1 AA — 4.5:1 for text, 3:1 for large text and UI contours.