Design system
Every token, component and motion curve below is the actual system this portfolio runs on — not a mood board. Poke everything: it's all live, keyboard-accessible, and hand-tuned for both themes.
Semantic tokens, hand-tuned per theme — dark mode is designed, not inverted. Flip the theme toggle in the header and watch every swatch re-decide.
Background
--bg
Primary text
--fg
Secondary
--muted
Accent
--accent
Cards
--card
Borders
--line
Success
--success
Warning
--warning
Error
--error
Inter for reading, IBM Plex Mono for data and labels. Fluid sizes via clamp() — no breakpoint jumps.
Design is a decision
made on someone else's behalf,
so make it a kind one.
Lead paragraph — comfortable line length, generous line height, secondary colour.
Body text — 1.02rem over 1.8 line height for long-form case study reading.
Eyebrow label — IBM Plex Mono, tracked out
A 12-column grid capped at 1400px, with an 8px spacing rhythm. Nothing is eyeballed.
4
8
12
16
24
32
48
64
Everything here is live — type, toggle, tab through. States are designed, not left to the browser.
Focus states
Tab through this page — every interactive element shows a visible 2px accent outline. Keyboard users are first-class citizens.
One card family, elevation on intent: rest, hover, lifted. Badges carry taxonomy without shouting.
Resting card
Border only. Content does the talking.
Raised card
Soft shadow for grouped emphasis.
Interactive card
Hover me — lift plus border shift, 300ms.
Lucide at 1.75px stroke — matched to Inter's weight so icons and type read as one voice.
Data visualization with hover and keyboard focus states. Meaning never rides on colour alone.
Dense but breathable — the enterprise dashboard case study runs on this exact grammar.
| Project | Category | Year | Status |
|---|---|---|---|
| Video Streaming Platform | Consumer | 2024 | Shipped |
| Enterprise Dashboard | B2B SaaS | 2023 | Shipped |
| Wedding Platform | Marketplace | 2022 | Shipped |
| EdTech Experience | EdTech | 2021 | Shipped |
Three entrance primitives cover the whole site. Consistency is what makes motion feel calm.
Fade up
Scale in
Slide in
200–500ms · cubic-bezier(0.22, 1, 0.36, 1) · fully disabled under prefers-reduced-motion