# Design System Specification: The Architectural Approval Engine

## 1. Overview & Creative North Star: "Precision Ethereal"
The "Precision Ethereal" North Star moves beyond the standard "boxes-on-grey" look of enterprise software. For this OA approval system, we reject the industrial coldness of traditional automation in favor of an interface that feels like high-end architectural drafting: precise, layered, and deceptively simple. 

We break the "template" look by utilizing **intentional asymmetry**—where navigation and content areas don't always align to a rigid center, creating a sense of forward momentum. By combining the authoritative weight of `manrope` typography with a "No-Line" spatial philosophy, we create a signature identity that feels like a premium digital concierge rather than a bureaucratic tool.

---

## 2. Colors & Surface Philosophy
Our color strategy is rooted in **Tonal Depth**. Instead of using lines to separate ideas, we use light.

### The Palette
- **Primary (The Executive Core):** `primary` (#003da6) and `primary_container` (#0052d9). Use these for high-intent actions.
- **Semantic Accents:** 
    - `secondary` (#006c46) for Approvals.
    - `tertiary` (#733500) for Pending/Warning states.
    - `error` (#ba1a1a) for Rejections.
- **Neutrals:** A sophisticated range from `surface` (#faf8ff) to `surface_container_highest` (#e1e2ed).

### The "No-Line" Rule
**Explicit Instruction:** Do not use 1px solid borders for sectioning or grouping. 
Boundaries must be defined through background color shifts. A `surface_container_low` card sitting on a `surface` background provides enough contrast for the human eye to perceive a boundary without adding visual noise.

### The "Glass & Gradient" Rule
To elevate CTAs and Hero sections, use subtle **Linear Gradients** (e.g., `primary` to `primary_container` at 135 degrees). For floating elements like header bars or mobile navigation, apply **Glassmorphism**:
- **Background:** `surface` at 70% opacity.
- **Effect:** `backdrop-blur: 20px`.
- This ensures the UI feels like it’s floating in a cohesive 3D space rather than being "pasted" on.

---

## 3. Typography: The Editorial Hierarchy
We utilize a dual-font strategy to balance character with utility.

| Level | Token | Font | Size | Intent |
| :--- | :--- | :--- | :--- | :--- |
| **Display** | `display-lg` | Manrope | 3.5rem | High-impact dashboard stats. |
| **Headline**| `headline-md` | Manrope | 1.75rem | Approval titles and section headers. |
| **Title**   | `title-md` | Inter | 1.125rem | Card titles and form groupings. |
| **Body**    | `body-md` | Inter | 0.875rem | Standard data and descriptions. |
| **Label**   | `label-sm` | Inter | 0.6875rem | Micro-copy and status indicators. |

**Style Note:** Headlines in Manrope provide an "Editorial" feel, conveying authority. Body text in Inter ensures maximum legibility in dense approval forms.

---

## 4. Elevation & Depth: Tonal Layering
Traditional drop shadows are forbidden unless an object is physically "active" or "hovered."

*   **The Layering Principle:** Stack `surface-container` tiers to create depth. 
    *   *Base:* `surface`
    *   *Section:* `surface_container_low`
    *   *Individual Card:* `surface_container_lowest` (Pure white #ffffff)
*   **Ambient Shadows:** For floating modals or dropdowns, use a "Tinted Ambient Shadow": 
    *   `box-shadow: 0 12px 40px rgba(25, 27, 35, 0.06);` (Using the `on_surface` color as the shadow base).
*   **The Ghost Border:** If high-contrast accessibility is required, use a "Ghost Border": `outline_variant` at 15% opacity. Never use 100% opaque borders.

---

## 5. Components & Interface Objects

### Buttons (The Action Set)
- **Primary:** Gradient fill (`primary` to `primary_container`), `DEFAULT` (8px) rounding, no border.
- **Secondary:** `surface_container_high` background with `on_surface` text.
- **States:** On hover, increase the elevation through a subtle 4% opacity white overlay rather than changing the base hex code.

### The "Paper-Stack" Approval Cards
- **Rule:** Forbid divider lines within cards.
- **Structure:** Use `body-lg` for the requestor's name and `label-md` for the timestamp. Separate the "Approve/Reject" actions using a 24px vertical gutter (from the Spacing Scale) rather than a horizontal line.
- **Status Chips:** Use `secondary_container` for "Approved" and `error_container` for "Rejected." The text should always be the corresponding `on_` token for contrast compliance.

### Form Inputs
- **Style:** Use "Soft Fields." Background is `surface_container_highest` with a `none` border.
- **Focus State:** Transition the background to `surface_container_lowest` and apply a 1px "Ghost Border" using `primary`.

### Navigation Rails
Instead of a standard sidebar, use a "Floating Rail" with Glassmorphism. The background of the rail should be `surface` at 80% opacity with a heavy backdrop blur, creating a sense of transparency and lightness.

---

## 6. Do’s and Don'ts

### Do:
- **Embrace Whitespace:** Use the spacing scale to create "breathing room" around complex approval workflows.
- **Use Nested Surfaces:** Put high-priority data on a `surface_container_lowest` card to make it "pop" naturally.
- **Editorial Alignment:** Align large headlines to the left, but allow supporting stats to sit asymmetrically to create visual interest.

### Don’t:
- **Don’t use 1px Dividers:** They clutter the UI. Use a 16px or 24px gap instead.
- **Don’t use Pure Black Shadows:** Always tint your shadows with the `on_surface` blue-grey hue to maintain a "high-end" look.
- **Don’t use standard System Fonts:** Stick strictly to the Manrope/Inter pairing to protect the brand persona.
- **Don't crowd the margins:** Professionalism is defined by the space you *don't* fill.