@cloudgrid-io/ui 0.27.1 → 0.28.0

package/dist/tokens.css

@@ -443,10 +443,230 @@
      value held on white, so the ground moved and the dot kept its contrast. The
      muted text rung comes with it, 3.27:1 -> 3.69:1 on white. */
   --cg-neutral-500: #858585;
+  /*
+     SOURCE: derived, 2026-09-18 (#232). The missing rung between neutral-500 and
+     neutral-700, and the only reason it exists is that --cg-text-muted has no value
+     on this ramp that clears the 4.5:1 body-text floor.
+
+     neutral-500 measures 3.69:1 on the card, 3.28:1 on the page ground and 3.29:1 on
+     the lavender wash. All three clear 3:1 for large text and none clears 4.5:1, so
+     every caption, every eyebrow and every tile hint in this library is under AA for
+     body copy. neutral-700 clears it everywhere (7.00:1 on the card) but it IS
+     --cg-text-secondary, so aliasing a "strong muted" onto it would not add a rung,
+     it would rename one.
+
+     Derived, with the sweep, so the next person does not repeat it:
+
+       #6e6e6e on the page ground : 4.53:1   clears by 0.03 — a margin a later
+                                             ground retune would erase in silence
+       #6c6c6c                    : 4.66:1
+       #6a6a6a                    : 4.80:1   <-- this
+       #686868                    : 4.95:1
+
+       #6a6a6a on the card    #ffffff : 5.41:1
+                on the page    #f1f1f6 : 4.80:1
+                on raised      #f4f6f8 : 4.99:1
+                on subtle      #f2f1f7 : 4.82:1
+
+     The extra step past the first passing value is --cg-accent's practice, and for
+     its reason: 4.53:1 is a number that a page-ground retune turns into a failure
+     with nothing going red.
+
+     KNOWN, and not fixed here: on the violet-200 wash the frames draw (#d9d4fb) this
+     measures 3.80:1, still under the body floor. Nothing on a neutral ramp clears
+     4.5:1 on that ground and stays muted; see --cg-violet-200's own note. */
+  --cg-neutral-600: #6a6a6a;
   /* SOURCE: legal / secondary text */
   --cg-neutral-700: #595959;
   /* SOURCE: ink */
   --cg-neutral-900: #222222;
+  /*
+     SOURCE: Figma variable color/neutral/300, read first-hand on the thegrid frame
+     (8364:4396, "On the grid & to the world" on the ink band).
+
+     THE NAME IS NOT AN ACCIDENT. Figma calls this family color/neutral/300 / 500 /
+     600. This package's neutral ramp is already occupied at every one of those
+     numbers by a PURE grey (#acacac, #858585, #595959) that two published consumers
+     ship today, and these three are blue-greys: #828c98 is B152 against R130, which
+     is not a grey at all. Taking the Figma numbers would mean either changing three
+     shipped values (breaking) or having one ramp hold two hue families under one
+     name (silent). So the cool family takes its own root and the greys keep theirs.
+
+     1.45:1 on the card and 1.29:1 on the page ground: this is a value for text on a
+     dark ground, never on a light one. */
+  --cg-slate-300: #d2d7de;
+  /*
+     SOURCE: Figma variable color/neutral/500, also carried under the legacy name
+     "N3 new". Read first-hand on four of the six canonical frames — thegrid
+     (8364:3966, footer links), teams (7172:7607), pricing (7779:9284), builders
+     (6916:8104, the terminal's "$"). It is the design's quiet-text tone and the most
+     frequently missing value in this package (ui#239).
+
+     WHAT IT MEASURES, because the frames spend it on words:
+
+       on the card          #ffffff : 3.41:1
+       on the page ground   #f1f1f6 : 3.03:1
+       on raised            #f4f6f8 : 3.15:1
+       on the violet wash   #d9d4fb : 2.40:1   <-- under even the 3:1 indicator bar
+       on ink               #222222 : 4.66:1
+       on the purple panel  #5a47f0 : 1.71:1   invisible
+
+     So it clears 3:1 for large text on the three light grounds, clears 4.5:1 on ink
+     alone, and fails everywhere the frames actually use it for 15px footer links.
+     It is shipped because the frames use it and this package is meant to be able to
+     draw them; it is deliberately NOT wired to a --cg-text-* semantic, because those
+     carry a contrast contract and this value cannot meet it. --cg-slate-600 is the
+     companion that can. See ui#232 for the same shape of problem on --cg-text-muted.
+
+     DECLARED AT :root ONLY. A brand ramp rung is not a semantic and does not flip. */
+  --cg-slate-500: #828c98;
+  /*
+     SOURCE: Figma variable color/neutral/600, read first-hand on thegrid
+     (8364:4327, the stats rows; 8364:4255, "your CREATIONS").
+
+     This is the accessible companion to --cg-slate-500 and the design supplied it
+     itself, which is why nothing had to be invented:
+
+       on the card          #ffffff : 5.65:1
+       on the page ground   #f1f1f6 : 5.02:1
+       on raised            #f4f6f8 : 5.21:1
+       on subtle            #f2f1f7 : 5.03:1
+       on the cyan tint     #dffbfc : 5.20:1
+       on the violet wash   #d9d4fb : 3.97:1   large text only
+       on the lime          #b6de68 : 3.67:1   large text only
+       on ink               #222222 : 2.82:1   do not
+       on the purple panel  #5a47f0 : 1.03:1   invisible
+
+     So: safe for body copy on any of the light page and card grounds, and on the
+     cyan tint. NOT safe on the violet wash, on the lime, or on either dark surface.
+     Where the frames put slate-500 on a light ground and mean it as running text,
+     this is the value that keeps the design and passes. */
+  --cg-slate-600: #5f6874;
+  /*
+     SOURCE: Figma variable "stone", declared on the home frame (8204:2397). ui#239
+     asks for it by name.
+
+     HONEST PROVENANCE, because this is the one value here that is weaker than the
+     rest: it is a DECLARATION. The home frame declares it as a variable, and the
+     Figma quota ran out before the audit could read the ~90 nodes of that frame that
+     might paint with it. No node on any of the other five frames uses it. So its
+     role is recorded as unknown rather than guessed, and nothing in this package
+     consumes it yet.
+
+     It is a warm near-black, not a grey: R52 G51 B48 against --cg-ink's flat #222222.
+     12.63:1 on the card and 11.22:1 on the page ground, so wherever it lands it is a
+     text-or-ink value and not a surface tint.
+
+     The rung number is by lightness against this package's own ramp, which ends at
+     neutral-900 #222222. Figma gives it no number. */
+  --cg-stone-800: #343330;
+
+  /* ---- hue-ramps ----
+     The three brand hues as RAMPS, not as single values (#239, 2026-09-18).
+
+     Until now this package carried one violet, one lime and one cyan, plus a single
+     --cg-primary-tint. The six canonical Figma frames carry a full scale of each,
+     declared as Figma variables under color/violet/*, color/lime/* and color/cyan/*,
+     and they spend those rungs on real surfaces: chips, role badges, avatar strokes,
+     step diagrams, the enterprise button. With no rung to reach for, a consumer
+     either hardcodes the hex, which CLAUDE.md forbids, or approximates with
+     color-mix(). cloudgrid-landing is doing the second right now — #133 renders
+     `color-mix(in srgb, var(--cg-primary) 22%, var(--cg-neutral-0))` to get within
+     2/255 of --cg-violet-200 — and that is the drift this group removes.
+
+     RUNG NUMBERS ARE FIGMA'S, not this package's, wherever Figma names them. Two
+     rungs (violet-150, violet-400, cyan-400) are values observed applied on a node
+     with NO Figma variable behind them; each says so in its own note and is placed
+     by lightness between the bound rungs either side. Nothing here was invented.
+
+     WHY THE UTILITY NAMES DIVERGE FROM THE TOKEN NAMES. The violet ramp maps onto
+     --color-brand-100..900, because "brand" is this package's own name for the hue
+     (theme.css, rule 4) and Tailwind ships no `brand` scale to collide with. The
+     cyan and lime rungs map onto SUFFIXED names (cyan-tint, lime-edge) rather than
+     cyan-200 / lime-700, because Tailwind DOES ship those exact numbered names and
+     claiming them would silently repaint every `bg-cyan-200` in a consumer's own
+     markup. That is rule 4's failure aimed at Tailwind instead of shadcn, and it is
+     worse, because the consumer never opted in.
+
+     DECLARED AT :root ONLY, like every brand source. A ramp rung is not a semantic
+     and does not flip; the semantics that spend it do. */
+  /*
+     SOURCE: Figma color/violet/100. Applied on thegrid at 8364:4136 (the private-status chip), 8364:4158 (the Owner role badge) and the Add-people button. 1.20:1 on the card, so a ground and never a foreground. */
+  --cg-violet-100: #ebe8fd;
+  /*
+     SOURCE: observed applied, UNBOUND. teams 7172:7759 (the first flow circle) and builders 6919:8782 (the first step circle, "Detect"). No Figma variable carries it.
+
+     It is the value ui#239 asks for and the one cloudgrid-landing currently reaches with a color-mix of --cg-primary. Placed at 150 because it sits between the two bound rungs either side: violet-100 #ebe8fd and violet-200 #d9d4fb. A half-rung is not new here; the neutral ramp already carries neutral-25 between 0 and 50.
+
+     Measured as a ground: --cg-text-primary is 12.38:1 on it, --cg-slate-600 4.25:1, --cg-slate-500 2.56:1. */
+  --cg-violet-150: #e3e0fd;
+  /*
+     SOURCE: Figma color/violet/200, declared on the home and thegrid frames.
+
+     READ ui#239'S CORRECTION BEFORE USING --cg-offline FOR THIS. That issue's first table maps #D9D4FB onto --cg-offline, and the mapping only holds inside [data-cg-surface='panel']. At :root --cg-offline is var(--cg-neutral-500), a mid grey, so a consumer taking that token at face value on the page ground gets #858585 and nothing goes red. This rung is the value; --cg-offline is a status tone that happens to reach it on one surface.
+
+     The pairing the frames draw on it is a documented AA failure and the reason --cg-slate-600 exists: --cg-slate-500 on this ground measures 2.40:1, under even the 3:1 indicator bar. --cg-text-primary is 11.18:1, --cg-slate-600 3.97:1 (large text only), --cg-neutral-600 3.80:1. */
+  --cg-violet-200: #d9d4fb;
+  /*
+     SOURCE: Figma color/violet/300, declared on thegrid. Rendered there only inside flattened SVG illustration, so it is a declared rung with no CSS-reachable node behind it yet. Carried so the ramp a designer edits in Figma is the ramp this package ships. */
+  --cg-violet-300: #c8c2fa;
+  /*
+     SOURCE: observed applied, UNBOUND. builders 6919:8785, the second step circle.
+
+     Placed at 400 because it is the only observed violet with no bound rung within reach: it sits between color/violet/300 #c8c2fa and color/violet/500 #a69bf7.
+
+     Worth knowing before retuning: the four builders step circles are #E3E0FD / #BCB4F9 / #A49AF7 / #8072F3, which are --cg-primary composited on white at 17 / 40 / 55 / 77 percent. The last two land within 2 and 4 of bound rungs 500 and 700 and are taken as those; this one does not. */
+  --cg-violet-400: #bcb4f9;
+  /*
+     SOURCE: Figma color/violet/500, declared on thegrid. builders 6919:8788 paints #A49AF7, which is this value within 2/255 per channel and is treated as this rung rather than as a ninth violet. */
+  --cg-violet-500: #a69bf7;
+  /*
+     SOURCE: Figma color/violet/600, declared on thegrid; rendered only inside flattened SVG illustration. Carried for the same reason as violet-300. */
+  --cg-violet-600: #9488f5;
+  /*
+     SOURCE: Figma color/violet/700. Applied on thegrid 8364:4388, the stroke around an avatar chip in the Plug section. builders 6919:8791 paints #8072F3, within 4/255 per channel, and is taken as this rung.
+
+     3.57:1 on the card: an indicator or a border, never a word. */
+  --cg-violet-700: #8476f4;
+  /*
+     Figma names --cg-primary color/violet/900. Deliberately an ALIAS rather than the hex written a second time: the brand hue has one home, at the top of this file, and a designer retuning it must not have to find two. */
+  --cg-violet-900: var(--cg-primary);
+  /*
+     SOURCE: Figma color/cyan/200, also carried under the legacy name "Teriary 20" (the typo is Figma's). Applied on three frames: thegrid 8364:4166 (the Editor role badge), teams 7172:7643 and pricing 7779:9320 (the footer's secondary buttons, with a --cg-tertiary hairline around them).
+
+     It IS a tint of the tertiary, and exactly: #60e9f0 composited on white at 20% is #dffbfc to the byte. Shipped as a value anyway rather than as a color-mix, because a consumer should not have to know the recipe to draw a button.
+
+     --cg-slate-600 measures 5.20:1 on it and --cg-text-primary 14.65:1. */
+  --cg-cyan-200: #dffbfc;
+  /*
+     SOURCE: Figma color/cyan/300, declared on thegrid; rendered only inside flattened SVG illustration. Carried so the ramp is whole. */
+  --cg-cyan-300: #cff8fa;
+  /*
+     SOURCE: observed applied, UNBOUND. thegrid 8364:4002 and 8364:4056 — the footer and enterprise buttons, drawn as this fill with a --cg-tertiary hairline. ui#239's second comment asks for it.
+
+     IT IS NOT A TINT OF --cg-tertiary, and that is worth the arithmetic, because every other rung in this family is. #60E9F0 has G 233, so reaching G 252 needs 86% white, and that mix gives R 233 — this value has R 177. Solving the same mix from the blue channel gives 0%. No single alpha produces it. So the color-mix() workaround available for the violet wash is not available here, which is precisely why the token is.
+
+     Placed at 400 by lightness, between bound rungs cyan-300 and cyan-900.
+
+     5.07:1 on the purple panel and 13.82:1 on ink: as a fill it carries text on both dark surfaces. 1.15:1 on the card, so never a foreground on white. */
+  --cg-cyan-400: #b1fcff;
+  /*
+     Figma names --cg-tertiary color/cyan/900. An alias, for the reason violet-900 is one. */
+  --cg-cyan-900: var(--cg-tertiary);
+  /*
+     SOURCE: Figma color/lime/200, declared on thegrid; rendered only inside flattened SVG illustration. Carried so the ramp is whole. */
+  --cg-lime-200: #eef7dc;
+  /*
+     SOURCE: Figma color/lime/600, declared on thegrid; rendered only inside flattened SVG illustration. */
+  --cg-lime-600: #d0ea9e;
+  /*
+     SOURCE: Figma color/lime/700. Applied on thegrid 8364:4387, the stroke around the audience avatars in the Plug section.
+
+     1.38:1 on the card and 4.22:1 on the purple panel: a border on a dark ground, not a line on a light one. */
+  --cg-lime-700: #c8e68e;
+  /*
+     Figma names --cg-secondary color/lime/900. An alias, for the reason violet-900 is one. */
+  --cg-lime-900: var(--cg-secondary);
 
   /* ---- semantic-surfaces ---- */
   --cg-surface-page: var(--cg-neutral-25);
@@ -476,6 +696,37 @@
   --cg-text-primary: var(--cg-neutral-900);
   --cg-text-secondary: var(--cg-neutral-700);
   --cg-text-muted: var(--cg-neutral-500);
+  /*
+     The muted tone for text that is real content: a tile hint, an eyebrow that
+     carries meaning, a caption a reader has to read. ui#232, 2026-09-18.
+
+     --cg-text-muted is under the 4.5:1 body-text floor on three of the four grounds
+     (3.69:1 card, 3.28:1 page, 3.44:1 panel, 5.92:1 ink), which means every caption
+     in this library is AA-legal as large text and illegal as body copy. #232 asked
+     for a stronger rung rather than a retune, on the reasoning #149 used for
+     state's -strong: a tone tuned to recede and a tone tuned to be read are two
+     jobs, and collapsing them retunes both.
+
+     It is NOT --cg-text-secondary under a second name. Secondary is neutral-700
+     (7.00:1 on the card) and reads as a second voice; this is neutral-600, a new
+     rung derived for the floor and nothing else. Its note carries the sweep.
+
+       base   #6a6a6a          card 5.41:1  page 4.80:1  raised 4.99:1  subtle 4.82:1
+       panel  rgba(255,255,255,0.86)  on #5a47f0 : 4.75:1
+       ink    rgba(255,255,255,0.68)  on #222222 : 8.02:1
+
+     ON THE PANEL THIS RUNG IS BRIGHTER THAN --cg-text-secondary, and that is not a
+     mistake. Measured, the panel's own secondary (0.82 white) is 4.47:1, which is
+     under the floor by 0.03. Nothing dimmer than 0.84 white clears 4.5:1 on that
+     ground, so the panel cannot deliver a "muted that reads as body copy" below its
+     own secondary. Same shape as the note further up about a panel chip's word:
+     where the surface cannot deliver the ratio, the surface has to move, not the
+     foreground. A designer who dislikes the inversion changes --cg-surface-panel,
+     not this.
+
+     DECORATIVE CAPTIONS MAY KEEP --cg-text-muted. This rung does not deprecate it;
+     #232's own done-when says so. */
+  --cg-text-muted-strong: var(--cg-neutral-600);
   --cg-text-placeholder: var(--cg-neutral-400);
   --cg-text-accent: var(--cg-primary);
   --cg-text-inverse: var(--cg-neutral-0);
@@ -523,16 +774,94 @@
      The mono face is untouched: it is used only inside prompt and terminal surfaces
      and the draft says nothing about it. */
   /*
-     The display rung, now Manrope (#197). Identical to --cg-font-body today and
-     deliberately still a separate token.
-
-     A consumer that wants the licensed Futura back puts it in front of this stack in
-     its own :root and changes nothing else. Note that the blocks reading this rung
-     also set `uppercase` and --cg-display-tracking, which were tuned for a condensed
-     800; they still render, in Manrope, and whether the lockups keep the uppercase is
-     a block decision rather than a token one (#203). */
-  --cg-font-display: 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --cg-font-body: 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+     The display face, and the one token in this file that names a font this package
+     does NOT ship. ui#240, 2026-09-18.
+
+     All six canonical Figma frames set every headline in TANKER: the hero (92px on
+     five frames, 120px on home), every section heading (56px), every card title.
+     Nothing else in the design uses it and it is used for nothing else.
+
+     THE BINARY CANNOT SHIP HERE, and the reason is a licence, not an oversight.
+     Tanker is under the ITF Free Font License v2.0, whose section 02 forbids making
+     the Font Software available "through another font website, font library,
+     marketplace, repository, download service, application or platform". This
+     package is public on registry.npmjs.org, installable by anyone with no
+     credentials, which is exactly what that clause names. Section 03 states the
+     remedy: "Any third party wishing to use the Font Software must obtain their own
+     copy directly from Fontshare and be independently bound by this License."
+
+     That is why Manrope is fine and Tanker is not. Manrope arrives as
+     @fontsource-variable/manrope under the Open Font License, which permits
+     redistribution. Fontshare publishes no fontsource package.
+
+     So the package owns the STACK and the consumer owns the FILE. Adding 'Tanker' at
+     the front is strictly additive in effect: a consumer that has not self-hosted it
+     falls straight through to Manrope and renders exactly what 0.27.2 rendered.
+     Before this, a consumer wanting the display face had to copy this whole fallback
+     chain verbatim into its own :root (cloudgrid-landing PR #132 did), and that copy
+     went stale the moment this package retired the condensed rung.
+
+     PENDING, and stated so rather than assumed: the 2026-09-10 re-skin (#197)
+     deliberately removed the display rung and set the whole system in Manrope.
+     Whether naming Tanker here reverses that decision is the founder's call, and it
+     is the open question at the end of #240. This change is written to be reversible
+     in one line if the answer is no.
+
+     NOT RETUNED, deliberately: --cg-display-line (1.06) and --cg-display-tracking
+     (0.012em) were tuned against Saira Semi Condensed 800. Every Tanker node in
+     every frame is leading-none with no tracking. See --cg-display-line-tight. */
+  --cg-font-display: 'Tanker', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /*
+     The body face. cloudgrid-landing#145, 2026-09-18.
+
+     Every body string in the canonical frames is SPACE GROTESK, and it was checked
+     on five of the six independently before it was believed: home 8204:2561 and
+     8204:2563, thegrid 8364:4213, builders 6913:7654, teams 7172:7571, enterprise
+     7037:779, pricing 7779:9261 — all 20px / 1.46, all the lede under a headline,
+     all in unrelated sections. The nav links and the card copy are the same face at
+     15px. This is the design's text face, not a stray on one frame.
+
+     IT SHIPS HERE, unlike Tanker. @fontsource-variable/space-grotesk is OFL-1.1,
+     which permits redistribution, so it arrives as a dependency and an @import in
+     fonts.css exactly the way Manrope does. See fonts.css.
+
+     THIS IS A VALUE CHANGE, not an addition, and it is the only one in this release.
+     Manrope is kept in the chain immediately behind it, so a consumer whose pipeline
+     somehow does not resolve the new dependency renders precisely what it rendered
+     before. Blast radius: every string in every consumer that has not overridden
+     this token changes face. Metrics differ — Space Grotesk is wider at the same
+     size — so a consumer with a tightly measured layout should look at it before
+     taking the release. cloudgrid-landing is the consumer that asked for it.
+
+     MANROPE DID NOT LEAVE. The frames keep it, and only for two jobs: the eyebrow
+     and the button label. Those now read --cg-font-ui, which is this token's
+     previous value unchanged, so neither of them moves. */
+  --cg-font-body: 'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /*
+     The face for the small fixed chrome of a page: the eyebrow above a heading, and
+     the label inside a button. 2026-09-18.
+
+     A third family stack is not a flourish. The canonical frames use exactly three
+     faces in three jobs — Tanker for display, Space Grotesk for everything a reader
+     reads, and MANROPE for the eyebrow and the button label — and they are
+     consistent about it. Every button label on all six frames is Manrope Bold 15
+     leading-none (home I8204:2580;732:46, thegrid I8364:4215;732:46, builders
+     I6913:7656;732:46, teams I7172:7573;732:46, enterprise I7037:781;732:46,
+     pricing I7779:9336;732:46). Every applied eyebrow is Manrope SemiBold 14, and
+     Figma binds it as a named text variable, "Eyebrow".
+
+     Its VALUE is --cg-font-body's previous value, byte for byte. That is what makes
+     the body-face change safe to read: the eyebrow and the button did not move, they
+     just stopped being spelled with the body token.
+
+     KNOWN INCONSISTENCY IN THE SOURCE, recorded so nobody "fixes" it from the wrong
+     end: on the home frame the four nav links (8204:2573) are Manrope Medium 15 and
+     "Sign In" beside them (8204:2579) is Space Grotesk Medium 15 — same slot, same
+     size, same weight, two faces. On thegrid the same split appears at 8364:4053
+     against 8364:4052/4054/4055. Five frames agree the nav is Space Grotesk, so the
+     Manrope instances read as a migration caught mid-flight rather than as intent,
+     and this token is NOT the nav's face. */
+  --cg-font-ui: 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --cg-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 
   /* ---- weights ----
@@ -561,6 +890,25 @@
 
      Stepped down one notch 2026-08-06 (operator: main headings read too
      dominant). The SOURCE values were xl 64 / lg 48 / md 42 / sm 32. */
+  /*
+     SOURCE: home 8204:2556, the hero headline, Tanker at leading-none.
+
+     The largest rung in the system and the only node that asks for it. It is kept
+     separate from display-2xl rather than collapsed onto it because the two are 28px
+     apart and both are heroes: home is 120 and the other five frames are 92. */
+  --cg-display-3xl: 120px;
+  /*
+     SOURCE: the hero headline on five of the six canonical frames — thegrid
+     8364:4211, builders 6913:7652, teams 7172:7569, enterprise 7037:777, pricing
+     7779:9259. Tanker, leading-none, no tracking.
+
+     This is the ramp's real top. Before it, --cg-display-xl (56px) was the largest
+     value in the package and every hero in the design was 36px above it, so each
+     consumer clamped its own. thegrid also draws a 96px closing CTA (8364:3957) and
+     a 64px section heading (8364:4363); both are single nodes and are deliberately
+     not rungs. A value invented to complete a grid is the thing this file keeps
+     refusing to add. */
+  --cg-display-2xl: 92px;
   --cg-display-xl: 56px;
   --cg-display-lg: 44px;
   /* SOURCE: onboarding H1 (was 42px) */
@@ -568,6 +916,65 @@
   --cg-display-sm: 30px;
   --cg-display-line: 1.06;
   --cg-display-tracking: 0.012em;
+  /*
+     The leading every Tanker node in every canonical frame actually uses: 1, i.e.
+     leading-none. Not one display node in six frames emits a letter-spacing either.
+
+     --cg-display-line stays 1.06 and --cg-display-tracking stays 0.012em. Both were
+     tuned against Saira Semi Condensed 800 (ui#240 records this), neither has been
+     retuned for Tanker, and both are shipped values that four display rungs and
+     every consumer's display utility already read. Retuning them is a one-line edit
+     and a visible change to text that exists today, so it is proposed rather than
+     made. This rung is what the new sizes are built on in the meantime. */
+  --cg-display-line-tight: 1;
+
+  /* ---- tanker-title-ramp ----
+     The display face at CARD scale, 2026-09-18.
+
+     Four rungs the canonical frames use constantly and this package could spell
+     none of. They are separated from h1-display-ramp rather than wedged into it
+     because the two ramps disagree everywhere they overlap, and the disagreement is
+     not resolvable by addition:
+
+       frames   120  96  92  64  56  40  38  32  30  26  20
+       package                      56  44  38      30
+
+     56, 38 and 30 coincide. 44 is used by nothing in any of the six frames. Every
+     other size the frames ask for falls BETWEEN two shipped rungs — 40 between 44
+     and 38, 26 between 30 and heading-lg's 22 — so there is no name left on the
+     t-shirt ramp that is both free and in the right place, and renaming a shipped
+     rung is a breaking change for two published consumers.
+
+     They are also not headings. --cg-heading-* is the Manrope ramp at 1.2 leading;
+     this is the display FACE at leading-none, and --cg-title-sm and
+     --cg-heading-md are both 20px precisely because a face and a leading are what
+     separate them, not a size.
+
+     SIZES, with where they were read:
+       40  home 8204:2589, enterprise 7038:1244, pricing 7785:9809, thegrid 8364:4382
+       26  teams 7297:8606, builders 6916:8648, enterprise 7038:1192,
+           pricing 7788:10264, thegrid 8364:3882
+       20  teams 7172:7760, builders 6919:8783, thegrid petal labels
+
+     pricing 7785:10059 draws one 32px Tanker number and thegrid draws 15px Tanker
+     eyebrows. Single-frame, so recorded and not given a rung. */
+  /*
+     Four frames. The governance card title, the plan price, the sub-heading under a section statement. */
+  --cg-title-lg: 40px;
+  /*
+     Five frames. The card title and the FAQ question — the most common display size in the design after the section heading.
+
+     ui#239's type table calls this rung "24px card title". Measured on five frames it is 26, not 24, and nothing in any frame is 24. The table was written from a consumer's approximation rather than from the node. */
+  --cg-title-md: 26px;
+  /*
+     Three frames. The label inside a step circle or a diagram petal. Same size as --cg-heading-md and a different face and leading; see the group note. */
+  --cg-title-sm: 20px;
+  /*
+     leading-none, aliased rather than repeated so a retune of the display leading reaches both ramps. An alias compiles to var(), so it survives a scope flip. */
+  --cg-title-line: var(--cg-display-line-tight);
+  /*
+     No Tanker node in any of the six frames emits a letter-spacing. Spelled out rather than omitted so a utility built on this ramp cannot inherit --cg-display-tracking's 0.012em by accident. */
+  --cg-title-tracking: 0em;
 
   /* ---- manrope-ramp ---- */
   /*
@@ -589,6 +996,22 @@
      extrapolation, and a heading is short enough that 1.2 does not cost a line its
      descenders. */
   --cg-heading-line: 1.2;
+  /*
+     SOURCE: the lede paragraph on all six canonical frames — home 8204:2561,
+     thegrid 8364:4213, builders 6913:7654, teams 7172:7571, enterprise 7037:779,
+     pricing 7779:9261. Space Grotesk regular, line-height 1.46, no tracking.
+
+     The single most-used text size in the whole design and the one this package
+     could not spell. --cg-body-lg is 19px and --cg-heading-md is 20px, so a
+     consumer building a lede had to pick between a body token one pixel short and a
+     heading token that is the right size with the wrong role and the wrong leading
+     (1.2 against 1.46). cloudgrid-landing#145 records sections doing the first.
+
+     It reads --cg-body-line, so it is a body rung and not a fifth display rung.
+
+     pricing 7785:9832 draws one 18px bold plan name. Single node, one frame, 1px
+     off --cg-body-lg: recorded, not given a rung. */
+  --cg-body-xl: 20px;
   /* SOURCE: H1 subline */
   --cg-body-lg: 19px;
   /* SOURCE: default UI text */
@@ -609,6 +1032,43 @@
   --cg-mono-line: 1.7;
   --cg-label-size: 15px;
   --cg-label-weight: var(--cg-weight-medium);
+  /*
+     SOURCE: Figma's own bound text variable, "Eyebrow" —
+     Font(family: "Manrope", style: SemiBold, size: 14, weight: 600, lineHeight: 1.2,
+     letterSpacing: 10). Applied first-hand on teams 7172:8463, builders 6916:8053
+     and enterprise 7038:1184, each rendering tracking-[1.4px] uppercase.
+
+     The only rung in this package derived from a Figma TEXT variable rather than
+     from a measured node, and it agrees with the nodes, which is why it is trusted.
+
+     It is equidistant from the two tokens a consumer would otherwise reach for:
+     --cg-caption is 13px and --cg-label-size is 15px, and Eyebrow currently builds
+     on the second. One pixel is not the point — the eyebrow also carries a weight,
+     a leading and a tracking that neither of those tokens has, and spelling three
+     of the four inline is how a component drifts.
+
+     KNOWN: thegrid draws its eyebrows differently — Tanker regular 15px, leading
+     16px, tracking 1.1px (8364:3905, 8364:4409) — and both of pricing's eyebrows are
+     switched off in the file. So this is the eyebrow of three frames, not six, and
+     thegrid's is an open question for the designer rather than a second rung here. */
+  --cg-eyebrow-size: 14px;
+  /*
+     From the Eyebrow variable. The same number as --cg-heading-line, spelled out rather than aliased: an eyebrow is not a heading, and a heading retune must not silently move it. */
+  --cg-eyebrow-line: 1.2;
+  /*
+     From the Eyebrow variable, whose letterSpacing is 10 — Figma's percent, not pixels. At 14px that is 1.4px, which is what all three frames render. Stored in em so the ratio survives a size change. */
+  --cg-eyebrow-tracking: 0.1em;
+  /*
+     600, from the Eyebrow variable's weight: 600.
+
+     Aliased onto --cg-weight-bold rather than written as a number, because 600 is
+     already this package's "bold" (the weights group's own note explains why that
+     name and not "semibold"). Two spellings of one weight is how a ramp starts
+     disagreeing with itself.
+
+     Note this is NOT --cg-label-weight, which is 500. The eyebrow and the label are
+     different rungs; see the group note. */
+  --cg-eyebrow-weight: var(--cg-weight-bold);
 
   /* ---- spacing ----
      spacing: 4px base */
@@ -657,8 +1117,44 @@
   --cg-radius-lg: 14px;
   /* SOURCE: option card */
   --cg-radius-xl: 16px;
+  /*
+     SOURCE: the corner of every section slab and every card in the design, read on
+     all six canonical frames — home 8204:2440, thegrid 8364:3928, builders
+     6913:8019, teams 7172:7567, enterprise 7037:775, pricing 7785:10051.
+
+     It is the most-used radius in the whole design and the ramp had no name for it.
+     --cg-radius-xl is 16 and --cg-radius-2xl is 24, and both are shipped, so 20 has
+     no free t-shirt name in the right place. Renaming a rung two published
+     consumers already read is a breaking change for a corner.
+
+     So it takes a ROLE name, which the corners group already does once for
+     --cg-radius-pill. The role is exact and worth stating: in these frames 16 is
+     what a CONTROL is rounded to (every button on every frame is 16) and 20 is what
+     a CONTAINER is rounded to. The design draws that distinction consistently, which
+     is more information than a number between two numbers.
+
+     NOT --cg-radius-panel, deliberately: "panel" in this package is the purple
+     surface (--cg-surface-panel, data-cg-surface="panel"), and a radius named after
+     it would read as that surface's corner rather than as every container's. */
+  --cg-radius-container: 20px;
   /* SOURCE: full-bleed purple panel */
   --cg-radius-2xl: 24px;
+  /*
+     SOURCE: home 8204:2557 and 8204:2569, the two 92px lime image cards in the hero.
+
+     One frame, two nodes, and it is here rather than recorded-and-skipped for one
+     reason: it extends the t-shirt ramp at the TOP, where there is a free name and
+     no ambiguity, instead of asking for one between two shipped rungs.
+
+     WHAT IS NOT HERE. The brief this work came from expected a rung between
+     --cg-radius-2xl and --cg-radius-pill for a frame nesting 108 / 93 / 80px
+     corners. No radius above 60 and below the pill appears on any of the six frames
+     first-hand. builders draws 60px on three decorative glow rectangles
+     (7172:8460-8462) and thegrid draws 22 / 18 / 15 / 11 / 9 inside a flattened
+     product-UI mock. None of those is a rung; all are recorded here so the next
+     audit does not re-find them. The home frame is only ~10% audited (the Figma
+     quota ran out), so if that expectation has a node behind it, it is there. */
+  --cg-radius-3xl: 32px;
   --cg-radius-pill: 999px;
   --cg-border-width: 1px;
   --cg-border-width-strong: 1.5px;
@@ -844,6 +1340,12 @@
   --cg-text-primary: #ffffff;
   --cg-text-secondary: rgba(255, 255, 255, 0.82);
   --cg-text-muted: rgba(255, 255, 255, 0.66);
+  /*
+     4.75:1 on --cg-surface-panel. See the base note: on this ground nothing dimmer
+     than 0.84 white clears the 4.5:1 floor, so this rung is necessarily brighter
+     than the panel's own --cg-text-secondary (0.82, 4.47:1). The surface is what
+     would have to move to change that, not this value. */
+  --cg-text-muted-strong: rgba(255, 255, 255, 0.86);
   --cg-text-accent: #ffffff;
 
   /* ---- semantic-lines ---- */
@@ -945,6 +1447,14 @@
   --cg-text-primary: #ffffff;
   --cg-text-secondary: rgba(255, 255, 255, 0.78);
   --cg-text-muted: rgba(255, 255, 255, 0.56);
+  /*
+     8.02:1 on --cg-surface-code. Ink is the one ground where --cg-text-muted
+     already clears the body floor (5.92:1), so this rung exists there for
+     consistency of meaning rather than to fix a ratio: a component that reaches for
+     text-faint-strong must resolve to something on all three surfaces, and
+     resolving to the base #6a6a6a inside a dark scope would be the CLAUDE.md rule-3
+     failure. It sits between the ink scope's muted (0.56) and its secondary (0.78). */
+  --cg-text-muted-strong: rgba(255, 255, 255, 0.68);
   --cg-text-accent: var(--cg-secondary);
 
   /* ---- semantic-surfaces ---- */