03 · Signal · Design System
A quiet, technical surface — built to scale.
A hybrid of Terminal Mono's data-density (mono labels, dotted grids, status pulses) and Quiet Craft's typographic restraint (serif display, generous space, single-accent palette). Light + dark, system-default with manual override.
Color
Cool, technical palette. One accent (#2546ff ink-blue) used for emphasis, hover, and state. AA-tested for body text in both modes.
--bgcanvas
--bg-2tinted surface
--panelcards
--ruleborders
--inkprimary text
--mutedsecondary
--accentink-blue · CTA
--signallive · status
Typography
Three families with clear roles: Fraunces (display, optical sizing) · Inter (body, ss01/cv11 features) · JetBrains Mono (labels, code, metadata).
Display L · serif
Wire LLMs to real products.
Display M · serif
Lead Full-Stack Engineer.
Display S · serif
Selected work, by what it proves.
Body L · sans
I work the seam between backend systems and applied AI — most days that means designing retrieval pipelines and keeping the AWS bill honest.
Body M · sans
A regular paragraph in Inter, used across about, writing, and contact sections.
Caption · sans
Quiet metadata, captions, and supporting copy.
Mono · label
// status · 14px · letter-spacing 0.08em · uppercase
Spacing scale
8-pt baseline. Tokens --space-1 … --space-12.
Components
eyebrow · live
Open to talk
primary button
Email Hanna →
ghost button
Book 15 min
underlink
fact tile
Status
Open to chat
work row
Motion
- Hero split-text reveal — words rise + un-blur with a 60ms stagger on load.
- Section reveals — IntersectionObserver fade/translate, staggered 40ms.
- Marquee skill ticker — 38s linear loop, paused under prefers-reduced-motion.
- Custom cursor — soft ring that grows on hoverables, blend-mode difference, desktop only.
- Status pulse — 1.8s ease-out, the only ambient motion outside the marquee.
- Hover micro-interactions — work rows breathe wider; arrows nudge right; buttons lift 2px.
- Easing — entrances cubic-bezier(.16,1,.3,1); standard cubic-bezier(.4,0,.2,1).
- Reduced motion — split-text, marquee, scanlines, and cursor all auto-disable.