3 min read
designdesign-inspirationpersonal-sitecomponent-librariesdesign-engineeringportfolioUpdated 2026-07-01
Design Inspiration Stack
Kevin's explicit source shelf for the personal site and related design-system work: implementation primitives from Tailwind/shadcn/Vercel, expressive components from Evil Charts and Skiper UI, and reference-manual craft from Devouring Details and Making Software. Source: User request, 2026-06-30
Design Position
| Field | Value |
|---|---|
| Design family | Reference and inspiration ledgers |
| Use when | Use when mining Design Inspiration Stack for references to translate into design constraints. |
| System map | Design System Map |
| Proof path | Translate references into named patterns, tokens, or constraints; do not copy the source wholesale. |
Source shelf
| Source | Role in Kevin's site | Use pattern |
|---|---|---|
| Tailwind CSS | Token-first CSS and responsive utility grammar. | Build the layout from explicit tokens and stable responsive constraints. |
| shadcn/ui | Owned component primitives and registry conventions. | Compose boring accessible controls before custom behavior. |
| Vercel | Calm platform polish, fast product surfaces, strong docs discipline. | Make serious systems feel simple and inspectable. |
| Evil Charts | Chart and dashboard treatments for proof objects. | Use data visuals as receipts, not filler. |
| Devouring Details | Interaction principles and source-backed prototypes. | Split craft into principles, prototypes, and resources. |
| Skiper UI | Uncommon animated Next.js/shadcn modules. | Add motion only where intent, hover, or scroll needs feedback. |
| Making Software | Diagram-first explanation and reference-manual structure. | Use numbered figures, captions, progress rows, and mechanism-first prose. |
Practices to carry forward
- Manual, not tour - The site should behave like a reference object people can revisit, not a product tour that explains itself to death.
- Figures as receipts - Screenshots, diagrams, charts, and component cards should show what Kevin built or how it works.
- Source-backed components - Interactive sections should embody a principle or mechanism; if a component cannot explain why it exists, cut it.
- Quiet until touched - Motion should respond to user intent and then disappear into the interface.
- Implementation owns taste - Aesthetic references are translated into tokens, components, and constraints, not copied as vibes.
- Scope experimental controls - DialKit-style controls belong on
/me, where the portfolio is an interactive artifact. The main wiki should keep the older focused font selector and avoid exposing DialKit as global chrome. - Portfolio font shelf -
/meshould only expose PP Telegraf, PP Mori, PP Radio Grotesk, PP Pangram Sans, and PP Neue Bit. PP Mori is the default for both/meand the main wiki; the broader wiki can retain the larger font library through the old selector.
Timeline
- 2026-07-01 | Design category refresh added this page to the Reference and inspiration ledgers family, linked it to Design System Map, and kept it standalone because Design Inspiration Stack owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-30 | Page created after Kevin asked to add explicit inspiration from Tailwind CSS, shadcn/ui, Vercel, Evil Charts, Devouring Details, Skiper UI, and Making Software to the personal site and wiki. Source: User request, 2026-06-30
- 2026-06-30 | Updated with the site-control scope:
/memay use DialKit-style controls, but the main wiki should retain the older font selector;/mefont options are limited to PP Telegraf, PP Mori, PP Radio Grotesk, PP Pangram Sans, and PP Neue Bit. Source: User request, 2026-06-30 - 2026-06-30 | Set PP Mori as the default typeface for both
/meand the main wiki while keeping the broader wiki selector available. Source: User request, 2026-06-30