Lead designer
Featured
Portfolio onepager
Editorial onepager with a cursor-, tilt- and touch-driven hero video. Design → code → live.
View case →Living design system
One system. Every page in sync.
Every token lives in styles/tokens.css — the single source of truth.
Change a color, spacing step or radius here and it propagates to this page,
to the homepage, and to every page we build next. The components below render
with the same CSS as production, so you always see the real, shipping state.
01 — Colors
Click a variable name to copy it. Values are read live from the CSS.
02 — Typography
Three families: serif (Instrument Serif) for editorial headings, sans (Instrument Sans) for body, mono (JetBrains Mono) for labels and meta.
Scale
.display · --fs-display · serif
Build the web
h1 · --fs-h1 · serif
Design to code to live
h2 · --fs-h2 · serif
Selected work
h3 · --fs-h3 · sans 600
Strategy, design, code
body · --fs-body · sans
20+ years across UX, e-commerce, analytics and AI. I design, code and test the web layer end-to-end.
eyebrow / mono · --fs-mono
Tomasz Świtała — Digital designer & builder
03 — Spacing & radii
A 4px-based spacing scale. Radii unify every rounded corner in the system.
Spacing scale
Radii
04 — Components
Rendered with the real classes from main.css. This is exactly what ships on the pages.
Buttons
Classes: .btn, .btn--primary, .btn--ghost
Badge & tags
Cannes Lions
- Photography
- Cycling
- AI tinkering
Toolbox chips
- Figma
- Claude Code
- Three.js
- GA4
- Webflow
Card
Pillars
01
Strategy
I start from the business goal and the data.
02
Design
An editorial, legible, fast interface.
03
Code
Building from mockup to production.