Motion tokens — clinical-authority (HypnoNews YMYL)
v0.2.0 — YMYL-safe: true
-
--duration-micro: 200ms -
--duration-subtle: 280ms -
--duration-transition: 400ms -
--duration-reveal: 600ms -
--duration-citation_marker: 800ms -
--duration-page_transition: 500ms
Motion tokens — hypnotic-tempo (HypnoRe product)
v0.1.0 — YMYL-safe: false
-
--duration-micro: 220ms -
--duration-transition: 500ms -
--duration-breath_in: 4000ms -
--duration-breath_hold: 4000ms -
--duration-breath_out: 6000ms -
--duration-ambient_loop: 14000ms
Component routes
Per-component preview pages. Wave 0-5 components land here as they ship per ADR-0020 tier sequencing.
Wave 0 trust components (HC-X5a)
- CitationInline — narrative inline citation (Principle 4)
- DisclosureBlock — HC-85 minimal-emphasis (sage / blue cluster)
- EditorialProcessStamp — anonymous editorial team card + flyout
- EvidenceStrengthBadge — A/B/C/D grade tile (dual encoding)
- ResearchMethodologyCallout — link to /how-we-evaluate
- SourceListBlock — bibliography (unordered, tier badges)
Wave 0 primitives (HC-X5b)
- FreshnessBadge — fresh ≤30d / stale >30d pill (native <time>)
- BreadcrumbNav — "/" separator, aria-current=page, mobile truncate
- GlobalNav — desktop mega-menu + mobile bottom-sheet drawer (focus trap)
- SiteHeaderBrand — sticky banner 64→48px scroll-shrink, composes GlobalNav
- NewsBrief — layout w/ NewsArticle + BreadcrumbList JSON-LD
Wave 0 structural (HC-X5c)
- ArticleHero — H1 + deck + tags; condition vs research-article variants
- EvidenceTable — outcome × studies × grade (composes EvidenceStrengthBadge)
- ComparisonTable — EDITORIAL FIREWALL STRICT per ADR-0006 (no auto-#1 own product)
- FaqBlock — collapsible details/summary + FAQPage JSON-LD
- TocSidebar — scroll-spy aria-current=location, desktop sticky + mobile drawer
- Image — 5 alignments + 2 caption positions (NO AI imagery for YMYL)
Wave 0 safety (HC-X5d)
- SafetyWarning — caution / warning / danger (NEVER animate or dismiss; YMYL)
A-RECON canonical components (HC-124) — NEW
- ArticleCard — featured / compact / discovery (replaces hp2__pop / hp2__rec / cat__card; composes evidence + freshness)
- SectionHeader — eyebrow + H2 + sub + optional "see all" (composes ArrowLink)
- Button — shared .btn: primary / ghost / secondary / sm (+ arrow)
- ArrowLink — "see all" / "learn more" text link + arrow
- HomepageHero — sage band, eyebrow rules, italic accent, CTA pair, stat chips
- SearchHero — minimal /search/ hero (slots the search field)
- SearchInput — 48/56/64 responsive field + icon + clear
- SearchCard — form shell + suggestions dropdown (composes SearchInput)
Also adapted: EvidenceStrengthBadge (+chip mode) · FreshnessBadge (+compact). See PRs HypnoCoWeb#35 + HypnoCo#27.
Wave 0 page templates (HC-X6)
- Homepage — WebSite + Organization + SearchAction JSON-LD
- CategoryHub — CollectionPage + BreadcrumbList JSON-LD
- Article — MedicalWebPage + BreadcrumbList JSON-LD
- EvergreenPillar — Article + BreadcrumbList JSON-LD + quick-navigator
- Policy — WebPage + BreadcrumbList JSON-LD
- Search — SearchResultsPage JSON-LD + Pagefind stub
- NewsBrief — NewsArticle + BreadcrumbList JSON-LD (HC-X5b layout)
- 404 — Not Found template
- 410 Gone — intentional removal template
Tokens source: @hypnoco/design-tokens-web@^0.2.1 (HypnoCo specs).
Bridge: HC-52 · Epic: HC-82 Wave 0 Design Integration Ramp.