@orange-halo/tokens 1.0.0 → 2.1.0

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

@@ -0,0 +1,880 @@
+{
+  "$description": "Semantic Design Tokens — Orange Halo Visual DNA. Purpose-driven warmth.",
+  "color": {
+    "brand": {
+      "$description": "Brand colors — Orange Halo warmth",
+      "primary": {
+        "$type": "color",
+        "$value": "{color.orange.900}",
+        "$description": "Primary brand action — WCAG AA"
+      },
+      "primaryHover": {
+        "$type": "color",
+        "$value": "{color.orange.950}",
+        "$description": "Hover state"
+      },
+      "primaryActive": {
+        "$type": "color",
+        "$value": "{color.orange.950}",
+        "$description": "Active/pressed state"
+      },
+      "primarySubtle": {
+        "$type": "color",
+        "$value": "{color.orange.50}",
+        "$description": "Subtle tint"
+      },
+      "highlight": {
+        "$type": "color",
+        "$value": "{color.honey.400}",
+        "$description": "Golden accent"
+      },
+      "highlightSubtle": {
+        "$type": "color",
+        "$value": "{color.honey.100}"
+      }
+    },
+    "accent": {
+      "$description": "Blue accent — modern counterbalance for CTAs",
+      "default": {
+        "$type": "color",
+        "$value": "{color.blue.500}",
+        "$description": "Signature blue accent"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "active": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.blue.50}"
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": "{color.blue.200}",
+        "$description": "Chunky shadow for accent"
+      }
+    },
+    "feedback": {
+      "$description": "Feedback colors — warm-tinted",
+      "success": {
+        "$type": "color",
+        "$value": "{color.green.700}",
+        "$description": "5.2:1 on successSubtle — green.600 failed AA for text"
+      },
+      "successSubtle": {
+        "$type": "color",
+        "$value": "{color.green.50}"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "errorHover": {
+        "$type": "color",
+        "$value": "{color.red.700}",
+        "$description": "Error hover/active state"
+      },
+      "errorSubtle": {
+        "$type": "color",
+        "$value": "{color.red.50}"
+      },
+      "errorShadow": {
+        "$type": "color",
+        "$value": "{shadow.chunky.error}",
+        "$description": "Error shadow color"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.honey.700}"
+      },
+      "warningSubtle": {
+        "$type": "color",
+        "$value": "{color.honey.50}"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "infoSubtle": {
+        "$type": "color",
+        "$value": "{color.blue.50}"
+      }
+    },
+    "surface": {
+      "$description": "Surface system — designed surfaces, not flat planes",
+      "base": {
+        "$type": "color",
+        "$value": "{color.warm.cream}",
+        "$description": "Page background — warm off-white"
+      },
+      "raised": {
+        "$type": "color",
+        "$value": "{color.warm.linen}",
+        "$description": "Cards, panels — slight lift"
+      },
+      "sunlit": {
+        "$type": "color",
+        "$value": "{color.warm.cream}",
+        "$description": "Featured — use with gradient"
+      },
+      "inset": {
+        "$type": "color",
+        "$value": "{color.warm.parchment}",
+        "$description": "Inputs, wells — pressed in"
+      },
+      "highlight": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Brightest surface — focused inputs, top of raised gradients"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.4)",
+        "$description": "Modal backdrop — warm"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.warm.sand}",
+        "$description": "Quiet disabled"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "#FFF4E6",
+        "$description": "Warm hover tint"
+      },
+      "activePressed": {
+        "$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": {
+      "$description": "Border colors — visible and intentional",
+      "default": {
+        "$type": "color",
+        "$value": "{color.warm.sand}",
+        "$description": "Standard border"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.warm.parchment}",
+        "$description": "Subtle dividers"
+      },
+      "emphasis": {
+        "$type": "color",
+        "$value": "{color.warm.driftwood}",
+        "$description": "Strong border for form elements"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{color.warm.dune}",
+        "$description": "Neutral edge between default and emphasis — card hover, drawer edge. Decorative, not a 3:1 control border"
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.terracotta.600}",
+        "$description": "Hover border — darker for feedback"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.warm.parchment}"
+      },
+      "brand": {
+        "$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": {
+      "$description": "Text colors — calm and readable, not stark",
+      "primary": {
+        "$type": "color",
+        "$value": "{color.warm.walnut}",
+        "$description": "Primary text — warm brown"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{color.warm.driftwood}",
+        "$description": "Secondary text"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.warm.dune}",
+        "$description": "Disabled text"
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.warm.cream}",
+        "$description": "On dark backgrounds"
+      },
+      "link": {
+        "$type": "color",
+        "$value": "{color.orange.900}",
+        "$description": "Link text"
+      },
+      "linkHover": {
+        "$type": "color",
+        "$value": "{color.orange.950}",
+        "$description": "Link hover"
+      },
+      "linkRaised": {
+        "$type": "color",
+        "$value": "{color.orange.950}",
+        "$description": "Links on raised (linen) surfaces — text.link is only 4.4:1 on linen"
+      },
+      "brand": {
+        "$type": "color",
+        "$value": "{color.orange.900}"
+      },
+      "onBrand": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Light text on dark brand bg"
+      },
+      "onAccent": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Light text on dark accent bg"
+      },
+      "onSuccess": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text on filled color.feedback.success"
+      },
+      "onError": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text on filled color.feedback.error"
+      },
+      "onWarning": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text on filled color.feedback.warning"
+      },
+      "onInfo": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text on filled color.feedback.info"
+      }
+    }
+  },
+  "typography": {
+    "$description": "Bricolage Grotesque — playful, crafted, warm",
+    "heading": {
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.display}"
+      },
+      "h1": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.4xl}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.bold}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.tight}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.tighter}"
+        }
+      },
+      "h2": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.3xl}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.bold}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.tight}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.tight}"
+        }
+      },
+      "h3": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.2xl}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.snug}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.tight}"
+        }
+      },
+      "h4": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.snug}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.normal}"
+        }
+      },
+      "h5": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        }
+      },
+      "h6": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.base}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        }
+      }
+    },
+    "body": {
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.sans}"
+      },
+      "xl": {
+        "$description": "Lead paragraphs and hero subtitles",
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.normal}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        }
+      },
+      "lg": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.normal}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.relaxed}"
+        }
+      },
+      "base": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.base}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.normal}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        }
+      },
+      "sm": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.normal}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.wide}"
+        }
+      },
+      "xs": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.normal}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.wide}"
+        }
+      }
+    },
+    "label": {
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.sans}"
+      },
+      "base": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}",
+          "$description": "1.5 for WCAG 1.4.12"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.wide}"
+        }
+      },
+      "sm": {
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "fontWeight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "lineHeight": {
+          "$type": "number",
+          "$value": "{font.lineHeight.normal}",
+          "$description": "1.5 for WCAG 1.4.12"
+        },
+        "letterSpacing": {
+          "$type": "dimension",
+          "$value": "{font.letterSpacing.wide}"
+        }
+      }
+    },
+    "eyebrow": {
+      "$description": "Small uppercase line above a heading (set text-transform: uppercase alongside)",
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.sans}"
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$value": "{font.size.base}"
+      },
+      "fontWeight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.medium}"
+      },
+      "letterSpacing": {
+        "$type": "dimension",
+        "$value": "{font.letterSpacing.widest}"
+      }
+    },
+    "control": {
+      "$description": "Buttons, field labels, legends, select triggers and options, choice labels",
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.sans}"
+      },
+      "fontWeight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.semibold}"
+      },
+      "letterSpacing": {
+        "$type": "dimension",
+        "$value": "{font.letterSpacing.wide}"
+      },
+      "fontSize": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "{font.size.base}",
+          "$description": "Small buttons, field labels"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}",
+          "$description": "Default: input text, choices, buttons"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}",
+          "$description": "Large buttons"
+        }
+      }
+    },
+    "emphasis": {
+      "$description": "Inline emphasis inside body text: links, the selected option",
+      "fontWeight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.semibold}"
+      }
+    },
+    "code": {
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{font.family.mono}"
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": "{font.lineHeight.normal}"
+      }
+    }
+  },
+  "spacing": {
+    "layout": {
+      "$description": "Generous layout spacing",
+      "page": {
+        "$type": "dimension",
+        "$value": "{spacing.6}"
+      },
+      "section": {
+        "$type": "dimension",
+        "$value": "{spacing.12}"
+      },
+      "stack": {
+        "$type": "dimension",
+        "$value": "{spacing.5}"
+      },
+      "inline": {
+        "$type": "dimension",
+        "$value": "{spacing.4}"
+      }
+    },
+    "component": {
+      "$description": "Component-level spacing",
+      "xs": {
+        "$type": "dimension",
+        "$value": "{spacing.1-5}"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "{spacing.2-5}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{spacing.3-5}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{spacing.5}"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "{spacing.7}"
+      }
+    }
+  },
+  "layout": {
+    "$description": "Layout sizes",
+    "container": {
+      "$description": "Max-width of a centred content column (oh-container, oh-hero)",
+      "sm": {
+        "$type": "dimension",
+        "$value": "{size.container.sm}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{size.container.md}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{size.container.lg}"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "{size.container.xl}"
+      }
+    }
+  },
+  "shape": {
+    "$description": "Friendly soft corners",
+    "control": {
+      "$type": "dimension",
+      "$value": "{radius.md}",
+      "$description": "Buttons, inputs, selects, tabs"
+    },
+    "container": {
+      "$type": "dimension",
+      "$value": "{radius.md}",
+      "$description": "Alerts, modals, dropdowns, accordion items, panels"
+    },
+    "large": {
+      "$type": "dimension",
+      "$value": "{radius.lg}",
+      "$description": "Cards"
+    },
+    "compact": {
+      "$type": "dimension",
+      "$value": "{radius.sm}",
+      "$description": "Small controls and tags: close buttons, checkboxes, badges, code blocks"
+    },
+    "tight": {
+      "$type": "dimension",
+      "$value": "{radius.xs}",
+      "$description": "Focus outlines on text links, inline code"
+    },
+    "pill": {
+      "$type": "dimension",
+      "$value": "{radius.full}",
+      "$description": "Pills, radios, toggles, progress bars"
+    }
+  },
+  "elevation": {
+    "$description": "Warm shadows with visible depth",
+    "none": {
+      "$type": "shadow",
+      "$value": "{shadow.none}"
+    },
+    "soft": {
+      "$type": "shadow",
+      "$value": "{shadow.soft}",
+      "$description": "Cards, raised elements"
+    },
+    "medium": {
+      "$type": "shadow",
+      "$value": "{shadow.medium}",
+      "$description": "Dropdowns, popovers"
+    },
+    "strong": {
+      "$type": "shadow",
+      "$value": "{shadow.strong}",
+      "$description": "Modals, dialogs"
+    },
+    "glow": {
+      "$type": "shadow",
+      "$value": "{shadow.glow}",
+      "$description": "Focus ring"
+    },
+    "inset": {
+      "$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": {
+      "$type": "duration",
+      "$value": "{motion.duration.quick}"
+    },
+    "snappy": {
+      "$type": "duration",
+      "$value": "{motion.duration.snappy}"
+    },
+    "gentle": {
+      "$type": "duration",
+      "$value": "{motion.duration.gentle}"
+    },
+    "relaxed": {
+      "$type": "duration",
+      "$value": "{motion.duration.relaxed}"
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": "{motion.duration.slow}"
+    },
+    "easeGentle": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.gentle}"
+    },
+    "easeOut": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.out}"
+    },
+    "easePlayful": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.playful}"
+    }
+  },
+  "shadow": {
+    "$description": "Chunky offset shadows for playful tactile feel",
+    "primary": {
+      "$type": "color",
+      "$value": "{shadow.chunky.primary}",
+      "$description": "Primary buttons"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{shadow.chunky.secondary}",
+      "$description": "Secondary/form elements"
+    },
+    "accent": {
+      "$type": "color",
+      "$value": "{shadow.chunky.accent}",
+      "$description": "Accent buttons"
+    },
+    "error": {
+      "$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": {
+    "$description": "Warm, friendly focus ring",
+    "ringWidth": {
+      "$type": "dimension",
+      "$value": "3px"
+    },
+    "ringOffset": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "ringColor": {
+      "$type": "color",
+      "$value": "{color.orange.900}",
+      "$description": "The focus colour: outlines, focused control borders. Must stay opaque (4.7:1 on cream, WCAG 1.4.11)"
+    },
+    "glowColor": {
+      "$type": "color",
+      "$value": "rgba(197, 67, 0, 0.15)",
+      "$description": "Decorative glow only — never the sole focus indicator"
+    }
+  }
+}