# Design System Strategy: The Digital Atelier

## 1. Overview & Creative North Star
**Creative North Star: "The Digital Atelier"**
The objective of this design system is to transform a functional workspace into a curated sanctuary for thought. Unlike standard "SaaS-blue" interfaces that feel industrial and rigid, "The Digital Atelier" treats the screen as a high-end editorial canvas. We lean into **Organic Minimalism**—where the architecture of the page is defined by light and space rather than lines and boxes. 

The system breaks the "template" look by utilizing intentional asymmetry in the sidebar, generous breathing room (white space) that prioritizes focus, and a sophisticated layering of tones that mimics the physical stacking of fine vellum paper.

---

## 2. Colors & Surface Philosophy
The palette is rooted in a "High-Value Neutral" philosophy, using green as a surgical strike of intent rather than a blunt instrument.

### The Palette
- **Primary (Action):** `#31AA4D` (The Signature Green) — Used exclusively for intentional actions and progress.
- **Secondary (Utility):** `#2367F6` — Reserved for links and specific collaborative indicators.
- **Surface (Background):** `#FAF9F9` (Surface) to `#FFFFFF` (Lowest).
- **Tonal Greys:** `#F7F7F7` (Container Low), `#EAEAEA` (Outline Variant).

### The "No-Line" Rule
Traditional 1px borders are strictly prohibited for sectioning. Boundaries between the navigation sidebar and the main editor must be defined solely by the shift from `surface-container-low` (`#F4F3F3`) to `surface-container-lowest` (`#FFFFFF`). 

### Surface Hierarchy & Nesting
Treat the UI as a series of physical layers. 
- **Layer 0 (Canvas):** `surface` (`#FAF9F9`).
- **Layer 1 (Sidebar/Navigation):** `surface-container-low` (`#F4F3F3`).
- **Layer 2 (The Document):** `surface-container-lowest` (`#FFFFFF`).
- **Layer 3 (Modals/Popovers):** `surface-container-highest` (`#E3E2E2`) with Glassmorphism.

### The "Glass & Gradient" Rule
For floating elements (AI Assistant, Help), use `surface-container-lowest` at 80% opacity with a `24px` backdrop-blur. Apply a subtle linear gradient to the Primary CTA (from `primary` `#006E28` to `primary-container` `#31AA4D`) to provide a "soulful" depth that flat colors lack.

---

## 3. Typography: The Editorial Scale
We use **Inter** for its precision. The hierarchy is designed to favor document readability and rhythmic flow.

| Level | Size | Weight | Tracking | Line Height | Usage |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Display-LG** | 3.5rem | 700 | -0.02em | 1.1 | Hero Document Titles |
| **Headline-LG** | 2.0rem | 600 | -0.01em | 1.2 | Heading 1 (H1) |
| **Title-MD** | 1.125rem | 600 | 0 | 1.4 | Heading 2 (H2) |
| **Body-LG** | 1.0rem | 400 | 0 | 1.6 | Primary Reading Text |
| **Label-MD** | 0.75rem | 500 | +0.02em | 1.0 | Sidebar Labels / Metadata |

*Director’s Note: The 1.6 line-height for Body-LG is non-negotiable. It creates the "Vertical Rhythm" necessary for deep work.*

---

## 4. Elevation & Depth
Depth is achieved through **Tonal Layering** rather than structural shadows.

- **The Layering Principle:** A block-level "Callout" should not have a border. It should be a `surface-container-high` (`#E9E8E8`) shape with a `sm` (`0.125rem`) rounded corner, nestled within the `surface-container-lowest` page.
- **Ambient Shadows:** Only for floating context menus. Use `on-surface` (`#1B1C1C`) at 4% opacity with a `32px` blur and `16px` Y-offset. It should feel like a soft glow, not a drop shadow.
- **The "Ghost Border":** If a table cell requires definition, use `outline-variant` at 15% opacity. Never 100%.

---

## 5. Components & Block System

### The Block System (The Core Experience)
- **Text Blocks:** Standard Inter 1rem. Use a `24px` margin-bottom to ensure "breathable" paragraphs.
- **Heading Blocks:** H1-H3 use a tighter line-height (1.2) to feel like a "unit."
- **Callouts:** Icons should use the `secondary` (`#2367F6`) color at 10% opacity for the background "pill" and 100% for the icon itself.
- **Drag Handles:** Six-dot pattern. Appear at 20% opacity on block hover; 60% opacity on grab.

### Navigation (Sidebar & Breadcrumbs)
- **Sidebar:** Use `surface-container-low`. Indentation for nested pages must be exactly `12px` per level to create a clear visual "tree" without lines.
- **Hover States:** Instead of a highlight box, use a "soft-bleed" background: `surface-container-high` with a `4px` corner radius, inset by `4px` from the sidebar edge.
- **Breadcrumbs:** Use `label-md`. The current page is `on-surface`; parent pages are `on-surface-variant`.

### Primitive Components
- **Buttons:** 
    - **Primary:** Gradient (`primary` to `primary-container`), white text, `md` (`0.375rem`) radius.
    - **Tertiary:** No background. Text color is `on-surface-variant`. Hover state triggers a `surface-container-high` background.
- **Cards & Lists:** **Prohibit divider lines.** Use vertical whitespace (16px, 24px, or 32px from the spacing scale) to separate thoughts.
- **Checkboxes:** When checked, use `primary` (`#31AA4D`). When unchecked, use a `Ghost Border` of `outline`.

---

## 6. Do’s and Don’ts

### Do
- **Do** use `surface-container` shifts to define functional zones (Sidebar vs. Editor).
- **Do** use asymmetrical padding. Give the document more space on the left (the "margin of thought") than the right.
- **Do** use `SFMono-Regular` for code blocks and inline technical terms to provide a structural contrast to the organic Inter font.

### Don't
- **Don't** use 1px black or grey borders to separate sections.
- **Don't** use pure black (`#000000`) for text. Use `on-surface` (`#1B1C1C`) for a softer, premium editorial feel.
- **Don't** use sharp corners. Everything must have at least a `sm` (`0.125rem`) or `md` (`0.375rem`) radius to maintain the "Organic" North Star.
- **Don't** crowd the UI. If a user can't see the "paper" behind the content, the layout is too dense.