professional-website/design-samples/stitch_jasonwoltje.com/silicon_ethos/DESIGN.md

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.