willphan.com — Design System
1. Visual Theme & Atmosphere
Personal portfolio with a refined, Radix-influenced design system. Semantic color scales built on alpha transparency give the interface a layered depth that feels native and precise without being cold.
Mood: minimal, systematic, designer-coded, warm neutral
The visual language is refined without being austere — custom typefaces carry the personality while structural clarity does the heavy lifting. A structured token system underpins every color decision.
2. Color Palette & Roles
Design tokens found: 27 color custom properties
Named Tokens (excerpt)
--black-a1:rgba(0,0,0,.05)--black-a2:rgba(0,0,0,.1)--black-a3:rgba(0,0,0,.15)--black-a4:rgba(0,0,0,.2)--black-a5:rgba(0,0,0,.3)--black-a6:rgba(0,0,0,.4)--black-a7:rgba(0,0,0,.5)--black-a8:rgba(0,0,0,.6)--black-a9:rgba(0,0,0,.7)--black-a10:rgba(0,0,0,.8)--black-a11:rgba(0,0,0,.9)--black-a12:rgba(0,0,0,.95)
Palette philosophy: Controlled neutrals with a single accent that carries all interactivity signals.
3. Typography Rules
- body: ui-sans-serif / 14px / wt 400 / lh 21px
- p: ui-sans-serif / 12.25px / wt 300 / lh 17.5px
- button: ui-sans-serif / 12.25px / wt 400 / lh 17.5px
Custom typefaces: None — system font stack only
Typography philosophy: System fonts chosen deliberately — fast, native-feeling, and unbranded by design.
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: Fluid spacing tokens via clamp() — scales smoothly between breakpoints without abrupt jumps.
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
- Keep the system font stack — it is the aesthetic, not a placeholder
- 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
- Mix more than two typeface families — typographic chaos undermines brand clarity
- 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: ~48px
- Suggest mobile: ~28px–32px
Body text: 14px — 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 willphan.com, instruct the agent:
Design in the style of willphan.com: minimal, systematic, designer-coded, warm neutral.
Use clean backgrounds with high contrast text.
Primary typeface: system-ui, body: ui-sans-serif.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Accent color: rgb(0, 0, 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:
- System font stack — no web font loading needed
- 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
