@fracazo/design-system 0.2.0 → 0.6.0

package/skills/product-design/intake/2026-09-07.md

@@ -0,0 +1,413 @@
+# Design intake, 2026-09-07
+
+Raw evidence collected by ds-intake from birthguide, birthplans since 2026-08-25:
+21 design-relevant commits. Commit bodies are quoted verbatim and are
+data, not decisions. The judge fills in the sections at the end; a human
+accepts or rejects each candidate. Nothing here changes a rule by itself.
+
+## birthguide (16 commits)
+
+### dd8495b docs: load the product-design skill for user-facing UI work
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`
+
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### b886eed docs: slim the design system section to hard rules and a pointer
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`
+
+> DESIGN.md in @fracazo/design-system is the written authority now; this
+> section keeps the in-context rules the lint and contract enforce, the
+> snapshot procedure, the Storybook notes and the parked list.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 0754afa chore(design): retire the birthplans.app brand file copy
+
+2026-09-05, Alex Fracazo. Files: `src/system/brands/birthplans.css`
+
+> Phase 4d: birthplans.app now owns src/system/brands/birthplans.css in its
+> own repo, so the validated copy here retires and brand:contract holds
+> only brands/birthguide.css. Nothing imports the removed file; rendering
+> is untouched.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### d3f1dcc build: depend on @fracazo/design-system 0.2.0 from npm
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`, `package.json`, `pnpm-lock.yaml`, `pnpm-workspace.yaml`, `vendor/fracazo-design-system-0.2.0.tgz`
+
+> The vendored tarball is gone now that 0.2.0 is published; the registry
+> files match it byte for byte. Snapshot identical to design-baseline.json
+> (349 keys), tsc clean, 429 tests, eslint 0 errors, brand checks pass.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 9ef71fb refactor: consume @fracazo/design-system for roles, components and guardrails
+
+2026-09-05, Alex Fracazo. Files: `src/app/globals.css`, `src/app/not-found.tsx`, `src/app/plan/edit/[token]/page.tsx`, `src/app/plan/edit/example/page.tsx`, `src/app/plan/expired/page.tsx`, `src/app/resume/page.tsx`, `src/app/unsubscribe/page.tsx`, `src/components/download/DownloadPanel.tsx`, `src/components/download/SharePanel.tsx`, `src/components/landing/OfferingChooser.tsx`, `src/components/landing/OutputExampleCards.tsx`, `src/components/mobile-link/ExampleDownloadDialog.tsx`, `src/components/plan/PlanDocuments.tsx`, `src/components/plan/PlanLink.tsx`, `src/components/program/LessonCapture.tsx`, `src/components/program/LessonChrome.tsx`, `src/components/program/LessonFlow.tsx`, `src/components/program/LessonReflect.tsx`, `src/components/program/LessonScreen.tsx`, `src/components/program/ModuleRecap.tsx`, `src/components/program/PaywallSlot.tsx`, `src/components/program/ProgramMap.tsx`, `src/components/program/SavePointScreen.tsx`, `src/components/questionnaire/DidYouKnowBar.tsx`, `src/components/questionnaire/InfoBottomSheet.tsx`, `src/components/questionnaire/QuestionScreen.tsx`, `src/components/questionnaire/QuestionnaireShell.tsx`, `src/components/questionnaire/steps/TopPriorities.tsx`, `src/components/questionnaire/steps/YourDetails.tsx`, `src/components/ui/accordion.stories.tsx`, `src/components/ui/accordion.tsx`, `src/components/ui/button.stories.tsx`, `src/components/ui/button.tsx`, `src/components/ui/calendar.stories.tsx`, `src/components/ui/calendar.tsx`, `src/components/ui/card.stories.tsx`, `src/components/ui/card.tsx`, `src/components/ui/checkbox.stories.tsx`, `src/components/ui/checkbox.tsx`, `src/components/ui/dialog.stories.tsx`, `src/components/ui/dialog.tsx`, `src/components/ui/form.stories.tsx`, `src/components/ui/form.tsx`, `src/components/ui/input.stories.tsx`, `src/components/ui/input.tsx`, `src/components/ui/label.stories.tsx`, `src/components/ui/label.tsx`, `src/components/ui/place-autocomplete.tsx`, `src/components/ui/popover.stories.tsx`, `src/components/ui/popover.tsx`, `src/components/ui/progress.stories.tsx`, `src/components/ui/progress.tsx`, `src/components/ui/radio-group.stories.tsx`, `src/components/ui/radio-group.tsx`, `src/components/ui/select.stories.tsx`, `src/components/ui/select.tsx`, `src/components/ui/sheet.stories.tsx`, `src/components/ui/sheet.tsx`, `src/components/ui/sortable-list.stories.tsx`, `src/components/ui/sortable-list.tsx`, `src/components/ui/tabs.stories.tsx`, `src/components/ui/tabs.tsx`, `src/components/ui/textarea.stories.tsx`, `src/components/ui/textarea.tsx`, `src/system/roles.css`
+
+> Phase 4c of the design system extraction. globals.css imports the package's
+> roles.css, then the brand file, and gains an @source for the package's dist
+> so Tailwind generates the utilities the components use. The seventeen local
+> ui components and src/system/roles.css are deleted; every import is
+> codemodded to @fracazo/design-system/ui/*, the stories included. cn is
+> re-exported from @/lib/utils. place-autocomplete stays local, it imports
+> app code.
+> 
+> The brand scripts are replaced by the package bins (ds-build-brand-css,
+> ds-check-brand) and public/brand.css is regenerated: declarations identical,
+> only the header comment changes. The ESLint colour and clamp guardrails
+> come from @fracazo/design-system/eslint with our exemptions. The snapshot
+> harness reads roles from the package.
+> 
+> Verified: design snapshot identical to baseline (349 keys), tsc clean,
+> 429 tests pass, eslint 0 errors, next build and storybook build succeed.
+> 
+> The dependency is the vendored 0.2.0 tarball until that version is on npm;
+> swapping it for ^0.2.0 and deleting vendor/ is the last step of this phase.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### ce64587 docs: point the design system section at src/system and the package
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`
+
+> Tokens no longer live in globals.css: roles.css and brands/birthguide.css
+> under src/system are the source, with the brand contract, the generated
+> public/brand.css and the two lint-chain checks described. Records the
+> extraction to @fracazo/design-system and the two snapshot gotchas found
+> this week (preview-server collision on .next, stale Turbopack cache after
+> restructuring the CSS import graph).
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 6038c47 feat(design): add the birthplans.app brand file and the status roles
+
+2026-09-05, Alex Fracazo. Files: `src/system/brands/birthguide.css`, `src/system/brands/birthplans.css`, `src/system/roles.css`
+
+> SPEC_020, phase 3c of the white-label roadmap.
+> 
+> brands/birthplans.css is the full contract with birthplans.app's real
+> values, copied from that repo (fefe1cb): the same cream page and espresso
+> ink with the brand hue rotated to periwinkle. Three roles it never used
+> carry reasoned values and say so (headline-accent in light, chip-3 as the
+> sister-product tint in BirthGuide rose, dark-brand).
+> 
+> The contract grows by the traffic-light status ramp that product already
+> relied on (status-want / -ifnec / -no, each with a -soft wash; ifnec
+> aliases the highlight primitive). brands/birthguide.css defines the same
+> literals, unused on BirthGuide screens today; PDFs and previews keep
+> constants.ts. Contract is now 63 light, 48 dark, 2 theme, and both brand
+> files satisfy it.
+> 
+> Proof, from clean compiles: adding the roles is 12 snapshot additions and
+> nothing else; swapping the import to brands/birthplans.css moves exactly
+> the brand-following keys (brand, brand-ink, brand-soft, glow-1, the
+> primary/ring/accent aliases, the selected-card shadow, accent-foreground
+> and headline-accent in light, chip-3, dark-brand, five brand utilities,
+> the form-control ring: 38 keys) and nothing else; swapping back compares
+> identical. design-baseline.json and brand.css regenerated; lint and 429
+> tests pass.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 8349175 refactor(design): split roles.css from the birthguide brand file
+
+2026-09-05, Alex Fracazo. Files: `src/app/globals.css`, `src/system/brands/birthguide.css`, `src/system/roles.css`
+
+> SPEC_019, phase 3b of the white-label roadmap. globals.css becomes an
+> importer; the token system now lives in src/system:
+> 
+>   roles.css              the brand-agnostic half: dark variant, the Tailwind
+>                          @theme mapping, radius ramp, fluid type and band
+>                          rhythm, and the eight aliasing semantics declared
+>                          once (they recompute inside .force-light subtrees)
+>   brands/birthguide.css  every value, light and dark, plus the next/font
+>                          mapping, which must stay in a @theme block so
+>                          font-sans resolves on the element carrying the var
+> 
+> roles.css opens with a machine-readable brand contract (57 light, 44 dark,
+> 2 theme properties); scripts/check-brand.ts holds every brand file to it,
+> missing or extra, and runs in pnpm lint as brand:contract. The brand.css
+> generator now composes roles + brand and prints the contract in its
+> header; the snapshot script collects token names from all three files.
+> 
+> Zero visual change: snapshot compares identical (337 keys) from a clean
+> compile; the published brand.css keeps every declaration except the eight
+> redundant .dark alias redeclarations; Storybook builds; lint and 429
+> tests pass. Note for the harness: Turbopack's persistent dev cache served
+> a pre-rename stylesheet after the file restructure, so clear .next before
+> snapshotting a change to the CSS import graph.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 2ec19f7 refactor(design): rename colour-literal tokens to roles
+
+2026-09-05, Alex Fracazo. Files: `src/app/contact/page.tsx`, `src/app/feedback/page.tsx`, `src/app/globals.css`, `src/app/guides/layout.tsx`, `src/app/plan/edit/example/page.tsx`, `src/app/privacy/page.tsx`, `src/app/refund-policy/page.tsx`, `src/app/terms/page.tsx`, `src/app/tools/baby-essentials-price-tracker/page.tsx`, `src/app/tools/contraction-timer/page.tsx`, `src/app/tools/due-date-calculator/page.tsx`, `src/app/tools/find-health-services/page.tsx`, `src/app/tools/ivf-due-date-calculator/page.tsx`, `src/app/tools/layout.tsx`, `src/app/tools/ovulation-calculator/page.tsx`, `src/components/ChatWidget.tsx`, `src/components/Footer.tsx`, `src/components/blog/ArticleHeader.tsx`, `src/components/download/PrintablePdfs.tsx`, `src/components/guides/AuthorBlock.tsx`, `src/components/landing/DualHero.tsx`, `src/components/landing/FAQ.tsx`, `src/components/landing/Guides.tsx`, `src/components/landing/OfferingChooser.tsx`, `src/components/landing/OutputExampleCards.tsx`, `src/components/landing/PhonePreview.tsx`, `src/components/landing/ProgramCurriculum.tsx`, `src/components/landing/ProgramOutcome.tsx`, `src/components/landing/ProgramPricing.tsx`, `src/components/landing/ProgramWhyItMatters.tsx`, `src/components/landing/Testimonials.tsx`, `src/components/landing/ToolAnnouncementStrip.tsx`, `src/components/landing/offerings.ts`, `src/components/mobile-link/BagTab.tsx`, `src/components/mobile-link/ContactsTab.tsx`, `src/components/mobile-link/ExamplePlanBanner.tsx`, `src/components/mobile-link/MobileLinkPage.tsx`, `src/components/mobile-link/SummaryTab.tsx`, `src/components/preview/BirthPlanPreview.tsx`, `src/components/preview/OutputPreviewTabs.tsx`, `src/components/price-tracker/DealThumb.tsx`, `src/components/price-tracker/DealsTable.tsx`, `src/components/price-tracker/PriceTracker.tsx`, `src/components/price-tracker/WeeklyDrop.tsx`, `src/components/program/ProgramIntro.tsx`, `src/components/questionnaire/DidYouKnowBar.tsx`, `src/components/shopping-guide/ProductCard.tsx`, `src/components/shopping-guide/RetailerPriceList.tsx`, `src/components/shopping-guide/ShoppingGuide.tsx`, `src/components/tools/CalculatorEmailCapture.tsx`, `src/components/tools/PregnancyProgress.tsx`, `src/stories/tokens.mdx`, `src/stories/usage.mdx`
+
+> SPEC_018, phase 3a of the white-label roadmap. Every value keeps its
+> literal; only the names move so the system reads as roles for any brand:
+> 
+>   sand/sand-2 -> band/band-2        warm-muted -> ink-3
+>   rose -> dark-accent               dark-rose -> dark-brand
+>   amber(-ink/-soft/-stat) -> highlight(-ink/-soft/-deep)
+>   sage/lilac/periwinkle-* -> chip-1/2/3-*   glow-rose/-sage -> glow-1/2
+> 
+> The Did-you-know pill keys follow ('rose' | 'amber' -> 'brand' |
+> 'highlight'), as do the two snapshot probes, the CLAUDE.md design
+> section and the Storybook swatch labels. brand.css rebuilt.
+> 
+> Zero visual change: with the rename map applied to the baseline's keys,
+> 337 keys compare pairwise identical (38 renamed, 0 value differences);
+> design-baseline.json regenerated. Lint clean, 429 tests pass. Legacy em
+> dashes replaced in the six touched files that carried one.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 4ba04df feat(lint): guard arbitrary fluid type sizes in className
+
+2026-09-04, Alex Fracazo. Files: `src/components/landing/DualFinalCTA.tsx`, `src/components/landing/OfferingChooser.tsx`, `src/components/landing/ProgramPricing.tsx`, `src/components/landing/ProgramWhyItMatters.tsx`, `src/components/mobile-link/MobileLinkPage.tsx`
+
+> Extends the SPEC_014 guardrail: text-[clamp(...)] in a className is now
+> an error alongside raw colours, so new fluid sizes must become tokens
+> first. The five deliberate one-offs (final CTA closing size, the
+> OfferingChooser card heading, the mobile-link h1, and the two benched
+> Program sections) each carry an inline disable stating why. Legacy em
+> dashes replaced in the files touched.
+> 
+> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
+
+### 70ea27c test(design): probe the fluid type and band utilities in snapshots
+
+2026-09-04, Alex Fracazo. Files: `design-baseline.json`, `scripts/design-snapshot.ts`
+
+> Phase 1b showed the element probes never covered landing typography, so
+> the harness compared identical through an intentional type change. The
+> utility layer now probes text-display, text-section-title, text-lede,
+> py-band and mt-band-gap directly. design-baseline.json regenerated:
+> 14 additions (7 keys x 2 themes), zero changes to existing keys.
+> 
+> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
+
+### f2daff7 feat(design): publish the brand token stylesheet
+
+2026-09-04, Alex Fracazo. Files: `package.json`, `public/brand.css`, `scripts/build-brand-css.ts`
+
+> public/brand.css, served at birthguide.com.au/brand.css, is the public
+> token API for the design.md initiative: the :root/.force-light and .dark
+> blocks verbatim plus the mode-constant type, band rhythm and radius
+> tokens, generated from globals.css by scripts/build-brand-css.ts. The
+> header documents dark-mode wiring and how a sister product (birthplans.app)
+> skins the same roles by overriding the brand primitives. pnpm brand:build
+> regenerates it; pnpm lint now fails while it is stale (brand:check).
+> 
+> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
+
+### a0ffa71 fix(landing): converge near-miss clamp drift onto the named tokens
+
+2026-09-04, Alex Fracazo. Files: `src/app/globals.css`, `src/components/landing/DualHero.tsx`, `src/components/landing/Guides.tsx`
+
+> Phase 1b of the design.md initiative, per Alex's render review:
+> 
+> - new text-display token (with its 0.9 line-height companion) at the
+>   hero's exact current scale; the hero h1 adopts it, byte-identical
+> - hero lede converges onto text-lede: cap drops 20px to 19px at wide
+>   viewports with a slight rewrap (approved from renders)
+> - Guides grid gap converges onto mt-band-gap: cap grows 48px to 52px
+>   (approved from renders)
+> - the final CTA deliberately keeps its bespoke 62px clamp (one display
+>   token exists; resizing the CTA was declined), and the benched Program
+>   sections and mobile-link h1 stay untouched
+> 
+> Snapshot harness compares identical (its probes do not cover the two
+> moved elements), so design-baseline.json needs no regeneration; the
+> delta was verified against live computed styles at 1440px instead.
+> 
+> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
+
+### 0466daf refactor(design): name the fluid type and band rhythm tokens
+
+2026-09-04, Alex Fracazo. Files: `src/app/globals.css`, `src/components/landing/DualFinalCTA.tsx`, `src/components/landing/DualHero.tsx`, `src/components/landing/FAQ.tsx`, `src/components/landing/Guides.tsx`, `src/components/landing/ProgramCurriculum.tsx`, `src/components/landing/ProgramHowItWorks.tsx`, `src/components/landing/ProgramOutcome.tsx`, `src/components/landing/ProgramPricing.tsx`, `src/components/landing/ProgramWhyItMatters.tsx`, `src/components/landing/Testimonials.tsx`
+
+> Adds text-section-title (with its 1.05 line-height companion), text-lede,
+> spacing-band and spacing-band-gap to the theme (SPEC_017, phase 1 of the
+> design.md initiative), then swaps the byte-identical clamp() literals
+> across ten landing components. Legacy em dashes in globals.css comments
+> replaced under the replace-on-touch rule.
+> 
+> Zero visual change: snapshot chain baseline -> tokens-added -> after
+> compares identical (323 keys); lint clean; 429 tests pass. The five
+> bespoke display clamps stay untouched pending the phase 1b convergence
+> decision.
+> 
+> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
+
+### 8e0c64f feat(example-plan): open a program dialog when a PDF card is tapped
+
+2026-09-04, Alex Fracazo. Files: `src/components/download/PrintablePdfs.tsx`, `src/components/mobile-link/ExampleDownloadDialog.tsx`, `src/components/mobile-link/SummaryTab.tsx`
+
+> Visitors on the example plan keep tapping the download cards, and the
+> inline note they got back was a dead end. The tap is intent, so it now
+> opens a dialog that points at the program (the only path that produces
+> all three PDFs; birthplans.app makes the plan alone). One dialog serves
+> the three cards, focus returns to the tapped card on close, and the
+> footer stays stacked at every width so the labels never overflow.
+> 
+> PrintablePdfs swaps the exampleNote string for an onExampleClick
+> callback and drops the per-card note state. Analytics gain
+> example_download_clicked (per document type) and the cta_clicked
+> location example-plan-download, so the funnel reads: wanted the PDF,
+> then went to the program.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 84dfd66 feat(analytics): track every click that leads to the program or birthplans.app
+
+2026-09-03, Alex Fracazo. Files: `src/app/feedback/page.tsx`, `src/app/resume/page.tsx`, `src/components/BirthplansLink.tsx`, `src/components/ChatWidget.tsx`, `src/components/Footer.tsx`, `src/components/PlanShortcut.tsx`, `src/components/ProgramLink.tsx`, `src/components/SiteHeader.tsx`, `src/components/landing/OfferingCTA.tsx`, `src/components/mobile-link/ExamplePlanBanner.tsx`, `src/components/mobile-link/MobileLinkPage.tsx`, `src/components/plan/ChangeSomething.tsx`
+
+> cta_clicked now carries ctaDestination (program or birthplans) so the two
+> paths read apart in GA4 where one location labels both. BirthplansLink
+> fires the event itself, which covers the footer, curriculum, guide and tool
+> shortcuts, the contraction timer and the affiliates page; the plain program
+> links on the footer, resume and feedback pages go through ProgramLink, and
+> the plan page decision rows and chat reply links fire inline.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+## birthplans (5 commits)
+
+### 9d63e97 docs: load the product-design skill for user-facing UI work
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`
+
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### b295c5a docs: slim the design system section to hard rules and a pointer
+
+2026-09-05, Alex Fracazo. Files: `CLAUDE.md`
+
+> DESIGN.md in @fracazo/design-system is the written authority now; this
+> section keeps the in-context rules the lint and contract enforce, the
+> snapshot procedure and the parked list.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 3a98e2c refactor: consume @fracazo/design-system for roles, components and guardrails
+
+2026-09-05, Alex Fracazo. Files: `src/app/globals.css`, `src/app/not-found.tsx`, `src/app/plan/edit/[token]/page.tsx`, `src/app/plan/edit/example/page.tsx`, `src/app/plan/expired/page.tsx`, `src/app/questionnaire/page.tsx`, `src/components/download/AccessPassChoices.tsx`, `src/components/download/DownloadPanel.tsx`, `src/components/download/PaywallPanel.tsx`, `src/components/download/PaywallSheet.tsx`, `src/components/download/SharePanel.tsx`, `src/components/preview/FittedPlanPreview.tsx`, `src/components/questionnaire/DidYouKnowBar.tsx`, `src/components/questionnaire/InfoBottomSheet.tsx`, `src/components/questionnaire/PlanReadyScreen.tsx`, `src/components/questionnaire/QuestionCard.tsx`, `src/components/questionnaire/QuestionScreen.tsx`, `src/components/questionnaire/QuestionnaireShell.tsx`, `src/components/questionnaire/ReviewScreen.tsx`, `src/components/questionnaire/SectionCardGrid.tsx`, `src/components/questionnaire/TwoPaneBuilder.tsx`, `src/components/questionnaire/steps/YourDetails.tsx`, `src/components/ui/accordion.tsx`, `src/components/ui/button.tsx`, `src/components/ui/calendar.tsx`, `src/components/ui/card.tsx`, `src/components/ui/checkbox.tsx`, `src/components/ui/dialog.tsx`, `src/components/ui/form.tsx`, `src/components/ui/input.tsx`, `src/components/ui/label.tsx`, `src/components/ui/place-autocomplete.tsx`, `src/components/ui/popover.tsx`, `src/components/ui/progress.tsx`, `src/components/ui/radio-group.tsx`, `src/components/ui/select.tsx`, `src/components/ui/sheet.tsx`, `src/components/ui/sortable-list.tsx`, `src/components/ui/textarea.tsx`, `src/system/brands/birthplans.css`
+
+> Step two of the design system extraction on this side. globals.css imports
+> the package's roles.css, then src/system/brands/birthplans.css (this repo
+> now owns its brand file; BirthGuide's validated copy retires), and gains
+> an @source for the package's dist so Tailwind generates the utilities the
+> components use. The sixteen local ui components are deleted; every import
+> points at @fracazo/design-system/ui/*. cn is re-exported from @/lib/utils.
+> place-autocomplete stays local, it imports app code.
+> 
+> The ESLint color guardrail comes from the package with our exemptions. Its
+> fluid-type rule stays off until a type-role pass converges the landing
+> sections' clamp literals. pnpm brand:contract (ds-check-brand) holds the
+> brand file to the contract and runs in pnpm lint. The snapshot harness
+> reads token names from the package's roles, the brand file and globals.
+> 
+> Proof, from clean compiles: against the renamed baseline the snapshot adds
+> exactly six token keys (the reasoned chip-3 pair and dark-brand, light and
+> dark) and changes nothing; 335 keys. tsc clean, 100 tests, eslint 0
+> errors, next build succeeds. design-baseline.json regenerated; it also
+> absorbs the questionnaire header's transparent background, which an
+> earlier commit changed without regenerating.
+> 
+> The dialog close button now uses focus-visible (the package's version), so
+> a modal opened with the mouse no longer paints a focus ring on it.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### aa49ed0 refactor(design): rename color-literal tokens to the design system roles
+
+2026-09-05, Alex Fracazo. Files: `src/app/globals.css`, `src/app/plan/edit/example/page.tsx`, `src/app/questionnaire/page.tsx`, `src/components/SiteHeader.tsx`, `src/components/download/PrintablePdfs.tsx`, `src/components/landing/Faq.tsx`, `src/components/landing/FreeAnswers.tsx`, `src/components/landing/Hero.tsx`, `src/components/landing/PlanComparison.tsx`, `src/components/landing/Pricing.tsx`, `src/components/questionnaire/DidYouKnowBar.tsx`, `src/components/questionnaire/QuestionCard.tsx`
+
+> Step one of consuming @fracazo/design-system. Every value keeps its
+> literal; only the names move to the roles the package declares:
+> 
+>   sand/sand-2 -> band/band-2        warm-muted -> ink-3
+>   rose -> dark-accent               sand-gold -> headline-accent
+>   amber(-ink/-soft/-stat) -> highlight(-ink/-soft/-deep)
+>   sage/lilac-* -> chip-1/2-*        glow-rose/-sage -> glow-1/2
+> 
+> The two snapshot probes follow. Zero visual change: with the rename map
+> applied to the baseline's keys, 329 keys compare pairwise identical
+> (34 renamed, 0 value differences).
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+### 0f51208 feat: harden the Microsoft Clarity integration
+
+2026-09-03, Alex Fracazo. Files: `src/components/ClarityInit.tsx`, `src/components/download/PaywallPanel.tsx`
+
+> Route every Clarity call through lib/analytics.ts, mirror funnel events
+> to Clarity so recordings can be filtered by step, stop storing the
+> buyer's email as an unhashed custom tag, and respect Do Not Track before
+> loading the tag.
+> 
+> Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
+
+## Candidates (pending)
+
+Judged 7 Sep 2026. Most of this packet is the extraction itself (phases 3
+to 4d), already turned into rules and exemplars on 5 Sep; those commits are
+listed under Rejected topics as "recorded". Three candidates remain.
+
+### candidate/tap-is-intent
+Status: proposed
+Scope: any card, tile or control that represents something the reader cannot get on this surface (an example document, a locked output, a feature on another product).
+Decision: a tap on it opens the path that gets it (a dialog pointing at the program, a link to the sister product), never an inline note that ends there. One dialog serves sibling cards; focus returns to the tapped card on close; the dialog footer stacks at every width so labels never overflow.
+Rationale: visitors kept tapping the example plan's download cards and got a dead end. The tap is intent; the surface should answer it with a route, and analytics should record the intent (which document was wanted) before the route.
+Evidence: 8e0c64f (birthguide)
+Exceptions: none identified.
+Bad example: a card that shows "Example only" text on tap.
+Good example: ExampleDownloadDialog opened from PrintablePdfs, focus restored on close.
+Destination: exemplar (one commit; becomes a rule if the pattern recurs on the birthplans preview)
+Open decisions: does the same apply to locked outputs behind the paywall, where the path is checkout?
+
+### candidate/light-island-inside-dark
+Status: proposed
+Scope: rule/on-dark-ramp.
+Decision: a light surface nested inside an always-dark one (a phone mock's screen, a force-light document preview) resets the context; text inside it follows the light surface, not the on-dark ramp.
+Rationale: the first run of the on-dark lint flagged eight lines in OutputPreviewTabs that were a white phone screen inside a bg-dark bezel; the rule now prunes at bg-white, bg-card, force-light and friends, and the prose should say so.
+Evidence: 3c9b271, cf0b4fe (design-system); the flagged file is birthguide src/components/preview/OutputPreviewTabs.tsx.
+Exceptions: none.
+Bad example: text-ink-3 directly on bg-dark.
+Good example: text-ink-3 inside a bg-white force-light screen inside bg-dark.
+Destination: rule (refinement of rule/on-dark-ramp: add the exception line)
+Open decisions: none.
+
+### candidate/contract-modules
+Status: proposed
+Scope: the brand contract in roles.css.
+Decision: split the contract into a required core and optional modules a brand opts into (landing: band rhythm, fluid type, glows, headline accent; dark band: the dark family and on-dark ramp; preference: the status ramp; phone mock: dark-3, dark-4), so a product does not value roles it never paints.
+Rationale: 6038c47 added the status ramp to the contract for birthplans and made BirthGuide define six values it does not use; chip-3 in each brand file holds the sister product's colour; dark-3 and dark-4 are one landing component's paint. Alex raised this on 5 Sep as the white-label question.
+Evidence: 6038c47, 8349175 (birthguide); 3a98e2c (birthplans); DESIGN.md brand chapters.
+Exceptions: the eight aliasing semantics and the six divergent ones stay core.
+Bad example: a new product's brand file valuing --dark-4 for a phone notch it does not have.
+Good example: a brand file that declares `modules: landing, preference` and is held to those lists.
+Destination: coverage gap (a major version; ds-check-brand learns modules; decide before a third product starts)
+Open decisions: module names; whether a module can be added later without a major bump.
+
+## Rejected topics
+
+- The extraction commits (2ec19f7, 8349175, 6038c47, ce64587, 9ef71fb, d3f1dcc, 0754afa, aa49ed0, 3a98e2c, b886eed, b295c5a, dd8495b, 9d63e97): recorded. Their decisions are rules and exemplars already (rules.md, exemplars/, DESIGN.md).
+- 0466daf, a0ffa71, 4ba04df, 70ea27c, f2daff7: recorded as the exemplar clamp-drift-to-named-roles and rule/no-arbitrary-clamp.
+- 84dfd66 (analytics) and 0f51208 (Clarity): instrumentation, not design decisions.
+
+## Coverage gaps observed
+
+- A house pattern for "this is available elsewhere" surfaces (see candidate/tap-is-intent).
+- Optional modules in the brand contract (see candidate/contract-modules).
+- birthplans type-role pass still pending; its fluid-type lint stays at warn.
+
+## Next intake
+
+- birthguide: next intake runs with `--since dd8495b`
+- birthplans: next intake runs with `--since 9d63e97`

package/skills/product-design/references/components.md

@@ -0,0 +1,42 @@
+# Components
+
+Load when: choosing or composing a component.
+Canonical owner: the intent block at the top of each component's source in
+the package (`src/ui/*.tsx`, or `dist/src/ui/*.js` in a consumer). Read it;
+it is the contract (one line, Use for, Avoid when, Variants). `DESIGN.md`,
+Components, has the one-paragraph digest.
+
+## Choosing
+
+| Job | Reach for | Not |
+|---|---|---|
+| The one primary action of a step | `Button` default | a styled anchor |
+| Standard secondary (copy, save, dismiss) | `Button` outline | a second primary |
+| Back, cancel, edit in place | `Button` ghost | outline |
+| Irreversible act | `Button` destructive, proportional, with undo if honest | a red default |
+| Enumerable answer in a questionnaire | the product's icon-card groups (rule/house-pattern-for-answers) | RadioGroup, Checkbox, Select |
+| Long enumeration in utilitarian UI | `Select` | a scrolling card grid |
+| A single date | native date input | `Calendar` |
+| Focused task over dimmed content | `Dialog` | Sheet |
+| Supplementary content on mobile | `Sheet` side bottom, aside on desktop (rule/sheet-on-mobile-aside-on-desktop) | Dialog |
+| Transient UI attached to a control | `Popover`, anchored on the control | Dialog |
+| Progressive disclosure in the app | `Accordion` | a custom toggle |
+| Public FAQ | native details and summary | Accordion |
+| Two or three peer views | `Tabs` | Accordion |
+| Secondary detail under a heading | `Accordion` | Tabs |
+| Ranking a small capped set | `SortableList` | drag on a plain list |
+| Long free text | `Textarea` (auto-grows) | Input |
+
+## Composing
+
+- Never copy a component into a product to change it. Change it upstream,
+  bump. A component that must import app code stays in the product (like
+  `place-autocomplete`).
+- `className` on a package component adds layout; it does not override its
+  colour, radius or shadow. If the look is wrong, the variant or the
+  component is wrong.
+- `cn` from the package (products re-export it from `@/lib/utils`).
+- Cards do not nest. A card is a unit the reader picks up, not a border
+  around a section.
+- Button wraps bare text children in a span so icon-leading and
+  icon-trailing padding can differ; keep icons as direct children.

package/skills/product-design/references/copy.md

@@ -0,0 +1,25 @@
+# Copy
+
+Load when: any user-facing string, accessible name, error, empty state,
+label, or commit message.
+Canonical owner: each product's CLAUDE.md language and copy sections;
+`DESIGN.md`, Reject list (voice).
+
+- English per product (rule/english-per-product). Check the product before
+  writing a word.
+- Short sentences, one idea each. Read aloud; if the rhythm is wrong,
+  rewrite (rule/voice-bans).
+- Sentence case everywhere except the mono kicker (rule/sentence-case).
+- No em dashes (rule/no-em-dash).
+- Warm and direct, never clinical, never patronising. The voice is a
+  midwife who respects the reader.
+- Plain-language medical terms with the clinical term in parentheses where
+  it helps ("nitrous oxide (gas and air)"). Terminology lists live in each
+  product's CLAUDE.md.
+- Claims name only what ships (rule/claim-only-what-ships).
+- "Birth plan" for search, "birth preferences" in clinical and community
+  copy; both coexist by design.
+- Buttons name the action and the object where the consequence matters
+  ("Delete plan", not "Confirm"). Loading states keep the label stable.
+- Errors say what happened and what to do next, keep the reader's input,
+  and never blame.

package/skills/product-design/references/intake.md

@@ -0,0 +1,66 @@
+# Intake
+
+Load when: running or judging a design intake, or deciding what to do with
+a review comment that keeps coming back.
+Canonical owner: this file for the procedure; `rules.md` and `exemplars/`
+for what accepted candidates become.
+
+Standards change as components, names and surfaces change. The intake loop
+turns what actually happened (commits, review comments, snapshot deltas)
+into candidates, and keeps three jobs apart so no single message becomes a
+rule by itself.
+
+## 1. Collect (mechanical)
+
+`ds-intake --repo <product> [--repo <product>] --since <date|ref> --out
+skills/product-design/intake/<date>.md` gathers every design-relevant
+commit verbatim (subject, body, touched files) and writes a packet with
+empty judge and review sections. It never scores or proposes. Run it at a
+merge to a product's `main`, or weekly; the packet's last section names the
+`--since` for the next run. Add review comments and screenshots by hand
+under the commit they belong to, quoted, with a link.
+
+## 2. Judge (agent, in the packet)
+
+Read the whole packet before writing a candidate. Then:
+
+- Group evidence that points at the same decision. One candidate per
+  decision, not per commit.
+- Separate verified facts (what the commit changed, what was measured) from
+  inferences (why it was probably done) and open questions.
+- Check each candidate against `rules.md`: already covered, a refinement, or
+  new. A refinement names the rule ID it changes.
+- Fill the candidate block: scope, decision, rationale, evidence hashes,
+  exceptions, a bad and good example, and the narrowest destination:
+  `rule` (a new record), `exemplar` (a decision worth repeating, from one
+  shipped change), `lint` (code can check it without rendering and without
+  many exceptions), `eval` (a before and after fixture), `coverage gap`, or
+  `no change` (already recorded, or not a design decision).
+- Leave every candidate `proposed`. Put process notes and non-design
+  changes under Rejected topics with one line saying why.
+- A single commit is enough for an exemplar. A rule needs the correction
+  to have recurred, or a human to say it will.
+
+## 3. Review (human)
+
+Alex sets each candidate to `accepted` or `rejected`, may change the
+destination, and may add the one thing the packet cannot: a decision that
+has not shipped yet. Accepted candidates move in the same branch:
+
+| Destination | Where it lands |
+|---|---|
+| rule | a new `### rule/<id>` in `rules.md`, and DESIGN.md if the narrative needs it |
+| exemplar | `exemplars/<slug>.md` with Status, Product, Source, Rules, Decision, Why, Repeat, Avoid |
+| lint | a rule in `guardrails/eslint.ts`, a fixture case, `rules.md` enforcement status, changelog |
+| eval | a fixture under `evals/` (none yet) |
+| coverage gap | a line in `coverage-gaps.md` |
+| no change | nothing; the packet keeps the record |
+
+The packet stays in `intake/` as the decision log. Never edit a rule from a
+packet that has no accepted status on the candidate.
+
+## Cadence and ownership
+
+Alex owns the guidance. The agent runs the collector and drafts the judge
+sections. Rules that stop helping are removed the same way they were
+added: a candidate, a decision, a commit.

package/skills/product-design/references/motion.md

@@ -0,0 +1,22 @@
+# Motion
+
+Load when: hover and state transitions, entrance sequences, ambient
+layers, reduced motion.
+Canonical owner: `DESIGN.md`, Motion; the product's `globals.css`
+(reduced-motion block, entrance keyframes).
+
+- Default to stillness. Motion explains a state change, preserves
+  continuity or confirms an action. It never gates reading.
+- Reversible state: transitions (rule/transition-for-interactive-state).
+  One-shot staged sequences: keyframes, gated once per visit
+  (rule/entrance-once-per-visit), at rest under reduced motion.
+- Ambient layers (glow blobs) are decorative and stay behind content; they
+  must not clip at a boundary (rule/no-clipped-ambient). Verify rendered at
+  the seam, in both themes; a luminance step on the exact pixel row where
+  sections meet is the failure.
+- Hover on buttons: colour, shadow and a half-pixel lift
+  (`hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.96]`),
+  already in the Button primitive. Do not add a second hover language.
+- No animation libraries without a written justification; the conversion
+  surface budget for animation JavaScript is 30KB compressed
+  (PRINCIPLES.md).