@hirobius/design-system 0.23.2 → 0.24.0

package/public/hds-manifest.json

@@ -2,7 +2,7 @@
   "name": "Hirobius Design System",
   "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
   "version": "1",
-  "generated": "2026-10-11T19:39:00.481Z",
+  "generated": "2026-10-11T21:00:30.237Z",
   "source": "hirobius.tokens.json",
   "format": "W3C DTCG 2025.10",
   "docs": "https://hirobius-hds-components.vercel.app/",
@@ -28,7 +28,7 @@
     "consumeTypography": "hds.typeStyles.h1 (inline style object) — never Tailwind font classes"
   },
   "brand": {
-    "primaryColor": "#66b239",
+    "primaryColor": "#433a3f",
     "primaryColorToken": "semantic.accent.rest",
     "font": "Plus Jakarta Sans variable 100–900, self-hosted",
     "spacingBase": "4px",
@@ -8327,81 +8327,158 @@
         "value": "#022c22"
       },
       {
-        "path": "primitive.color.apple.50",
-        "cssVar": "--primitive-color-apple-50",
+        "path": "primitive.color.graphite.50",
+        "cssVar": "--primitive-color-graphite-50",
         "type": "color",
-        "description": "Apple-green accent tint — faintest step.",
-        "value": "#f2faeb"
+        "description": "Graphite accent tint — faintest step.",
+        "value": "#f5f4f4"
       },
       {
-        "path": "primitive.color.apple.100",
-        "cssVar": "--primitive-color-apple-100",
+        "path": "primitive.color.graphite.100",
+        "cssVar": "--primitive-color-graphite-100",
         "type": "color",
-        "description": "Apple-green accent — very light tint.",
-        "value": "#e2f3cf"
+        "description": "Graphite accent — very light warm tint.",
+        "value": "#e9e7e8"
       },
       {
-        "path": "primitive.color.apple.200",
-        "cssVar": "--primitive-color-apple-200",
+        "path": "primitive.color.graphite.200",
+        "cssVar": "--primitive-color-graphite-200",
         "type": "color",
-        "description": "Apple-green accent — light tint.",
-        "value": "#c7e7a4"
+        "description": "Graphite accent — light warm-grey; dark-mode rest accent fill.",
+        "value": "#d4d0d2"
       },
       {
-        "path": "primitive.color.apple.300",
-        "cssVar": "--primitive-color-apple-300",
+        "path": "primitive.color.graphite.300",
+        "cssVar": "--primitive-color-graphite-300",
         "type": "color",
-        "description": "Apple-green accent — soft mid-light step.",
-        "value": "#a6d873"
+        "description": "Graphite accent — soft mid-light step; dark-mode hover/link.",
+        "value": "#b2abae"
       },
       {
-        "path": "primitive.color.apple.400",
-        "cssVar": "--primitive-color-apple-400",
+        "path": "primitive.color.graphite.400",
+        "cssVar": "--primitive-color-graphite-400",
         "type": "color",
-        "description": "Apple-green accent — bright step; dark-mode rest accent.",
-        "value": "#85c84c"
+        "description": "Graphite accent — mid warm-grey step.",
+        "value": "#8b8488"
       },
       {
-        "path": "primitive.color.apple.500",
-        "cssVar": "--primitive-color-apple-500",
+        "path": "primitive.color.graphite.500",
+        "cssVar": "--primitive-color-graphite-500",
         "type": "color",
-        "description": "Apple-green accent rest — bright, rich apple green; AA for dark (neutral.900) text as a fill.",
-        "value": "#66b239"
+        "description": "Graphite accent — mid step.",
+        "value": "#655e62"
       },
       {
-        "path": "primitive.color.apple.600",
-        "cssVar": "--primitive-color-apple-600",
+        "path": "primitive.color.graphite.600",
+        "cssVar": "--primitive-color-graphite-600",
         "type": "color",
-        "description": "Apple-green accent — hover / border step.",
-        "value": "#54922d"
+        "description": "Graphite accent — mid-dark step.",
+        "value": "#544d51"
       },
       {
-        "path": "primitive.color.apple.700",
-        "cssVar": "--primitive-color-apple-700",
+        "path": "primitive.color.graphite.700",
+        "cssVar": "--primitive-color-graphite-700",
         "type": "color",
-        "description": "Apple-green accent — pressed and accent-intent text (AA for text on page and card surfaces).",
-        "value": "#416f20"
+        "description": "Graphite accent rest — the warm charcoal brand accent; white text as a fill (AA).",
+        "value": "#433a3f"
       },
       {
-        "path": "primitive.color.apple.800",
-        "cssVar": "--primitive-color-apple-800",
+        "path": "primitive.color.graphite.800",
+        "cssVar": "--primitive-color-graphite-800",
         "type": "color",
-        "description": "Apple-green accent — deep step.",
-        "value": "#34571b"
+        "description": "Graphite accent — deep step; light-mode hover.",
+        "value": "#352e32"
       },
       {
-        "path": "primitive.color.apple.900",
-        "cssVar": "--primitive-color-apple-900",
+        "path": "primitive.color.graphite.900",
+        "cssVar": "--primitive-color-graphite-900",
         "type": "color",
-        "description": "Apple-green accent — darkest usable step.",
-        "value": "#2b4518"
+        "description": "Graphite accent — darkest usable step; light-mode pressed, dark-mode on-accent text.",
+        "value": "#2a2428"
       },
       {
-        "path": "primitive.color.apple.950",
-        "cssVar": "--primitive-color-apple-950",
+        "path": "primitive.color.graphite.950",
+        "cssVar": "--primitive-color-graphite-950",
         "type": "color",
-        "description": "Apple-green accent — near-black green substrate.",
-        "value": "#16250c"
+        "description": "Graphite accent — near-black warm substrate.",
+        "value": "#19161a"
+      },
+      {
+        "path": "primitive.color.mauve.50",
+        "cssVar": "--primitive-color-mauve-50",
+        "type": "color",
+        "description": "Mauve tint, faintest step.",
+        "value": "#fff0f6"
+      },
+      {
+        "path": "primitive.color.mauve.100",
+        "cssVar": "--primitive-color-mauve-100",
+        "type": "color",
+        "description": "Mauve step 100, lightness-matched to graphite 100.",
+        "value": "#f4e2ea"
+      },
+      {
+        "path": "primitive.color.mauve.200",
+        "cssVar": "--primitive-color-mauve-200",
+        "type": "color",
+        "description": "Mauve step 200, lightness-matched to graphite 200.",
+        "value": "#e1cad4"
+      },
+      {
+        "path": "primitive.color.mauve.300",
+        "cssVar": "--primitive-color-mauve-300",
+        "type": "color",
+        "description": "Mauve step 300, lightness-matched to graphite 300.",
+        "value": "#c0a4b1"
+      },
+      {
+        "path": "primitive.color.mauve.400",
+        "cssVar": "--primitive-color-mauve-400",
+        "type": "color",
+        "description": "Mauve step 400, lightness-matched to graphite 400.",
+        "value": "#9d7b8a"
+      },
+      {
+        "path": "primitive.color.mauve.500",
+        "cssVar": "--primitive-color-mauve-500",
+        "type": "color",
+        "description": "Mauve anchor (#734B5E). Reserved; not mapped to any semantic token yet.",
+        "value": "#734b5e"
+      },
+      {
+        "path": "primitive.color.mauve.600",
+        "cssVar": "--primitive-color-mauve-600",
+        "type": "color",
+        "description": "Mauve step 600, lightness-matched to graphite 600.",
+        "value": "#674254"
+      },
+      {
+        "path": "primitive.color.mauve.700",
+        "cssVar": "--primitive-color-mauve-700",
+        "type": "color",
+        "description": "Mauve step 700, lightness-matched to graphite 700.",
+        "value": "#523141"
+      },
+      {
+        "path": "primitive.color.mauve.800",
+        "cssVar": "--primitive-color-mauve-800",
+        "type": "color",
+        "description": "Mauve step 800, lightness-matched to graphite 800.",
+        "value": "#432634"
+      },
+      {
+        "path": "primitive.color.mauve.900",
+        "cssVar": "--primitive-color-mauve-900",
+        "type": "color",
+        "description": "Mauve step 900, lightness-matched to graphite 900.",
+        "value": "#361d29"
+      },
+      {
+        "path": "primitive.color.mauve.950",
+        "cssVar": "--primitive-color-mauve-950",
+        "type": "color",
+        "description": "Mauve, near-black substrate.",
+        "value": "#240f1a"
       },
       {
         "path": "primitive.color.violet.50",
@@ -9372,24 +9449,24 @@
         "path": "semantic.color.surface.accent",
         "cssVar": "--semantic-color-surface-accent",
         "type": "color",
-        "description": "Accent-colored background — bright apple green (stays green on dark surfaces; pair with content.onAccent dark text).",
-        "alias": "{primitive.color.apple.500}",
-        "resolvedValue": "#66b239",
+        "description": "Accent fill, warm graphite. Dark in light mode, light warm-grey in dark mode; pair with content.onAccent.",
+        "alias": "{primitive.color.graphite.700}",
+        "resolvedValue": "#433a3f",
         "dark": {
-          "alias": "{primitive.color.apple.400}",
-          "resolvedValue": "#85c84c"
+          "alias": "{primitive.color.graphite.200}",
+          "resolvedValue": "#d4d0d2"
         }
       },
       {
         "path": "semantic.color.surface.accentSubtle",
         "cssVar": "--semantic-color-surface-accentSubtle",
         "type": "color",
-        "description": "Faint accent tint for hover states or highlights",
-        "alias": "{primitive.color.apple.50}",
-        "resolvedValue": "#f2faeb",
+        "description": "Faint accent tint for hover states or highlights.",
+        "alias": "{primitive.color.graphite.50}",
+        "resolvedValue": "#f5f4f4",
         "dark": {
-          "alias": "{primitive.color.apple.900}",
-          "resolvedValue": "#2b4518"
+          "alias": "{primitive.color.graphite.800}",
+          "resolvedValue": "#352e32"
         }
       },
       {
@@ -9500,24 +9577,24 @@
         "path": "semantic.color.content.accent",
         "cssVar": "--semantic-color-content-accent",
         "type": "color",
-        "description": "Accent-intent text/icon color — a dark apple green legible on page and card surfaces. Pair with underline/weight for link affordance.",
-        "alias": "{primitive.color.apple.700}",
-        "resolvedValue": "#416f20",
+        "description": "Accent-intent text/icon color — graphite, legible on page and card surfaces. Pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.graphite.700}",
+        "resolvedValue": "#433a3f",
         "dark": {
-          "alias": "{primitive.color.apple.400}",
-          "resolvedValue": "#85c84c"
+          "alias": "{primitive.color.graphite.300}",
+          "resolvedValue": "#b2abae"
         }
       },
       {
         "path": "semantic.color.content.onAccent",
         "cssVar": "--semantic-color-content-onAccent",
         "type": "color",
-        "description": "Text/icon color on accent fills — a dark neutral, since the brand accent fill is a bright apple green in both light and dark mode.",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Text and icons on accent fills: near-white in light mode, dark graphite in dark mode.",
+        "alias": "{primitive.color.neutral.50}",
+        "resolvedValue": "#fafafa",
         "dark": {
-          "alias": "{primitive.color.neutral.900}",
-          "resolvedValue": "#111111"
+          "alias": "{primitive.color.graphite.900}",
+          "resolvedValue": "#2a2428"
         }
       },
       {
@@ -9617,12 +9694,12 @@
         "path": "semantic.color.border.accent",
         "cssVar": "--semantic-color-border-accent",
         "type": "color",
-        "description": "Accent border — apple green, dark enough to read as a boundary on page and card surfaces.",
-        "alias": "{primitive.color.apple.600}",
-        "resolvedValue": "#54922d",
+        "description": "Accent border — graphite, dark enough to read as a boundary on page and card surfaces.",
+        "alias": "{primitive.color.graphite.700}",
+        "resolvedValue": "#433a3f",
         "dark": {
-          "alias": "{primitive.color.apple.400}",
-          "resolvedValue": "#85c84c"
+          "alias": "{primitive.color.graphite.300}",
+          "resolvedValue": "#b2abae"
         }
       },
       {
@@ -10220,12 +10297,12 @@
         "path": "semantic.accent.rest",
         "cssVar": "--semantic-accent-rest",
         "type": "color",
-        "description": "Default accent fill for interactive elements at rest — bright apple green. Pair with content.onAccent (a dark neutral).",
-        "alias": "{primitive.color.apple.500}",
-        "resolvedValue": "#66b239",
+        "description": "Default accent fill for interactive elements at rest — warm graphite. Inverts per theme; pair with content.onAccent.",
+        "alias": "{primitive.color.graphite.700}",
+        "resolvedValue": "#433a3f",
         "dark": {
-          "alias": "{primitive.color.apple.400}",
-          "resolvedValue": "#85c84c"
+          "alias": "{primitive.color.graphite.200}",
+          "resolvedValue": "#d4d0d2"
         }
       },
       {
@@ -10233,11 +10310,11 @@
         "cssVar": "--semantic-accent-hover",
         "type": "color",
         "description": "Accent fill on pointer hover.",
-        "alias": "{primitive.color.apple.600}",
-        "resolvedValue": "#54922d",
+        "alias": "{primitive.color.graphite.800}",
+        "resolvedValue": "#352e32",
         "dark": {
-          "alias": "{primitive.color.apple.500}",
-          "resolvedValue": "#66b239"
+          "alias": "{primitive.color.graphite.300}",
+          "resolvedValue": "#b2abae"
         }
       },
       {
@@ -10245,11 +10322,11 @@
         "cssVar": "--semantic-accent-pressed",
         "type": "color",
         "description": "Accent fill during active press.",
-        "alias": "{primitive.color.apple.700}",
-        "resolvedValue": "#416f20",
+        "alias": "{primitive.color.graphite.900}",
+        "resolvedValue": "#2a2428",
         "dark": {
-          "alias": "{primitive.color.apple.600}",
-          "resolvedValue": "#54922d"
+          "alias": "{primitive.color.graphite.400}",
+          "resolvedValue": "#8b8488"
         }
       },
       {
@@ -10280,12 +10357,12 @@
         "path": "semantic.accent.content",
         "cssVar": "--semantic-accent-content",
         "type": "color",
-        "description": "Accent-intent text/icon color on neutral surfaces (a dark apple green) — pair with underline/weight for link affordance.",
-        "alias": "{primitive.color.apple.700}",
-        "resolvedValue": "#416f20",
+        "description": "Accent-intent text/icon color on neutral surfaces (graphite) — pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.graphite.700}",
+        "resolvedValue": "#433a3f",
         "dark": {
-          "alias": "{primitive.color.apple.400}",
-          "resolvedValue": "#85c84c"
+          "alias": "{primitive.color.graphite.300}",
+          "resolvedValue": "#b2abae"
         }
       },
       {
@@ -10293,11 +10370,11 @@
         "cssVar": "--semantic-accent-contentHover",
         "type": "color",
         "description": "Accent content color on pointer hover.",
-        "alias": "{primitive.color.apple.800}",
-        "resolvedValue": "#34571b",
+        "alias": "{primitive.color.graphite.800}",
+        "resolvedValue": "#352e32",
         "dark": {
-          "alias": "{primitive.color.apple.300}",
-          "resolvedValue": "#a6d873"
+          "alias": "{primitive.color.graphite.200}",
+          "resolvedValue": "#d4d0d2"
         }
       },
       {
@@ -10305,11 +10382,11 @@
         "cssVar": "--semantic-accent-subtle",
         "type": "color",
         "description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
-        "alias": "{primitive.color.apple.50}",
-        "resolvedValue": "#f2faeb",
+        "alias": "{primitive.color.graphite.50}",
+        "resolvedValue": "#f5f4f4",
         "dark": {
-          "alias": "{primitive.color.apple.900}",
-          "resolvedValue": "#2b4518"
+          "alias": "{primitive.color.graphite.800}",
+          "resolvedValue": "#352e32"
         }
       },
       {
@@ -10545,7 +10622,7 @@
         "type": "color",
         "description": "Nav item background fill when active or selected.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "#f2faeb"
+        "resolvedValue": "#f5f4f4"
       },
       {
         "path": "component.nav.borderActive",
@@ -10553,7 +10630,7 @@
         "type": "color",
         "description": "Nav item border color when active or selected.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#66b239"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.nav.text",
@@ -10601,7 +10678,7 @@
         "type": "color",
         "description": "Base tag surface color.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "#f2faeb"
+        "resolvedValue": "#f5f4f4"
       },
       {
         "path": "component.tag.text",
@@ -10689,7 +10766,7 @@
         "type": "color",
         "description": "Text color when the tag is active.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#fafafa"
       },
       {
         "path": "component.tag.activeBackground",
@@ -10697,7 +10774,7 @@
         "type": "color",
         "description": "Active tag fill color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#66b239"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.tag.activeBorder",
@@ -10705,7 +10782,7 @@
         "type": "color",
         "description": "Active tag border color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#66b239"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.tag.activeHover",
@@ -10713,7 +10790,7 @@
         "type": "color",
         "description": "Active tag hover fill color.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "#54922d"
+        "resolvedValue": "#352e32"
       },
       {
         "path": "component.badge.fontSize",
@@ -10797,7 +10874,7 @@
         "type": "color",
         "description": "Primary button fill.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#66b239"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.button.bgHover",
@@ -10805,7 +10882,7 @@
         "type": "color",
         "description": "Primary button hover fill.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "#54922d"
+        "resolvedValue": "#352e32"
       },
       {
         "path": "component.button.text",
@@ -10813,7 +10890,7 @@
         "type": "color",
         "description": "Primary button text color.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#fafafa"
       },
       {
         "path": "component.button.radius",
@@ -11227,7 +11304,7 @@
         "type": "color",
         "description": "Primary action surface. shadcn role: primary.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#66b239"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "role.primary-foreground",
@@ -11235,7 +11312,7 @@
         "type": "color",
         "description": "Text/icons on primary surface. shadcn role: primary-foreground.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#fafafa"
       },
       {
         "path": "role.secondary",
@@ -11275,7 +11352,7 @@
         "type": "color",
         "description": "Hover/active tinted bg. shadcn role: accent.",
         "alias": "{semantic.color.surface.accentSubtle}",
-        "resolvedValue": "#f2faeb"
+        "resolvedValue": "#f5f4f4"
       },
       {
         "path": "role.accent-foreground",
@@ -11283,7 +11360,7 @@
         "type": "color",
         "description": "Text on accent surface. shadcn role: accent-foreground.",
         "alias": "{semantic.color.content.accent}",
-        "resolvedValue": "#416f20"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "role.destructive",
@@ -11323,7 +11400,7 @@
         "type": "color",
         "description": "Focus ring color. shadcn role: ring.",
         "alias": "{semantic.color.border.accent}",
-        "resolvedValue": "#54922d"
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "role.radius",

package/public/llms/scroll.txt

@@ -10,7 +10,7 @@ Canonical primitives, cheapest-first (CSS before JS, JS before an opt-in depende
 2. `Pin` (`position: sticky`) for a pinned scroll scene — the dependency-free basis for the "tall section + sticky child" pattern (GSAP's `pin: true`, done with zero JS). Give the pinned element a TALLER scrolling parent (e.g. `height: 300vh`) so it has room to travel; `top` is a CSS length offset, not a spacing token.
 3. `useScrollProgress` (from `@hirobius/design-system/scroll`) only when the 0→1 scroll value is needed in React — cross-element choreography, canvas/WebGL, or a Motion (`motion/react`) `useTransform` binding that CSS `animation-timeline` cannot express. Thin, SSR-guarded wrapper over Motion `useScroll`; adds no new dependency.
 4. `SmoothScroll` (from `@hirobius/design-system/scroll`, `lenis` as an OPTIONAL peer dep) only for opt-in momentum ("inertia") scrolling, mounted once at the app/site root. Never imported from the main barrel — consumers who skip it pay nothing. Reduced-motion-first: Lenis is not instantiated when the user prefers reduced motion, unless `ignoreReducedMotion` is set for a deliberate art-directed exception.
-5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives (ADR-021, #116).
+5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives.
 
 Negative rules:
 
@@ -19,4 +19,4 @@ Negative rules:
 - No GSAP/ScrollTrigger or bespoke Lenis wiring inside `@hirobius/design-system` — those stay app-level/downstream, composed from `Reveal`/`Pin`/`useScrollProgress`/`SmoothScroll`.
 - Every scroll effect must degrade to fully visible/static content — never gate content visibility behind `animation-timeline` support or a scroll listener with no fallback.
 
-Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), ADR-021, and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
+Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.