# Design System Document

## 1. Overview & Creative North Star: "The Visionary Sanctuary"

The digital experience for the Eye Surgery Center is guided by a North Star we call **"The Visionary Sanctuary."** This system moves beyond the sterile, clinical aesthetic typical of medical institutions to create a space that feels authoritative yet deeply welcoming (*aconchegante*). 

We achieve this by blending the precision of high-end surgical innovation with the warmth of a luxury wellness retreat. The design breaks the "template" look through:
*   **Intentional Asymmetry:** Utilizing staggered grids and overlapping glass layers to guide the eye naturally.
*   **Editorial Typography:** High-contrast sizing that treats information like a premium medical journal.
*   **Atmospheric Depth:** A focus on how light interacts with surfaces, using glassmorphism to symbolize clarity and focus.

---

## 2. Colors

The palette is anchored in a deep institutional foundation, softened by natural, sandy tones to reduce patient anxiety.

### Core Palette
*   **Primary (#002538):** Our deepest blue, used for critical messaging and grounding the layout.
*   **Primary Container (#003C57):** The institutional blue from the manual, used for headers and primary CTAs.
*   **Secondary (#3D6374):** Slate blue for supporting elements and secondary actions.
*   **Tertiary/Accent (#2C2114):** A rich, warm tone that facilitates the "sand/beige" welcoming feel when paired with the tertiary container tokens.

### The "No-Line" Rule
**Explicit Instruction:** Traditional 1px solid borders are prohibited for sectioning. Boundaries must be defined solely through background color shifts or tonal transitions. To separate a hero section from a service grid, transition from `surface` (#f4faff) to `surface-container-low` (#e9f5fd). This creates a sophisticated, "borderless" editorial feel.

### Surface Hierarchy & Nesting
Treat the UI as a physical stack of materials. 
*   **Base:** `surface` (#f4faff)
*   **Sectioning:** `surface-container` (#e4f0f7)
*   **Interactive Cards:** `surface-container-lowest` (#ffffff) to provide a soft, natural lift.

### The "Glass & Gradient" Rule
To evoke innovation, use **Glassmorphism** for floating navigation and modals. Apply a `backdrop-blur: 12px` to a semi-transparent `surface-container-lowest` (opacity 70%). Main CTAs should utilize a subtle linear gradient from `primary` (#002538) to `primary-container` (#003C57) at a 135-degree angle to provide "soul" and depth.

---

## 3. Typography

The typography strategy pairs the timeless elegance of a serif with the clinical clarity of a modern sans-serif.

*   **Display & Headlines (Noto Serif):** Our "Authoritative Voice." These should be used for core value propositions. The serif choice mimics high-end editorial magazines, conveying trust and heritage.
*   **Body & Titles (Plus Jakarta Sans):** Our "Functional Voice." A clean, open-aperture sans-serif that ensures maximum readability for patients of all ages.

**Hierarchy Strategy:**
*   **Display-LG (3.5rem):** Reserved for hero impact statements.
*   **Headline-MD (1.75rem):** Used for section titles, always in `primary` color to maintain hierarchy.
*   **Body-LG (1rem):** Default for all clinical descriptions to ensure accessibility.

---

## 4. Elevation & Depth

We reject drop-shadow defaults in favor of **Tonal Layering**.

*   **The Layering Principle:** Depth is achieved by "stacking." A card using `surface-container-lowest` placed on a `surface-container` background creates a "soft lift" that feels architectural rather than digital.
*   **Ambient Shadows:** For floating elements (like the WhatsApp button), use an extra-diffused shadow: `box-shadow: 0 20px 40px rgba(0, 30, 46, 0.06);`. The shadow color is a tinted version of our `on-surface` color, mimicking natural light.
*   **Ghost Borders:** If a boundary is strictly required for accessibility, use the `outline-variant` (#c1c7ce) at **15% opacity**. Never use 100% opaque borders.
*   **Glassmorphism Depth:** When using modals, the `backdrop-blur` serves as the primary depth indicator. It suggests that the clinical details are "floating" over the sanctuary, keeping the patient's context visible but softened.

---

## 5. Components

### Interactive Service Cards
*   **Style:** `surface-container-lowest` background, `xl` (1.5rem) rounded corners.
*   **Interaction:** On hover, the card should scale (1.02x) and transition its shadow from 4% to 8% opacity. Use a subtle sand-colored gradient overlay on the image top-layer to unify the visual.
*   **Rule:** No dividers. Use Spacing-8 (2.75rem) between text blocks.

### Primary Buttons
*   **Style:** Gradient fill (Primary to Primary-Container), `full` rounded corners (9999px), and `label-md` typography in uppercase with 0.05em letter spacing.
*   **Padding:** Spacing-3 (vertical) and Spacing-6 (horizontal).

### Floating WhatsApp Button
*   **Style:** Glassmorphic circle with a high-saturation icon. 
*   **Placement:** Fixed at `bottom-8`, `right-8`. 

### Modals & Service Details
*   **Style:** Full-screen glass overlay. Content sits in a centered `surface-container-lowest` container with `xl` corners.
*   **Transition:** Gentle fade-in with a vertical slide (20px).

---

## 6. Do's and Don'ts

### Do:
*   **Do** use asymmetrical image placements to create a sense of modern innovation.
*   **Do** apply the "Sand/Beige" accents (`tertiary-fixed-dim`) as background washes behind medical photography to make them feel "warmer."
*   **Do** use the Spacing Scale strictly to maintain a rhythmic, breathable layout (prefer Spacing-12 and 16 for section gaps).

### Don't:
*   **Don't** use pure black (#000000) for text. Use `on-surface` (#121d22) to keep the contrast "soft" and premium.
*   **Don't** use standard "clinical blue" for links. Use a subtle `secondary` (#3d6374) with an underline that only appears on hover.
*   **Don't** use sharp corners. The eye surgery context requires a "soft touch"; every interactive element must have at least `DEFAULT` (0.5rem) roundedness.
*   **Don't** clutter. If a section feels "busy," increase the vertical white space rather than adding borders.