v5 shipped a single-layer icon rail and used "Y" / "G" / "R" letter chips. Poom flagged both. This file is the corrected reference for: two-layer rail, Section Nav, user-facing tier labels, Attention indicator + stack, floating Ask button, contextual Consult CTAs (with invisible triage for KTAXA users), and the Mental weekly check-in entry. Downstream chunks (Physical Pillar / Trends / Consult flow / Mental Pillar) inherit these patterns from here, not from v5.
Per-biomarker reading uses Status (Good / Okay / Attention / Risk — granular). Whole-person tier uses user-facing words: Healthy / Monitor / Action needed. The technical tier color word (Yellow / Green / Red) appears only on data-transparency surfaces where the audience is KTAXA reps.
DO NOT use single-letter chips (Y/G/R) anywhere user-facing. v5 anti-pattern, killed in 5.1.
Use only in: "For your insurance" transparency view (KTAXA-readable layer), backend exports, internal docs. Never in regular dashboard UI.
Layer 1 = platform-level module switcher (52px). Layer 2 = sub-pages of the selected module (200px). Pattern inherited from TigerSoft / OpenSpace (`02_workforce_overview.html`). Click any Layer 1 icon below to swap the Layer 2 view.
Content area · selected module's surface lives here
When user lacks entitlement (e.g., no HRIS for Work Wellbeing), the icon is hidden entirely — not rendered. Phase 4+ icons stay visible but dim with a small dot.
NOT a notification bell. Wellbeing alerts are persistent states ("a marker has been Red for 3+ months"), not transient messages. The topbar icon counts items needing attention; clicking routes to Overview where the AttentionStack compiles them cross-pillar.
Global AI assistant. Persistent across every surface. Knows the current page + open modal as context. Bottom-right, blue (the only non-green CTA color in Wellnest besides Consult cyan). Every page must reserve a 72×72px clear zone in the bottom-right corner so the button never overlaps critical UI.
Mobile: button moves to bottom: 80px to clear the bottom nav. Hide entirely during modal takeover.
Consult entry has two models: a persistent Layer 1 icon, AND contextual buttons scattered at every "should I worry?" surface. Both route through the same flow; contextual buttons carry context automatically. For KTAXA-covered users, the flow runs an invisible Triage step first (KTAXA-proprietary care pathway logic). Non-KTAXA users skip triage entirely.
Used on Red biomarker cards, AttentionStack, modal drill-down with high tier.
Used on Yellow biomarker cards — softer prompt, not urgent.
Based on what you've told us and your recent readings, a pharmacist consult is the right level of care here. They can review your medications, answer questions, and recommend whether you need to escalate.
Triage logic is KTAXA-proprietary IP. Other insurance partners don't get it. Non-KTAXA-covered users go straight to a consult-type selector after clicking any consult CTA.
✅ DO: Use colored shadows on filled primary buttons for Consult (cyan rgba(6,182,212,…)) and Mental (violet rgba(124,58,237,…)). These reinforce module accent identity on interactive elements. Focus rings use the same color at 0 0 0 3px rgba(…,0.15).
❌ DON'T: Use colored shadows on cards, tiles, or ghost buttons — those use the neutral no-lift hover (0 2px 8px rgba(0,0,0,.07)) per §23.2.
Sandbox feedback killed the daily-pulse model. Mental cadence standardizes on weekly (1-2 week intervals, matches WHO-5's 2-week recall window). Workplace daily-pulse stays as a Phase 3 placeholder only.
5 questions about how you've felt the past 2 weeks. Takes about 90 seconds.
v5 used "Y" / "G" / "R" letter chips on pillar tiles. v5.1 replaces them with full user-facing tier labels (Healthy / Monitor / Action needed) in the inline variant.
The primary data unit on the Physical pillar. Three tier states: Healthy (no stripe, clean white), Monitor (yellow left stripe), Action needed (red left stripe). Stripe signals urgency — not a tint. Card body is always white.
Green cards carry no left stripe and no background tint — clean white only.
Add class tier-yellow to bm-card to render the 3px yellow left stripe.
Red cards get solid .consult-cta. Yellow "Monitor" cards with attn status get .consult-cta--ghost. Green cards: no CTA.
Each biomarker has clinically-defined zones — bidirectional where both too-low and too-high are dangerous. The teardrop marker points down from above the bar, colored to match the zone the current value falls in. Zones are flat fills (no gradient) so boundaries stay clearly distinct.
The teardrop marker position (left: X%) is computed by JS at render time from the BM_ZONES data structure — see renderZonedBar() in 03_physical-pillar-biomarkers.html. Never hard-code percentages in production. The marker color class (zone--good / --okay / --attn / --risk) is determined by which zone the current value falls into. Do NOT use a single green→yellow→red gradient — each zone must have a clearly distinct flat color.
720px wide (max 100vw − 32px). Layers: 3-chip context header → AI callout (neutral, no tinting) → range table → contributing tests log (clickable rows with expandable results) → accordion for deep content sections. The modal closes both the KTAXA-transparency and Consult CTA surfaces.
Modal is triggered by clicking a bm-card. In production, the modal-backdrop (position:fixed, rgba overlay) wraps the .modal. The showcase above renders inline for visibility.
Every datapoint carries a source badge — trust is built on knowing where data came from. Phase 3 placeholder cards use dashed borders + amber badge to signal "this is coming, not missing."
Use the same pill shape + paper-cool background everywhere. Icon + source name. Maximum 2 words after the icon.
Dashed border signals "not yet available" (different from a locked or dim state). Amber badge = Phase 3. Purple badge was retired — amber is canonical .badge-phase--p3.
rgba(245,158,11,0.12) + #92400e) for the P3 badge.badge-phase--p3)One canonical report artifact serves two contexts: (1) shared with the PharmCare doctor at consult time as a data preview in step 3 of the consult flow, and (2) exported from Health Passport as a downloadable PDF. The report header uses a green gradient top-stripe + 2-col patient/report-meta layout. Optimised for both screen and print.
The 4px top-stripe gradient is applied via .report-header::before. The report wraps biomarker cards from the standard bm-card pattern but in a print-optimised layout (single-column, print @media CSS). Full implementation: 13_biomarker-report.html.