@hubpav/hwio-brand 0.7.11 → 0.9.0

package/dist/design/er3o.md

@@ -59,12 +59,29 @@ typography:
     fontWeight: 400
     lineHeight: 1.6
     letterSpacing: "0"
+  caption:
+    fontFamily: "'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "0.875rem"
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: "0"
   kicker:
     fontFamily: "'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif"
     fontSize: "0.875rem"
     fontWeight: 600
     lineHeight: 1.4
     letterSpacing: "0"
+  chip:
+    fontFamily: "'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "0.875rem"
+    fontWeight: 500
+    letterSpacing: "0"
+  figure:
+    fontFamily: "'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "2.5rem"
+    fontWeight: 700
+    lineHeight: 1
+    letterSpacing: "-0.03em"
   button:
     fontFamily: "'Poppins', 'Poppins Fallback', ui-sans-serif, system-ui, sans-serif"
     fontSize: "0.9375rem"
@@ -81,8 +98,7 @@ spacing:
   section-lg: "112px"
   section-compact: "40px"
   section-compact-lg: "48px"
-  container-hub: "1275px"
-  container-landing: "1640px"
+  container: "1275px"
   container-pad: "27px"
   control: "48px"
   card-padding: "32px"
@@ -133,12 +149,12 @@ components:
 
 **Creative North Star: "The energy dashboard"**
 
-ENEROOO is a separate brand on the shared component system: its palette and Poppins are preserved by owner ruling R7 and its footer graphite by R12. This file records the theme as built.
+ENEROOO is a separate brand on the shared component system: its palette and Poppins are preserved by owner ruling R7, its footer graphite by R12, and its type ramp is direction A (R9) until its own brand manual is applied (PLAN 4.7). This file records the theme as built.
 
 Key characteristics:
 
 - One type family (Poppins), one accent, hairline structure, flat surfaces.
-- Sentence-case labels and buttons everywhere ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); kickers instead of uppercase eyebrows.
+- Sentence case for headings, labels and buttons ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); capitals only for short labels and kickers.
 - Light is the default theme on every site; dark is a visitor's choice remembered without a consent gate (R11).
 - Copy is the product: components carry the site's own words, never placeholder text.
 
@@ -150,27 +166,27 @@ Roles follow the DaisyUI 5 vocabulary so every `@hubpav/hwio-ui` component and e
 
 | Role | Value | Use |
 |---|---|---|
-| `primary` / `primary-content` | `#14A0C0` on `#ffffff` | buttons, active states, links in navigation |
-| `secondary` / `secondary-content` | `#01CC9B` on `#061920` | focus ring, secondary emphasis |
-| `accent` / `accent-content` | `#0C6678` on `#ffffff` | kicker, current-page marker, inline links; never large fills |
-| `neutral` / `neutral-content` | `#404040` on `#ffffff` | ink panels and the footer |
-| `base-100` / `base-100-content` | `#ffffff` on `undefined` | page ground |
-| `base-200` / `base-200-content` | `#f9fafb` on `undefined` | alternate section surface |
-| `base-300` / `base-300-content` | `#f3f4f6` on `undefined` | hairline borders |
-| `info` / `info-content` | `#19768B` on `#ffffff` | informational badges |
-| `success` / `success-content` | `#15803d` on `#ffffff` | form success |
-| `warning` / `warning-content` | `#b45309` on `#ffffff` | warnings |
-| `error` / `error-content` | `#dc2626` on `#ffffff` | form errors |
+| `primary` / `primary-content` | `#ffffff` on `#14A0C0` | buttons, active states, links in navigation |
+| `secondary` / `secondary-content` | `#061920` on `#01CC9B` | focus ring, secondary emphasis |
+| `accent` / `accent-content` | `#ffffff` on `#0C6678` | kicker, current-page marker, inline links; never large fills |
+| `neutral` / `neutral-content` | `#ffffff` on `#404040` | ink panels and the footer |
+| `base-100` / `base-content` | `#333333` on `#ffffff` | page ground |
+| `base-200` / `base-content` | `#333333` on `#f9fafb` | alternate section surface |
+| `base-300` / `base-content` | `#333333` on `#f3f4f6` | hairline borders |
+| `info` / `info-content` | `#ffffff` on `#19768B` | informational badges |
+| `success` / `success-content` | `#ffffff` on `#15803d` | form success |
+| `warning` / `warning-content` | `#ffffff` on `#b45309` | warnings |
+| `error` / `error-content` | `#ffffff` on `#dc2626` | form errors |
 
-**The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`), not hex values.
+**The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`) and the `--hwio-*` variables, not hex values.
 
-**The One Accent Rule.** The accent carries the kicker, the current-page marker and inline links; it never fills large surfaces and never sets small body text (R5).
+**The One Accent Rule.** The accent carries the kicker and the one highlight of a page; it never fills large surfaces and never sets small body text (R5).
 
 
 
 ## Typography
 
-Poppins for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. The ramp tightens tracking as size grows.
+Poppins for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. Each theme file carries its ramp as `--hwio-type-<role>-*` variables.
 
 | Role | Element | Size (large screens) | Weight | Line height | Tracking |
 |---|---|---|---|---|---|
@@ -180,18 +196,21 @@ Poppins for everything: display, body, labels and numerals (tabular numerals in
 | title | `h4` | 1.125rem | 700 | 1.3 | -0.005em |
 | lead | `.hwio-lead` | 1.1875rem | 400 | 1.55 | 0 |
 | body | `body` | 1.0625rem | 400 | 1.6 | 0 |
+| caption | `.hwio-caption` | 0.875rem | 400 | 1.4 | 0 |
 | kicker | `.hwio-kicker` | 0.875rem | 600 | 1.4 | 0 |
+| chip | `.hwio-chip` | 0.875rem | 500 | inherited | 0 |
+| figure | `.hwio-figure` | 2.5rem | 700 | 1 | -0.03em |
 | button | `.btn` | 0.9375rem | 600 | 1 | 0 |
 
-Smaller screens step the display and heading roles down (display: 2.5rem at base, 3rem at md, 3.5rem from 64rem; heading: 2rem at base, 2.5rem from 64rem). Headings use `text-wrap: balance`.
+Smaller screens step the larger roles down (display: 2.5rem below 48rem, 3rem from 48rem, 3.5rem from 64rem; heading: 2rem below 48rem, 2.5rem from 48rem; figure: 2.25rem below 48rem, 2.5rem from 64rem). Headings use `text-wrap: balance`.
 
 ## Layout
 
-Two container presets from the theme: the hub width (1275px) for content-rich sites and the landing width (1640px) for the single-page marketing sites, both with 27px side padding. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
+One container, 1275px wide with 27px side padding. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
 
 ## Elevation & Depth
 
-The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
+The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, Ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
 
 ## Shapes
 
@@ -199,9 +218,10 @@ Corner radii from the theme: fields 2rem, boxes 1.5rem, selectors 2rem. Borders
 
 ## Components
 
-- **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 600, sentence case, 2rem radius; large buttons widen padding at the same height.
+- **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for Ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 600, sentence case, 2rem radius; large buttons widen padding at the same height.
 - **Cards.** `card card-border` on base-100 with a hairline, 32px padding; the lead choice card carries a 3 px accent top border. Cards never nest.
-- **Kicker and lead.** The kicker is the accent-coloured 0.875rem label above a heading; the lead is 1.1875rem muted text below it.
+- **Kicker and lead.** The kicker is the accent-coloured 0.875rem label above a heading, sentence case; the lead is 1.1875rem secondary text below it.
+- **Icons.** One colour from `--hwio-icon`; they label, never decorate.
 - **Inputs.** Field radius, hairline border, 48px tall; focus ring 2 px `secondary`.
 - **Navigation.** `HWioHeader` with mega panels on wide screens (`desktopFrom="xl"` on sites with five or more items); the current page is marked by a 2 px bar on the header's bottom edge.
 - **Bands.** `HWioStatsBand` (hairline top and bottom, vertical dividers, count-up with tabular numerals), `HWioCtaBand`, `HWioLogoStrip`.
@@ -209,9 +229,9 @@ Corner radii from the theme: fields 2rem, boxes 1.5rem, selectors 2rem. Borders
 ## Do's and Don'ts
 
 - Do keep Poppins as the only text face.
-- Do use the theme roles for every colour; don't hard-code hex values in a site.
+- Do use the theme roles and `--hwio-*` variables for every colour; don't hard-code hex values in a site.
 - Do keep buttons sentence case and 48px tall; don't uppercase labels or shrink touch targets below 44 px.
 - Do keep dark mode a visitor's choice with the `hwio_theme` memory; don't follow the OS scheme by default (R11).
 - Don't add inline styles, `style=` attributes or template-literal class names; `policy-lint` fails them.
-- Don't nest cards, add glass or gradient effects, or animate anything above the fold.
+- Don't nest cards, add glass, shadows or gradient effects beyond the Gradient Rule, or animate anything above the fold.
 - Don't set small body text in the accent colour (R5).

package/dist/design/hwio-forestry.md

@@ -1,52 +1,52 @@
 ---
 name: "HARDWARIO (forestry.report)"
-description: "The HARDWARIO system with the forestry green as primary and accent; Inter, hairline borders, 8 px rhythm, 48 px controls. Generated from @hubpav/hwio-brand; the source of truth is brand.json."
+description: "The HARDWARIO system with the forestry green as primary and accent; Inter, hairline borders, the 1 280 px grid. Generated from @hubpav/hwio-brand; the source of truth is brand.json."
 colors:
   primary: "#2B7036"
   primary-content: "#ffffff"
-  secondary: "#016ad4"
+  secondary: "#06367a"
   secondary-content: "#ffffff"
   accent: "#2B7036"
   accent-content: "#ffffff"
   neutral: "#252532"
-  neutral-content: "#f3f4f6"
+  neutral-content: "#ffffff"
   base-100: "#ffffff"
-  base-200: "#F1FAFF"
-  base-300: "#e5e7eb"
+  base-200: "#f7f7f7"
+  base-300: "#dcdcdc"
   base-content: "#252532"
-  info: "#009cfa"
-  info-content: "#06367a"
-  success: "#15803d"
+  info: "#016ad4"
+  info-content: "#ffffff"
+  success: "#2e7d4f"
   success-content: "#ffffff"
-  warning: "#b45309"
-  warning-content: "#ffffff"
-  error: "#dc2626"
+  warning: "#c76a00"
+  warning-content: "#252532"
+  error: "#e30427"
   error-content: "#ffffff"
 typography:
   display:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "3.5rem"
+    fontSize: "4.5rem"
     fontWeight: 700
-    lineHeight: 1.05
-    letterSpacing: "-0.03em"
+    lineHeight: 1.2
+    letterSpacing: "-0.02em"
   heading:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "2.5rem"
-    fontWeight: 700
-    lineHeight: 1.1
-    letterSpacing: "-0.025em"
+    fontSize: "3rem"
+    fontWeight: 600
+    lineHeight: 1.3
+    letterSpacing: "-0.015em"
   subheading:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "1.375rem"
-    fontWeight: 700
-    lineHeight: 1.2
+    fontSize: "2rem"
+    fontWeight: 600
+    lineHeight: 1.3
     letterSpacing: "-0.01em"
   title:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "1.125rem"
+    fontSize: "1.25rem"
     fontWeight: 700
     lineHeight: 1.3
-    letterSpacing: "-0.005em"
+    letterSpacing: "0"
   lead:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
     fontSize: "1.1875rem"
@@ -55,20 +55,38 @@ typography:
     letterSpacing: "0"
   body:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "1.0625rem"
+    fontSize: "1rem"
     fontWeight: 400
     lineHeight: 1.6
     letterSpacing: "0"
-  kicker:
+  caption:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
-    fontSize: "0.875rem"
-    fontWeight: 600
+    fontSize: "0.8125rem"
+    fontWeight: 400
     lineHeight: 1.4
     letterSpacing: "0"
+  kicker:
+    fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "0.8125rem"
+    fontWeight: 700
+    lineHeight: 1.4
+    letterSpacing: "0.07em"
+  chip:
+    fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "0.75rem"
+    fontWeight: 700
+    lineHeight: 1.4
+    letterSpacing: "0.07em"
+  figure:
+    fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
+    fontSize: "2.5rem"
+    fontWeight: 700
+    lineHeight: 1.2
+    letterSpacing: "-0.02em"
   button:
     fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
     fontSize: "0.9375rem"
-    fontWeight: 600
+    fontWeight: 700
     lineHeight: 1
     letterSpacing: "0"
 rounded:
@@ -81,9 +99,11 @@ spacing:
   section-lg: "112px"
   section-compact: "40px"
   section-compact-lg: "48px"
-  container-hub: "1275px"
-  container-landing: "1640px"
-  container-pad: "27px"
+  container: "1328px"
+  container-pad: "24px"
+  grid-columns: "12"
+  grid-width: "1280px"
+  grid-gutter: "24px"
   control: "48px"
   card-padding: "32px"
 components:
@@ -131,18 +151,18 @@ components:
 
 ## Overview
 
-**Creative North Star: "The instrument panel, in the forest"**
+**Creative North Star: "Devices that bring industrial assets online, in the forest"**
 
-forestry.report is a HARDWARIO landing page for forestry managers. It shares every component and rule with the family and swaps the primary and accent roles to the forestry green so the vertical is recognisable at a glance. This file documents the theme as built and is regenerated from brand.json.
+forestry.report is a HARDWARIO landing page for forestry managers. It shares every component, neutral and type rule with the family and swaps the primary and accent roles to the forestry green. The guidelines have no forestry colour and D29 retired the green Forestry Report logo, so whether the report keeps its green is an owner question for its relaunch (PLAN 6.3). This file documents the theme as built and is regenerated from brand.json.
 
 Key characteristics:
 
 - One type family (Inter), one accent, hairline structure, flat surfaces.
-- Sentence-case labels and buttons everywhere ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); kickers instead of uppercase eyebrows.
+- Sentence case for headings, labels and buttons ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); capitals only for short labels and kickers.
 - Light is the default theme on every site; dark is a visitor's choice remembered without a consent gate (R11).
 - Copy is the product: components carry the site's own words, never placeholder text.
 
-**The Brand Rule.** The HARDWARIO logo (red `#e30427` kept in the brand mark), navy `#06367a` and Inter are the identity. The forestry green is a theme role for this vertical (primary and accent), not a brand colour.
+**The Brand Rule.** The HARDWARIO logo, Inter and the Brand Guidelines HBG.261028.01 are the identity. The forestry green is a theme role for this vertical (primary and accent), not a brand colour.
 
 ## Colors
 
@@ -150,64 +170,69 @@ Roles follow the DaisyUI 5 vocabulary so every `@hubpav/hwio-ui` component and e
 
 | Role | Value | Use |
 |---|---|---|
-| `primary` / `primary-content` | `#2B7036` on `#ffffff` | buttons, active states, links in navigation |
-| `secondary` / `secondary-content` | `#016ad4` on `#ffffff` | focus ring, secondary emphasis |
-| `accent` / `accent-content` | `#2B7036` on `#ffffff` | kicker, current-page marker, inline links; never large fills |
-| `neutral` / `neutral-content` | `#252532` on `#f3f4f6` | ink panels and the footer |
-| `base-100` / `base-100-content` | `#ffffff` on `undefined` | page ground |
-| `base-200` / `base-200-content` | `#F1FAFF` on `undefined` | alternate section surface |
-| `base-300` / `base-300-content` | `#e5e7eb` on `undefined` | hairline borders |
-| `info` / `info-content` | `#009cfa` on `#06367a` | informational badges |
-| `success` / `success-content` | `#15803d` on `#ffffff` | form success |
-| `warning` / `warning-content` | `#b45309` on `#ffffff` | warnings |
-| `error` / `error-content` | `#dc2626` on `#ffffff` | form errors |
-
-**The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`), not hex values.
-
-**The One Accent Rule.** The accent carries the kicker, the current-page marker and inline links; it never fills large surfaces and never sets small body text (R5).
+| `primary` / `primary-content` | `#ffffff` on `#2B7036` | buttons, the current-page marker, active states (Blue; Sky in dark) |
+| `secondary` / `secondary-content` | `#ffffff` on `#06367a` | focus ring, dark grounds (Navy; Sky in dark) |
+| `accent` / `accent-content` | `#ffffff` on `#2B7036` | kickers and the one highlight per page; never large fills, never small body text |
+| `neutral` / `neutral-content` | `#ffffff` on `#252532` | Ink panels and the footer |
+| `base-100` / `base-content` | `#252532` on `#ffffff` | page ground |
+| `base-200` / `base-content` | `#252532` on `#f7f7f7` | Panel: cards, zones, alternate sections |
+| `base-300` / `base-content` | `#252532` on `#dcdcdc` | Hairline: rules and thin frames |
+| `info` / `info-content` | `#ffffff` on `#016ad4` | info: a note, nothing to do (Blue, a proposal in the guidelines, D34) |
+| `success` / `success-content` | `#ffffff` on `#2e7d4f` | done, passed, in limits |
+| `warning` / `warning-content` | `#252532` on `#c76a00` | attention, at risk; never a ground for text (White 3.8:1, Ink 3.9:1) |
+| `error` / `error-content` | `#ffffff` on `#e30427` | failed, critical, stop; in charts the only use of Red |
+
+**The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`) and the `--hwio-*` variables, not hex values.
+
+**The One Accent Rule.** The accent carries the kicker and the one highlight of a page; it never fills large surfaces and never sets small body text (R5). In charts and dashboards Red means a failure and nothing else (the light red in dark mode). On white the series are Blue, Sky and Gray with a bold Navy highlight; Sky marks are labelled directly in Ink, and an unlabelled Sky mark gets a 1 px Blue outline. On dark grounds the series are Sky, Blue and the light gray with a bold White highlight (`--hwio-chart-*`, D44).
+
+**The Gradient Rule.** `--hwio-gradient` (Red to Sky, 90°) frames: a band along an edge, a short rule under a title, the strip on top of a card. `--hwio-gradient-figure` fills the one key figure of a page, 28 pt and up: the left three quarters of the gradient on white, the light red to Sky over the full length on the dark ground (D44). Never behind body text, tables or photographs, never on icons, never reversed or vertical.
 
 ### Dark theme (`hwio-forestry-dark`)
 
-The dark pair keeps the same roles; visitors choose it with the theme toggle and the choice is remembered (R11). The primary lifts to the light brand blue with dark content so filled and outline buttons stay legible (R10).
+The dark mode of the Brand Guidelines (D35, ratified for the web on 2026-10-29): a near-black ground, Ink surfaces, White text, the light gray for secondary text, Sky for buttons and links, the light red for accents and lighter status colours. The dark pair keeps the same roles; light is the default, visitors choose dark with the theme toggle and the choice is remembered (R11).
 
 | Role | Value |
 |---|---|
-| `primary` / `primary-content` | `#5aa864` on `#0f0f14` |
-| `secondary` / `secondary-content` | `#009cfa` on `#0f0f14` |
-| `accent` / `accent-content` | `#5aa864` on `#0f0f14` |
-| `neutral` / `neutral-content` | `#23232f` on `#e7e7ee` |
-| `base-100` / `base-100-content` | `#0f0f14` on `undefined` |
-| `base-200` / `base-200-content` | `#1a1a22` on `undefined` |
-| `base-300` / `base-300-content` | `#23232f` on `undefined` |
-| `info` / `info-content` | `#009cfa` on `#06367a` |
-| `success` / `success-content` | `#15803d` on `#ffffff` |
-| `warning` / `warning-content` | `#b45309` on `#ffffff` |
-| `error` / `error-content` | `#dc2626` on `#ffffff` |
+| `primary` / `primary-content` | `#16161d` on `#5aa864` |
+| `secondary` / `secondary-content` | `#16161d` on `#009cfa` |
+| `accent` / `accent-content` | `#16161d` on `#5aa864` |
+| `neutral` / `neutral-content` | `#ffffff` on `#252532` |
+| `base-100` / `base-content` | `#ffffff` on `#16161d` |
+| `base-200` / `base-content` | `#ffffff` on `#252532` |
+| `base-300` / `base-content` | `#ffffff` on `#3b3b46` |
+| `info` / `info-content` | `#16161d` on `#009cfa` |
+| `success` / `success-content` | `#16161d` on `#34c47a` |
+| `warning` / `warning-content` | `#16161d` on `#f59e0b` |
+| `error` / `error-content` | `#16161d` on `#f43f5e` |
 
 ## Typography
 
-Inter for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. The ramp tightens tracking as size grows.
+Inter for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. Each theme file carries its ramp as `--hwio-type-<role>-*` variables.
 
 | Role | Element | Size (large screens) | Weight | Line height | Tracking |
 |---|---|---|---|---|---|
-| display | `h1` | 3.5rem | 700 | 1.05 | -0.03em |
-| heading | `h2` | 2.5rem | 700 | 1.1 | -0.025em |
-| subheading | `h3` | 1.375rem | 700 | 1.2 | -0.01em |
-| title | `h4` | 1.125rem | 700 | 1.3 | -0.005em |
+| display | `h1` | 4.5rem | 700 | 1.2 | -0.02em |
+| heading | `h2` | 3rem | 600 | 1.3 | -0.015em |
+| subheading | `h3` | 2rem | 600 | 1.3 | -0.01em |
+| title | `h4` | 1.25rem | 700 | 1.3 | 0 |
 | lead | `.hwio-lead` | 1.1875rem | 400 | 1.55 | 0 |
-| body | `body` | 1.0625rem | 400 | 1.6 | 0 |
-| kicker | `.hwio-kicker` | 0.875rem | 600 | 1.4 | 0 |
-| button | `.btn` | 0.9375rem | 600 | 1 | 0 |
+| body | `body` | 1rem | 400 | 1.6 | 0 |
+| caption | `.hwio-caption` | 0.8125rem | 400 | 1.4 | 0 |
+| kicker | `.hwio-kicker` | 0.8125rem | 700 | 1.4 | 0.07em, uppercase |
+| chip | `.hwio-chip` | 0.75rem | 700 | 1.4 | 0.07em, uppercase |
+| figure | `.hwio-figure` | 2.5rem | 700 | 1.2 | -0.02em |
+| button | `.btn` | 0.9375rem | 700 | 1 | 0 |
 
-Smaller screens step the display and heading roles down (display: 2.5rem at base, 3rem at md, 3.5rem from 64rem; heading: 2rem at base, 2.5rem from 64rem). Headings use `text-wrap: balance`.
+Smaller screens step the larger roles down (display: 2.5rem below 48rem, 3rem from 48rem, 3.75rem from 64rem, 4.5rem from 80rem; heading: 2rem below 48rem, 2.5rem from 64rem, 3rem from 80rem, line height 1.2 from 64rem; subheading: 1.5rem below 48rem, 1.75rem from 64rem, 2rem from 80rem). Headings use `text-wrap: balance`.
 
 ## Layout
 
-Two container presets from the theme: the hub width (1275px) for content-rich sites and the landing width (1640px) for the single-page marketing sites, both with 27px side padding. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
+Twelve columns, 1280px wide, with 24px gutters (Brand Guidelines chapter 05): the container is 1328px including its 24px margin on each side, so the content box is the guidelines' 1280px grid. Content sits flush to the margins; nothing floats in from them. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
 
 ## Elevation & Depth
 
-The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
+The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, Ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
 
 ## Shapes
 
@@ -215,9 +240,10 @@ Corner radii from the theme: fields 0.5rem, boxes 1rem, selectors 2rem. Borders
 
 ## Components
 
-- **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 600, sentence case, 0.5rem radius; large buttons widen padding at the same height.
+- **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for Ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 700, sentence case, 0.5rem radius; large buttons widen padding at the same height.
 - **Cards.** `card card-border` on base-100 with a hairline, 32px padding; the lead choice card carries a 3 px accent top border. Cards never nest.
-- **Kicker and lead.** The kicker is the accent-coloured 0.875rem label above a heading; the lead is 1.1875rem muted text below it.
+- **Kicker and lead.** The kicker is the accent-coloured 0.8125rem label above a heading, Bold caps (0.07em tracking); the lead is 1.1875rem secondary text below it.
+- **Icons.** One colour from `--hwio-icon`; they label, never decorate.
 - **Inputs.** Field radius, hairline border, 48px tall; focus ring 2 px `secondary`.
 - **Navigation.** `HWioHeader` with mega panels on wide screens (`desktopFrom="xl"` on sites with five or more items); the current page is marked by a 2 px bar on the header's bottom edge.
 - **Bands.** `HWioStatsBand` (hairline top and bottom, vertical dividers, count-up with tabular numerals), `HWioCtaBand`, `HWioLogoStrip`.
@@ -225,9 +251,9 @@ Corner radii from the theme: fields 0.5rem, boxes 1rem, selectors 2rem. Borders
 ## Do's and Don'ts
 
 - Do keep Inter as the only text face.
-- Do use the theme roles for every colour; don't hard-code hex values in a site.
+- Do use the theme roles and `--hwio-*` variables for every colour; don't hard-code hex values in a site.
 - Do keep buttons sentence case and 48px tall; don't uppercase labels or shrink touch targets below 44 px.
 - Do keep dark mode a visitor's choice with the `hwio_theme` memory; don't follow the OS scheme by default (R11).
 - Don't add inline styles, `style=` attributes or template-literal class names; `policy-lint` fails them.
-- Don't nest cards, add glass or gradient effects, or animate anything above the fold.
+- Don't nest cards, add glass, shadows or gradient effects beyond the Gradient Rule, or animate anything above the fold.
 - Don't set small body text in the accent colour (R5).