@orange-halo/tokens 2.0.0 → 2.1.0

package/tokens/brands/hood/palette.tokens.json

@@ -0,0 +1,130 @@
+{
+  "$description": "Hood brand palette (tier 1): Fraser Hood's personal site. Greyscale and type-led, after fraser-hood.co.uk/gig-history: flat, no shadows, small corners, one quiet blue for links that need a colour and for info.",
+  "color": {
+    "grey": {
+      "$description": "Neutral greys. 850, 800, 750 and 100 are the gig-history site's page, surface, line and text colours; 500 is its muted grey, a touch lighter",
+      "50": { "$type": "color", "$value": "#F7F7F7" },
+      "100": { "$type": "color", "$value": "#EDEDED" },
+      "200": { "$type": "color", "$value": "#DEDEDE" },
+      "300": { "$type": "color", "$value": "#C4C4C4" },
+      "400": { "$type": "color", "$value": "#A8A8A8" },
+      "500": { "$type": "color", "$value": "#929292", "$description": "The site's muted grey (#8F8F8F) lifted just enough for 4.5:1 on surface.raised" },
+      "600": { "$type": "color", "$value": "#6B6B6B" },
+      "650": { "$type": "color", "$value": "#575757" },
+      "700": { "$type": "color", "$value": "#454545" },
+      "750": { "$type": "color", "$value": "#363636" },
+      "800": { "$type": "color", "$value": "#292929" },
+      "850": { "$type": "color", "$value": "#1F1F1F" },
+      "900": { "$type": "color", "$value": "#171717" },
+      "950": { "$type": "color", "$value": "#0D0D0D" }
+    },
+    "white": { "$type": "color", "$value": "#FFFFFF" },
+    "black": { "$type": "color", "$value": "#000000" },
+    "blue": {
+      "$description": "The one colour: accent and info",
+      "50": { "$type": "color", "$value": "#EDF3FC" },
+      "200": { "$type": "color", "$value": "#B3CDF2" },
+      "300": { "$type": "color", "$value": "#93B8EC" },
+      "700": { "$type": "color", "$value": "#1F5CB3" },
+      "800": { "$type": "color", "$value": "#184A91" },
+      "900": { "$type": "color", "$value": "#16263D" }
+    },
+    "green": {
+      "$description": "Success",
+      "50": { "$type": "color", "$value": "#EBF6EE" },
+      "300": { "$type": "color", "$value": "#82CF9C" },
+      "700": { "$type": "color", "$value": "#1D7238" },
+      "900": { "$type": "color", "$value": "#142B1C" }
+    },
+    "red": {
+      "$description": "Error",
+      "50": { "$type": "color", "$value": "#FCEEEE" },
+      "100": { "$type": "color", "$value": "#FAD4D4" },
+      "300": { "$type": "color", "$value": "#F59A9A" },
+      "700": { "$type": "color", "$value": "#B02525" },
+      "800": { "$type": "color", "$value": "#8C1D1D" },
+      "900": { "$type": "color", "$value": "#3A1717" }
+    },
+    "amber": {
+      "$description": "Warning",
+      "50": { "$type": "color", "$value": "#FCF4E3" },
+      "300": { "$type": "color", "$value": "#EBC271" },
+      "700": { "$type": "color", "$value": "#835600" },
+      "900": { "$type": "color", "$value": "#33260E" }
+    }
+  },
+  "font": {
+    "family": {
+      "$description": "Plus Jakarta Sans for everything, as on the site",
+      "sans": { "$type": "fontFamily", "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif" },
+      "display": { "$type": "fontFamily", "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif" },
+      "mono": { "$type": "fontFamily", "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
+    },
+    "size": {
+      "$description": "The site's scale: 15px body, large bold headings",
+      "xs": { "$type": "dimension", "$value": "0.6875rem" },
+      "sm": { "$type": "dimension", "$value": "0.8125rem" },
+      "base": { "$type": "dimension", "$value": "0.9375rem" },
+      "lg": { "$type": "dimension", "$value": "1.0625rem" },
+      "xl": { "$type": "dimension", "$value": "1.35rem" },
+      "2xl": { "$type": "dimension", "$value": "1.8rem" },
+      "3xl": { "$type": "dimension", "$value": "2.6rem" },
+      "4xl": { "$type": "dimension", "$value": "3.5rem" },
+      "5xl": { "$type": "dimension", "$value": "4.2rem" }
+    },
+    "weight": {
+      "normal": { "$type": "fontWeight", "$value": "400" },
+      "medium": { "$type": "fontWeight", "$value": "500" },
+      "semibold": { "$type": "fontWeight", "$value": "600" },
+      "bold": { "$type": "fontWeight", "$value": "700" },
+      "extrabold": { "$type": "fontWeight", "$value": "800" }
+    },
+    "lineHeight": {
+      "none": { "$type": "number", "$value": 1 },
+      "tight": { "$type": "number", "$value": 1.1 },
+      "snug": { "$type": "number", "$value": 1.3 },
+      "normal": { "$type": "number", "$value": 1.5 },
+      "relaxed": { "$type": "number", "$value": 1.6 }
+    },
+    "letterSpacing": {
+      "tighter": { "$type": "dimension", "$value": "-0.02em" },
+      "tight": { "$type": "dimension", "$value": "-0.01em" },
+      "normal": { "$type": "dimension", "$value": "0" },
+      "wide": { "$type": "dimension", "$value": "0.02em" },
+      "widest": { "$type": "dimension", "$value": "0.08em", "$description": "Small uppercase labels, as on the site" }
+    }
+  },
+  "radius": {
+    "$description": "Small, square-ish corners: 2px badges, 4px controls",
+    "none": { "$type": "dimension", "$value": "0" },
+    "xs": { "$type": "dimension", "$value": "2px" },
+    "sm": { "$type": "dimension", "$value": "4px" },
+    "md": { "$type": "dimension", "$value": "6px" },
+    "full": { "$type": "dimension", "$value": "9999px" }
+  },
+  "border": {
+    "width": {
+      "1": { "$type": "dimension", "$value": "1px" },
+      "2": { "$type": "dimension", "$value": "2px" }
+    }
+  },
+  "shadow": {
+    "$description": "Flat: no shadows, except under dialogs",
+    "none": { "$type": "shadow", "$value": "none" },
+    "overlay": { "$type": "shadow", "$value": "0 12px 32px rgba(0, 0, 0, 0.35)", "$description": "Modals and drawers only, to lift them off the backdrop" }
+  },
+  "motion": {
+    "duration": {
+      "quick": { "$type": "duration", "$value": "100ms" },
+      "snappy": { "$type": "duration", "$value": "150ms" },
+      "gentle": { "$type": "duration", "$value": "200ms" },
+      "relaxed": { "$type": "duration", "$value": "250ms" },
+      "slow": { "$type": "duration", "$value": "350ms" }
+    },
+    "easing": {
+      "$description": "Plain ease-out: no overshoot",
+      "standard": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1] },
+      "out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1] }
+    }
+  }
+}

package/tokens/brands/orange-halo/brand.json

@@ -0,0 +1,5 @@
+{
+  "$description": "About the brand, for tools that show it (Storybook's Brand control): its name, and the stylesheets that load its fonts.",
+  "name": "Orange Halo",
+  "fonts": ["https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"]
+}

package/tokens/{themes → brands/orange-halo}/dark.tokens.json

@@ -39,7 +39,12 @@
       "overlay": { "$type": "color", "$value": "rgba(15, 12, 10, 0.7)" },
       "disabled": { "$type": "color", "$value": "{color.warm.mocha}" },
       "hover": { "$type": "color", "$value": "{color.warm.hickory}" },
-      "activePressed": { "$type": "color", "$value": "{color.warm.mocha}" }
+      "activePressed": { "$type": "color", "$value": "{color.warm.mocha}" },
+      "featuredStart": { "$type": "color", "$value": "{color.warm.dawn}", "$description": "Same as light for now: the dark theme hasn't been designed" },
+      "featuredMid": { "$type": "color", "$value": "{color.warm.shell}" },
+      "featuredEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
+      "sheen": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
+      "backdrop": { "$type": "color", "$value": "rgba(61, 50, 41, 0.6)" }
     },
     "border": {
       "default": { "$type": "color", "$value": "{color.warm.taupe}" },
@@ -48,7 +53,9 @@
       "strong": { "$type": "color", "$value": "{color.warm.stone}" },
       "hover": { "$type": "color", "$value": "{color.warm.dune}" },
       "disabled": { "$type": "color", "$value": "{color.warm.hickory}" },
-      "brand": { "$type": "color", "$value": "rgba(232, 168, 56, 0.3)" }
+      "brand": { "$type": "color", "$value": "rgba(232, 168, 56, 0.3)" },
+      "brandHover": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)", "$description": "Same as light for now: the dark theme hasn't been designed" },
+      "divider": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)" }
     },
     "text": {
       "primary": { "$type": "color", "$value": "{color.warm.linen}" },
@@ -72,7 +79,11 @@
     "primary": { "$type": "color", "$value": "{color.honey.800}" },
     "secondary": { "$type": "color", "$value": "{color.warm.espresso}" },
     "accent": { "$type": "color", "$value": "{color.blue.800}" },
-    "error": { "$type": "color", "$value": "{color.red.900}" }
+    "error": { "$type": "color", "$value": "{color.red.900}" },
+    "neutral": { "$type": "color", "$value": "{shadow.chunky.driftwood}", "$description": "As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design" },
+    "neutralHover": { "$type": "color", "$value": "{shadow.chunky.driftwoodHover}", "$description": "As in light; review with the dark design" },
+    "overlay": { "$type": "color", "$value": "{shadow.chunky.driftwoodDeep}", "$description": "As in light; review with the dark design" },
+    "field": { "$type": "color", "$value": "{shadow.chunky.walnut}", "$description": "As in light; review with the dark design" }
   },
   "elevation": {
     "$description": "Black-based shadows — warm-brown shadows vanish on cocoa",

package/tokens/{semantic.tokens.json → brands/orange-halo/light.tokens.json}

@@ -150,6 +150,31 @@
         "$type": "color",
         "$value": "#F0EBE3",
         "$description": "Active/pressed surface"
+      },
+      "featuredStart": {
+        "$type": "color",
+        "$value": "{color.warm.dawn}",
+        "$description": "Featured (sunlit) card gradient: top"
+      },
+      "featuredMid": {
+        "$type": "color",
+        "$value": "{color.warm.shell}",
+        "$description": "Featured (sunlit) card gradient: 30%"
+      },
+      "featuredEnd": {
+        "$type": "color",
+        "$value": "{color.warm.biscuit}",
+        "$description": "Featured (sunlit) card gradient: bottom"
+      },
+      "sheen": {
+        "$type": "color",
+        "$value": "rgba(255, 255, 255, 0.5)",
+        "$description": "Light glaze at the top of card headers, fading to transparent"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.6)",
+        "$description": "Modal backdrop — darker than surface.overlay so the dialog stands out"
       }
     },
     "border": {
@@ -187,6 +212,16 @@
         "$type": "color",
         "$value": "rgba(197, 67, 0, 0.25)",
         "$description": "Brand-tinted border"
+      },
+      "brandHover": {
+        "$type": "color",
+        "$value": "rgba(197, 67, 0, 0.35)",
+        "$description": "Brand-tinted border on hover. Decorative container edge — not a focus or control border"
+      },
+      "divider": {
+        "$type": "color",
+        "$value": "rgba(226, 213, 200, 0.6)",
+        "$description": "Decorative divider inside a container, such as a card's header and footer"
       }
     },
     "text": {
@@ -701,8 +736,48 @@
       "$type": "shadow",
       "$value": "{shadow.inset}",
       "$description": "Inputs, wells"
+    },
+    "surface": {
+      "$description": "Card surfaces, by state. Featured is the sunlit card",
+      "flat": { "$type": "shadow", "$value": "{shadow.layered.flat}" },
+      "raised": { "$type": "shadow", "$value": "{shadow.layered.raised}" },
+      "lifted": { "$type": "shadow", "$value": "{shadow.layered.lifted}", "$description": "Hovered" },
+      "pressed": { "$type": "shadow", "$value": "{shadow.layered.pressed}" },
+      "focused": { "$type": "shadow", "$value": "{shadow.layered.focused}", "$description": "Sits under the focus glow" },
+      "featured": { "$type": "shadow", "$value": "{shadow.layered.sunlit}" },
+      "featuredLifted": { "$type": "shadow", "$value": "{shadow.layered.sunlitLifted}" },
+      "featuredFocused": { "$type": "shadow", "$value": "{shadow.layered.sunlitFocused}" }
+    },
+    "offset": {
+      "$description": "How far solid offset shadows sit from the element, from pressed (xs) to dialogs (2xl). The colour comes from shadow.*. A flat brand sets every step to 0",
+      "xs": { "$type": "dimension", "$value": "1px" },
+      "sm": { "$type": "dimension", "$value": "2px" },
+      "md": { "$type": "dimension", "$value": "3px" },
+      "lg": { "$type": "dimension", "$value": "4px" },
+      "xl": { "$type": "dimension", "$value": "5px" },
+      "2xl": { "$type": "dimension", "$value": "6px" }
     }
   },
+  "lift": {
+    "$description": "How far elements move on hover (negative: up and left, towards the viewer) and when pressed (positive: into the page). A still brand sets every step to 0",
+    "hoverSm": { "$type": "dimension", "$value": "-1px" },
+    "hoverMd": { "$type": "dimension", "$value": "-2px" },
+    "pressSm": { "$type": "dimension", "$value": "1px" },
+    "pressMd": { "$type": "dimension", "$value": "2px" }
+  },
+  "stroke": {
+    "$description": "Border widths by role",
+    "control": { "$type": "dimension", "$value": "{border.width.chunky}", "$description": "Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs" },
+    "surface": { "$type": "dimension", "$value": "{border.width.1}", "$description": "Card edges" },
+    "divider": { "$type": "dimension", "$value": "{border.width.1}", "$description": "Lines between sections" }
+  },
+  "decoration": {
+    "$description": "Link underlines. Orange Halo's are dashed: a dash, then a gap, repeating every period. A solid underline sets dash and period to the same value",
+    "underlineThickness": { "$type": "dimension", "$value": "2px" },
+    "underlineFocusThickness": { "$type": "dimension", "$value": "3px", "$description": "The solid underline that shows keyboard focus on inline links" },
+    "underlineDash": { "$type": "dimension", "$value": "4px" },
+    "underlinePeriod": { "$type": "dimension", "$value": "8px" }
+  },
   "motion": {
     "$description": "Relaxed, playful motion",
     "quick": {
@@ -759,6 +834,26 @@
       "$type": "color",
       "$value": "{shadow.chunky.error}",
       "$description": "Error state"
+    },
+    "neutral": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwood}",
+      "$description": "Containers and the skip link"
+    },
+    "neutralHover": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodHover}",
+      "$description": "Lifted containers"
+    },
+    "overlay": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodDeep}",
+      "$description": "Dialogs"
+    },
+    "field": {
+      "$type": "color",
+      "$value": "{shadow.chunky.walnut}",
+      "$description": "The inset shadow inside text fields"
     }
   },
   "focus": {

package/tokens/{global.tokens.json → brands/orange-halo/palette.tokens.json}

@@ -1,5 +1,5 @@
 {
-  "$description": "Global Design Tokens — Orange Halo Visual DNA. Warm, playful, personal.",
+  "$description": "Orange Halo palette (tier 1): colours, fonts, radii, shadows, gradients, motion and borders. Warm, playful, personal. Other brands provide their own palette with the same groups.",
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -536,97 +536,6 @@
       }
     }
   },
-  "spacing": {
-    "$description": "Generous spacing — breathing room, not dense",
-    "0": {
-      "$type": "dimension",
-      "$value": "0"
-    },
-    "px": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "0-5": {
-      "$type": "dimension",
-      "$value": "0.125rem",
-      "$description": "2px"
-    },
-    "1": {
-      "$type": "dimension",
-      "$value": "0.25rem",
-      "$description": "4px"
-    },
-    "1-5": {
-      "$type": "dimension",
-      "$value": "0.375rem",
-      "$description": "6px"
-    },
-    "2": {
-      "$type": "dimension",
-      "$value": "0.5rem",
-      "$description": "8px"
-    },
-    "2-5": {
-      "$type": "dimension",
-      "$value": "0.625rem",
-      "$description": "10px"
-    },
-    "3": {
-      "$type": "dimension",
-      "$value": "0.75rem",
-      "$description": "12px"
-    },
-    "3-5": {
-      "$type": "dimension",
-      "$value": "0.875rem",
-      "$description": "14px"
-    },
-    "4": {
-      "$type": "dimension",
-      "$value": "1rem",
-      "$description": "16px"
-    },
-    "5": {
-      "$type": "dimension",
-      "$value": "1.25rem",
-      "$description": "20px"
-    },
-    "6": {
-      "$type": "dimension",
-      "$value": "1.5rem",
-      "$description": "24px"
-    },
-    "7": {
-      "$type": "dimension",
-      "$value": "1.75rem",
-      "$description": "28px"
-    },
-    "8": {
-      "$type": "dimension",
-      "$value": "2rem",
-      "$description": "32px"
-    },
-    "10": {
-      "$type": "dimension",
-      "$value": "2.5rem",
-      "$description": "40px"
-    },
-    "12": {
-      "$type": "dimension",
-      "$value": "3rem",
-      "$description": "48px"
-    },
-    "16": {
-      "$type": "dimension",
-      "$value": "4rem",
-      "$description": "64px"
-    },
-    "20": {
-      "$type": "dimension",
-      "$value": "5rem",
-      "$description": "80px"
-    }
-  },
   "radius": {
     "$description": "Friendly and soft — not sharp, not overly pill-shaped",
     "none": {
@@ -716,6 +625,63 @@
         "$type": "color",
         "$value": "rgba(181, 69, 64, 0.3)",
         "$description": "Error state shadow"
+      },
+      "driftwood": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.15)",
+        "$description": "Translucent driftwood, for offset shadows on cream"
+      },
+      "driftwoodHover": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.2)",
+        "$description": "A step darker, for the lifted state"
+      },
+      "driftwoodDeep": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.25)",
+        "$description": "For dialogs, which sit above everything"
+      },
+      "walnut": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.15)",
+        "$description": "Translucent walnut, for the inset shadow inside fields"
+      }
+    },
+    "layered": {
+      "$description": "Layered surface shadows: soft drop shadows with a top highlight, so cards feel like physical objects",
+      "flat": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)"
+      },
+      "raised": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8)"
+      },
+      "lifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "pressed": {
+        "$type": "shadow",
+        "$value": "0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04)"
+      },
+      "focused": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+        "$description": "Sits under the focus glow"
+      },
+      "sunlit": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "sunlitLifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1)"
+      },
+      "sunlitFocused": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+        "$description": "Sits under the focus glow"
       }
     }
   },
@@ -830,81 +796,5 @@
         "$description": "Signature chunky frame for controls and feedback"
       }
     }
-  },
-  "size": {
-    "$description": "Fixed layout sizes: content widths and viewport breakpoints",
-    "container": {
-      "$description": "Content max-widths",
-      "sm": {
-        "$type": "dimension",
-        "$value": "640px"
-      },
-      "md": {
-        "$type": "dimension",
-        "$value": "768px"
-      },
-      "lg": {
-        "$type": "dimension",
-        "$value": "1024px"
-      },
-      "xl": {
-        "$type": "dimension",
-        "$value": "1280px"
-      }
-    },
-    "breakpoint": {
-      "$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
-      "xs": {
-        "$type": "dimension",
-        "$value": "480px"
-      },
-      "sm": {
-        "$type": "dimension",
-        "$value": "640px"
-      },
-      "md": {
-        "$type": "dimension",
-        "$value": "768px"
-      },
-      "lg": {
-        "$type": "dimension",
-        "$value": "1024px"
-      }
-    }
-  },
-  "zIndex": {
-    "$description": "Z-index layering",
-    "0": {
-      "$type": "number",
-      "$value": 0
-    },
-    "10": {
-      "$type": "number",
-      "$value": 10
-    },
-    "20": {
-      "$type": "number",
-      "$value": 20
-    },
-    "dropdown": {
-      "$type": "number",
-      "$value": 1000
-    },
-    "sticky": {
-      "$type": "number",
-      "$value": 1100
-    },
-    "modal": {
-      "$type": "number",
-      "$value": 1200
-    },
-    "popover": {
-      "$type": "number",
-      "$value": 1300
-    },
-    "tooltip": {
-      "$type": "number",
-      "$value": 1400
-    }
   }
 }

package/tokens/{component.tokens.json → core/component.tokens.json}

@@ -7,7 +7,7 @@
       "fontWeight": { "$type": "fontWeight", "$value": "{typography.control.fontWeight}" },
       "letterSpacing": { "$type": "dimension", "$value": "{typography.control.letterSpacing}" },
       "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.control}" },
       "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easePlayful}" }
     },
@@ -77,7 +77,7 @@
       "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.md}" },
       "lineHeight": { "$type": "number", "$value": "{typography.body.base.lineHeight}" },
       "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.control}" },
       "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
     },
@@ -116,7 +116,7 @@
     "base": {
       "background": { "$type": "color", "$value": "{color.surface.raised}" },
       "borderRadius": { "$type": "dimension", "$value": "{shape.large}" },
-      "borderWidth": { "$type": "dimension", "$value": "{border.width.1}" },
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.surface}" },
       "borderColor": { "$type": "color", "$value": "{color.border.default}" },
       "shadow": { "$type": "shadow", "$value": "{elevation.soft}" },
       "padding": { "$type": "dimension", "$value": "{spacing.5}" }
@@ -144,23 +144,26 @@
     },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "background": { "$type": "string", "$value": "{gradient.sunlit}" },
-      "gradientStart": { "$type": "color", "$value": "{color.warm.dawn}" },
-      "gradientMid": { "$type": "color", "$value": "{color.warm.shell}" },
-      "gradientEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
+      "background": { "$type": "string", "$value": "linear-gradient(180deg, {color.surface.featuredStart} 0%, {color.surface.featuredMid} 30%, {color.surface.featuredEnd} 100%)" },
+      "gradientStart": { "$type": "color", "$value": "{color.surface.featuredStart}" },
+      "gradientMid": { "$type": "color", "$value": "{color.surface.featuredMid}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.surface.featuredEnd}" },
       "borderColor": { "$type": "color", "$value": "{color.border.brand}" },
-      "borderColorHover": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)", "$description": "Decorative container edge — not a focus or control border" },
+      "borderColorHover": { "$type": "color", "$value": "{color.border.brandHover}" },
       "shadow": { "$type": "shadow", "$value": "{elevation.medium}" }
     },
     "section": {
       "$description": "Card header and footer",
-      "dividerColor": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)", "$description": "Decorative divider" },
-      "headerGradientStart": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
+      "dividerColor": { "$type": "color", "$value": "{color.border.divider}" },
+      "headerGradientStart": { "$type": "color", "$value": "{color.surface.sheen}" },
       "headerGradientEnd": { "$type": "color", "$value": "rgba(255, 255, 255, 0)" }
     }
   },
   "progress": {
     "$description": "Progress — chunky pill track",
+    "track": {
+      "insetShadow": { "$type": "color", "$value": "rgba(0, 0, 0, 0.06)", "$description": "Neutral, so it works on every track colour" }
+    },
     "inverse": {
       "$description": "On brand/accent backgrounds (e.g. journey hero). Fill is cream so it reads at 3.7:1 against the track.",
       "trackBackground": { "$type": "color", "$value": "rgba(255, 255, 255, 0.15)" },
@@ -219,10 +222,11 @@
   },
   "modal": {
     "$description": "Modal dialog",
-    "overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.6)", "$description": "Backdrop — darker than color.surface.overlay so the dialog stands out" }
+    "overlay": { "$type": "color", "$value": "{color.surface.backdrop}" }
   },
   "closeButton": {
     "$description": "Icon-only close buttons in alerts and modals",
-    "backgroundHover": { "$type": "color", "$value": "rgba(0, 0, 0, 0.08)", "$description": "Neutral tint that works on every alert variant" }
+    "backgroundHover": { "$type": "color", "$value": "rgba(0, 0, 0, 0.08)", "$description": "Neutral tint that works on every alert variant" },
+    "shadowHover": { "$type": "color", "$value": "rgba(0, 0, 0, 0.15)", "$description": "Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant" }
   }
 }