wking.dev — Design System

1. Visual Theme & Atmosphere

Developer portfolio with an intentional terminal/code aesthetic. JetBrains Mono anchors the technical identity — this is a site made by someone who thinks in code, and the design makes that fact explicit.

Mood: monospace, technical, raw, developer-native

The visual language is rooted in code culture — monospace fonts signal authenticity to a developer audience. Colors are applied directly without a formal token layer — values are contextual rather than systematic.

2. Color Palette & Roles

Palette philosophy: Controlled neutrals with a single accent that carries all interactivity signals.

3. Typography Rules

• h1: JetBrains Mono / 14px / wt 400 / lh 20px
• h2: AlphaLyrae / 16px / wt 400 / lh 24px
• body: ui-sans-serif / 16px / wt 400 / lh 24px
• p: AlphaLyrae / 24px / wt 400 / lh 32px
• a: ui-sans-serif / 14px / wt 600 / lh 20px
• button: JetBrains Mono / 12px / wt 400 / lh 16px
• input: JetBrains Mono / 12px / wt 400 / lh 16px
• label: ui-sans-serif / 14px / wt 400 / lh 20px

Custom typefaces: JetBrains Mono, AlphaLyrae

Typography philosophy: Monospace throughout signals a developer-first mindset. The code aesthetic is the brand. Resist the temptation to swap in a “nicer” sans-serif.

Headline scale: h1 at 14px, h2 at 16px — restrained sizing — hierarchy through weight and spacing rather than scale.

4. Component Stylings

Border radius: No border-radius — sharp edges throughout.

Shadows: Shadows are absent — depth through color and spacing alone.

• Component data limited — apply global radius and color rules consistently.

5. Layout Principles

Layout philosophy: Content-first layout — sections breathe independently; no fixed grid forces awkward compositions.

Spacing cadence: Direct pixel values — consistent multiples of 4px or 8px observed in component padding.

6. Depth & Elevation

Flat design — no box shadows. Depth communicates through:

• Background color contrast between sections
• Border lines as separators
• Typography weight shifts
• Proximity and whitespace

This is an intentional choice: shadows would add visual noise to a carefully restrained palette.

7. Do’s and Don’ts

Do:

• Respect the established spacing rhythm — every element should feel intentional
• Use only the defined typefaces (JetBrains Mono, AlphaLyrae) — system fonts will break the brand voice
• Keep all edges sharp — border-radius destroys the visual discipline
• Keep elevation flat — adding shadows would contradict the design language

Don’t:

• Apply dark mode as an afterthought — it requires its own color decisions
• Use accent colors for decoration — they are reserved for interactive signals only
• Switch to a proportional font for headlines — the monospace is the identity
• Add gradient backgrounds unless they exist in the design system
• Use stock UI component defaults (e.g., Bootstrap/MUI) without full restyling

8. Responsive Behavior

Headline scale:

• Desktop: 14px
• Suggest mobile: 8px–9px

Body text: 16px — standard; consider 15px on mobile for comfort

Layout breakpoints: Standard: stack multi-column sections to single column; reduce headline size; maintain horizontal padding of at least 16px.

Navigation: Apply standard mobile nav pattern: fixed header, collapsible menu.

9. Agent Prompt Guide

When asked to create UI in the style of wking.dev, instruct the agent:

Design in the style of wking.dev: monospace, technical, raw, developer-native.
Use clean backgrounds with high contrast text.
Primary typeface: JetBrains Mono, body: ui-sans-serif.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Accent color: rgb(153, 200, 255) — use only for interactive elements.
Generous whitespace. Typography drives hierarchy.
Avoid: generic card components, gradient backgrounds, icon-heavy layouts, rounded pill buttons.

Key design signals to reference:

• Custom font: JetBrains Mono — load via CDN if reproducing
• Shadow-free — use border or background contrast for separation
• Zero border-radius — rectangular everything
• Color temperature: Neutral with controlled accent

Generated by Sparkbites — extracted from live CSS analysis