Design System
The Human Crafted design system. Tokens, components, and patterns I use across humancrafted.co, sub-brand tools, and client deliverables. Built to stay coherent as the work expands — and small enough to drop into a Claude skill or a fresh project as a single source of truth.
Color
Sub-brand palette — one hue pair per sub-brand or project identity.
Typography
Spacing
Layout
The project archive is a responsive grid; long-form Notes use a fixed two-column rhythm. A scrollbar-gutter: stable gutter reserves space for the scrollbar so short and long pages center identically.
Links & underlines
Links never borrow the accent color — emphasis comes from a hand-drawn wavy underline on hover, paired with a step up to medium weight. Hover each specimen to see the transition.
Iconography
Interface icons — Lucide (the maintained fork of Feather Icons). A 24×24 grid with 2px strokes and round caps. They inherit currentColor, so they recolor for dark mode with no second asset.
Illustration
Every project is cataloged with a single-color SVG thumbnail — a CAD or illustration artifact of the object design with a specific visual style.
- One color, no shading — a vector illustration, not a render or image
- 1000 × 1000 viewBox, centered with generous margin
- Vector SVG: crisp at any size
- Dark mode inverts the ink with a CSS filter — no second asset
Wordmark
The header wordmark is a live breadcrumb built on the .co domain and doubles as back-navigation when visiting core and sub-pages. Dim segments link to home or up a level; the bright segment is the current page. Hover a dim segment to see it light up.
On load, breadcrumb pages wipe in only the newest segment; home reassembles to human / crafted when you arrive from an internal page. Skipped for reduced-motion or backgrounded tabs. Real URLs stay flat — the nesting is visual only, no SEO migration.