# 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.