ssheroica_web/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Heroica Health Systems	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 #f7f9fb #d8dadc #f7f9fb #ffffff #f2f4f6 #eceef0 #e6e8ea #e0e3e5 #191c1e #45464d #2d3133 #eff1f3 #76777d #c6c6cd #565e74 #000000 #ffffff #131b2e #7c839b #bec6e0 #0050cc #ffffff #0266ff #f9f7ff #000000 #ffffff #001e2c #008ebf #ba1a1a #ffffff #ffdad6 #93000a #dae2fd #bec6e0 #131b2e #3f465c #dae1ff #b3c5ff #001849 #003fa4 #c4e7ff #7bd0ff #001e2c #004c69 #f7f9fb #191c1e #e0e3e5	display-lg display-md headline-lg headline-md body-lg body-md label-lg label-md fontFamily fontSize fontWeight lineHeight letterSpacing Inter 48px 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 36px 700 1.2 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 30px 600 1.3 -0.01em fontFamily fontSize fontWeight lineHeight Inter 24px 600 1.4 fontFamily fontSize fontWeight lineHeight Inter 18px 400 1.6 fontFamily fontSize fontWeight lineHeight Inter 16px 400 1.6 fontFamily fontSize fontWeight lineHeight letterSpacing Inter 14px 600 1.2 0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 500 1.2 0.02em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit gutter margin container-max-width bento-gap 4px 24px 32px 1280px 16px

Brand & Style

The visual identity of this design system centers on Modern Corporate Minimalism, tailored specifically for a high-efficiency medical environment. The brand personality is rooted in the intersection of clinical excellence and technological advancement. It aims to evoke a sense of calm reliability and cutting-edge precision.

The aesthetic utilizes a Bento UI layout to organize complex medical services into digestible, modular segments. This approach communicates transparency and order, reflecting the clinic's commitment to streamlined patient care. High-quality medical photography should be integrated within the grid tiles, using a "human-centric" lens that highlights professional care and advanced medical equipment.

Colors

This design system utilizes a palette of Professional Medical Blues and Clean Whites to establish institutional trust.

• Primary (Deep Navy): Used for typography and primary branding to convey authority and stability.
• Secondary (Tech-Blue): A vibrant, saturated blue used as a digital-first accent for call-to-actions, signaling innovation and high-tech solutions.
• Tertiary (Sky Blue): A soft supporting blue used for illustrative elements or secondary states.
• Neutral (Slate/Gray): A range of cool grays (from #F8FAFC to #64748B) provides the structural foundation for backgrounds and borders, ensuring the interface remains airy and uncluttered.

Typography

The choice of Inter as the sole typeface reinforces the "Modern Corporate" aesthetic. It is a highly functional, systematic font that provides exceptional legibility in a medical context where clarity of information is paramount.

Headlines should utilize tighter letter-spacing and heavier weights to create a sense of presence. Body text is set with generous line-height to ensure readability for patients of all ages. Small labels and metadata should use medium weights to maintain visibility against soft gray backgrounds.

Layout & Spacing

The layout follows a strict Fixed Grid model optimized for a Bento UI presentation. The central content area spans up to 1280px, utilizing a 12-column grid system.

The "Bento" philosophy requires that elements be contained within distinct, card-like containers. These tiles should span varying column counts (e.g., 3, 4, 6, or 12) to create visual hierarchy. A consistent 16px gap between tiles ensures the grid feels cohesive yet breathable. Internal padding within these tiles should be generous (minimum 24px) to uphold the minimalist aesthetic.

Elevation & Depth

To maintain a clean, professional appearance, this design system avoids heavy shadows. Instead, it utilizes Ambient Shadows and Tonal Layering:

1. Base Layer: The primary background is the neutral white or very light gray.
2. Container Layer: Bento tiles are white, set against a light gray background, or have a subtle 1px border in a soft slate tone.
3. Elevation: When a tile or button requires focus, use an ultra-diffused shadow (Blur: 20px, Opacity: 4%, Color: Primary Navy). This creates a "lifted" effect without the clutter of traditional skeuomorphism.

Shapes

The shape language is defined by Rounded geometry. A radius of 0.5rem (8px) is the standard for small components like inputs and buttons, while larger bento containers and cards should use 1.5rem (24px) to create a friendly, approachable, and modern feel. Icons should follow this logic, avoiding sharp corners in favor of slightly rounded stroke terminals.

Components

Bento Cards

The core of the interface. Each card must have a distinct purpose (e.g., "Book Appointment," "Lab Results," "Our Doctors"). Use high-quality medical photography as a background for 1-2 hero tiles, using a dark overlay to ensure white typography remains legible.

Buttons

• Primary: Solid Secondary Blue with White text. Rounded corners (8px).
• Secondary: Transparent with a 1px Slate border and Navy text.
• Icon Buttons: Circular or slightly rounded squares used for navigation within tiles.

Inputs & Form Fields

Fields should have a soft gray background (#F1F5F9) and no border, except when focused, at which point a 2px Tech-Blue border appears. This "flush" look keeps the forms feeling modern and efficient.

Chips & Badges

Used for status indicators (e.g., "Available," "Urgent"). These should use low-saturation versions of the status colors (soft greens, soft reds) with high-saturation text to maintain the "clean" medical look.

Navigation

A top-bar navigation that is pinned, using a subtle backdrop-blur (Glassmorphism effect) to maintain depth as the user scrolls through the bento grid.