# Design Language for globaltonecheck.com ## Aesthetics and Tone A diagnostic tool interface where communication tone is analyzed with medical-diagnostic precision -- globaltonecheck.com renders as a health-check dashboard for your words: vital-signs monitors track tone metrics, diagnostic reports flag issues, and the clean clinical aesthetic communicates that tone health is measurable and improvable. The medical-diagnostic aesthetic uses the visual language of patient monitoring systems: real-time readouts, threshold indicators, and status classifications. The tone is diagnostician-thorough: systematic, evidence-based, and reassuring. "Your baseline tone is healthy. Let's check a few specific indicators." ## Layout Motifs and Structure **Diagnostic System:** Clinical white background with organized test-result panels. **Section Flow:** 1. **The Intake:** Hero with "GLOBAL TONE CHECK" as a diagnostic report header, patient-info style fields. 2. **The Vitals:** A row of vital-sign monitors showing key tone metrics with circular gauge displays. 3. **The Report:** Detailed diagnostic sections with pass/fail/warning indicators per metric. 4. **The Prescription:** Recommendations section with action items. ## Typography and Palette - **Headlines:** "Inter" at 1.8rem-3rem, weight 700. - **Body:** "Inter" at 0.95rem, weight 400, line-height 1.7. - **Data:** "Fira Code" at 0.85rem, tabular-nums. **Palette:** Clinical White (#fafcfc), Panel Grey (#f0f2f4), Healthy Green (#20a050), Warning Amber (#e0a020), Critical Red (#d03030), Diagnostic Blue (#2060a0), Text (#1a2030), Muted (#607080). ## Imagery and Motifs **Circular Gauges:** CSS-drawn circular progress indicators (conic-gradient) showing metric percentages, color-coded by health. **Status Badges:** Small pill-shaped indicators reading "PASS" (green), "CHECK" (amber), or "ALERT" (red). **Diagnostic Report Headers:** Section headers styled as form fields with labels above and values below, mimicking clinical report formatting. **Threshold Lines:** In gauge displays, a thin line marks the acceptable threshold, showing where the metric falls relative to healthy range. ## Prompts for Implementation Build as a diagnostic report. The vitals section loads with gauge circles filling to their values (conic-gradient animation, 1.5s per gauge, staggered). Status badges appear after their parent sections load. The clinical white and systematic layout communicate professionalism and precision. Report sections use consistent formatting: metric name, current value, normal range, status. The Prescription closing provides actionable next steps. No decoration beyond functional clinical elements. ## Uniqueness Notes 1. **Medical diagnostic UI for communication:** Applying patient-monitoring visuals to tone analysis creates a novel diagnostic metaphor. 2. **Conic-gradient circular gauges:** CSS-only circular progress indicators provide distinctive data visualization. 3. **Pass/Check/Alert badge system:** The traffic-light diagnostic status creates immediately scannable results. 4. **Threshold line visualization:** Showing acceptable ranges in gauges adds diagnostic depth. Document chosen seed/style: aesthetic: medical-diagnostic, layout: clinical-report, typography: clean-sans, palette: clinical-white-status, patterns: circular-gauges, imagery: status-badges, motifs: threshold-lines, tone: diagnostician-thorough