@cloudgrid-io/ui 0.24.0 → 0.25.0

package/dist/tokens/base.json

@@ -37,6 +37,16 @@
           "css": "--cg-tertiary"
         }
       }
+    },
+    "accent": {
+      "$value": "#0061f0",
+      "$type": "color",
+      "$description": "SOURCE: the founder's 2026-09-10 draft, \"Accent\", RETUNED. The draft value is\n#086FFF and this is #0061f0.\n\nThe blue is the fourth brand hue and it has one job the other three do not: the\ndraft spends it on WORDS. \"View All\", \"Explore All\", \"+ New\" are 15px links, so\nthe bar is 4.5:1 (WCAG 1.4.3) and not the 3:1 an indicator gets.\n\n  #086FFF on the page ground #f1f1f6 : 3.94:1   <-- under the text floor\n  #086FFF on the card        #ffffff : 4.44:1   <-- also under it\n  #0061f0 on the page ground         : 4.70:1\n  #0061f0 on the card                : 5.29:1\n  white   on #0061f0                 : 5.29:1\n\nDerived rather than picked: the draft value in OKLCH is L 0.581 C 0.230 h -1.749,\nand this is the same hue and chroma walked down in lightness until the page\nground clears the floor. The nearest passing value on that ray is #0064f4 at\n4.5089:1, which clears by 0.009 — a margin a later ground retune would erase in\nsilence — so it is taken one step further to 4.70:1. That margin practice is\n--cg-neutral-500's, which holds 3.27:1 against a 3:1 bar for the same reason.\n\nDECLARED AT :root ONLY, like every other value in this group. A brand hue is not\na semantic and does not flip; the semantics that SPEND it do. Measured, so the\nnext person does not have to:\n\n  #0061f0 on the purple panel #5a47f0 : 1.10:1   invisible\n  #0061f0 on ink              #222222 : 3.00:1   an indicator, never a word\n\nwhich is why --cg-link is #ffffff inside both surface scopes rather than this\nvalue. On the ink surface --cg-text-accent is already the lime, and on the panel\nit is white; the accent role has an on-surface answer in both places and none of\nthem is this blue. Do not \"fix\" that by copying this value into a dark scope.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-accent"
+        }
+      }
     }
   },
   "danger": {
@@ -286,6 +296,16 @@
           "css": "--cg-tertiary-press"
         }
       }
+    },
+    "accent-press": {
+      "$value": "#0052da",
+      "$type": "color",
+      "$description": "The pressed and hovered rung of the accent, and --cg-link-hover.\n\nDerived with the step --cg-primary-press takes from --cg-primary rather than\nchosen: OKLCH L -0.0494, C -0.0078, hue held. One recipe for all four brand\nhues means a retune of any one of them moves its press with it.\n\n5.79:1 on the page ground and 6.52:1 on the card, so a link that darkens on\nhover never crosses a floor on the way.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-accent-press"
+        }
+      }
     }
   },
   "neutrals": {
@@ -576,32 +596,35 @@
   },
   "link": {
     "link": {
-      "$value": "{semantic-text.text-primary}",
+      "$value": "{brand.accent}",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-link"
         }
-      }
+      },
+      "$description": "The blue, not the ink. The founder's 2026-09-10 draft paints \"View All\",\n\"Explore All\" and \"+ New\" in the accent, which is the role the fourth brand hue\nwas added for.\n\nWas {semantic-text.text-primary}: an ink link with a purple hover, which is a\nlink that is invisible as a link until the pointer is over it. 4.70:1 on the\npage ground.\n\nBoth surface scopes override it to #ffffff and keep the lime hover, unchanged by\nthis. The accent is a light-surface value and says so in its own note."
     },
     "link-hover": {
-      "$value": "{brand.primary}",
+      "$value": "{brand-derived.accent-press}",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-link-hover"
         }
-      }
+      },
+      "$description": "A darkening of the link's own hue rather than a jump to another one. Was\n{brand.primary}, which read as a visited-link colour change once the resting\nstate stopped being ink."
     }
   },
   "type-families": {
-    "$description": "H1 is Futura Condensed Extra Bold where it is installed. It is a licensed\nface, NOT a webfont, so Saira Semi Condensed 800 is the self-hosted\nfallback that keeps every H1 heavy and condensed everywhere else. Drop the\nlicensed woff2 in and it takes over with no other change.",
+    "$description": "One face. The founder's 2026-09-10 draft (#197) is set in Manrope throughout —\nits only text styles are Manrope Medium 22, SemiBold 15 and Regular 13 — so the\ndisplay rung is Manrope too and the condensed face is retired.\n\nWhat that replaced: Futura Condensed Extra Bold where it was installed, with\nSaira Semi Condensed 800 self-hosted as the stand-in everywhere else. Neither is\nloaded any more. --cg-font-display is still its OWN stack rather than an alias of\nthe body one, so a future display face is a one-value edit here and not a\nre-plumbing.\n\nThe mono face is untouched: it is used only inside prompt and terminal surfaces\nand the draft says nothing about it.",
     "font-display": {
-      "$value": "'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif",
+      "$value": "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
       "$type": "fontFamily",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-font-display"
         }
-      }
+      },
+      "$description": "The display rung, now Manrope (#197). Identical to --cg-font-body today and\ndeliberately still a separate token.\n\nA consumer that wants the licensed Futura back puts it in front of this stack in\nits own :root and changes nothing else. Note that the blocks reading this rung\nalso set `uppercase` and --cg-display-tracking, which were tuned for a condensed\n800; they still render, in Manrope, and whether the lockups keep the uppercase is\na block decision rather than a token one (#203)."
     },
     "font-body": {
       "$value": "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
@@ -623,7 +646,7 @@
     }
   },
   "weights": {
-    "$description": "weights (Manrope ships 400/500/700)",
+    "$description": "weights. Manrope Variable carries the whole 200-800 axis; the brand uses four of\nthem — 400 / 500 / 600 / 700 (#197).",
     "weight-regular": {
       "$value": "400",
       "$type": "fontWeight",
@@ -643,22 +666,24 @@
       }
     },
     "weight-bold": {
-      "$value": "700",
+      "$value": "600",
       "$type": "fontWeight",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-weight-bold"
         }
-      }
+      },
+      "$description": "SemiBold, not Bold. The draft's \"Body Bold\" style is Manrope SemiBold 600 at\n15/1.46, and 600 is what this rung has to be for `font-bold` to render it (#197).\n\nWas 700. Manrope at 700 next to the draft's 600 reads a weight heavier than the\ndesign everywhere the token is spent, and the alternative — a new\n--cg-weight-semibold that no component reads, beside a --cg-weight-bold that is\nnow wrong — would have left the wrong value reachable under the obvious name."
     },
     "weight-display": {
-      "$value": "800",
+      "$value": "700",
       "$type": "fontWeight",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-weight-display"
         }
-      }
+      },
+      "$description": "The display rung, reachable as `font-heavy` (`font-display` is the family; see\ntheme.css). 700 rather than 800 since the face became Manrope (#197): the brand\nloads 400/500/600/700 and the 800 end of the axis belonged to the condensed\nface's own weight."
     }
   },
   "h1-display-ramp": {
@@ -721,13 +746,14 @@
   },
   "manrope-ramp": {
     "heading-lg": {
-      "$value": "24px",
+      "$value": "22px",
       "$type": "dimension",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-heading-lg"
         }
-      }
+      },
+      "$description": "SOURCE: the founder's 2026-09-10 draft, \"H4\" — Manrope Medium 22/1.2 (#197).\n\nWas 24px. This is the section-heading rung: CardGrid, Carousel and PricingTiers\neach render an h2 as `text-heading-lg font-medium text-ink`, which is the draft's\nH4 exactly (\"My Creations\", \"Most Popular\", \"On the Grid\")."
     },
     "heading-md": {
       "$value": "20px",
@@ -750,13 +776,14 @@
       }
     },
     "heading-line": {
-      "$value": "1.3",
+      "$value": "1.2",
       "$type": "number",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-heading-line"
         }
-      }
+      },
+      "$description": "SOURCE: the draft's H4 line height (#197). Was 1.3.\n\nOne leading serves all three heading rungs, so the 17px and 20px rungs tighten\nwith the 22px one. That is the draft's own proportion rather than an\nextrapolation, and a heading is short enough that 1.2 does not cost a line its\ndescenders."
     },
     "body-lg": {
       "$value": "19px",
@@ -799,13 +826,14 @@
       }
     },
     "body-line": {
-      "$value": "1.5",
+      "$value": "1.46",
       "$type": "number",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-body-line"
         }
-      }
+      },
+      "$description": "SOURCE: the draft's \"Body Bold\" and \"Small\" both carry 1.46 (#197). Was 1.5.\n\nIt serves every body rung and the caption, which is what makes the draft's two\nbody styles land whole: Body Bold is --cg-body-sm at 15/1.46 and Small is\n--cg-caption at 13/1.46, both already the right size."
     },
     "body-tracking": {
       "$value": "0em",
@@ -1320,9 +1348,9 @@
   "indicator": {
     "$description": "indicator + chrome: taken from the Console so the system holds every value in\none place, 2026-08-24 (#96).\n\nPENDING A DESIGNER. These are adopted as-is, not designed. They are here so the\nConsole can stop carrying private copies and so there is a single thing to edit;\nthe values themselves are the Console's current ones and are expected to change.\nMeasurements are recorded beside each so the decision is informed rather than\ninherited.",
     "volt": {
-      "$value": "#b6ff2e",
+      "$value": "{brand.secondary}",
       "$type": "color",
-      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nMEASURED 1.21:1 on white, which is below every bar there is. It works on the\npanel (4.82:1) and on ink (13.13:1); on the page ground it reads only because\nit is paired with volt-ink in a pill. Recorded rather than\nsilently corrected: darkening it would change the Console's appearance, which\nis a design decision and not a contrast fix.\n\nNote it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one\nthe brand owns is the open question here.\n\nIt is also a second LIVE. state.online (#00a05c) is the same idea in the state\nscale, and EntityStatus (#116) already paints the live dot with it. They are not\ninterchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a\nsurface must not swap one for the other on the assumption that both mean\n'serving'. Which name the brand keeps for live belongs to the same open question,\nand until it is answered volt is the Console's brand mark and online is the\nentity's state.",
+      "$description": "The live/current INDICATOR — the dot in its halo, and the brand mark. Never\ndecorative, never a fill.\n\nAN ALIAS of --cg-secondary as of the 2026-09-10 re-skin (#197), which is the\nanswer to the question this note used to hold open. It was #b6ff2e, a SECOND\nlime 36 dE from the brand's own, and the note asked which one the brand owns.\nThe founder's draft carries exactly one lime, #b6de68, and it is --cg-secondary:\nthe Most Popular bars are painted in it and #b6ff2e appears nowhere.\n\nSo the hue is retired and the NAME is kept. Every surface that draws a live mark\nkeeps writing --cg-volt, --cg-live-halo follows through the color-mix it already\nhad, and nothing downstream has to know the value moved. The alias is deliberate\nin the same way --cg-pending's is: one value today, two names, so the mark and\nthe brand hue can part later with a one-line edit here.\n\nMeasured, on both sides of the move:\n\n  #b6ff2e on white : 1.21:1     #b6de68 on white : 1.53:1\n  --cg-volt-ink on it : 9.94:1  --cg-volt-ink on it : 7.82:1\n\nStill below every text bar on white, and still recorded rather than corrected:\nit reads because it is paired with --cg-volt-ink in a pill, it works on the panel\nand on ink, and darkening it would be a design decision rather than a contrast\nfix. The halo lightens with it, from #e8ffbc to #e8f4cf composited over white.\n\nIt is still a second LIVE beside state.online (#00a05c), and they are still not\ninterchangeable — online is 3.40:1 on white and this is 1.53:1. volt is the\nbrand mark; online is the entity's state.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-volt"
@@ -1332,7 +1360,7 @@
     "volt-ink": {
       "$value": "#243d00",
       "$type": "color",
-      "$description": "Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that\nis comfortably legible.\n\nThis is NOT the state -ink that EntityStatus (#116) says the library lacks. That\nnote wants a foreground for the WORD on a state chip, and the arrangement it\nshipped instead — dot carries the colour, word is text-ink — already measures\n14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt\nand belongs to volt. Adding a state -ink is still a brand decision and still\nopen.",
+      "$description": "Text and glyphs ON volt. 7.82:1 against it, re-measured for the 2026-09-10\nre-skin (#197) when volt became an alias of --cg-secondary: it was 9.94:1\nagainst the old #b6ff2e. Unchanged in value, because 7.82:1 is comfortably over\nthe 4.5:1 text floor and re-deriving a value that still holds would move a\ncolour for arithmetic's sake.\n\nThis is NOT the state -ink that EntityStatus (#116) says the library lacks. That\nnote wants a foreground for the WORD on a state chip, and the arrangement it\nshipped instead — dot carries the colour, word is text-ink — already measures\n14.33:1 on online-fill, against 10.86:1 for this olive. volt-ink is tuned to volt\nand belongs to volt. Adding a state -ink is still a brand decision and still\nopen.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-volt-ink"

package/dist/tokens/surface-panel.json

@@ -86,12 +86,14 @@
       }
     },
     "link-hover": {
-      "$value": "{brand.secondary}",
+      "$value": "#caf37d",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-link-hover"
         }
-      }
+      },
+      "$type": "color",
+      "$description": "A lightened lime, not the brand one. #197 extended the contrast guardrail to the\nlink rungs and the panel is where it went red:\n\n  {brand.secondary} #b6de68 on the panel #5a47f0 : 3.79:1   <-- under AA\n  #caf37d           on the panel                 : 4.62:1\n\nSame hue and chroma in OKLCH, lifted in lightness until a hovered link on purple\nis readable. A hover state is still normal text and gets no exemption, and the\npanel is the one surface where the lime is a foreground rather than a mark.\n\nThe rest rung above stays #ffffff, so hovering still moves the colour rather than\nonly adding the underline the block draws. On ink the brand lime is left alone:\nit measures 10.33:1 there and needs nothing."
     }
   },
   "semantic-surfaces": {

package/dist/tokens.css

@@ -44,6 +44,39 @@
   --cg-primary: #5a47f0;
   --cg-secondary: #b6de68;
   --cg-tertiary: #60e9f0;
+  /*
+     SOURCE: the founder's 2026-09-10 draft, "Accent", RETUNED. The draft value is
+     #086FFF and this is #0061f0.
+
+     The blue is the fourth brand hue and it has one job the other three do not: the
+     draft spends it on WORDS. "View All", "Explore All", "+ New" are 15px links, so
+     the bar is 4.5:1 (WCAG 1.4.3) and not the 3:1 an indicator gets.
+
+       #086FFF on the page ground #f1f1f6 : 3.94:1   <-- under the text floor
+       #086FFF on the card        #ffffff : 4.44:1   <-- also under it
+       #0061f0 on the page ground         : 4.70:1
+       #0061f0 on the card                : 5.29:1
+       white   on #0061f0                 : 5.29:1
+
+     Derived rather than picked: the draft value in OKLCH is L 0.581 C 0.230 h -1.749,
+     and this is the same hue and chroma walked down in lightness until the page
+     ground clears the floor. The nearest passing value on that ray is #0064f4 at
+     4.5089:1, which clears by 0.009 — a margin a later ground retune would erase in
+     silence — so it is taken one step further to 4.70:1. That margin practice is
+     --cg-neutral-500's, which holds 3.27:1 against a 3:1 bar for the same reason.
+
+     DECLARED AT :root ONLY, like every other value in this group. A brand hue is not
+     a semantic and does not flip; the semantics that SPEND it do. Measured, so the
+     next person does not have to:
+
+       #0061f0 on the purple panel #5a47f0 : 1.10:1   invisible
+       #0061f0 on ink              #222222 : 3.00:1   an indicator, never a word
+
+     which is why --cg-link is #ffffff inside both surface scopes rather than this
+     value. On the ink surface --cg-text-accent is already the lime, and on the panel
+     it is white; the accent role has an on-surface answer in both places and none of
+     them is this blue. Do not "fix" that by copying this value into a dark scope. */
+  --cg-accent: #0061f0;
 
   /* ---- danger ----
      danger (PLACEHOLDER, not a brand value)
@@ -356,6 +389,16 @@
   --cg-primary-tint: #eeecfe;
   --cg-secondary-press: #a6cf57;
   --cg-tertiary-press: #4dd8e0;
+  /*
+     The pressed and hovered rung of the accent, and --cg-link-hover.
+
+     Derived with the step --cg-primary-press takes from --cg-primary rather than
+     chosen: OKLCH L -0.0494, C -0.0078, hue held. One recipe for all four brand
+     hues means a retune of any one of them moves its press with it.
+
+     5.79:1 on the page ground and 6.52:1 on the card, so a link that darkens on
+     hover never crosses a floor on the way. */
+  --cg-accent-press: #0052da;
 
   /* ---- neutrals ---- */
   --cg-neutral-0: #ffffff;
@@ -448,24 +491,70 @@
   --cg-focus-ring: rgba(90, 71, 240, 0.28);
 
   /* ---- link ---- */
-  --cg-link: var(--cg-text-primary);
-  --cg-link-hover: var(--cg-primary);
+  /*
+     The blue, not the ink. The founder's 2026-09-10 draft paints "View All",
+     "Explore All" and "+ New" in the accent, which is the role the fourth brand hue
+     was added for.
+
+     Was {semantic-text.text-primary}: an ink link with a purple hover, which is a
+     link that is invisible as a link until the pointer is over it. 4.70:1 on the
+     page ground.
+
+     Both surface scopes override it to #ffffff and keep the lime hover, unchanged by
+     this. The accent is a light-surface value and says so in its own note. */
+  --cg-link: var(--cg-accent);
+  /*
+     A darkening of the link's own hue rather than a jump to another one. Was
+     {brand.primary}, which read as a visited-link colour change once the resting
+     state stopped being ink. */
+  --cg-link-hover: var(--cg-accent-press);
 
   /* ---- type-families ----
-     H1 is Futura Condensed Extra Bold where it is installed. It is a licensed
-     face, NOT a webfont, so Saira Semi Condensed 800 is the self-hosted
-     fallback that keeps every H1 heavy and condensed everywhere else. Drop the
-     licensed woff2 in and it takes over with no other change. */
-  --cg-font-display: 'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif;
+     One face. The founder's 2026-09-10 draft (#197) is set in Manrope throughout —
+     its only text styles are Manrope Medium 22, SemiBold 15 and Regular 13 — so the
+     display rung is Manrope too and the condensed face is retired.
+
+     What that replaced: Futura Condensed Extra Bold where it was installed, with
+     Saira Semi Condensed 800 self-hosted as the stand-in everywhere else. Neither is
+     loaded any more. --cg-font-display is still its OWN stack rather than an alias of
+     the body one, so a future display face is a one-value edit here and not a
+     re-plumbing.
+
+     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;
   --cg-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 
   /* ---- weights ----
-     weights (Manrope ships 400/500/700) */
+     weights. Manrope Variable carries the whole 200-800 axis; the brand uses four of
+     them — 400 / 500 / 600 / 700 (#197). */
   --cg-weight-regular: 400;
   --cg-weight-medium: 500;
-  --cg-weight-bold: 700;
-  --cg-weight-display: 800;
+  /*
+     SemiBold, not Bold. The draft's "Body Bold" style is Manrope SemiBold 600 at
+     15/1.46, and 600 is what this rung has to be for `font-bold` to render it (#197).
+
+     Was 700. Manrope at 700 next to the draft's 600 reads a weight heavier than the
+     design everywhere the token is spent, and the alternative — a new
+     --cg-weight-semibold that no component reads, beside a --cg-weight-bold that is
+     now wrong — would have left the wrong value reachable under the obvious name. */
+  --cg-weight-bold: 600;
+  /*
+     The display rung, reachable as `font-heavy` (`font-display` is the family; see
+     theme.css). 700 rather than 800 since the face became Manrope (#197): the brand
+     loads 400/500/600/700 and the 800 end of the axis belonged to the condensed
+     face's own weight. */
+  --cg-weight-display: 700;
 
   /* ---- h1-display-ramp ----
      H1 display ramp: uppercase, condensed, Primary or white
@@ -481,12 +570,25 @@
   --cg-display-tracking: 0.012em;
 
   /* ---- manrope-ramp ---- */
-  --cg-heading-lg: 24px;
+  /*
+     SOURCE: the founder's 2026-09-10 draft, "H4" — Manrope Medium 22/1.2 (#197).
+
+     Was 24px. This is the section-heading rung: CardGrid, Carousel and PricingTiers
+     each render an h2 as `text-heading-lg font-medium text-ink`, which is the draft's
+     H4 exactly ("My Creations", "Most Popular", "On the Grid"). */
+  --cg-heading-lg: 22px;
   /* SOURCE: card title */
   --cg-heading-md: 20px;
   /* SOURCE: step title */
   --cg-heading-sm: 17px;
-  --cg-heading-line: 1.3;
+  /*
+     SOURCE: the draft's H4 line height (#197). Was 1.3.
+
+     One leading serves all three heading rungs, so the 17px and 20px rungs tighten
+     with the 22px one. That is the draft's own proportion rather than an
+     extrapolation, and a heading is short enough that 1.2 does not cost a line its
+     descenders. */
+  --cg-heading-line: 1.2;
   /* SOURCE: H1 subline */
   --cg-body-lg: 19px;
   /* SOURCE: default UI text */
@@ -495,7 +597,13 @@
   --cg-body-sm: 15px;
   /* SOURCE: footer, helper */
   --cg-caption: 13px;
-  --cg-body-line: 1.5;
+  /*
+     SOURCE: the draft's "Body Bold" and "Small" both carry 1.46 (#197). Was 1.5.
+
+     It serves every body rung and the caption, which is what makes the draft's two
+     body styles land whole: Body Bold is --cg-body-sm at 15/1.46 and Small is
+     --cg-caption at 13/1.46, both already the right size. */
+  --cg-body-line: 1.46;
   --cg-body-tracking: 0em;
   --cg-mono-size: 14px;
   --cg-mono-line: 1.7;
@@ -611,26 +719,38 @@
      The live/current INDICATOR — the dot in its halo, and the brand mark. Never
      decorative, never a fill.
 
-     MEASURED 1.21:1 on white, which is below every bar there is. It works on the
-     panel (4.82:1) and on ink (13.13:1); on the page ground it reads only because
-     it is paired with volt-ink in a pill. Recorded rather than
-     silently corrected: darkening it would change the Console's appearance, which
-     is a design decision and not a contrast fix.
+     AN ALIAS of --cg-secondary as of the 2026-09-10 re-skin (#197), which is the
+     answer to the question this note used to hold open. It was #b6ff2e, a SECOND
+     lime 36 dE from the brand's own, and the note asked which one the brand owns.
+     The founder's draft carries exactly one lime, #b6de68, and it is --cg-secondary:
+     the Most Popular bars are painted in it and #b6ff2e appears nowhere.
+
+     So the hue is retired and the NAME is kept. Every surface that draws a live mark
+     keeps writing --cg-volt, --cg-live-halo follows through the color-mix it already
+     had, and nothing downstream has to know the value moved. The alias is deliberate
+     in the same way --cg-pending's is: one value today, two names, so the mark and
+     the brand hue can part later with a one-line edit here.
 
-     Note it is a SECOND lime beside --cg-secondary (#b6de68), 36 dE away. Which one
-     the brand owns is the open question here.
+     Measured, on both sides of the move:
 
-     It is also a second LIVE. state.online (#00a05c) is the same idea in the state
-     scale, and EntityStatus (#116) already paints the live dot with it. They are not
-     interchangeable at any bar — online is 3.40:1 on white, volt is 1.21:1 — so a
-     surface must not swap one for the other on the assumption that both mean
-     'serving'. Which name the brand keeps for live belongs to the same open question,
-     and until it is answered volt is the Console's brand mark and online is the
-     entity's state. */
-  --cg-volt: #b6ff2e;
+       #b6ff2e on white : 1.21:1     #b6de68 on white : 1.53:1
+       --cg-volt-ink on it : 9.94:1  --cg-volt-ink on it : 7.82:1
+
+     Still below every text bar on white, and still recorded rather than corrected:
+     it reads because it is paired with --cg-volt-ink in a pill, it works on the panel
+     and on ink, and darkening it would be a design decision rather than a contrast
+     fix. The halo lightens with it, from #e8ffbc to #e8f4cf composited over white.
+
+     It is still a second LIVE beside state.online (#00a05c), and they are still not
+     interchangeable — online is 3.40:1 on white and this is 1.53:1. volt is the
+     brand mark; online is the entity's state. */
+  --cg-volt: var(--cg-secondary);
   /*
-     Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that
-     is comfortably legible.
+     Text and glyphs ON volt. 7.82:1 against it, re-measured for the 2026-09-10
+     re-skin (#197) when volt became an alias of --cg-secondary: it was 9.94:1
+     against the old #b6ff2e. Unchanged in value, because 7.82:1 is comfortably over
+     the 4.5:1 text floor and re-deriving a value that still holds would move a
+     colour for arithmetic's sake.
 
      This is NOT the state -ink that EntityStatus (#116) says the library lacks. That
      note wants a foreground for the WORD on a state chip, and the arrangement it
@@ -734,7 +854,21 @@
 
   /* ---- link ---- */
   --cg-link: #ffffff;
-  --cg-link-hover: var(--cg-secondary);
+  /*
+     A lightened lime, not the brand one. #197 extended the contrast guardrail to the
+     link rungs and the panel is where it went red:
+
+       {brand.secondary} #b6de68 on the panel #5a47f0 : 3.79:1   <-- under AA
+       #caf37d           on the panel                 : 4.62:1
+
+     Same hue and chroma in OKLCH, lifted in lightness until a hovered link on purple
+     is readable. A hover state is still normal text and gets no exemption, and the
+     panel is the one surface where the lime is a foreground rather than a mark.
+
+     The rest rung above stays #ffffff, so hovering still moves the colour rather than
+     only adding the underline the block draws. On ink the brand lime is left alone:
+     it measures 10.33:1 there and needs nothing. */
+  --cg-link-hover: #caf37d;
 
   /* ---- semantic-surfaces ---- */
   --cg-surface-card: transparent;

package/dist/tokens.json

@@ -7,6 +7,7 @@
       "--cg-primary": "#5a47f0",
       "--cg-secondary": "#b6de68",
       "--cg-tertiary": "#60e9f0",
+      "--cg-accent": "#0061f0",
       "--cg-danger": "#E53935",
       "--cg-online": "#00a05c",
       "--cg-offline": "var(--cg-neutral-500)",
@@ -32,6 +33,7 @@
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
+      "--cg-accent-press": "#0052da",
       "--cg-neutral-0": "#ffffff",
       "--cg-neutral-25": "#f1f1f6",
       "--cg-lavender-50": "#f2f1f7",
@@ -64,30 +66,30 @@
       "--cg-border-strong": "var(--cg-ink)",
       "--cg-border-accent": "var(--cg-primary)",
       "--cg-focus-ring": "rgba(90, 71, 240, 0.28)",
-      "--cg-link": "var(--cg-text-primary)",
-      "--cg-link-hover": "var(--cg-primary)",
-      "--cg-font-display": "'Futura Condensed ExtraBold', 'Futura Condensed', 'Saira Semi Condensed Variable', 'Saira Semi Condensed', 'Arial Narrow', sans-serif",
+      "--cg-link": "var(--cg-accent)",
+      "--cg-link-hover": "var(--cg-accent-press)",
+      "--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",
       "--cg-font-mono": "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
       "--cg-weight-regular": "400",
       "--cg-weight-medium": "500",
-      "--cg-weight-bold": "700",
-      "--cg-weight-display": "800",
+      "--cg-weight-bold": "600",
+      "--cg-weight-display": "700",
       "--cg-display-xl": "56px",
       "--cg-display-lg": "44px",
       "--cg-display-md": "38px",
       "--cg-display-sm": "30px",
       "--cg-display-line": "1.06",
       "--cg-display-tracking": "0.012em",
-      "--cg-heading-lg": "24px",
+      "--cg-heading-lg": "22px",
       "--cg-heading-md": "20px",
       "--cg-heading-sm": "17px",
-      "--cg-heading-line": "1.3",
+      "--cg-heading-line": "1.2",
       "--cg-body-lg": "19px",
       "--cg-body-md": "16px",
       "--cg-body-sm": "15px",
       "--cg-caption": "13px",
-      "--cg-body-line": "1.5",
+      "--cg-body-line": "1.46",
       "--cg-body-tracking": "0em",
       "--cg-mono-size": "14px",
       "--cg-mono-line": "1.7",
@@ -142,7 +144,7 @@
       "--cg-transition-control": "background-color var(--cg-duration) var(--cg-ease-out), border-color var(--cg-duration) var(--cg-ease-out), color var(--cg-duration) var(--cg-ease-out), box-shadow var(--cg-duration) var(--cg-ease-out)",
       "--cg-lift-hover": "translateY(-1px)",
       "--cg-press-scale": "0.985",
-      "--cg-volt": "#b6ff2e",
+      "--cg-volt": "var(--cg-secondary)",
       "--cg-volt-ink": "#243d00",
       "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
@@ -162,7 +164,7 @@
       "--cg-border-strong": "#ffffff",
       "--cg-focus-ring": "rgba(255, 255, 255, 0.5)",
       "--cg-link": "#ffffff",
-      "--cg-link-hover": "var(--cg-secondary)",
+      "--cg-link-hover": "#caf37d",
       "--cg-surface-card": "transparent",
       "--cg-danger": "#FFDAD6",
       "--cg-online": "#C8F5DC",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -32,7 +32,6 @@
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/manrope": "^5.3.0",
-    "@fontsource/saira-semi-condensed": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "sonner": "^2.0.8",