@cyberskill/design 1.0.0 → 1.1.1

package/docs/contrast-report.md

@@ -1,10 +1,10 @@
 # Contrast report — elemental pairings (APCA)
 
-Generated 2026-07-22 · sweep at VERSION 1.0.0 pin.
+Generated 2026-07-27 · sweep at VERSION 1.1.1 pin.
 
 **Doctrine encoded by this sweep:** text sits on `-bright` or `-tint`, never on the mid-tone `-accent` — at any size. The accent is for bars, borders, progress fills, and non-text fills only. (Rule stated in `tokens/elements.css` and conventions.)
 
-Token nudges applied for v2.0: bright lightened for clay, hoa, lava, plasma, thủy, ocean, forest, titanium; `-on` flipped dark for lava, ocean, forest, titanium.
+Packs are generated from `tokens/element-seeds.json` (soft / middle / deep ladder, light↔dark hue lock). Geometry gate: `_audit/element-geometry.html`.
 | Scope | Pairing | fg / bg | Lc | Verdict |
 |---|---|---|---|---|
 | root (Thổ default) | text-accent on white (bold labels) | #6E3B0E / #FFFFFF | 90.7 | ✓ |
@@ -16,110 +16,98 @@ Token nudges applied for v2.0: bright lightened for clay, hoa, lava, plasma, th
 | tho | text-accent on tint (bold labels) | #6E3B0E / #FBF4E9 | 84.6 | ✓ |
 | tho | accent-bright on ink (headings) | #F4BA17 / #45210E | 66.3 | ✓ |
 | tho | accent-on on accent-bright (CTA text) | #45210E / #F4BA17 | 66.3 | ✓ |
-| tho | accent-bright on dark panel (dark labels) | #F4BA17 / #221710 | 69.2 | ✓ |
-| tho   · clay | text-accent on white (bold labels) | #8F5230 / #FFFFFF | 80.4 | ✓ |
-| tho   · clay | text-accent on tint (bold labels) | #8F5230 / #F8EDE4 | 70.7 | ✓ |
-| tho   · clay | accent-bright on ink (headings) | #EDBF9D / #2E1607 | 71.6 | ✓ |
-| tho   · clay | accent-on on accent-bright (CTA text) | #2E1607 / #EDBF9D | 72 | ✓ |
-| tho   · clay | accent-bright on dark panel (dark labels) | #EDBF9D / #221710 | 72 | ✓ |
-| tho   · sand | text-accent on white (bold labels) | #8A6F3C / #FFFFFF | 72.9 | ✓ |
-| tho   · sand | text-accent on tint (bold labels) | #8A6F3C / #FAF3E3 | 66 | ✓ |
-| tho   · sand | accent-bright on ink (headings) | #EFDCB2 / #3A2A10 | 82 | ✓ |
-| tho   · sand | accent-on on accent-bright (CTA text) | #3A2A10 / #EFDCB2 | 80.8 | ✓ |
-| tho   · sand | accent-bright on dark panel (dark labels) | #EFDCB2 / #221710 | 85.1 | ✓ |
-| hoa | text-accent on white (bold labels) | #A93E14 / #FFFFFF | 80 | ✓ |
-| hoa | text-accent on tint (bold labels) | #A93E14 / #FBEADF | 69.3 | ✓ |
-| hoa | accent-bright on ink (headings) | #F6A26B / #231007 | 62 | ✓ |
-| hoa | accent-on on accent-bright (CTA text) | #231007 / #F6A26B | 63.3 | ✓ |
-| hoa | accent-bright on dark panel (dark labels) | #F6A26B / #221710 | 61.6 | ✓ |
-| hoa   · lava | text-accent on white (bold labels) | #9B2D14 / #FFFFFF | 85.1 | ✓ |
-| hoa   · lava | text-accent on tint (bold labels) | #9B2D14 / #FAE5DC | 72.1 | ✓ |
-| hoa   · lava | accent-bright on ink (headings) | #F6AC85 / #1D0B05 | 66.5 | ✓ |
-| hoa   · lava | accent-on on accent-bright (CTA text) | #1D0B05 / #F6AC85 | 67.6 | ✓ |
-| hoa   · lava | accent-bright on dark panel (dark labels) | #F6AC85 / #221710 | 65.7 | ✓ |
-| hoa   · plasma | text-accent on white (bold labels) | #B02348 / #FFFFFF | 81.2 | ✓ |
-| hoa   · plasma | text-accent on tint (bold labels) | #B02348 / #FBE6EB | 69.3 | ✓ |
-| hoa   · plasma | accent-bright on ink (headings) | #F7A8B8 / #200812 | 66.8 | ✓ |
-| hoa   · plasma | accent-on on accent-bright (CTA text) | #200812 / #F7A8B8 | 67.9 | ✓ |
-| hoa   · plasma | accent-bright on dark panel (dark labels) | #F7A8B8 / #221710 | 66.1 | ✓ |
-| thuy | text-accent on white (bold labels) | #2F5E6B / #FFFFFF | 84.7 | ✓ |
-| thuy | text-accent on tint (bold labels) | #2F5E6B / #E6F1F2 | 75.1 | ✓ |
-| thuy | accent-bright on ink (headings) | #A6D0DA / #0E1D20 | 72.4 | ✓ |
-| thuy | accent-on on accent-bright (CTA text) | #0E1D20 / #A6D0DA | 72.8 | ✓ |
-| thuy | accent-bright on dark panel (dark labels) | #A6D0DA / #221710 | 72.5 | ✓ |
-| thuy   · ocean | text-accent on white (bold labels) | #1C3E56 / #FFFFFF | 95.7 | ✓ |
-| thuy   · ocean | text-accent on tint (bold labels) | #1C3E56 / #E4EEF4 | 84.7 | ✓ |
-| thuy   · ocean | accent-bright on ink (headings) | #A9CCE0 / #0B161E | 71.8 | ✓ |
-| thuy   · ocean | accent-on on accent-bright (CTA text) | #0B161E / #A9CCE0 | 72.6 | ✓ |
-| thuy   · ocean | accent-bright on dark panel (dark labels) | #A9CCE0 / #221710 | 71.4 | ✓ |
-| thuy   · mist | text-accent on white (bold labels) | #4A686E / #FFFFFF | 80 | ✓ |
-| thuy   · mist | text-accent on tint (bold labels) | #4A686E / #F0F6F7 | 73.9 | ✓ |
-| thuy   · mist | accent-bright on ink (headings) | #C4DADD / #16262A | 78.9 | ✓ |
-| thuy   · mist | accent-on on accent-bright (CTA text) | #16262A / #C4DADD | 78.5 | ✓ |
-| thuy   · mist | accent-bright on dark panel (dark labels) | #C4DADD / #221710 | 80.3 | ✓ |
-| moc | text-accent on white (bold labels) | #4C6B35 / #FFFFFF | 80.2 | ✓ |
-| moc | text-accent on tint (bold labels) | #4C6B35 / #EEF3E2 | 71.8 | ✓ |
-| moc | accent-bright on ink (headings) | #A9C177 / #18200F | 62.3 | ✓ |
-| moc | accent-on on accent-bright (CTA text) | #18200F / #A9C177 | 63.2 | ✓ |
-| moc | accent-bright on dark panel (dark labels) | #A9C177 / #221710 | 62.8 | ✓ |
-| moc   · bamboo | text-accent on white (bold labels) | #5B7237 / #FFFFFF | 76.7 | ✓ |
-| moc   · bamboo | text-accent on tint (bold labels) | #5B7237 / #F3F7E8 | 70.8 | ✓ |
-| moc   · bamboo | accent-bright on ink (headings) | #C4D69B / #1C240F | 75 | ✓ |
-| moc   · bamboo | accent-on on accent-bright (CTA text) | #1C240F / #C4D69B | 75 | ✓ |
-| moc   · bamboo | accent-bright on dark panel (dark labels) | #C4D69B / #221710 | 76 | ✓ |
-| moc   · forest | text-accent on white (bold labels) | #31481F / #FFFFFF | 93.4 | ✓ |
-| moc   · forest | text-accent on tint (bold labels) | #31481F / #E9EFE1 | 82.6 | ✓ |
-| moc   · forest | accent-bright on ink (headings) | #B3CE9B / #101708 | 71 | ✓ |
-| moc   · forest | accent-on on accent-bright (CTA text) | #101708 / #B3CE9B | 71.8 | ✓ |
-| moc   · forest | accent-bright on dark panel (dark labels) | #B3CE9B / #221710 | 70.5 | ✓ |
-| kim | text-accent on white (bold labels) | #6E6151 / #FFFFFF | 80.1 | ✓ |
-| kim | text-accent on tint (bold labels) | #6E6151 / #F3EFE6 | 70.7 | ✓ |
-| kim | accent-bright on ink (headings) | #D8CCB6 / #221C12 | 74.7 | ✓ |
-| kim | accent-on on accent-bright (CTA text) | #221C12 / #D8CCB6 | 74.9 | ✓ |
-| kim | accent-bright on dark panel (dark labels) | #D8CCB6 / #221710 | 75.1 | ✓ |
-| kim   · steel | text-accent on white (bold labels) | #565C5E / #FFFFFF | 83.5 | ✓ |
-| kim   · steel | text-accent on tint (bold labels) | #565C5E / #EFF1F1 | 74.9 | ✓ |
-| kim   · steel | accent-bright on ink (headings) | #C2C6C6 / #191D1E | 70 | ✓ |
-| kim   · steel | accent-on on accent-bright (CTA text) | #191D1E / #C2C6C6 | 70.6 | ✓ |
-| kim   · steel | accent-bright on dark panel (dark labels) | #C2C6C6 / #221710 | 70.3 | ✓ |
-| kim   · titanium | text-accent on white (bold labels) | #56504A / #FFFFFF | 87.6 | ✓ |
-| kim   · titanium | text-accent on tint (bold labels) | #56504A / #EFEBE5 | 76 | ✓ |
-| kim   · titanium | accent-bright on ink (headings) | #D9CFC0 / #171310 | 77.5 | ✓ |
-| kim   · titanium | accent-on on accent-bright (CTA text) | #171310 / #D9CFC0 | 77.9 | ✓ |
-| kim   · titanium | accent-bright on dark panel (dark labels) | #D9CFC0 / #221710 | 76.9 | ✓ |
+| tho | accent-bright on dark panel (dark labels) | #FEC42C / #221710 | 75 | ✓ |
+| tho · sand | text-accent on white (bold labels) | #90825E / #FFFFFF | 65.4 | ✓ |
+| tho · sand | text-accent on tint (bold labels) | #90825E / #FBF7EA | 60.6 | ✓ |
+| tho · sand | accent-bright on ink (headings) | #F6EBCC / #292414 | 92.3 | ✓ |
+| tho · sand | accent-on on accent-bright (CTA text) | #292414 / #F6EBCC | 90.8 | ✓ |
+| tho · sand | accent-bright on dark panel (dark labels) | #F6EBCC / #221710 | 93.8 | ✓ |
+| tho · clay | text-accent on white (bold labels) | #201300 / #FFFFFF | 104.8 | ✓ |
+| tho · clay | text-accent on tint (bold labels) | #201300 / #FFF6E7 | 100 | ✓ |
+| tho · clay | accent-bright on ink (headings) | #DEC7A2 / #2D220E | 71.7 | ✓ |
+| tho · clay | accent-on on accent-bright (CTA text) | #2D220E / #DEC7A2 | 71.8 | ✓ |
+| tho · clay | accent-bright on dark panel (dark labels) | #E4CDA8 / #221710 | 76.7 | ✓ |
+| hoa | text-accent on white (bold labels) | #B47054 / #FFFFFF | 66.2 | ✓ |
+| hoa | text-accent on tint (bold labels) | #B47054 / #FFF4F0 | 60.9 | ✓ |
+| hoa | accent-bright on ink (headings) | #FED3C3 / #381B10 | 82.8 | ✓ |
+| hoa | accent-on on accent-bright (CTA text) | #381B10 / #FED3C3 | 82.1 | ✓ |
+| hoa | accent-bright on dark panel (dark labels) | #FED3C3 / #221710 | 84.2 | ✓ |
+| hoa · plasma | text-accent on white (bold labels) | #967C75 / #FFFFFF | 66.1 | ✓ |
+| hoa · plasma | text-accent on tint (bold labels) | #967C75 / #FEF4F2 | 60.7 | ✓ |
+| hoa · plasma | accent-bright on ink (headings) | #FCE6DF / #2C211E | 91.8 | ✓ |
+| hoa · plasma | accent-on on accent-bright (CTA text) | #2C211E / #FCE6DF | 90.4 | ✓ |
+| hoa · plasma | accent-bright on dark panel (dark labels) | #FCE6DF / #221710 | 93.2 | ✓ |
+| hoa · lava | text-accent on white (bold labels) | #280D00 / #FFFFFF | 104.7 | ✓ |
+| hoa · lava | text-accent on tint (bold labels) | #280D00 / #FFF4EF | 99.4 | ✓ |
+| hoa · lava | accent-bright on ink (headings) | #F1BEA4 / #361D0F | 71 | ✓ |
+| hoa · lava | accent-on on accent-bright (CTA text) | #361D0F / #F1BEA4 | 71.2 | ✓ |
+| hoa · lava | accent-bright on dark panel (dark labels) | #F8C4AA / #221710 | 76.2 | ✓ |
+| thuy | text-accent on white (bold labels) | #108EA0 / #FFFFFF | 65.8 | ✓ |
+| thuy | text-accent on tint (bold labels) | #108EA0 / #E7FBFF | 61.2 | ✓ |
+| thuy | accent-bright on ink (headings) | #99EEFF / #012A30 | 85.3 | ✓ |
+| thuy | accent-on on accent-bright (CTA text) | #012A30 / #99EEFF | 84.3 | ✓ |
+| thuy | accent-bright on dark panel (dark labels) | #99EEFF / #221710 | 87.2 | ✓ |
+| thuy · mist | text-accent on white (bold labels) | #5A8A90 / #FFFFFF | 65.8 | ✓ |
+| thuy · mist | text-accent on tint (bold labels) | #5A8A90 / #EBFAFC | 61.1 | ✓ |
+| thuy · mist | accent-bright on ink (headings) | #CDF4F9 / #13282B | 93.1 | ✓ |
+| thuy · mist | accent-on on accent-bright (CTA text) | #13282B / #CDF4F9 | 91.5 | ✓ |
+| thuy · mist | accent-bright on dark panel (dark labels) | #CDF4F9 / #221710 | 94.7 | ✓ |
+| thuy · ocean | text-accent on white (bold labels) | #011A21 / #FFFFFF | 104.5 | ✓ |
+| thuy · ocean | text-accent on tint (bold labels) | #011A21 / #EAFAFF | 99.8 | ✓ |
+| thuy · ocean | accent-bright on ink (headings) | #A8D3E0 / #10282F | 72.7 | ✓ |
+| thuy · ocean | accent-on on accent-bright (CTA text) | #10282F / #A8D3E0 | 72.6 | ✓ |
+| thuy · ocean | accent-bright on dark panel (dark labels) | #ABD6E3 / #221710 | 76.1 | ✓ |
+| moc | text-accent on white (bold labels) | #629122 / #FFFFFF | 64.9 | ✓ |
+| moc | text-accent on tint (bold labels) | #629122 / #EFFCE3 | 60.5 | ✓ |
+| moc | accent-bright on ink (headings) | #C5ED9C / #182A00 | 85.2 | ✓ |
+| moc | accent-on on accent-bright (CTA text) | #182A00 / #C5ED9C | 84.2 | ✓ |
+| moc | accent-bright on dark panel (dark labels) | #C5ED9C / #221710 | 86.9 | ✓ |
+| moc · bamboo | text-accent on white (bold labels) | #7C8965 / #FFFFFF | 64.9 | ✓ |
+| moc · bamboo | text-accent on tint (bold labels) | #7C8965 / #F4F9ED | 60.2 | ✓ |
+| moc · bamboo | accent-bright on ink (headings) | #E5F1D2 / #212617 | 93 | ✓ |
+| moc · bamboo | accent-on on accent-bright (CTA text) | #212617 / #E5F1D2 | 91.4 | ✓ |
+| moc · bamboo | accent-bright on dark panel (dark labels) | #E5F1D2 / #221710 | 94.5 | ✓ |
+| moc · forest | text-accent on white (bold labels) | #051D00 / #FFFFFF | 104.4 | ✓ |
+| moc · forest | text-accent on tint (bold labels) | #051D00 / #ECFDE7 | 100.2 | ✓ |
+| moc · forest | accent-bright on ink (headings) | #B0D8A3 / #162A0E | 73.2 | ✓ |
+| moc · forest | accent-on on accent-bright (CTA text) | #162A0E / #B0D8A3 | 73.2 | ✓ |
+| moc · forest | accent-bright on dark panel (dark labels) | #B0D8A3 / #221710 | 75 | ✓ |
+| kim | text-accent on white (bold labels) | #AC780B / #FFFFFF | 65.8 | ✓ |
+| kim | text-accent on tint (bold labels) | #AC780B / #FFF5E7 | 60.5 | ✓ |
+| kim | accent-bright on ink (headings) | #FDD89F / #312002 | 83.5 | ✓ |
+| kim | accent-on on accent-bright (CTA text) | #312002 / #FDD89F | 82.8 | ✓ |
+| kim | accent-bright on dark panel (dark labels) | #FDD89F / #221710 | 85 | ✓ |
+| kim · titanium | text-accent on white (bold labels) | #947F65 / #FFFFFF | 65.8 | ✓ |
+| kim · titanium | text-accent on tint (bold labels) | #947F65 / #FDF5ED | 60.5 | ✓ |
+| kim · titanium | accent-bright on ink (headings) | #FBE8D2 / #2B2217 | 92 | ✓ |
+| kim · titanium | accent-on on accent-bright (CTA text) | #2B2217 / #FBE8D2 | 90.6 | ✓ |
+| kim · titanium | accent-bright on dark panel (dark labels) | #FBE8D2 / #221710 | 93.4 | ✓ |
+| kim · steel | text-accent on white (bold labels) | #1F1400 / #FFFFFF | 104.8 | ✓ |
+| kim · steel | text-accent on tint (bold labels) | #1F1400 / #FEF6E7 | 99.8 | ✓ |
+| kim · steel | accent-bright on ink (headings) | #DCC8A2 / #2D220E | 71.8 | ✓ |
+| kim · steel | accent-on on accent-bright (CTA text) | #2D220E / #DCC8A2 | 71.9 | ✓ |
+| kim · steel | accent-bright on dark panel (dark labels) | #DFCBA5 / #221710 | 75.1 | ✓ |
 
 **Failures: 0.** All text pairings pass Lc ≥ 60.
 
-## Dark-theme semantic colours (WCAG, added v2.8.0)
+## Dark pack APCA floors (gate twin)
 
-The light-theme semantic foregrounds failed on dark surfaces (~2.5:1), so the dark theme overrides them. WCAG contrast on the dark panel `#221710` (and as a fill paired with dark ink `#1a1108`):
-| Role | Dark value | on panel | as fill w/ ink | Verdict |
+Targets match `_audit/apca-dark-preview.html`: bright ≥ 75 · accent ≥ 60 · on/strong ≥ 75 · ink-on-tint ≥ 75.
+| Pack | bright | accent | on | ink |
 |---|---|---|---|---|
-| success | #4ADE80 | 10.06 | 10.69 | ✓ |
-| danger | #F87171 | 6.34 | 6.73 | ✓ |
-| warning | #FBBF24 | 10.50 | 11.16 | ✓ |
-| info | #7CB2FB | 8.03 | 8.53 | ✓ |
+| tho | 75 | 69.2 | 75.6 | 76.8 |
+| tho · sand | 93.8 | 92.7 | 75.6 | 91.5 |
+| tho · clay | 76.7 | 60.4 | 94.1 | 76.2 |
+| hoa | 84.2 | 68.2 | 75.1 | 81.9 |
+| hoa · plasma | 93.2 | 91.2 | 75 | 90.9 |
+| hoa · lava | 76.2 | 61.1 | 94 | 75.7 |
+| thuy | 87.2 | 72.8 | 76 | 84.4 |
+| thuy · mist | 94.7 | 94 | 75.9 | 92 |
+| thuy · ocean | 76.1 | 60.1 | 93.9 | 75.1 |
+| moc | 86.9 | 71.8 | 75.4 | 84.4 |
+| moc · bamboo | 94.5 | 93.6 | 75.3 | 92 |
+| moc · forest | 75 | 60.8 | 93.7 | 76.3 |
+| kim | 85 | 69.2 | 75.6 | 82.6 |
+| kim · titanium | 93.4 | 92.1 | 75.8 | 91.1 |
+| kim · steel | 75.1 | 60.7 | 94 | 76.4 |
 
-Core dark also remaps the primary button to Ochre (`#f4ba17` on `#1a1108`) and warms the field border — so no dark control is low-contrast. Dark shadows are umber-tinted (weak on dark by nature); the dark hairline border provides panel separation instead.
-This file is generated — re-run the APCA sweep script after any token change.
-
-## Dark elemental packs — APCA verification (v4.0.0, Jul 2026)
-
-Generated with the owner-approved dark packs applied; measured by the same SAPC-4g implementation as `_audit/apca-dark-preview.html` (also the regression gate). Targets: bright ≥ 75 · accent ≥ 60 · button ink ≥ 75 · ink-on-tint ≥ 75 — **15/15 packs pass**.
-| Pack | bright | accent | on/strong | ink/tint |
-|---|---|---|---|---|
-| tho | 75 | 69.2 | 75.1 | 75.3 |
-| tho · clay | 75.7 | 61.5 | 76 | 76.1 |
-| tho · sand | 85.1 | 74.3 | 75.7 | 83.6 |
-| hoa | 75.1 | 61.5 | 75.6 | 75.9 |
-| hoa · lava | 75 | 60.6 | 83.5 | 75.8 |
-| hoa · plasma | 75.9 | 60.8 | 75.4 | 76.7 |
-| thuy | 76.6 | 61.6 | 76.7 | 76.6 |
-| thuy · ocean | 77.2 | 60 | 86.6 | 75.5 |
-| thuy · mist | 80.3 | 66.6 | 76 | 78.7 |
-| moc | 76 | 60.1 | 76 | 76.1 |
-| moc · bamboo | 76 | 62.8 | 75 | 76.2 |
-| moc · forest | 76.4 | 60.9 | 88.6 | 76.6 |
-| kim | 75.1 | 60.1 | 75.2 | 75.4 |
-| kim · steel | 76.3 | 61.1 | 76 | 76.6 |
-| kim · titanium | 76.9 | 60.9 | 79.4 | 75.5 |

package/docs/conventions.md

@@ -4,24 +4,25 @@ For humans and agents *extending this system*. (Consumers: read `SKILL.md`.) The
 
 ## The expansion rule
 
-**When anything grows, everything updates in the same change.** A new element/variant, icon, component, token role, language, or template pattern must propagate to: tokens/source → specimen cards (guidelines + the component group card) **and related guideline pages** → component contract trio (`.jsx` + `.d.ts` + `.prompt.md`) → **all** templates (tweak enums and maps) → Storybook Live / Identity Lab → docs (README counts, SKILL, **and every related document the change touches** — kit READMEs, registry, contrast report regenerated after token changes). **Do not bump `VERSION` and do not maintain a changelog file** — version stays at 1.0.0. Continuity is git history plus curated **Release Notes** (`docs/release-notes.md` / Storybook). Gate every expansion with the compiler check **and a grep for the old enum/list** — nothing ships half-propagated. Documented scope boundaries (doctrine, not gaps): UI-kit pages stay pixel-faithful Thổ recreations (axes demoed in Storybook Live and Identity Lab); every template is bilingual EN·VN and English-default (client/media collateral stays English-primary), and language variants render **fully separated** — see the decision log.
+**When anything grows, everything updates in the same change.** A new element/variant, icon, component, token role, language, or template pattern must propagate to: tokens/source → specimen cards (guidelines + the component group card) **and related guideline pages** → component contract trio (`.jsx` + `.d.ts` + `.prompt.md`) → **all** templates (tweak enums and maps) → Storybook toolbar / Atomic View → docs (README counts, SKILL, **and every related document the change touches** — kit READMEs, registry, contrast report regenerated after token changes). **Bump `VERSION` only with an explicit owner instruction; do not maintain a changelog** — current release is **1.1.1**. Continuity is git history plus curated **Release Notes** (`docs/release-notes.md` / Storybook). Gate every expansion with the compiler check **and a grep for the old enum/list** — nothing ships half-propagated. Documented scope boundaries (doctrine, not gaps): UI-kit pages stay pixel-faithful Thổ recreations (axes demoed in Storybook toolbar and Atomic View); every template is bilingual EN·VN and English-default (client/media collateral stays English-primary), and language variants render **fully separated** — see the decision log.
 
-## The three axes
+## The four axes
 
-Every rendered surface resolves three orthogonal scopes — never encode one axis inside another:
+Every rendered surface resolves four orthogonal scopes — never encode one axis inside another:
 | Axis | Attribute | Owns | Packs live in |
 |---|---|---|---|
-| **Theme** | `data-theme="dark\|system"` | light/dark inversion | `tokens/colors.css` |
+| **Theme** | `data-theme="dark\|system"` | light / dark / system (OS) | `tokens/colors.css` |
 | **Element** (Ngũ Hành) | `data-cs-element` + `data-cs-variant` | hue identity per product | `tokens/elements.css` |
 | **Language** | `lang` / Language tweak | EN · VI copy | component registry + template props |
+| **Style** | `data-cs-style` (optional; absent ≡ `liquid-glass`) | surface material pack | `tokens/styles.css` |
 
-Surface treatment is liquid-glass (fixed). Immutable under all axes: Umber/Ochre anchors, voice, type families, semantic status colors, the 3px Ochre focus ring, APCA floors, ≥44px targets.
+Style’s sole pack today is **liquid-glass**. Immutable under all axes: Umber/Ochre anchors, voice, type families, semantic status colors, the 3px Ochre focus ring, APCA floors, ≥44px targets.
 
 ## Naming grammar
 
 - Tokens: `--cs-<layer>-<role>[-<state>]` (`--cs-color-text-muted`). Element role layer: `--cs-accent-*` (9-token contract — see `tokens/elements.css` header).
 
-- Classes: `.cs-<block>[-<part>][--modifier]`. Data attributes: `data-theme`, `data-cs-element`, `data-cs-variant`.
+- Classes: `.cs-<block>[-<part>][--modifier]`. Data attributes: `data-theme`, `data-cs-element`, `data-cs-variant`, `data-cs-style`.
 
 - Files: `tokens/<concern>.css` · `base/<concern>.css` (concern names, never changelog names — "interaction", not "refinements2") · `components/<group>/<Name>.{jsx,d.ts,prompt.md}` · `templates/<dept>-<artifact>/` · `guidelines/<group>-<topic>.html`.
 
@@ -37,18 +38,20 @@ Surface treatment is liquid-glass (fixed). Immutable under all axes: Umber/Ochre
 
 **New element variant** — stay inside the element's oklch envelope; set the 9 `--cs-accent-*` contract tokens plus `--cs-color-text-accent`/`--cs-color-link` (APCA-check both); the aurora wash inherits from the element via `.cs-aurora-wash` (override the class rule only if the variant truly needs its own image); gradient partner (`grad-b`) must follow Tương sinh.
 
-**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). Version stays pinned at 1.0.0.
+**Ship check** — run the compiler check until clean, then run `_audit/docs-consistency.html` **and** `_audit/namespace-portability.html` (both must be green). Version is LAUNCHED at 1.1.0; current pin is **1.1.1**.
 
 ## Decision log (owner-approved)
 
 - Elements fully replace Ochre inside product scopes; plasma's hot-pink edge approved (Jul 2026).
 
-- Axes are Theme × Element × Language only. Surface treatment is liquid-glass (fixed).
+- Axes are Theme × Element × Language × Style. Style pack is liquid-glass (sole pack; absent ≡ default).
 
 - Product registry is **locked** (Jul 2026) — eight portfolio mappings in `docs/products.md`; do not invent new product → element assignments.
 
 - Text never sits on the mid-tone `-accent` — codified after the APCA sweep (see `docs/contrast-report.md`).
 
+- **The display face is a token role, not a second default (Jul 2026).** `--cs-font-family-display` ships Space Grotesk (variable 300–700, Vietnamese subset) self-hosted alongside Be Vietnam Pro and JetBrains Mono, so a product with a headline face — `cyberskill.world` / Lumi — consumes a DS role instead of maintaining its own `@font-face` exception. **Nothing in the DS points at it**: `--cs-heading-family` still resolves to `--cs-font-family-ui`, every template and UI kit is unchanged, and a scope opts in with `.cs-display-face` (`base/typography.css`), which retargets `--cs-heading-family` only — body copy stays on the UI face. Space Grotesk has no 800, so the extrabold heading weight clamps to 700 within that family (CSS does not hop to Be Vietnam Pro for a missing weight). Adding a family means adding its faces to `tokens/fonts.css` **and** its files to `fonts/` **and** its entries to `_ds_manifest.json` `fonts[]`/`brandFonts[]` — `_audit/font-face-integrity.html` fails on any of the three being out of step, and on any family missing the Vietnamese subset. This changes no product → element mapping; `docs/products.md` stays locked.
+
 - Language variants render **fully separated**: switching the Language tweak yields a complete single-language artifact — no partial translation left in headings, labels, helper text, footers, or body. The only bilingual-by-design elements are the CyberSkill name + slogan lockup (`Hiện Thực Hoá Ý Chí · Turn Your Will Into Real`, the canonical form — never a lone half) and the A4 legal identity block (company legal name + state motto). Everything else swaps with the tweak (Jul 2026).
 
 - **Namespace is resolved, never hardcoded** — the compiler names the bundle global `window.CyberSkillDesignSystem_<projectId>`, and that 6-hex suffix is derived from the project id, so it changes whenever the system is imported into another project. Templates read the stable `window.CyberSkillDS` alias that `ds-base.js` publishes on bundle load; cards, UI-kit pages, the standalone email, and audit harnesses resolve by prefix (`window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]`). `_ds_bundle.js`/`_ds_manifest.json` and the frozen `_audit/exports/` snapshot legitimately carry the real suffix (they *define* it). Enforced by `_audit/namespace-portability.html`, which scans every manifest-indexed source — keeps re-import **zero-touch** (Jul 2026).
@@ -65,7 +68,7 @@ Every template exports; the right path depends on the archetype. All paths prese
 | Email / product page / any DC | **Standalone offline HTML** | The DC loads CSS + bundle dynamically via `ds-base.js`, which `super_inline_html` can't see. To bundle: make a `*-standalone.html` copy **in the same folder** (keeps `./support.js` relative) with **static** `<link rel="stylesheet" href="../../styles.css">` + `<script src="../../_ds_bundle.js">` in the raw `<head>` (both inlinable) instead of `ds-base.js`, plus a `<template id="__bundler_thumbnail">`. Bake the target language into the props default. Then `super_inline_html`. |
 | Any | **Editor-native + Claude Code handoff** | The whole project is dev-handoff-ready (compiled bundle + `.d.ts` + `prompt.md` per component); generate the package on request via the handoff skill. |
 
-**Font behavior on export.** Brand fonts are self-hosted (`Be Vietnam Pro` UI, mono). PPTX keeps the brand-font **names** but does not embed the files — on a machine without them PowerPoint substitutes a fallback (VN Unicode text is preserved; shapes may reflow slightly). For a fully self-contained hand-off, either tell the recipient to install the fonts, or export with a web-safe swap (`fontSwaps:[{from:'Be Vietnam Pro',to:'Arial'}]` — Arial covers Vietnamese). Standalone HTML **embeds** the fonts (inlined `@font-face` from `styles.css`), so it is always faithful offline (Jul 2026).
+**Font behavior on export.** Brand fonts are self-hosted (`Be Vietnam Pro` UI, `Space Grotesk` opt-in display, mono). PPTX keeps the brand-font **names** but does not embed the files — on a machine without them PowerPoint substitutes a fallback (VN Unicode text is preserved; shapes may reflow slightly). For a fully self-contained hand-off, either tell the recipient to install the fonts, or export with a web-safe swap (`fontSwaps:[{from:'Be Vietnam Pro',to:'Arial'}]` — Arial covers Vietnamese). Standalone HTML **embeds** the fonts (inlined `@font-face` from `styles.css`), so it is always faithful offline (Jul 2026).
 
 ## Accessibility (base/a11y.css + component ARIA)
 

package/docs/decisions.md

@@ -24,7 +24,7 @@ Stay on the current Figma plan. Variables REST API is Enterprise-only — write
 
 **Owner choice: Storybook is the single live hub** (Jul 2026)
 
-- Operators use Storybook at `/` for Theme × Element × Language and component control matrices.
+- Operators use Storybook at `/` for Theme × Element × Language × Style and component control matrices.
 - No separate Live View page exists in the tree.
 - Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*` redirect to `/`.
 - Portable Atomic View and other static HTML remain for zero-build gates and consumers; they are not the site product entry.
@@ -44,17 +44,18 @@ Stay on the current Figma plan. Variables REST API is Enterprise-only — write
 
 **Status: provisional / soft-skip — not a live library publish** (Jul 2026; deferred Jul 2026)
 
-- CI job `code-connect` + `figma.config.json` + 99 `*.figma.tsx` mappings are in-repo (import snippets use `@cyberskill/design`).
+- CI job `code-connect` + `figma.config.json` + 105 `*.figma.tsx` mappings are in-repo (import snippets use `@cyberskill/design`).
 - Publish soft-skips when secrets are missing or the API returns 403/404/429. Soft-skip ≠ successful Code Connect publish.
 - **Owner deferral:** stay on **Figma free / non-Org** for now — do not pursue live Code Connect until an Org/Enterprise seat with a published team library is available. Then replace synthetic `9999:*` stubs in `code-connect/node-map.json` with real `nodeId`s. See `docs/figma.md`.
 
-## 7. npm publish — path shipped; unlock in progress
+## 7. npm publish — live via Trusted Publishing (OIDC)
 
-**Status: operator-ready; package not yet on the registry as `@cyberskill/design`** (Jul 2026)
+**Status: LAUNCHED `@cyberskill/design@1.1.0`; current pin `@cyberskill/design@1.1.1`; CI publish uses npm Trusted Publishing; tokens disallowed** (Jul 2026; LAUNCH 2026-07-27)
 
-- `package.json` is `private: false`; package name **`@cyberskill/design`** (scoped `@cyberskill/*` convention; `publishConfig.access: public`); `prepublishOnly` runs `build:bundle` + `build:design-md --check`.
-- Workflow `.github/workflows/npm-publish.yml` on `workflow_dispatch` / `v*` tags; without `NPM_TOKEN` the job **soft-skips** (exit 0 + tarball report). Soft-skip ≠ a published release.
-- **Owner progress:** npm org **`@cyberskill`** already publishes other packages; `NPM_TOKEN` is set on the repo. **Still required:** run **Actions → npm-publish → Run workflow** once so `@cyberskill/design@1.0.0` appears on the registry, then issue an **explicit consumer grant** (policy text — not a secret) for teams allowed to install. License stays **UNLICENSED**; version stays **1.0.0**. See `docs/consuming.md`.
+- `package.json` is `private: false`; package name **`@cyberskill/design`** (`publishConfig.access: public`); `repository.url` matches this GitHub repo for provenance.
+- Workflow `.github/workflows/npm-publish.yml`: `id-token: write` + GitHub-hosted runner; **no** `NPM_TOKEN` / `NODE_AUTH_TOKEN` on the publish step (OIDC). npm Trusted Publisher must list workflow filename **`npm-publish.yml`** for `cyberskill-official/design-system`. Soft-skip on auth / 403 / 404 / EOTP / version conflict.
+- Package **Publishing access** on npmjs: **Require two-factor authentication and disallow tokens** (OIDC Trusted Publishing still works; classic / granular publish tokens are rejected). Long-lived `NPM_TOKEN` secrets are revoked.
+- License stays **UNLICENSED**; version is **1.1.1**. Approved use is recorded in **`docs/consumer-grant.md`** (CyberSkill portfolio products). Registry install alone is not a public license.
 
 ## 8. Native store packaging — scaffolds shipped; submit disabled
 
@@ -76,18 +77,40 @@ Recorded Jul 2026 — unlock defaults (updated as operator steps land):
 
 - **Figma Variables** — stay Tokens Studio / non-Enterprise (decision §3). Soft-skip on Variables REST remains honest.
 - **Code Connect** — **skipped while on Figma free**; revisit only after Org + published library + real `nodeId`s (decision §6). Soft-skip ≠ publish.
-- **npm** — org `@cyberskill` + `NPM_TOKEN` ready; first publish of `@cyberskill/design` + written consumer grant still owner-run (decision §7). Soft-skip ≠ a published release of *this* package.
+- **npm** — **LAUNCH `@cyberskill/design@1.1.0`**; current pin **`@cyberskill/design@1.1.1`** (publish via `v*` tag / Trusted Publishing); CI uses **Trusted Publishing (OIDC)** via `npm-publish.yml`; npmjs **disallow tokens**; consumer grant in force at `docs/consumer-grant.md` (decision §7). Default package entry is bundler-native `_esm/react.mjs` (React peer); browser path is `@cyberskill/design/legacy` → `_esm/cs.mjs` (decision §10).
+
+## 10. Bundler-native React export (Next / SSR)
+
+**Owner choice: ship `_esm/react.mjs` as default `exports["."]`** (Jul 2026; React 19 host Jul 2026)
+
+- React / react-dom are **peerDependencies** (`^18 || ^19`); the entry re-exports source JSX (consumer transpiles — e.g. Next `transpilePackages`). Host Storybook / CI **devDependencies** pin **react@19.2.8** / **react-dom@19.2.8**.
+- Browser / no-build keeps `_esm/cs.mjs` at `exports["./legacy"]` (CDN self-ensure + `_ds_bundle.js`). Official React 19 dropped UMD builds — the CDN path loads **`umd-react@19.2.8`** (SRI-pinned) to populate `window.React` / `window.ReactDOM` for `_ds_bundle.js`. Same pin is used in audit HTML, specimen cards, UI kits, and the byte-identical `templates/*/support.js` runtime.
+- Alias `@cyberskill/design/react` mirrors the default entry. VERSION is **1.1.1** post-LAUNCH; republish via Trusted Publishing after merge / tag.
+- Docs: `docs/consuming.md` (+ VI); gates: `package-exports-integrity` + `test:react-entry`.
 
 ## Maintainer tasks (open)
 
 Operational follow-ups — not product marketing, not a backlog surface:
 
 1. **Code Connect** — deferred (Figma free). When upgrading to Org: replace `9999:*` stubs in `code-connect/node-map.json` with real published-library node IDs.
-2. **npm first publish + grant** — ~~org / `NPM_TOKEN`~~ **done**. Remaining: Actions → **npm-publish** → Run workflow; confirm `npm view @cyberskill/design`; write the consumer grant for approved teams (see `docs/consuming.md`).
+
+~~2. npm consumer grant~~ — **done** (Jul 2026): Trusted Publishing + `docs/consumer-grant.md` (+ VI) for CyberSkill portfolio products.
 
 ~~3. Finalize products registry~~ — **done** (Jul 2026): see decision §9; `docs/products.md` is locked.
 
-Schema sidecars and Storybook `FullMatrix` continue to grow **opportunistically** when a primary already qualifies (today only Button has FullMatrix under the contract) — not as a mass-add pass. See `docs/quality-gates.md`.
+~~4. First registry consumer path~~ — **done** (Jul 2026): `examples/npm-hello/` installs `@cyberskill/design` for locked **Lumi** identity; documented in `docs/consuming.md` (+ VI) and `docs/release-notes.md`. Now targets **1.1.1** post-LAUNCH.
+
+5. **Native + element-pack drift on PRs is fail-closed** (Jul 2026) — `regenerate-tokens` runs read-only on pull requests and exits 1 instead of pushing; only `regenerate-tokens-push` (main / schedule / manual) holds `contents: write`. When a PR fails it, run `npm run tokens:elements && node _audit/ci/generate-native-tokens.mjs` and commit packs + natives. See `docs/ci-cd.md`.
+
+6. **Shadcn gap / Wave 2** (Jul 2026) — CyberSkill already covers ~53 of shadcn’s 62 primitives as CS-native (forms / overlays / nav / data). Shipped: pilot `ScrollArea`, `Collapsible`, `AspectRatio`; Wave 2 `AlertDialog` (vs Popconfirm), `Item` row primitive, `NativeSelect`. Residual shadcn gaps are intentional non-ports (blocks, Tailwind, Radix CLI). Do **not** port those — map patterns to existing `templates/` + `ui_kits/`.
+
+7. **Element colour geometry** (Jul 2026; owner palette bar Jul 2026) — **30** default sets (5 × soft/middle/deep × light/dark) from `tokens/element-seeds.json` (`npm run tokens:elements`): soft = washed pastel, middle = intensity-synced default (Thổ middle pins logo ochre), deep = clearly darker sibling in the same hue family; harmonious role ramps; light↔dark hue lock; APCA dark floors. Geometry gate requires both minΔE and minΔL plus monotonic L. Public variant names unchanged. Hard gate: `_audit/element-geometry.html`. Benchmark rubric: `docs/benchmark-rubric.md`.
+
+8. **Style axis (`data-cs-style`)** (Jul 2026) — Fourth product axis; sole live pack **liquid-glass** (absent ≡ liquid-glass). Contract: `tokens/styles.css` + hard gate `_audit/style-contract.html`. Future Style packs may expand indefinitely, each with its own colour-combination language — only via owner approval + Expansion Rule checklist in `docs/benchmark-rubric.md` (do not invent packs casually).
+
+9. **Identity Lab retired** (Jul 2026) — Owner choice: delete `ui_kits/status-hub/identity-lab.html` and every product/docs/Storybook reference. Axis demos live in the Storybook Theme × Element × Language × Style toolbar, Atomic View, and the Elements Geometry specimen. Theme × Element × Language × Style **axes remain** product infrastructure (templates, tokens, kits Thổ-faithful). Do not revive the Lab under another name without a new decision.
+
+Storybook `FullMatrix` is required whenever a public primary has ≥1 of {size enums, variant enums, state keys} (contract floor ≥28 stories). Schema sidecars remain complete for content-hole templates; axis-only templates omit by design. See `docs/quality-gates.md` and `docs/storybook.md`.
 
 ## How to change a decision
 

package/docs/deploy.md

@@ -40,7 +40,7 @@ Shipped for production (`design.cyberskill.world`):
 
 If you host under a **different** domain, change the absolute URLs in those meta tags to match your origin, or re-export the PNG and keep the path `assets/og-dashboard.png`.
 
-**Common misconfig:** picking a JS framework preset (Next/CRA) — Vercel then runs the wrong build graph and may 404 root docs. The preset must stay **"Other"** and `vercel.json` must own install/build/output (see table above). `package.json` is publishable (`"private": false`) for the npm path; it also carries **host-only** scripts (`build:storybook`, `build:site`, verify/test) that product apps should not depend on (see `docs/consuming.md` and `docs/storybook.md`). Packaging copies the portable webroot then overlays Storybook at `.vercel-static/` root (portable paths like `/styles.css`, `/_audit/`, `/guidelines/` stay available beside Storybook assets). **How to tell a hosting misconfig from a real docs bug:** open `/_audit/docs-consistency.html` on the *deployed* URL — the gate detects an HTML/error body where a raw `.md`/`.json` was expected and reports "hosting is intercepting this path".
+**Common misconfig:** picking a JS framework preset (Next/CRA) — Vercel then runs the wrong build graph and may 404 root docs. The preset must stay **"Other"** and `vercel.json` must own install/build/output (see table above). `package.json` is publishable (`"private": false`) for the npm path; it also carries **host-only** scripts (`build:storybook`, `build:site`, verify/test) that product apps should not depend on (see `docs/consuming.md` and `docs/storybook.md`). Packaging copies the portable webroot then overlays Storybook at `.vercel-static/` root (portable paths like `/styles.css`, `/_audit/`, `/guidelines/` stay available beside Storybook assets). **`_audit/` stays public on purpose** — Storybook Status embeds `_audit/run.html` full-bleed; removing it would break the product surface. **How to tell a hosting misconfig from a real docs bug:** open `/_audit/docs-consistency.html` on the *deployed* URL — the gate detects an HTML/error body where a raw `.md`/`.json` was expected and reports "hosting is intercepting this path".
 
 ## Generic VPS / nginx / any static host
 

package/docs/design-styles.md

@@ -1,25 +1,43 @@
 # Design styles
 
-Current surface treatment is **liquid-glass** (fixed). The live styling axes are **Theme × Element × Language** only.
+The live styling axes are **Theme × Element × Language × Style**. Style’s sole pack today is **liquid-glass** (absent `data-cs-style` ≡ liquid-glass — same default pattern as light theme / Thổ middle).
+
 | Axis | How to set it | What it changes |
 |---|---|---|
-| **Theme** | `data-theme="light\|dark"` | light/dark semantic colours |
-| **Element** | `data-cs-element` + optional `data-cs-variant` | Ngũ Hành product identity (15 packs) |
+| **Theme** | light = attribute absent; `data-theme="dark"` | light/dark semantic colours (product UI axis). Token-level `data-theme="system"` follows the OS (`prefers-color-scheme`) and mirrors dark — Storybook toolbar and Atomic View expose a system control |
+| **Element** | `data-cs-element` + optional `data-cs-variant` | Ngũ Hành product identity (**15 packs** = 5 elements × soft/middle/deep) |
 | **Language** | `lang` / Language tweak | EN · VI copy |
+| **Style** | `data-cs-style` (optional; absent ≡ `liquid-glass`) | Surface material pack. Sole pack today: **liquid-glass** (`tokens/styles.css` + `base/glass.css`) |
 
-## Fixed treatment
+## Element colour contract
 
-- Liquid-glass materials (`cs-surface-*`) are the default surface language.
+Source of truth: [`tokens/element-seeds.json`](../tokens/element-seeds.json) → `npm run tokens:elements` → [`tokens/elements.css`](../tokens/elements.css) (+ JSON / JS / DTCG / native mirrors). **Do not hand-edit pack hexes.**
 
-- Radius, shadow, and glass tokens come from the base system — not a parallel "style pack" axis.
+| Rule | Detail |
+|---|---|
+| **Default** | Thổ **middle** (studio) — logo ochre `#F4BA17` on `:root` when no element attribute is set |
+| **Intensity ladder** | Every element has **soft · middle · deep** with shared OKLCH L targets (C scaled per element). Middle is the default (no `data-cs-variant`) |
+| **Names preserved** | Public variants stay `sand/clay`, `plasma/lava`, `mist/ocean`, `bamboo/forest`, `titanium/steel` — mapped onto the ladder (see [`docs/products.md`](products.md) Slot column) |
+| **Character offsets** | Small explicit `dh`/`dc` in the seed file only (e.g. Hỏa·plasma, Kim·steel) — not freehand drift |
+| **Light ↔ dark** | Same hue family (Δh locked); roles remapped + APCA-solved — 15 × 2 = **30 colour sets** |
+| **Text rule** | Text on `-bright` or `-tint` only — never on mid-tone `-accent` |
+| **Never remap** | `--cs-color-accent-ochre` focus ring · semantic status colours |
+| **Geometry gate** | [`_audit/element-geometry.html`](../_audit/element-geometry.html) — intensity sync · variant distinctness · hue identity |
 
+## Style pack — liquid-glass
+
+- Liquid-glass materials (`cs-surface-*`) are the default surface language.
+- Radius, shadow, and glass tokens come from `tokens/elevation.css` + `base/glass.css`; the Style axis contract lives in [`tokens/styles.css`](../tokens/styles.css).
+- Gate: [`_audit/style-contract.html`](../_audit/style-contract.html) — allowlists `liquid-glass` only.
 - Rejected by doctrine: neon/cyberpunk cold hues, memphis playfulness, full skeuomorphism, emoji in UI chrome.
+- Type families are fixed and token-named: Be Vietnam Pro (UI) · Space Grotesk (`--cs-font-family-display`, opt-in headline face) · JetBrains Mono (code). The display face is a **role a scope may opt into** with `.cs-display-face`, not a product axis.
 
 ## Adding a new look
 
 Prefer:
-1. A new **Element** or **variant** when the shift is hue/identity.
+1. A new **Element** intensity tweak (seed offset) when the shift is hue/identity inside Ngũ Hành.
 2. Local composition with existing tokens/classes when the shift is one-off layout.
 3. A documented pattern in `docs/conventions.md` + a specimen card when the pattern should be reusable.
+4. A new **`data-cs-style`** pack only after an Expansion Rule pass — see [`docs/benchmark-rubric.md`](benchmark-rubric.md) style-expansion checklist. Styles consume the same 9 accent roles; they must not invent parallel Element packs.
 
-Do not invent a fourth product axis without an Expansion Rule pass across tokens, Storybook Live, templates, docs, and gates.
+Do not invent a fifth product axis, and do not add a second Style pack without the Expansion Rule checklist.

package/docs/figma.md

@@ -2,7 +2,7 @@
 
 ## What ships in-repo
 - Design tokens in CSS + DTCG (`tokens/tokens.dtcg.json`) with native Swift/Kotlin/Flutter mirrors.
-- UI kits under `ui_kits/` are HTML recreations that stay pixel-faithful to the brand doctrine (Thổ-first Identity Lab).
+- UI kits under `ui_kits/` are HTML recreations that stay pixel-faithful to the brand doctrine (Thổ-first kits; axis demos in Storybook / Atomic View).
 - **Code Connect** mappings for all **99** public primaries (`components/**/*.figma.tsx` + `figma.config.json` + `code-connect/node-map.json`).
 
 ## Tokens Studio import recipe (hand-sync)
@@ -47,7 +47,7 @@ Must be **repository secrets** under the Actions tab (exact names, case-sensitiv
 
 If you hover a PAT and only see scopes like `file_content:read`, `file_comments:*`, `webhooks:*`, `library_*` — that is expected on **Professional / Organization** seats. Figma **does not list** `file_variables:*` unless the account is on **Enterprise**. Regenerating a PAT on a non-Enterprise plan cannot unlock the Variables REST API.
 
-**What CI does today:** secrets + file open work on any plan; the Variables write soft-skips with a report when Figma returns 403 / invalid scopes for `file_variables` (so gates stay green). Full auto-push needs Enterprise + those two scopes on the PAT.
+**What CI does today:** the `figma-variables-push` job **soft-skips (exit 0 + report) if `FIGMA_TOKEN` / `FIGMA_FILE_KEY` are empty** — same honesty as Code Connect (missing secrets are not a red main). With secrets present, file open works on any plan; the Variables write also soft-skips with a report when Figma returns **403** / invalid scopes for `file_variables`. Soft-skip ≠ live Variables sync. Full auto-push needs Enterprise + those two scopes on the PAT.
 
 **Non-Enterprise alternatives:** hand-sync colour styles from `tokens/tokens.dtcg.json`, or use [Tokens Studio](https://tokens.studio/) / the Plugin API inside the desktop app (plugin path does not use this REST job) — see the import recipe above.
 
@@ -83,7 +83,7 @@ After a successful push, open the file in Figma → **Local variables** → coll
 | Mappings | `components/**/<Name>.figma.tsx` — **99** primaries; Button / TextField / Dialog / Card / Alert have prop maps; others are stubs |
 | Generator | `npm run code-connect:generate` → `_audit/ci/generate-code-connect.mjs` |
 | CI job | `code-connect` in `design-system-gates.yml` (PR + `main` + manual) |
-| Local dry-run | `npm run code-connect:dry-run` (no secrets; asserts config + ≥99 files) |
+| Local dry-run | `npm run code-connect:dry-run` (no secrets; asserts config + ≥105 files) |
 
 Document URLs use placeholder file key **`CS_FIGMA_FILE_KEY`**. Publish substitutes `FIGMA_FILE_KEY` via `documentUrlSubstitutions`.
 

package/docs/live-hub.md

@@ -20,9 +20,9 @@
 
 | Surface | Role |
 |---|---|
-| **Storybook** (`/`) | Host product surface: Theme × Element × Language toolbar, Docs/Foundations/Components/Release Notes/Status, and Maintainer/* iframes into portable HTML |
+| **Storybook** (`/`) | Host product surface: Theme × Element × Language × Style toolbar, Docs/Foundations/Components/Release Notes/Status, and Maintainer/* iframes into portable HTML |
 | **Atomic View** (`guidelines/atomic-view.html`) | Portable zero-build component grid for gates and clone-and-open browsing — not the public product entry |
-| **Other guidelines / templates** | Portable specimens; opened from Storybook Maintainer/* when exploring Motion, Identity Lab, kitchen-sink, etc. |
+| **Other guidelines / templates** | Portable specimens; opened from Storybook Maintainer/* when exploring Motion, Status Hub / Website / Deck indexes, kitchen-sink, etc. |
 | **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect to `/` (stubs + Vercel redirects) |
 
 ## Surface map (Maintainer/* stories)
@@ -31,7 +31,9 @@
 |---|---|
 | Components/* CSF | React sources under `components/` |
 | Maintainer/Surfaces → Motion | `guidelines/motion.html` |
-| Maintainer/Surfaces → Identity Lab | `ui_kits/status-hub/identity-lab.html` |
+| Maintainer/Surfaces → Status Hub | `ui_kits/status-hub/index.html` |
+| Maintainer/Surfaces → Website | `ui_kits/website/index.html` |
+| Maintainer/Surfaces → Deck | `ui_kits/deck/index.html` |
 | Maintainer/Surfaces → Template Playground | `templates/playground.html` |
 | Maintainer/Surfaces → Kitchen Sink | `templates/kitchen-sink.html` |
 | Maintainer/Surfaces → Image Slots | `templates/image-slots-demo.html` |

package/docs/products.md

@@ -4,22 +4,24 @@
 
 **Source of truth.** Maps CyberSkill portfolio products to Ngũ Hành element packs. One element per product; secondary accents only in gradient washes along Tương sinh.
 
-| Product | Element | Variant | Secondary (Tương sinh) | Markup |
-|---|---|---|---|---|
-| **Lumi** — wish assistant | Hỏa · fire | plasma | tho | `data-cs-element="hoa" data-cs-variant="plasma"` |
-| **Status Hub** — client portfolio portal | Thủy · water | river (default) | moc | `data-cs-element="thuy"` |
-| **CyberOS Agent Spine** — agent infra, memory, gates | Kim · metal | steel | thuy | `data-cs-element="kim" data-cs-variant="steel"` |
-| **CyberSkill Design System** — this library | Mộc · wood | leaf (default) | hoa | `data-cs-element="moc"` |
-| **cyberskill.world** — the studio site | Thổ · earth | studio (default) | — | *(no attributes — studio is Thổ)* |
-| **Client delivery suite** — kickoff · QBR · runbooks | Thổ · earth | clay | kim | `data-cs-element="tho" data-cs-variant="clay"` |
-| **Board / investor collateral** | Kim · metal | champagne (default) | thuy | `data-cs-element="kim"` |
-| **HR / employment instruments** | Mộc · wood | bamboo | hoa | `data-cs-element="moc" data-cs-variant="bamboo"` |
+| Product | Element | Variant | Slot | Secondary (Tương sinh) | Markup |
+|---|---|---|---|---|---|
+| **Lumi** — wish assistant | Hỏa · fire | plasma | soft | tho | `data-cs-element="hoa" data-cs-variant="plasma"` |
+| **Status Hub** — client portfolio portal | Thủy · water | river (default) | middle | moc | `data-cs-element="thuy"` |
+| **CyberOS Agent Spine** — agent infra, memory, gates | Kim · metal | steel | deep | thuy | `data-cs-element="kim" data-cs-variant="steel"` |
+| **CyberSkill Design System** — this library | Mộc · wood | leaf (default) | middle | hoa | `data-cs-element="moc"` |
+| **cyberskill.world** — the studio site | Thổ · earth | studio (default) | middle | — | *(no attributes — studio is Thổ)* |
+| **Client delivery suite** — kickoff · QBR · runbooks | Thổ · earth | clay | deep | kim | `data-cs-element="tho" data-cs-variant="clay"` |
+| **Board / investor collateral** | Kim · metal | champagne (default) | middle | thuy | `data-cs-element="kim"` |
+| **HR / employment instruments** | Mộc · wood | bamboo | soft | hoa | `data-cs-element="moc" data-cs-variant="bamboo"` |
+
+**Slots** (soft / middle / deep) are the shared intensity ladder — see [`docs/design-styles.md`](design-styles.md). Public variant names stay stable; packs are generated from `tokens/element-seeds.json`.
 
 **Why these:** Lumi is conversational spark (plasma). Status Hub is calm status flow (Thủy). Agent Spine is precision infrastructure (Kim·steel). Design System grows everything else (Mộc). Studio brand is Thổ. Delivery is grounded earth (clay). Board collateral is metal precision. HR instruments grow people (bamboo).
 
 ## Scope
 
-- **UI kits stay Thổ-faithful.** `ui_kits/status-hub` and `ui_kits/website` remain Thổ recreations; per-element demos live in **Identity Lab** / Storybook Live.
+- **UI kits stay Thổ-faithful.** `ui_kits/status-hub` and `ui_kits/website` remain Thổ recreations; per-element demos live in the **Storybook Element toolbar**, **Atomic View**, and **Elements Geometry** specimen.
 
 - **Consuming a mapping:** scope the product root with the row's Markup and consume `--cs-accent-*`.