Screenshot of Eduard Bodak

Eduard Bodak

www.eduardbodak.com

The 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 Portfolio Solo Webflow Designer niche

Design tokens

page
pageHex
surfaceBeige
surfaceBeigeHex
ink
white
accentYellow
accentLemon
accentPeach
accentViolet
accentPink
black60
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.