Jason Woltje
c800bef739
Personal professional website for jasonwoltje.com, built on Payload CMS 3 + Next.js 16 and deployed to w-docker0 (Docker Swarm) behind the existing MosaicStack edge Traefik. Establishes the delivery contract before any scaffold work begins: - docs/PRD.md — stack, content model, routing, design system, CI, infra, acceptance criteria, assumptions, and escalation log - docs/TASKS.md — milestone breakdown 0.0.1 → 0.1.0 MVP - README.md, LICENSE (All Rights Reserved), .gitignore - design-samples/ — stitch "Technical Editorial" mockups + DESIGN.md tokens - images/ — source headshots (to be imported into Payload media on seed) - .mosaic/ — orchestrator scaffolding (quality rails, repo hooks) Scaffold (Next.js + Payload init) ships on feat/scaffold in a follow-up PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
100 lines
6.1 KiB
Markdown
100 lines
6.1 KiB
Markdown
# 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. |