DESIGN.md

name	Clinical Clarity
colors	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f9f9fd #d9dadd #f9f9fd #ffffff #f3f3f7 #edeef1 #e7e8eb #e2e2e6 #191c1e #41474e #2e3133 #f0f0f4 #72787f #c1c7cf #316289 #074469 #ffffff #2a5c82 #a5d4ff #9ccbf7 #006a68 #ffffff #91f0ec #006e6c #5a3b00 #ffffff #76510e #fac67a #ba1a1a #ffffff #ffdad6 #93000a #cde5ff #9ccbf7 #001d32 #124a6f #94f2ef #78d6d2 #00201f #00504e #ffddb0 #f1be72 #281800 #614000 #f9f9fd #191c1e #e2e2e6
typography	h1 h2 h3 body-lg body-md body-sm label-caps button fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 40px 700 1.2 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 32px 600 1.25 -0.01em fontFamily fontSize fontWeight lineHeight Manrope 24px 600 1.3 fontFamily fontSize fontWeight lineHeight Inter 18px 400 1.6 fontFamily fontSize fontWeight lineHeight Inter 16px 400 1.5 fontFamily fontSize fontWeight lineHeight Inter 14px 400 1.5 fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 600 1.0 0.05em fontFamily fontSize fontWeight lineHeight Inter 16px 600 1.0
rounded	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px
spacing	unit xs sm md lg xl xxl container-margin gutter 8px 4px 8px 16px 24px 32px 48px 20px 16px

Brand & Style

The design system is anchored in the concept of "Guided Confidence." It prioritizes a high-quality, professional aesthetic that balances clinical precision with human empathy. The target audience includes patients seeking reliable care and practitioners requiring streamlined workflows.

The visual style follows a Modern Corporate movement with a lean towards Minimalism. It utilizes generous white space to reduce cognitive load—essential for healthcare contexts where users may be stressed or anxious. The interface feels "breathable," using subtle depth and a restricted color palette to emphasize critical health data and primary actions.

Colors

The palette is led by Medical Blue (#2A5C82), a shade chosen for its association with institutional trust and stability. The secondary Mint Teal (#48A9A6) is reserved for "positive momentum" actions, such as scheduling appointments or completing health goals, providing a calming alternative to traditional high-contrast action colors.

The neutral scale favors cool slates over pure greys to maintain a sterile yet modern feel. Backgrounds use a very light tint to allow white "Surface" cards to pop visually, creating a clear distinction between the canvas and interactive content.

Typography

This design system utilizes a dual-font strategy to maximize both character and readability. Manrope is used for headlines to provide a modern, slightly rounded warmth that feels approachable. Inter is the workhorse for all functional text, chosen for its exceptional legibility in data-heavy environments and small screen sizes.

Line heights are intentionally generous (1.5x to 1.6x for body text) to ensure that medical instructions and patient data are easy to scan without eye fatigue.

Layout & Spacing

The design system employs a Fluid Grid model built on an 8px base unit. This ensures mathematical harmony across all screen sizes. For mobile views, a 4-column grid is used with 20px side margins to provide a spacious "frame" for content.

Vertical spacing is intentionally "loose." Section headers should be separated from content by at least lg (24px) units, and related grouped items should use md (16px). This creates a rhythmic hierarchy that prevents the interface from feeling cluttered, even when displaying complex lab results or schedules.

Elevation & Depth

To maintain a high-quality, clinical feel, the design system avoids heavy shadows. Instead, it uses Tonal Layers combined with Ambient Shadows.

• Level 0 (Background): Flat, cool-toned neutral.
• Level 1 (Cards/Surface): White background with a 1px border in a light neutral tint.
• Level 2 (Active/Floating): An extremely diffused shadow (15% opacity of the Primary Color) with a 12px blur, used for elevated states like active inputs or navigation bars.

This subtle use of depth suggests layers of information without overwhelming the user with heavy 3D metaphors.

Shapes

A Rounded (0.5rem) logic is applied across the system. This level of corner radius is a strategic choice: it is softer and more "human" than sharp corners, yet more structured and professional than fully pill-shaped "playful" designs.

Cards and containers use rounded-lg (1rem) to create a soft frame for internal content. Buttons and input fields use the standard 0.5rem radius to maintain a consistent interactive language.

Components

• Buttons: Primary buttons use the Medical Blue with white text. Secondary/Success actions (e.g., "Confirm Appointment") use the Mint Teal. Use "Ghost" buttons (border-only) for secondary navigation to maintain visual hierarchy.
• Input Fields: Use a 1px border in a light slate. On focus, the border should transition to the Primary Blue with a 2px outer glow. Labels are always visible above the field in body-sm.
• Cards: The primary container for health data. Use white backgrounds, a subtle 1px border, and rounded-lg corners. Avoid inner padding smaller than 16px.
• Chips: Used for medical tags or status filters. These should have a light-tinted background (5-10% opacity of the color) with high-contrast text for accessibility.
• Progress Bars: Essential for health tracking. Use a thin track height (4px or 8px) with the Mint Teal for completion states.
• Alerts/Toasts: Use the full-width banner style for critical errors, utilizing the defined Error and Warning tokens. Ensure icons are paired with text for accessibility.