Glint Health — Design System

Earlier metabolic insight from CGM.

This repository is the design system for Glint Health, a web app where pregnant and trying-to-conceive users upload a short (5–14 day) continuous glucose monitor (CGM) recording and receive a calm, interpretable early glucose-risk report, plus a clinician-ready PDF to bring to their OB.

• First module — "Glint Snapshot": a one-time report from a single CGM upload, ideally around 10 weeks.
• Powered by AWRM, an attention-weighted model of glucose-excursion dynamics, licensed from the University of Virginia.
• Parent company: ZetaSense — Glint is a ZetaSense product. The ZetaSense master brand is a navy-and-teal stylized ζ (zeta) mark (assets/zetasense-mark.png).
• Regulatory framing (pre-FDA-clearance): an educational glucose-pattern report — not diagnostic, and does not replace the standard OGTT.

Two audiences, one system

1. The pregnant / TTC user — needs clarity and calm; is often worried.
2. The clinician (OB / MFM) — needs a credible, scannable PDF.

Sources

This system was authored from the product brief (no prior codebase or Figma was provided). All brand identity, palette, type, components, and screens here are original to this project. If/when a production codebase or Figma file exists, link it here so future contributors can reconcile.

---

⚠ Non-negotiable rules (read first)

1. No danger-red, ever. The risk score is non-diagnostic; red spikes anxiety. The only clinical data colors are green = target range and amber = elevated. The headline risk band itself is styled neutral (calm dusk), never colored by value.
2. Exact terminology. Always "Estimated Probability of GDM" (never "AI Risk" / "AI Score"). Always "Index Excursion" (never "sentinel event").
3. Always show the caveat near any result: not a diagnosis, does not replace the OGTT, discuss with your clinician. Use the CaveatNote component.
4. Glint gold is decorative only (logo, light/glow). Never in data viz or risk chips.

---

CLINICAL LEXICON & REPORT STRUCTURE

The clinician deliverable is the AI-Augmented Ambulatory Excursion Profile (one page). Use this exact vocabulary — it is the corrected lexicon (see deprecated terms below).

Required terms

• Estimated Probability of GDM — the headline percentage (never "AI Risk", "AI Score", or "Overall AI Risk").
• Index Excursion — a notable glucose rise the model weighted; ranked Rank 1/2/3 (never "Sentinel" / "Sentinel Excursion").
• Attention Pctl — the attention percentile the AWRM assigned an excursion.
• AWRM — Attention-Weighted Risk Model (licensed from the University of Virginia).
• AWRM screen-negative / screen-positive — the screen call (styled neutral, never red).
• → Assessment: — the closing clinical recommendation line.

Excursion metrics (the ExcursionDetail grid; "minutes from onset" mini-curve): Peak value · Pre-exc baseline · Prominence (+mg/dL) · Rise rate (mg/dL/min) · Time to peak (min) · Recovery deficit (±mg/dL) · GA week. (Collectively these were once called "Digital Biomarkers" — do not use that label.)

Range bands: Target Range 70–140 mg/dL (green) · Elevated 140–180 mg/dL (amber). The AGP curve runs a 24-hour clock (12am → 12am).

⚠ Deprecated terms (never use): "AI Risk" / "AI Risk Score", "Overall AI Risk", "Sentinel" / "Sentinel Excursion", "Digital Biomarkers", "HIGH RISK / LOW RISK" all-caps alarm labels. These appeared in earlier report drafts and were corrected.

Sample data note: all values in the UI kits are illustrative. No personal identifiers, author names, cohort names, or unpublished performance figures from the source material are reproduced.

---

CONTENT FUNDAMENTALS — how Glint writes

Voice: warm, calm, low-anxiety, trustworthy. Reassuring and supportive, never alarming — yet credible enough for a clinician. A "glint" is a small early flash of light: a clue you can see before standard screening would.

• Person: Speak to the user as "you"; the company is "we" (sparingly). Clinician-facing copy is neutral/third-person and clinical.
• Tone: Plain, gentle, declarative. Short sentences. Lead with reassurance, then nuance. Frame elevated findings as "worth a quick chat with your OB," not warnings.
• Casing: Sentence case everywhere (headings, buttons). Eyebrows/labels may be UPPERCASE with wide tracking. Product names keep their capital: Glint Snapshot.
• Numbers: Always in mono/tabular figures with units (112 mg/dL, 87.2 %).
• Emoji: None. This is a health product; emoji undercut credibility.
• Punctuation: En-dashes for ranges (5–14 days), middots in metadata (Tue · after dinner).

Example copy (approved tone):

• Hero: "Earlier metabolic insight from CGM." / "A glint is a small early flash of light — a clue you can see before standard screening would."
• Reassurance: "Your glucose held in target through the night across all 11 days — a reassuring sign."
• Gentle watch: "A few dinners pushed you above range for a while. This is common and worth a quick chat with your OB."
• Caveat (verbatim default): "This is an educational glucose-pattern report — not a diagnosis. It does not replace the standard oral glucose tolerance test (OGTT). Please discuss these results with your clinician."

---

VISUAL FOUNDATIONS

Concept — "Dawn over water." Glint is a product of ZetaSense, whose master brand is a navy-and-teal ζ mark. Glint inherits that deep navy as its primary and carries ZetaSense teal as its accent, set over warm linen ground with a small gold glint of light — like dawn breaking over water.

• Color. Backgrounds are warm linen (--linen-50 page, white cards). Text is a warm twilight slate (--ink-900/700/500). Brand primary is ZetaSense navy (--dusk-600 #0B3E64, deepening to #00204E) — drawn straight from the parent mark. Secondary brand accent is ZetaSense teal (--teal-600 #0E8C8A), used for links, brand moments, and marketing — never in clinical data viz. Clinical: target green + elevated amber, both muted and measured. Glint gold (--glint-500) is the decorative light spark only. No red exists in the palette.
• Type. Display = Newsreader (warm editorial serif) for headings, hero, and report titles, with italics for emphasis. UI = Hanken Grotesk (humanist sans) for body, labels, controls. Numbers = IBM Plex Mono (tabular) for all clinical figures — the "lab report" credibility cue. Headings are sentence case, tight tracking, balanced wrap.
• Spacing. 4px base scale. Generous, calm whitespace; content columns max ~620–760px for reading comfort.
• Backgrounds. Mostly flat warm linen. The one signature effect is a soft radial "dawn glow" (radial-gradient(...var(--glint-100)...var(--linen-50))) behind the hero, and a warm glint glow over twilight on dark surfaces. No busy gradients, no mesh, no purple. Optional subtle grain is acceptable but not required.
• Corner radii. Soft and composed: controls/small cards 12px, cards 16px, feature panels/report surfaces 24px; full pill only for chips/badges. Never sharp.
• Cards. Warm white, 1px warm border (--border-default), soft shadow (--shadow-sm). Variants: tint (dusk-50), inset (linen), flat, raised.
• Shadows. Warm-slate, low and diffuse (--shadow-xs…xl). Calm, never harsh or high-contrast. A decorative --glow-glint exists for light highlights only.
• Borders. Hairlines in warm tones (--line-100/200/300). Dashed target-band guides on charts use --target-200.
• Motion. Gentle and quiet. --ease-standard / --ease-out, durations 120–320ms. No bounce. Hover = subtle background/elevation shift; the optional glint shimmer is slow (--duration-glint 1400ms). Respect reduced-motion.
• Hover states. Buttons darken one step (primary → dusk-700) or pick up a faint tint (ghost → dusk-50). Cards marked interactive lift 1px with a deeper shadow.
• Press states. A 0.5px downward nudge (translateY), no color flash, no shrink.
• Focus. Dusk-blue ring (--ring-focus), never removed.
• Transparency / blur. Used sparingly — soft radial glows and low-alpha shadows; no heavy glassmorphism.
• Imagery vibe. Warm, soft, natural light; calm and human. (No stock imagery is bundled — request real photography. Avoid clinical/cold or anxious imagery.)

---

ICONOGRAPHY

• Style: Lucide-style line icons — 24×24 viewBox, ~2px stroke, round caps and joins, currentColor. This matches the calm, humanist tone (no filled/heavy icons).
• How they're used here: icons are inlined as small SVGs inside components (FileDropzone, StepProgress, CaveatNote, InsightCard, download button) so the system has zero icon-font dependency.
• ⚠ Substitution flag: no brand icon set was provided, so Lucide conventions were adopted as the closest fit. For production, either install lucide (npm) / link the CDN, or copy the specific SVGs into assets/icons/. Keep the 2px-stroke, round-cap style for any new icons.
• Emoji / unicode as icons: never. Use line icons or text.
• Logo. The brandmark is a CGM sensor ring with a glint of light catching its edge (assets/glint-mark.svg) — a navy ring, teal catching-arc, and gold spark that fuses the ZetaSense navy+teal with Glint's own warm spark — plus the Glint Health wordmark in Newsreader (assets/glint-logo.svg, glint-logo-white.svg). The ZetaSense parent mark (assets/zetasense-mark.png) appears as an endorsement.

---

⚠ Font substitution note

Fonts load from the Google Fonts CDN (tokens/fonts.css) rather than self-hosted binaries (the sandbox can't download font files). Newsreader, Hanken Grotesk, and IBM Plex Mono are all open-source (OFL). For production/offline use, self-host the .woff2 files and replace the @import with local @font-face rules. Ask the user to confirm or supply licensed binaries.

---

INDEX — what's in this repo

Root

• styles.css — global entry point (consumers link this); @imports only.
• readme.md — this file. · SKILL.md — Agent-Skills manifest.

tokens/ (all reachable from styles.css)

• fonts.css · colors.css · typography.css · spacing.css (spacing/radii/ elevation/motion) · base.css (element resets).

assets/

• glint-mark.svg · glint-logo.svg · glint-logo-white.svg · zetasense-mark.png (parent brand).

guidelines/ — foundation specimen cards (Design System tab): colors (neutrals, brand navy, ZetaSense teal, glint, risk), type (display, sans, mono, scale), spacing (scale, radii, elevation), brand (logo, ZetaSense lineage, glint motif, voice).

components/core/ — Button, Badge, Card, Input, FileDropzone, StepProgress, Stat. (core.card.html thumbnail.)

components/clinical/ — RiskBand, GlucoseChart (AGP), ExcursionDetail, ExcursionItem, InsightCard, CaveatNote. (clinical.card.html thumbnail.)

ui_kits/

• app/ — Glint Snapshot user flow (upload → review → report).
• clinician/ — one-page clinician-ready PDF.
• marketing/ — landing page on the tagline.

Each component has a sibling .d.ts (props + adherence) and .prompt.md (usage). Components are consumed via window.GlintHealthDesignSystem_<hash> from the compiled _ds_bundle.js (generated automatically — do not edit by hand).