# Design System Specification: The Ethereal Interface

## 1. Overview & Creative North Star: "The Digital Curator"
This design system moves away from the rigid, boxed-in constraints of traditional web frameworks to embrace a philosophy we call **The Digital Curator**. Inspired by high-end iOS editorial layouts and the precision of Swiss minimalism, the North Star of this system is *effortless clarity*. 

We do not use lines to contain content; we use light, space, and depth to organize it. The interface should feel like a series of meticulously arranged glass panes floating over a soft, infinite canvas. By prioritizing intentional asymmetry and varying tonal depths, we create a signature experience that feels bespoke, premium, and human-centric.

---

## 2. Colors & Tonal Architecture
The palette is rooted in a sophisticated "Lucid Blue" (#2563eb) and a spectrum of soft, cool grays. 

### The "No-Line" Rule
**Explicit Instruction:** Sectioning via 1px solid borders is strictly prohibited. Physical boundaries must be defined solely through background color shifts or tonal transitions. Use `surface_container_low` sections against a `surface` background to create structure without visual "noise."

### Surface Hierarchy & Nesting
Treat the UI as a physical stack. The depth of a component is determined by its color token:
*   **Base Layer:** `surface` (#f9f9fe) – The infinite canvas.
*   **Sectioning:** `surface_container_low` (#f3f3f8) – Subtle grouping of related content.
*   **Primary Containers:** `surface_container_lowest` (#ffffff) – High-contrast "pops" for cards and interactive elements.
*   **Floating Elements:** `surface_bright` with 80% opacity and `backdrop-filter: blur(20px)`.

### The "Glass & Gradient" Rule
To inject "soul" into the interface:
*   **Action Gradients:** Primary CTAs should transition subtly from `primary_container` (#2563eb) to `primary` (#004ac6) at a 135° angle.
*   **Glassmorphism:** Headers and navigation bars must use a semi-transparent `surface_container_lowest` with a heavy backdrop blur to allow content colors to bleed through, creating a sense of environmental integration.

---

## 3. Typography: Editorial Authority
We utilize **SF Pro** (or **PingFang SC** for regional optimization) to maintain an authoritative yet approachable voice. The hierarchy is designed to favor extreme contrast—large, bold headlines paired with generous tracking in labels.

*   **Display (Display-LG/MD/SM):** Set with -0.02em letter spacing. These are your "hooks." Use them sparingly to break the grid.
*   **Headlines (Headline-LG/MD/SM):** The backbone of the editorial flow. Ensure at least 32px of vertical breathing room above these.
*   **Body (Body-LG/MD/SM):** Optimized for readability. Use `on_surface_variant` (#434655) for secondary body text to reduce visual weight.
*   **Labels (Label-MD/SM):** All-caps with +0.05em tracking when used for category tags to provide a premium, "metadata" feel.

---

## 4. Elevation & Depth: Tonal Layering
Traditional shadows are heavy; we use **Ambient Light** principles.

*   **The Layering Principle:** Instead of shadows, place a `surface_container_lowest` card on top of a `surface_container_low` background. The slight shift in hex value creates a "soft lift."
*   **Ambient Shadows:** For floating modals or menus, use a multi-layered shadow: `0 10px 40px rgba(26, 28, 31, 0.06)`. The color is a tint of `on_surface`, never pure black.
*   **The "Ghost Border" Fallback:** If accessibility requires a border, use `outline_variant` (#c3c6d7) at **15% opacity**. It should be felt, not seen.
*   **Corner Radii:** Apply a consistent `xl` (1.5rem / 24px) for large containers and `lg` (1rem / 16px) for standard cards to mimic the hardware curvature of modern iOS devices.

---

## 5. Components

### Buttons & Interaction
*   **Primary:** Gradient fill (`primary_container` to `primary`), white text, 16px radius.
*   **Secondary:** `surface_container_high` background with `on_surface` text. No border.
*   **Tertiary:** Ghost style. No background, `primary` text weight at "Medium."

### Cards & Lists
*   **The "No-Divider" Rule:** Vertical lists must never use horizontal lines. Use 16px–24px of vertical padding (`spacing-scale`) or alternating tonal backgrounds to separate items.
*   **Cards:** Use `surface_container_lowest` with an `xl` corner radius. Content inside should have at least 24px of internal padding.

### Input Fields
*   **Form Style:** Use a "filled" approach rather than outlined. Use `surface_container_low` as the base. Upon focus, transition the background to `surface_container_lowest` and apply a 2px `primary` "Ghost Border" (20% opacity).

### iOS Navigation Patterns
*   **Bottom Sheets:** Use for secondary actions. Must include a "grabber" (a 36x5mm pill in `outline_variant`).
*   **Tab Bars:** 100% width, `surface_container_lowest` with 85% opacity and `backdrop-filter: blur(30px)`. Icons should use `primary` for active states and `outline` for inactive.

---

## 6. Do's and Don'ts

### Do:
*   **Do** embrace negative space. If a layout feels "empty," it is likely working.
*   **Do** use asymmetrical margins (e.g., a wider left margin for headlines) to create an editorial feel.
*   **Do** use `primary_fixed_dim` for subtle accent backgrounds behind icons.

### Don't:
*   **Don't** use 1px solid borders to separate sections. Use color tokens `surface` vs `surface_container`.
*   **Don't** use pure black (#000000) for text. Use `on_surface` (#1a1c1f) to maintain a premium softness.
*   **Don't** use standard "drop shadows." If it looks like a 2010 web app, the blur radius is too small and the opacity is too high.


