@cloudgrid-io/ui 0.12.0 → 0.14.0

package/dist/theme.css

@@ -66,6 +66,10 @@
   --color-page: var(--cg-surface-page);
   --color-page-alt: var(--cg-surface-page-alt);
   --color-subtle: var(--cg-surface-subtle);
+  /* The neutral raised ground (#151). `subtle` is the lavender tint and `card`
+     is white, so before this there was no name for "one step off white, no
+     hue" and a raised panel had to flatten or take a cast. */
+  --color-raised: var(--cg-surface-raised);
   --color-control: var(--cg-surface-control);
   --color-panel: var(--cg-surface-panel);
   --color-code: var(--cg-surface-code);
@@ -137,6 +141,26 @@
   --color-expired-fill: var(--cg-expired-fill);
   --color-danger-fill: var(--cg-danger-fill);
 
+  /* The other two rungs of the chip (#149, #150). `-fill` is the ground, the
+     bare name is the dot, `-border` is the hairline and `-strong` is the word.
+     Mapped in the same pass as the tokens, for the reason the block above
+     gives: a token whose utility lands a release later is a token the first
+     consumer reaches for and does not find.
+
+     The grid is whole as of #154: danger and unhealthy have borders now, so the
+     absence this comment used to record is gone. --color-offline-fill is still
+     the one deliberate hole, and still for #111's reason. */
+  --color-online-border: var(--cg-online-border);
+  --color-online-strong: var(--cg-online-strong);
+  --color-expired-border: var(--cg-expired-border);
+  --color-expired-strong: var(--cg-expired-strong);
+  --color-pending-border: var(--cg-pending-border);
+  --color-pending-strong: var(--cg-pending-strong);
+  --color-unhealthy-border: var(--cg-unhealthy-border);
+  --color-unhealthy-strong: var(--cg-unhealthy-strong);
+  --color-danger-border: var(--cg-danger-border);
+  --color-danger-strong: var(--cg-danger-strong);
+
   /* ---- lines ---- */
   --color-hairline: var(--cg-border-hairline);
   --color-line: var(--cg-border-control);
@@ -251,6 +275,50 @@
   --shadow-hover: var(--cg-shadow-hover);
   --shadow-panel: var(--cg-shadow-panel);
   --shadow-focus: var(--cg-ring-focus);
+  /* The live dot's halo (#154), paired with --cg-live-halo the way --shadow-focus
+     is paired with --cg-focus-ring. */
+  --shadow-live: var(--cg-ring-live);
+
+  /* Tailwind's OWN three rungs, pointed at the brand's (#155).
+
+     This block is not a rename and not a convenience. Until it existed, the
+     elevation of this package's own components was decided by the CONSUMER:
+     dropdown-menu is authored with `shadow-md` and `shadow-lg`, select and
+     combobox with `shadow-md`, tabs with `shadow-sm`, and theme.css declared
+     none of those three names. So in a consumer that declares nothing, every
+     library dropdown and select renders Tailwind stock — measured,
+     `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` for shadow-lg — which
+     is far heavier and greyer than anything this brand ships. Nothing errors and
+     nothing looks broken; the components are just not on the brand.
+
+     The console was carrying three lines exactly like these in its own
+     globals.css to hold this package's components on this package's elevation.
+     A consumer paying to fix the library is the shape #149, #150 and #151 all
+     had, and the answer is the same: it belongs in the token file.
+
+     Forwarded, not repointed. The alternative was to rewrite the four component
+     class strings onto `shadow-card` / `shadow-raised`, which would have changed
+     the compiled class NAMES and so changed what the console renders today. This
+     way the compiled rules are byte-identical to what the console's own forwards
+     produce, and every other consumer gets the brand values without knowing this
+     was ever a problem. Proof in docs/test-results/.
+
+     The role mapping is the console's, unchanged: sm and md are the card
+     elevation, lg is the overlay lift. sm and md landing on one value is not an
+     oversight — this system contains one card elevation, and the console had
+     already collapsed its own three-tier ramp onto it.
+
+     xs, xl and 2xl are deliberately left on Tailwind stock. No component here
+     uses them, and forwarding a rung nothing consumes is a value invented to
+     complete a grid.
+
+     KNOWN: a forwarded rung loses Tailwind's --tw-shadow-color fallback, so
+     `shadow-red-500/20` stops tinting shadow-md. That is already true of
+     shadow-card and shadow-raised, and this palette has no colour a shadow would
+     be tinted with. */
+  --shadow-sm: var(--cg-shadow-card);
+  --shadow-md: var(--cg-shadow-card);
+  --shadow-lg: var(--cg-shadow-raised);
 
   /* ---- spacing ----
      --spacing sets the 4px base, so the numeric utilities (p-4, gap-6) line up

package/dist/tokens/base.json

@@ -52,7 +52,7 @@
     }
   },
   "state": {
-    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.",
+    "$description": "state: what an entity IS, not what it means editorially.\n\nAdopted from the Console rather than invented, 2026-08-24 (#96). The Console\nhad already chosen and contrast-tested these — --color-live and\n--color-attention — while the brand carried no state colour at all beyond the\ndanger placeholder. Taking its values means the Console's appearance does not\nchange when it starts consuming this package, and the two stop disagreeing\nabout what 'live' looks like.\n\nEach carries per-surface values in surface-panel and surface-ink, for the same\nreason danger does: measured against all three grounds, no single value works.\nThe live green is 1.72:1 on the purple panel, and the brand's own lime is\n1.54:1 on white. A flat value would be invisible somewhere.\n\nNo --cg-offline-fill, deliberately. Measured, the pair does not work: the\nmuted neutral on a neutral tint is 2.90:1, under the 3:1 bar for a dot or a\nborder. Rather than invent a value to satisfy the ratio, an unplugged chip\nuses the existing surface-card ground with border-control, and --cg-offline\nis the dot on that ground, where it measures 3.28:1. Absence of state should\nnot need a colour of its own.\n\npending joined them on 2026-08-24 (#114) as an ALIAS of expired rather than a\nnew value. Same amber today, separate name, so the two can diverge later with\na one-line edit here and no change in any consumer. Aliases compile to var(),\nso the flip survives.\n\nunhealthy joined them on 2026-08-25 (#122) as a REAL value, not an alias, and\nit is the one tone here that was searched for rather than adopted. Founder\ndecision: expired is terminal, unhealthy is live-and-fixable, and sharing a\ntoken would mean retuning one silently retunes the other. It is a warmer,\nbrighter gold on the same ramp as the amber rather than a new hue family,\nbecause green/amber/red is the traffic light an operator already reads and\n'serving but degraded' is its middle rung. Its own note carries the numbers\nand the three families that were measured and rejected.\n\nTHREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a\nhairline around it, a dot and a word, and until now the set carried only the\nfirst two of those four. -border is the hairline and -strong is the word; the\nbare name stays the dot it has always been.\n\n  <status>-fill     the chip ground\n  <status>-border   the hairline around it, a pale tint\n  <status>          the dot. An indicator, so 3:1, never text\n  <status>-strong   the word on the fill. Text, so 4.5:1\n\nThe values are the Console's, measured and shipped, not new ones: #149 asked\nfor the rung and console#579 had already been forced to leave two bands as\nliterals for the want of it. Only unhealthy-strong and danger-strong are\nderived, each for a stated reason in its own note.\n\nFOUR RUNGS PER STATUS as of 2026-09-05 (#154). --cg-danger-border and\n--cg-unhealthy-border were the two holes #152 left, on the reasoning above: at\nthe time nothing drew either one, so a value would have been invented to complete\na grid rather than to serve a chip. That note said what would change the answer —\n\"add them when something needs them, with the number that made the choice\" — and\nthis is it. Both are DERIVED rather than adopted, because neither has a shipped\nliteral anywhere, and each carries its number in its own note.\n\nThe derivation is one rule, and it is the two adopted borders' own measured\nposition rather than a recipe: a -border is its own tone's hue, at the lightness\nthat reproduces the 1.18-1.19:1 those two hold against their own fills, carrying\nthe mean of their chroma (OKLCH 0.0998) or the most sRGB has at that hue and\nlightness, whichever is smaller. Danger's hue hits the second clause and\nunhealthy's does not; both notes show the sweep.\n\noffline has no -border and no -strong either, and for the reason it has no\nfill: an unplugged chip sits on the card ground with border-control, and its\nword is --cg-text-primary. Absence of state still does not need a colour.\n\nOn the panel and on ink, -border resolves to the surface's own hairline and\n-strong to its own primary text. A dark ground has no darker rung to reach for,\nand the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's\nchip fill, which is a dot and not a word. Worth knowing before retuning: on ink\nthe tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who\nwants the word tinted there changes five entries in surface-ink.json. On the\npanel it is not available at any value — white is 4.31:1 on that fill and white\nis the lightest colour there is, so AA on a panel chip needs the FILL to move.",
     "online": {
       "$value": "#00a05c",
       "$type": "color",
@@ -149,6 +149,104 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "#abefc6",
+      "$type": "color",
+      "$description": "The hairline around an online chip. From the Console's OK band, where it has\nshipped as #abefc6 on #ecfdf3 (console#579).\n\nIts own rung rather than the tone, and console#579 is why. Both systems carried\n{tone, fill} pairs and no third value, so converting the band meant sending the\nborder AND the word to --cg-online. Measured, that is not a repaint: the word\nfell from 7.55:1 to 3.06:1 and the border went from this pale tint to full\nsaturation. The band stayed a literal instead. This token is what lets it move.\n\n1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so\nthere is no floor it has to clear; what it has to do is stay pale, which the\ncontrast guardrail holds with a ceiling rather than a floor.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "#fedf89",
+      "$type": "color",
+      "$description": "The hairline around an expired or pending chip. From the Console's WARN band,\nwhere it has shipped as #fedf89 on #fffaeb (console#579).\n\n1.18:1 against --cg-expired-fill. Same rung and same reasoning as\n--cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is\nthe tone doing the border's job.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "unhealthy-border": {
+      "$value": "#eee596",
+      "$type": "color",
+      "$description": "The hairline around an unhealthy chip. 1.19:1 against --cg-unhealthy-fill and\n1.28:1 on white.\n\nDERIVED, like unhealthy-strong and for the same reason: unhealthy is the one\ntone here the Console never had, so there is no shipped literal to take.\n\nThe rule is the two adopted borders' own position, measured rather than\ninvented. #abefc6 and #fedf89 are not mixes of their tone and their fill — the\nclosest sRGB mix reproduces them at dE2000 5.5 and 13.1 — but they sit in one\nnarrow band: OKLCH L 0.8958 and 0.9112, chroma 0.0886 and 0.1109, and 1.19:1\nand 1.18:1 against their own fills. So a new border is its own tone's hue at the\nlightness that reproduces that ratio, carrying the mean of their chroma (0.0998)\nor the most sRGB has at that hue and lightness, whichever is smaller. Here the\nhue has room: L 0.911, C 0.0998, H 102.17.\n\nKNOWN, measured before it was accepted rather than after: dE2000 6.3 from\nexpired-border, which is far under the 16.5 floor the tones in this palette were\nchosen against. It is not a defect, and the reason is that this rung already\nbehaves this way — expired-fill and unhealthy-fill ship 2.4 apart, so the border\nis MORE separated than the ground it surrounds. 16.5 is a floor for the rungs\nthat carry the signal, the dot and the word, which measure 22.3 and 20.6 for this\npair. At the pale end an amber and a gold are the same colour: swept across the\nwhole hue's usable chroma, the best separation available anywhere in the band is\n11.6, and buying it costs the pale tint that IS this rung's definition. Same\nfinding #122 recorded for the tones on a dark ground.\n\nNot an alias of expired-border, though the two are close enough that it would\nrender almost identically today. #122's whole decision was that unhealthy must\nnot be an alias of expired: a designer retuning one must not silently retune the\nother.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "#ffd3cd",
+      "$type": "color",
+      "$description": "The hairline around a danger chip. 1.19:1 against --cg-danger-fill and 1.35:1 on\nwhite.\n\nDERIVED by the rule unhealthy-border's note sets out, and the interesting part is\nwhere the rule runs out. --cg-danger is OKLCH H 27.03, and at the lightness the\nrule asks for, sRGB carries at most C 0.0506 on that hue — half the 0.0998 the\ntwo adopted borders carry. There is no paler red with more chroma; the gamut\nends. So this is the second clause of the rule doing its work: L 0.904 at the\nmost chroma available, which puts the red channel at 255.\n\nMeasured across the band, so the choice is visible:\n\n  L 0.896  maxC 0.0551  #ffd0c9  1.22:1 on fill\n  L 0.904  maxC 0.0506  #ffd3cd  1.19:1 on fill   <- taken\n  L 0.912  maxC 0.0461  #ffd7d2  1.16:1 on fill\n\ndE2000 to its neighbours in this rung: 38.6 from online-border, 27.3 from\nunhealthy-border, 25.0 from expired-border. It is the best separated of the four,\nwhich is the right way round — a failed chip is the one a reader must not\nmisread.\n\n#152 declined to add this, and correctly: at the time nothing drew it, and the\n`state` group's note says a value would then be invented to complete a grid\nrather than to serve a chip. That note also says what would change the answer —\n\"add them when something needs them, with the number that made the choice\" — and\nui#154 is that. The number is above.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$description": "The hairline around a pending chip, aliased to expired's for the same reason the\ntone and the fill are. Splitting pending from expired later means editing the\nfour pending entries in this file and nothing else.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "#085d3a",
+      "$type": "color",
+      "$description": "The WORD on an online chip, and online as running text anywhere. From the\nConsole's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.\n\nThis is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on\nwhite and 3.06:1 on its own fill, which is an indicator and not a foreground, so\nthe component paints the dot with the tone and the word with --cg-text-primary,\nand its own note says a state foreground is a brand decision rather than a\ncomponent's to take. This is that decision, made with a value the Console has\nalready shipped rather than a new one.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "#7a3d0a",
+      "$type": "color",
+      "$description": "The word on an expired chip, and expired as running text. From the Console's\nWARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$description": "The word on a pending chip. Aliased to expired's, like every other pending rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "#5d5401",
+      "$type": "color",
+      "$description": "The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on\nwhite.\n\nDERIVED, not adopted. unhealthy is the one tone here the Console never had, so\nthere is no shipped literal to take. This is --cg-unhealthy darkened along its\nown hue and saturation until it reaches the band the two adopted words already\noccupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather\nthan stopped at the first value that clears 4.5:1, so the words read as one set\ninstead of three matched and one nearly failing.\n\nThe tone is not simply reused because it does not clear the bar: --cg-unhealthy\nmeasures 4.46:1 on this fill. Four hundredths under the floor is under it.\n\ndE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from\nonline-strong. The tightest pair in the whole rung is expired-strong against\ndanger-strong at 19.8, above the 16.5 floor this palette was measured against.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "#c42828",
+      "$type": "color",
+      "$description": "The word on a danger chip, and danger as running text. 5.02:1 on\n--cg-danger-fill and 5.70:1 on white.\n\n--cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own\nfill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails\nas a sentence. The token is deliberately NOT moved to fix that: every fill,\nborder and icon already consuming it would repaint, and the error is that danger\nhad no word rung, not that its tone is wrong.\n\nThe Console's retired --color-error #d42b2b is where this starts and is not\nwhere it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still\nunder the floor on the exact chip that needs it. This is that red darkened along\nits own hue and saturation until it clears 5:1 on the fill, which is the\nsmallest move that holds on both grounds.\n\nKept lighter than the other three words on purpose. It is already the closest\npair in the rung, dE2000 19.8 from expired-strong, and darkening it into their\n7:1 band closes that to 16.6 — a failed chip and an expiring one should not\nconverge.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "brand-derived": {
@@ -210,6 +308,16 @@
         }
       }
     },
+    "neutral-50": {
+      "$value": "#f4f6f8",
+      "$type": "color",
+      "$description": "SOURCE: the Console's --color-canvas, the recessed ground behind a card.\n\nNot a pure grey. It carries a slight blue cast where the rest of this ramp is\nneutral, and that is recorded rather than corrected because the value is what\nlegacy raised panels already render and matching them is the point (#151).",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-neutral-50"
+        }
+      }
+    },
     "neutral-100": {
       "$value": "#f1f1f1",
       "$type": "color",
@@ -304,6 +412,15 @@
         }
       }
     },
+    "surface-raised": {
+      "$value": "{neutrals.neutral-50}",
+      "$description": "A neutral ground one step off white, for a panel that should read as lifted off\nthe page rather than flat on it.\n\n#151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,\nso a raised panel had no value-preserving target and every consumer faced the\nsame three-way choice with no right answer — flatten it to white, tint it\nlavender, or pin a literal. This is the fourth answer, and it is the Console's\nown #f4f6f8 rather than a new value.\n\nDeclared at :root only, like --cg-surface-subtle and --cg-surface-control. The\nneutral grounds do not flip: inside a purple panel or on ink, depth is carried\nby --cg-surface-card and the hairline instead. Making it flip is one entry in\neach of the two surface sets.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-surface-raised"
+        }
+      }
+    },
     "surface-control": {
       "$value": "{neutrals.neutral-200}",
       "$extensions": {
@@ -1082,6 +1199,16 @@
           "css": "--cg-ring-focus"
         }
       }
+    },
+    "ring-live": {
+      "$value": "0 0 0 4px var(--cg-live-halo)",
+      "$description": "The live dot's halo as a ready-made box-shadow, so a surface draws the mark with\none token instead of restating the geometry.\n\nSame pair as --cg-focus-ring and --cg-ring-focus above: the colour lives in the\nindicator group, the shadow that spends it lives here. 4px rather than the focus\nring's 3px because that is the spread the mark ships at — the Console writes\n`box-shadow: 0 0 0 4px var(--color-volt-ring)` at all seven call sites, so the\ngeometry was already one value repeated seven times and is now one token.\n\nA dot larger than 8px wants a larger halo; that is a call site's business, and it\nsets its own box-shadow with --cg-live-halo rather than this rung.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "raw": true,
+          "css": "--cg-ring-live"
+        }
+      }
     }
   },
   "motion": {
@@ -1164,30 +1291,30 @@
     "volt": {
       "$value": "#b6ff2e",
       "$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 the ring and, in a pill, with volt-ink. 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\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.",
       "$extensions": {
         "io.cloudgrid": {
           "css": "--cg-volt"
         }
       }
     },
-    "volt-ring": {
-      "$value": "rgba(182, 255, 46, 0.32)",
+    "volt-ink": {
+      "$value": "#243d00",
       "$type": "color",
-      "$description": "The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above.",
+      "$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.",
       "$extensions": {
         "io.cloudgrid": {
-          "css": "--cg-volt-ring"
+          "css": "--cg-volt-ink"
         }
       }
     },
-    "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.",
+    "live-halo": {
+      "$value": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
+      "$description": "The soft ring around a live dot. The other half of the mark --cg-volt's note\ndescribes: \"the dot in its halo\".\n\nDERIVED FROM THE DOT, not written out, and that is the whole reason this exists\nrather than the value being pasted back. Computed it is the Console's own\nrgba(182, 255, 46, 0.32) — 32% of #b6ff2e over white is #e8ffbc, which is what\nships today — but written as a literal it would be a third place #b6ff2e is\nspelled out, and the next volt retune would leave an old-hue halo around a\nnew-hue dot with nothing anywhere going red.\n\nA ROLE name rather than --cg-volt-ring, which #149 purged as volt residue. The\npurge was right about this package (nothing here read it) and the name was the\nresidue: a token named for the hue cannot survive the hue being renamed, and\n--cg-volt's own note records that which lime the brand owns is still open. This\none is deliberately downstream of that question — whatever answers it, the halo\nfollows.\n\nWhat the purge missed is that the Console DOES read it, seven times: .cg-live-dot\nplus StatusChip, DiscoverRails, EngagementHeadline, MyStuffLoopStrip,\nViewsTrendChart and GridStatusBoard, each setting the dot and its box-shadow\ntogether. console#591 kept all three volt names rather than convert two thirds of\none mark, which is what ui#154 reports.\n\nNo contrast obligation of its own: it is a halo, not a foreground, and the dot it\nsurrounds is the signal. Declared at :root only, like --cg-volt itself, because a\nbrand mark is not a state and does not flip per surface.",
       "$extensions": {
         "io.cloudgrid": {
-          "css": "--cg-volt-ink"
+          "raw": true,
+          "css": "--cg-live-halo"
         }
       }
     },

package/dist/tokens/surface-ink.json

@@ -134,7 +134,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#5FD99A",
       "$type": "color",
@@ -232,6 +232,88 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "unhealthy-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens/surface-panel.json

@@ -118,7 +118,7 @@
     }
   },
   "state": {
-    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.",
+    "$description": "state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.\n\nThe -border and -strong rungs (#149, #150) are the exception to \"measured per surface\": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is.",
     "online": {
       "$value": "#C8F5DC",
       "$type": "color",
@@ -216,6 +216,88 @@
           "css": "--cg-danger-fill"
         }
       }
+    },
+    "online-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-border"
+        }
+      }
+    },
+    "expired-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-border"
+        }
+      }
+    },
+    "unhealthy-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-border"
+        }
+      }
+    },
+    "danger-border": {
+      "$value": "{semantic-lines.border-hairline}",
+      "$description": "The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline.",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-border"
+        }
+      }
+    },
+    "pending-border": {
+      "$value": "{state.expired-border}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-border"
+        }
+      }
+    },
+    "online-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-online-strong"
+        }
+      }
+    },
+    "expired-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-expired-strong"
+        }
+      }
+    },
+    "pending-strong": {
+      "$value": "{state.expired-strong}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-pending-strong"
+        }
+      }
+    },
+    "unhealthy-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-unhealthy-strong"
+        }
+      }
+    },
+    "danger-strong": {
+      "$value": "{semantic-text.text-primary}",
+      "$extensions": {
+        "io.cloudgrid": {
+          "css": "--cg-danger-strong"
+        }
+      }
     }
   },
   "indicator": {

package/dist/tokens.css

@@ -107,7 +107,50 @@
      brighter gold on the same ramp as the amber rather than a new hue family,
      because green/amber/red is the traffic light an operator already reads and
      'serving but degraded' is its middle rung. Its own note carries the numbers
-     and the three families that were measured and rejected. */
+     and the three families that were measured and rejected.
+
+     THREE RUNGS PER STATUS, from 2026-09-04 (#149, #150). A chip is a fill, a
+     hairline around it, a dot and a word, and until now the set carried only the
+     first two of those four. -border is the hairline and -strong is the word; the
+     bare name stays the dot it has always been.
+
+       <status>-fill     the chip ground
+       <status>-border   the hairline around it, a pale tint
+       <status>          the dot. An indicator, so 3:1, never text
+       <status>-strong   the word on the fill. Text, so 4.5:1
+
+     The values are the Console's, measured and shipped, not new ones: #149 asked
+     for the rung and console#579 had already been forced to leave two bands as
+     literals for the want of it. Only unhealthy-strong and danger-strong are
+     derived, each for a stated reason in its own note.
+
+     FOUR RUNGS PER STATUS as of 2026-09-05 (#154). --cg-danger-border and
+     --cg-unhealthy-border were the two holes #152 left, on the reasoning above: at
+     the time nothing drew either one, so a value would have been invented to complete
+     a grid rather than to serve a chip. That note said what would change the answer —
+     "add them when something needs them, with the number that made the choice" — and
+     this is it. Both are DERIVED rather than adopted, because neither has a shipped
+     literal anywhere, and each carries its number in its own note.
+
+     The derivation is one rule, and it is the two adopted borders' own measured
+     position rather than a recipe: a -border is its own tone's hue, at the lightness
+     that reproduces the 1.18-1.19:1 those two hold against their own fills, carrying
+     the mean of their chroma (OKLCH 0.0998) or the most sRGB has at that hue and
+     lightness, whichever is smaller. Danger's hue hits the second clause and
+     unhealthy's does not; both notes show the sweep.
+
+     offline has no -border and no -strong either, and for the reason it has no
+     fill: an unplugged chip sits on the card ground with border-control, and its
+     word is --cg-text-primary. Absence of state still does not need a colour.
+
+     On the panel and on ink, -border resolves to the surface's own hairline and
+     -strong to its own primary text. A dark ground has no darker rung to reach for,
+     and the light tints these scopes carry measure 3.03:1 to 3.60:1 on the panel's
+     chip fill, which is a dot and not a word. Worth knowing before retuning: on ink
+     the tints DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so a designer who
+     wants the word tinted there changes five entries in surface-ink.json. On the
+     panel it is not available at any value — white is 4.31:1 on that fill and white
+     is the lightest colour there is, so AA on a panel chip needs the FILL to move. */
   /*
      Serving. From the Console's --color-live. 3.40:1 on white — clears the 3:1 bar for an indicator, which is all this is ever used as. Never body text on white. */
   --cg-online: #00a05c;
@@ -162,6 +205,150 @@
   /*
      From the Console's --color-error-fill. --cg-danger measures 3.72:1 on it. danger had no fill before; a chip needs one. */
   --cg-danger-fill: #fceded;
+  /*
+     The hairline around an online chip. From the Console's OK band, where it has
+     shipped as #abefc6 on #ecfdf3 (console#579).
+
+     Its own rung rather than the tone, and console#579 is why. Both systems carried
+     {tone, fill} pairs and no third value, so converting the band meant sending the
+     border AND the word to --cg-online. Measured, that is not a repaint: the word
+     fell from 7.55:1 to 3.06:1 and the border went from this pale tint to full
+     saturation. The band stayed a literal instead. This token is what lets it move.
+
+     1.19:1 against --cg-online-fill. A hairline is not text and not an indicator, so
+     there is no floor it has to clear; what it has to do is stay pale, which the
+     contrast guardrail holds with a ceiling rather than a floor. */
+  --cg-online-border: #abefc6;
+  /*
+     The hairline around an expired or pending chip. From the Console's WARN band,
+     where it has shipped as #fedf89 on #fffaeb (console#579).
+
+     1.18:1 against --cg-expired-fill. Same rung and same reasoning as
+     --cg-online-border: collapsing it onto --cg-expired measured 3.99:1, which is
+     the tone doing the border's job. */
+  --cg-expired-border: #fedf89;
+  /*
+     The hairline around an unhealthy chip. 1.19:1 against --cg-unhealthy-fill and
+     1.28:1 on white.
+
+     DERIVED, like unhealthy-strong and for the same reason: unhealthy is the one
+     tone here the Console never had, so there is no shipped literal to take.
+
+     The rule is the two adopted borders' own position, measured rather than
+     invented. #abefc6 and #fedf89 are not mixes of their tone and their fill — the
+     closest sRGB mix reproduces them at dE2000 5.5 and 13.1 — but they sit in one
+     narrow band: OKLCH L 0.8958 and 0.9112, chroma 0.0886 and 0.1109, and 1.19:1
+     and 1.18:1 against their own fills. So a new border is its own tone's hue at the
+     lightness that reproduces that ratio, carrying the mean of their chroma (0.0998)
+     or the most sRGB has at that hue and lightness, whichever is smaller. Here the
+     hue has room: L 0.911, C 0.0998, H 102.17.
+
+     KNOWN, measured before it was accepted rather than after: dE2000 6.3 from
+     expired-border, which is far under the 16.5 floor the tones in this palette were
+     chosen against. It is not a defect, and the reason is that this rung already
+     behaves this way — expired-fill and unhealthy-fill ship 2.4 apart, so the border
+     is MORE separated than the ground it surrounds. 16.5 is a floor for the rungs
+     that carry the signal, the dot and the word, which measure 22.3 and 20.6 for this
+     pair. At the pale end an amber and a gold are the same colour: swept across the
+     whole hue's usable chroma, the best separation available anywhere in the band is
+     11.6, and buying it costs the pale tint that IS this rung's definition. Same
+     finding #122 recorded for the tones on a dark ground.
+
+     Not an alias of expired-border, though the two are close enough that it would
+     render almost identically today. #122's whole decision was that unhealthy must
+     not be an alias of expired: a designer retuning one must not silently retune the
+     other. */
+  --cg-unhealthy-border: #eee596;
+  /*
+     The hairline around a danger chip. 1.19:1 against --cg-danger-fill and 1.35:1 on
+     white.
+
+     DERIVED by the rule unhealthy-border's note sets out, and the interesting part is
+     where the rule runs out. --cg-danger is OKLCH H 27.03, and at the lightness the
+     rule asks for, sRGB carries at most C 0.0506 on that hue — half the 0.0998 the
+     two adopted borders carry. There is no paler red with more chroma; the gamut
+     ends. So this is the second clause of the rule doing its work: L 0.904 at the
+     most chroma available, which puts the red channel at 255.
+
+     Measured across the band, so the choice is visible:
+
+       L 0.896  maxC 0.0551  #ffd0c9  1.22:1 on fill
+       L 0.904  maxC 0.0506  #ffd3cd  1.19:1 on fill   <- taken
+       L 0.912  maxC 0.0461  #ffd7d2  1.16:1 on fill
+
+     dE2000 to its neighbours in this rung: 38.6 from online-border, 27.3 from
+     unhealthy-border, 25.0 from expired-border. It is the best separated of the four,
+     which is the right way round — a failed chip is the one a reader must not
+     misread.
+
+     #152 declined to add this, and correctly: at the time nothing drew it, and the
+     `state` group's note says a value would then be invented to complete a grid
+     rather than to serve a chip. That note also says what would change the answer —
+     "add them when something needs them, with the number that made the choice" — and
+     ui#154 is that. The number is above. */
+  --cg-danger-border: #ffd3cd;
+  /*
+     The hairline around a pending chip, aliased to expired's for the same reason the
+     tone and the fill are. Splitting pending from expired later means editing the
+     four pending entries in this file and nothing else. */
+  --cg-pending-border: var(--cg-expired-border);
+  /*
+     The WORD on an online chip, and online as running text anywhere. From the
+     Console's OK band. 7.17:1 on --cg-online-fill and 7.96:1 on white.
+
+     This is the rung EntityStatus said the library lacked. --cg-online is 3.40:1 on
+     white and 3.06:1 on its own fill, which is an indicator and not a foreground, so
+     the component paints the dot with the tone and the word with --cg-text-primary,
+     and its own note says a state foreground is a brand decision rather than a
+     component's to take. This is that decision, made with a value the Console has
+     already shipped rather than a new one. */
+  --cg-online-strong: #085d3a;
+  /*
+     The word on an expired chip, and expired as running text. From the Console's
+     WARN band. 7.63:1 on --cg-expired-fill and 8.40:1 on white. */
+  --cg-expired-strong: #7a3d0a;
+  /*
+     The word on a pending chip. Aliased to expired's, like every other pending rung. */
+  --cg-pending-strong: var(--cg-expired-strong);
+  /*
+     The word on an unhealthy chip. 7.10:1 on --cg-unhealthy-fill and 7.68:1 on
+     white.
+
+     DERIVED, not adopted. unhealthy is the one tone here the Console never had, so
+     there is no shipped literal to take. This is --cg-unhealthy darkened along its
+     own hue and saturation until it reaches the band the two adopted words already
+     occupy — 7.17:1 for online and 7.63:1 for expired on their own fills — rather
+     than stopped at the first value that clears 4.5:1, so the words read as one set
+     instead of three matched and one nearly failing.
+
+     The tone is not simply reused because it does not clear the bar: --cg-unhealthy
+     measures 4.46:1 on this fill. Four hundredths under the floor is under it.
+
+     dE2000 to its neighbours in this rung: 20.6 from expired-strong, 23.1 from
+     online-strong. The tightest pair in the whole rung is expired-strong against
+     danger-strong at 19.8, above the 16.5 floor this palette was measured against. */
+  --cg-unhealthy-strong: #5d5401;
+  /*
+     The word on a danger chip, and danger as running text. 5.02:1 on
+     --cg-danger-fill and 5.70:1 on white.
+
+     --cg-danger itself is #E53935, which is 4.23:1 on white and 3.72:1 on its own
+     fill. It passes as a fill, a border or an icon, where the bar is 3:1, and fails
+     as a sentence. The token is deliberately NOT moved to fix that: every fill,
+     border and icon already consuming it would repaint, and the error is that danger
+     had no word rung, not that its tone is wrong.
+
+     The Console's retired --color-error #d42b2b is where this starts and is not
+     where it lands. It is 5.02:1 on white, but 4.42:1 on --cg-danger-fill — still
+     under the floor on the exact chip that needs it. This is that red darkened along
+     its own hue and saturation until it clears 5:1 on the fill, which is the
+     smallest move that holds on both grounds.
+
+     Kept lighter than the other three words on purpose. It is already the closest
+     pair in the rung, dE2000 19.8 from expired-strong, and darkening it into their
+     7:1 band closes that to 16.6 — a failed chip and an expiring one should not
+     converge. */
+  --cg-danger-strong: #c42828;
 
   /* ---- brand-derived ----
      brand derived (interaction only) */
@@ -174,6 +361,13 @@
   --cg-neutral-0: #ffffff;
   /* SOURCE: alternate page wash */
   --cg-lavender-50: #f2f1f7;
+  /*
+     SOURCE: the Console's --color-canvas, the recessed ground behind a card.
+
+     Not a pure grey. It carries a slight blue cast where the rest of this ramp is
+     neutral, and that is recorded rather than corrected because the value is what
+     legacy raised panels already render and matching them is the point (#151). */
+  --cg-neutral-50: #f4f6f8;
   /* SOURCE: hairline / card border */
   --cg-neutral-100: #f1f1f1;
   /* SOURCE: control border, inactive pill fill */
@@ -192,6 +386,21 @@
   --cg-surface-page-alt: var(--cg-lavender-50);
   --cg-surface-card: var(--cg-neutral-0);
   --cg-surface-subtle: var(--cg-lavender-50);
+  /*
+     A neutral ground one step off white, for a panel that should read as lifted off
+     the page rather than flat on it.
+
+     #151: --cg-surface-card is #ffffff and --cg-surface-subtle is the lavender tint,
+     so a raised panel had no value-preserving target and every consumer faced the
+     same three-way choice with no right answer — flatten it to white, tint it
+     lavender, or pin a literal. This is the fourth answer, and it is the Console's
+     own #f4f6f8 rather than a new value.
+
+     Declared at :root only, like --cg-surface-subtle and --cg-surface-control. The
+     neutral grounds do not flip: inside a purple panel or on ink, depth is carried
+     by --cg-surface-card and the hairline instead. Making it flip is one entry in
+     each of the two surface sets. */
+  --cg-surface-raised: var(--cg-neutral-50);
   --cg-surface-control: var(--cg-neutral-200);
   --cg-surface-panel: var(--cg-primary);
   --cg-surface-code: var(--cg-ink);
@@ -326,6 +535,19 @@
   --cg-shadow-hover: 0 8px 24px rgba(34, 34, 34, 0.08);
   --cg-shadow-panel: 0 10px 40px rgba(90, 71, 240, 0.18);
   --cg-ring-focus: 0 0 0 3px var(--cg-focus-ring);
+  /*
+     The live dot's halo as a ready-made box-shadow, so a surface draws the mark with
+     one token instead of restating the geometry.
+
+     Same pair as --cg-focus-ring and --cg-ring-focus above: the colour lives in the
+     indicator group, the shadow that spends it lives here. 4px rather than the focus
+     ring's 3px because that is the spread the mark ships at — the Console writes
+     `box-shadow: 0 0 0 4px var(--color-volt-ring)` at all seven call sites, so the
+     geometry was already one value repeated seven times and is now one token.
+
+     A dot larger than 8px wants a larger halo; that is a call site's business, and it
+     sets its own box-shadow with --cg-live-halo rather than this rung. */
+  --cg-ring-live: 0 0 0 4px var(--cg-live-halo);
 
   /* ---- motion ----
      motion: small and quick, nothing slides in */
@@ -353,7 +575,7 @@
 
      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 the ring and, in a pill, with volt-ink. Recorded rather than
+     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.
 
@@ -368,9 +590,6 @@
      and until it is answered volt is the Console's brand mark and online is the
      entity's state. */
   --cg-volt: #b6ff2e;
-  /*
-     The halo behind a volt dot. Its job is to make the dot findable on a light ground, which is what carries the 1.21:1 above. */
-  --cg-volt-ring: rgba(182, 255, 46, 0.32);
   /*
      Text and glyphs ON volt. 9.95:1 against it — the one part of the volt family that
      is comfortably legible.
@@ -382,6 +601,34 @@
      and belongs to volt. Adding a state -ink is still a brand decision and still
      open. */
   --cg-volt-ink: #243d00;
+  /*
+     The soft ring around a live dot. The other half of the mark --cg-volt's note
+     describes: "the dot in its halo".
+
+     DERIVED FROM THE DOT, not written out, and that is the whole reason this exists
+     rather than the value being pasted back. Computed it is the Console's own
+     rgba(182, 255, 46, 0.32) — 32% of #b6ff2e over white is #e8ffbc, which is what
+     ships today — but written as a literal it would be a third place #b6ff2e is
+     spelled out, and the next volt retune would leave an old-hue halo around a
+     new-hue dot with nothing anywhere going red.
+
+     A ROLE name rather than --cg-volt-ring, which #149 purged as volt residue. The
+     purge was right about this package (nothing here read it) and the name was the
+     residue: a token named for the hue cannot survive the hue being renamed, and
+     --cg-volt's own note records that which lime the brand owns is still open. This
+     one is deliberately downstream of that question — whatever answers it, the halo
+     follows.
+
+     What the purge missed is that the Console DOES read it, seven times: .cg-live-dot
+     plus StatusChip, DiscoverRails, EngagementHeadline, MyStuffLoopStrip,
+     ViewsTrendChart and GridStatusBoard, each setting the dot and its box-shadow
+     together. console#591 kept all three volt names rather than convert two thirds of
+     one mark, which is what ui#154 reports.
+
+     No contrast obligation of its own: it is a halo, not a foreground, and the dot it
+     surrounds is the signal. Declared at :root only, like --cg-volt itself, because a
+     brand mark is not a state and does not flip per surface. */
+  --cg-live-halo: color-mix(in srgb, var(--cg-volt) 32%, transparent);
   /*
      The wash behind a modal or overlay. Uses the BRAND ink (#222222) rather than the
      Console's (#16181d) — a scrim sits above content and belongs to the system, not
@@ -423,7 +670,9 @@
   --cg-danger: #FFDAD6;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      4.88:1 on the purple. The source green is 1.72:1 here — invisible, same class as the danger override. */
   --cg-online: #C8F5DC;
@@ -458,6 +707,20 @@
   /*
      Translucent white rather than a tint; the panel foreground measures 3.35:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.16);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-border: var(--cg-border-hairline);
+  /*
+     The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot. */
+  --cg-unhealthy-border: var(--cg-border-hairline);
+  /*
+     The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline. */
+  --cg-danger-border: var(--cg-border-hairline);
+  --cg-pending-border: var(--cg-expired-border);
+  --cg-online-strong: var(--cg-text-primary);
+  --cg-expired-strong: var(--cg-text-primary);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */
@@ -496,7 +759,9 @@
   --cg-danger: #FF8A80;
 
   /* ---- state ----
-     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground. */
+     state: the per-surface values for online/offline/expired. Same necessity as danger — measured, not assumed. pending is an alias of expired (#114), declared here so it flips rather than freezing to the base scope. unhealthy (#122) is a real value rather than an alias, and needs the same per-surface treatment for the same reason every other tone here does: its base gold is unreadable on this ground.
+
+     The -border and -strong rungs (#149, #150) are the exception to "measured per surface": they resolve to this surface's own hairline and its own primary text rather than to a tint of the tone. A dark ground has no darker rung, and the tints above are tuned to be dots — on the panel's chip fill they measure 3.03:1 to 3.60:1, which is an indicator and not a word. On ink they DO clear 4.5:1 on the ink fill (5.48:1 to 8.92:1), so tinting the word there is available and is five edits in this file; on the panel it is not available at any value, because white measures 4.31:1 on that fill and white is the lightest colour there is. */
   /*
      9.00:1 on #222. Ink has headroom, so this stays a recognisable green rather than washing to mint. */
   --cg-online: #5FD99A;
@@ -523,6 +788,20 @@
   --cg-unhealthy-fill: rgba(255, 255, 255, 0.08);
   /* Translucent white; the ink foreground measures 5.45:1 on it. */
   --cg-danger-fill: rgba(255, 255, 255, 0.08);
+  --cg-online-border: var(--cg-border-hairline);
+  --cg-expired-border: var(--cg-border-hairline);
+  /*
+     The hairline around an unhealthy chip on this surface. The surface's own hairline, for the reason online-border and expired-border take it: a dark ground has no paler rung of the tone to reach for, and the light tint this scope carries is a dot. */
+  --cg-unhealthy-border: var(--cg-border-hairline);
+  /*
+     The hairline around a danger chip on this surface. Same rule as every other -border here: the surface's own hairline. */
+  --cg-danger-border: var(--cg-border-hairline);
+  --cg-pending-border: var(--cg-expired-border);
+  --cg-online-strong: var(--cg-text-primary);
+  --cg-expired-strong: var(--cg-text-primary);
+  --cg-pending-strong: var(--cg-expired-strong);
+  --cg-unhealthy-strong: var(--cg-text-primary);
+  --cg-danger-strong: var(--cg-text-primary);
 
   /* ---- indicator ----
      indicator + chrome: only hover flips. A dark wash is invisible on a dark ground. */

package/dist/tokens.json

@@ -18,12 +18,23 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "#fdf6df",
       "--cg-danger-fill": "#fceded",
+      "--cg-online-border": "#abefc6",
+      "--cg-expired-border": "#fedf89",
+      "--cg-unhealthy-border": "#eee596",
+      "--cg-danger-border": "#ffd3cd",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "#085d3a",
+      "--cg-expired-strong": "#7a3d0a",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "#5d5401",
+      "--cg-danger-strong": "#c42828",
       "--cg-primary-press": "#4b39db",
       "--cg-primary-tint": "#eeecfe",
       "--cg-secondary-press": "#a6cf57",
       "--cg-tertiary-press": "#4dd8e0",
       "--cg-neutral-0": "#ffffff",
       "--cg-lavender-50": "#f2f1f7",
+      "--cg-neutral-50": "#f4f6f8",
       "--cg-neutral-100": "#f1f1f1",
       "--cg-neutral-200": "#e3e3e3",
       "--cg-neutral-400": "#acacac",
@@ -34,6 +45,7 @@
       "--cg-surface-page-alt": "var(--cg-lavender-50)",
       "--cg-surface-card": "var(--cg-neutral-0)",
       "--cg-surface-subtle": "var(--cg-lavender-50)",
+      "--cg-surface-raised": "var(--cg-neutral-50)",
       "--cg-surface-control": "var(--cg-neutral-200)",
       "--cg-surface-panel": "var(--cg-primary)",
       "--cg-surface-code": "var(--cg-ink)",
@@ -118,6 +130,7 @@
       "--cg-shadow-hover": "0 8px 24px rgba(34, 34, 34, 0.08)",
       "--cg-shadow-panel": "0 10px 40px rgba(90, 71, 240, 0.18)",
       "--cg-ring-focus": "0 0 0 3px var(--cg-focus-ring)",
+      "--cg-ring-live": "0 0 0 4px var(--cg-live-halo)",
       "--cg-duration-fast": "120ms",
       "--cg-duration": "180ms",
       "--cg-duration-slow": "280ms",
@@ -127,8 +140,8 @@
       "--cg-lift-hover": "translateY(-1px)",
       "--cg-press-scale": "0.985",
       "--cg-volt": "#b6ff2e",
-      "--cg-volt-ring": "rgba(182, 255, 46, 0.32)",
       "--cg-volt-ink": "#243d00",
+      "--cg-live-halo": "color-mix(in srgb, var(--cg-volt) 32%, transparent)",
       "--cg-scrim": "rgba(34, 34, 34, 0.4)",
       "--cg-hover": "rgba(34, 34, 34, 0.045)"
     },
@@ -155,6 +168,16 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.16)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.16)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-unhealthy-border": "var(--cg-border-hairline)",
+      "--cg-danger-border": "var(--cg-border-hairline)",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "var(--cg-text-primary)",
+      "--cg-expired-strong": "var(--cg-text-primary)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.10)"
     },
     "ink": {
@@ -182,6 +205,16 @@
       "--cg-pending-fill": "var(--cg-expired-fill)",
       "--cg-unhealthy-fill": "rgba(255, 255, 255, 0.08)",
       "--cg-danger-fill": "rgba(255, 255, 255, 0.08)",
+      "--cg-online-border": "var(--cg-border-hairline)",
+      "--cg-expired-border": "var(--cg-border-hairline)",
+      "--cg-unhealthy-border": "var(--cg-border-hairline)",
+      "--cg-danger-border": "var(--cg-border-hairline)",
+      "--cg-pending-border": "var(--cg-expired-border)",
+      "--cg-online-strong": "var(--cg-text-primary)",
+      "--cg-expired-strong": "var(--cg-text-primary)",
+      "--cg-pending-strong": "var(--cg-expired-strong)",
+      "--cg-unhealthy-strong": "var(--cg-text-primary)",
+      "--cg-danger-strong": "var(--cg-text-primary)",
       "--cg-hover": "rgba(255, 255, 255, 0.06)"
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",