ssheroica_web/DESIGN.md

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