# Design System Document: Technical Editorial

## 1. Overview & Creative North Star

### Creative North Star: "The Master Architect"
This design system is built for a persona that balances the precision of an engineer with the vision of an executive. It moves away from the "standard dashboard" aesthetic to embrace a **Technical Editorial** direction. 

To break the "template" look, we utilize:
*   **Intentional Asymmetry:** Hero sections and content blocks should avoid perfect 50/50 splits. Use 60/40 ratios to create a sense of dynamic movement.
*   **The Overlap:** Technical elements (like grid patterns or terminal-style labels) should subtly overlap image containers or section breaks to suggest a "maker" spirit—building things that break out of the box.
*   **Aggressive Typography Scales:** High-contrast sizing between massive display headers and tiny, precise monospace labels creates an authoritative, modern hierarchy.

---

## 2. Colors

The palette is rooted in a deep midnight foundation, punctuated by high-energy technical accents.

### Palette Strategy
*   **Foundation:** `background` (#0d0e12) provides the "void" from which technical elements emerge.
*   **Primary Accent:** `primary` (#81ecff) is our electric blue, used for critical actions and brand markers.
*   **Technical Secondary:** `secondary` (#d873ff) and `tertiary` (#8eff71) provide depth. Use these for status indicators, code snippets, or to differentiate hobby-related content (Music/Making).

### The "No-Line" Rule
**Explicit Instruction:** Do not use 1px solid borders to separate sections.
Boundaries must be defined through:
1.  **Background Shifts:** Use `surface_container_low` sections sitting on a `background` floor.
2.  **Tonal Transitions:** Use a very subtle gradient transition between two surface tokens to imply a change in context.

### Surface Hierarchy & Nesting
Treat the UI as a series of nested physical layers. 
*   **Base:** `background`
*   **Section:** `surface_container`
*   **Card/Module:** `surface_container_highest` or `surface_container_lowest` (depending on whether you want it to recede or pop).

### The "Glass & Gradient" Rule
For floating navigation or modals, use semi-transparent `surface_bright` with a **24px Backdrop Blur**. Apply a signature gradient from `primary` to `primary_container` on main CTAs to give them a "lit from within" neon glow.

---

## 3. Typography

The typography strategy pairs the brutalist precision of technical fonts with the readability of a premium sans-serif.

*   **Display & Headlines (Space Grotesk):** This is our "Editorial" voice. It’s wide, technical, yet sophisticated. Use `display-lg` for hero statements to command attention.
*   **Body & Titles (Inter):** High-readability sans-serif. Use `body-lg` for long-form thought leadership to ensure an "Executive" feel.
*   **Labels (Space Grotesk - Monospace feel):** Use `label-md` in all-caps for technical metadata, tags, and small "geeky" details.

**Hierarchy Tip:** Pair a `display-md` headline with a tiny `label-sm` technical prefix (e.g., "01 // INTRODUCTION") to reinforce the maker/coder aesthetic.

---

## 4. Elevation & Depth

We avoid traditional drop shadows in favor of **Tonal Layering**.

*   **The Layering Principle:** Place a `surface_container_highest` card inside a `surface_container_low` wrapper. The difference in hex value provides a sophisticated "lift" without the "dirty" look of grey shadows.
*   **Ambient Shadows:** If a floating element (like a dropdown) requires a shadow, use a 40px blur with 6% opacity. The shadow color should be a tinted version of `primary` or `on_surface`, never pure black.
*   **The "Ghost Border" Fallback:** If containment is needed for complex data, use the `outline_variant` token at **15% opacity**. This creates a "code-like" border that is felt rather than seen.
*   **Glassmorphism:** Use `surface_variant` at 60% opacity with a blur for a "frosted terminal" effect, allowing background grid patterns to bleed through subtly.

---

## 5. Components

### Buttons
*   **Primary:** High-contrast `primary` background with `on_primary` text. **Radius:** `md` (0.375rem). No border.
*   **Secondary:** `surface_container_high` background with `primary` text. 
*   **Ghost:** Transparent background with `outline_variant` (20% opacity) border. Use for low-priority technical actions.

### Technical Chips
*   Used for "Skills" or "Tools."
*   **Style:** `surface_container_highest` background, `secondary` or `tertiary` text. Use `label-sm` for the font.

### Inputs
*   **Style:** "Bottom-line only" or fully enclosed in `surface_container_low`.
*   **States:** On focus, the `outline` should glow with `primary` and a subtle 4px outer blur.

### Cards & Lists
*   **No Dividers:** Never use horizontal lines. Use `spacing-lg` (vertical white space) or alternate background tints between `surface_container` and `surface_container_low`.
*   **Grid Pattern:** For hero cards, overlay a subtle 20px dot grid or cross-hair pattern to emphasize the "Technical/Maker" spirit.

### Additional Signature Component: "The Status Terminal"
A small, fixed-position component (or header element) that displays technical metadata about the current page (e.g., "LOC: 1,244 | STATUS: ONLINE | REV: 2.0.4"). Use `label-sm` in `tertiary` (terminal green).

---

## 6. Do's and Don'ts

### Do:
*   **Do** use asymmetrical layouts. A photo of a "maker" project should be offset from the text grid.
*   **Do** use monospace-style labels for all metadata to satisfy the "geeky" requirement.
*   **Do** ensure high contrast in Light Mode; the `inverse_surface` must remain crisp and professional.
*   **Do** use `primary_container` for subtle hover states on large cards.

### Don't:
*   **Don't** use 1px solid borders at 100% opacity. They look like "out-of-the-box" templates.
*   **Don't** use standard "web safe" blue. Only use the provided `primary` (#81ecff).
*   **Don't** over-round corners. Stick to the `md` (0.375rem) or `sm` (0.125rem) scale to maintain a "sharp/technical" edge. `xl` is for specialized buttons only.
*   **Don't** use shadows on cards that are sitting on the background; let tonal shifts do the work.