Eduard Bodak
www.eduardbodak.comThe reference for solo-designer Webflow portfolios with mono-label chrome and trading-card service tiles — cream #f9f4eb page, monumental Arial Narrow display, pastel "card-stack" service blocks and an elastic linear() overshoot ease everywhere.
Design tokens
- display
- font-narrow-semibold (Arial Narrow Fallback / Avenir Next / Helvetica Neue / system)
- body
- font-normal-medium (Avenir Next / Helvetica Neue / system)
- mono
- font-mono-medium (Menlo / Consolas / Monaco / Liberation Mono / Lucida Console)
Do / Don't
Reference it for
- Warm cream #f9f4eb page with cooler #f0ece5 secondary surface — 2-stop neutral, not pure white
- Pure black ink as the dominant text colour — high-contrast against cream
- 5-colour pastel accent palette (#fcdca6 peach, #e5daf6 violet, #ffd2f3 pink, #fef280 lemon, #ffe32e yellow) used as service-card surfaces, not text
- Yellow #ffe32e reserved for ::selection — black-on-yellow selection highlight, exposed as --selection-foreground / --selection-background
- Three-family typographic system: font-mono-medium (chrome + labels), font-normal-medium (body, Avenir-Next-class), font-narrow-semibold (display, Arial-Narrow-class)
- Mono-medium as the dominant face (95 of 149 type usages) — chrome-first typography
- Monumental condensed display hero — single line at clamp(80px → 184px) using --font-size-h1
- --line-height-80: 0.8em for monumental display — tight setting at large sizes
Do not copy
- The "EDUARD ✦ BODAK" wordmark with the diamond separator
- The "EINFACHE WEBSITES" hero copy (single German line is brand-coded to Eduard)
- The German-language nav (Service / Prozess / Preis / Kontakt) unless the brand is German
- The pixel-art glyphs centred in the service tiles (the staircase / arrow / camera icons)
- The "CE" certification stamps — Eduard's joke about web-design as a regulated craft
- The 3D2Y / A113 letter-pair codes in the plus-sign band (idiosyncratic to this site)
- The custom font-narrow-semibold / font-normal-medium / font-mono-medium font-family naming (substitute with Inter Tight / Inter / JetBrains Mono or Helvetica Now Display Condensed / Helvetica Now Text / JetBrains Mono for the open-source equivalent)
- The 19-stop bespoke linear() curves verbatim — derive your own overshoot if the brand calls for it
Signature moves
trading-card pastel service tiles
service tiles use a pastel surface plus uppercase mono label, a centred glyph, a small cert stamp, a tiny corner code and the same label mirrored upside-down at the bottom, playing-card style.
elastic linear() overshoot as workhorse motion
a 19-stop --elastic-ease-out linear() overshoot curve is the signature motion, backed by a speed-token ladder (.15s/.3s/.45s/.65s/.8s) and a bouncy cubic-bezier(.34,1.64,.64,1) for buttons.
monumental condensed mono-chrome typography
a condensed display hero at clamp(80px to 184px) with --line-height-80 (0.8em) and -0.06em tracking sits over mono-medium chrome (95 of 149 type uses), a chrome-first system.
Related references
Beehiiv
strongMarketing Platform
The reference for newsletter / creator-platform brands with all-caps section H2 discipline — dark navy + magenta accent + ClashGrotesk display, real publisher logos from TIME / Newsweek / Adobe.
Bright Horizons
strongChildcare Education
a large early-education and childcare provider whose site leads with a warm deep-teal and sunshine-yellow palette over happy children's photography, the rounded Mulish sans throughout, a tabbed audience-routing hero, and a clear, trust-led grid of pathways for parents and employers.
Clerk
strongDeveloper Tool
The reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.
Clickup
strongSaas Product
The reference for a saturated-purple SaaS AI agent platform: 76px Plus Jakarta Sans display, 60 CSS keyframes, rotating gradient borders, and elastic overshoot motion.