eduardbodak.com — Design Reference
1. Visual Theme & Atmosphere
Eduard Bodak’s portfolio exudes editorial confidence. The design leans into oversized kinetic typography as the primary visual element — letterforms become texture, movement, and composition simultaneously. There is no decorative illustration; type is the design. The atmosphere is bold, monochromatic, and distinctly European in its graphic sensibility, reminiscent of Swiss poster design filtered through contemporary motion.
The absence of color (beyond black/white) is a deliberate power move: when everything is stripped back, scale and motion carry all the expressive weight.
2. Color Palette & Roles
| Role | Value | Notes |
|---|---|---|
| Background | #ffffff / rgb(255,255,255) |
Pure white canvas — no tinting |
| Primary text | #000000 |
Maximum contrast, no softening |
| Accent / hover states | #000000 |
Inverted fills used for interaction |
What’s absent: No grays, no brand color, no gradient. The palette is binary — this is intentional and critical to the identity.
3. Typography Rules
The hero employs font-narrow-semibold (a custom condensed typeface) at extreme scale (~155px rendered). This is the centrepiece — every other typographic choice defers to it.
| Element | Family | Size | Weight | Notes |
|---|---|---|---|---|
| H1 | font-narrow-semibold | ~155px | 600 | Tight tracking, ~80% line height |
| Body fallback | Arial Narrow → system-ui | — | — | Stacked for system compatibility |
Letter-spacing is negative at scale — headlines compress tightly. No decorative serifs. No italic. The typeface selection communicates craft without ornamentation.
4. Component Stylings
- Navigation: Minimal, likely transparent overlay. No visible drop shadows.
- Interactive elements: Hover states use color inversion (black fill, white text) rather than color.
- Buttons/CTAs: Expected to use full-bleed black pill or rectangular shapes.
- No card components — content flows as editorial spreads, not discrete cards.
- Borders: Not used decoratively; only functional separators if present.
5. Layout Principles
- Section padding: ~42px vertical, no horizontal padding on the canvas itself.
- Full-width typography flows edge-to-edge, creating immersive type-led sections.
- Likely a single-column structure where type wraps and scales with the viewport.
- Grid: implicit, driven by the rhythm of type size rather than explicit grid columns.
6. Depth & Elevation
No box shadows detected. Elevation is achieved through scale contrast and z-order motion — large foreground type over smaller background text creates depth without shadows. Parallax-style animations likely reinforce this layering.
7. Do’s and Don’ts
Do:
- Use single-weight typography at extreme scale differentials
- Rely on inversion (white-on-black, black-on-white) for interactive states
- Let whitespace breathe — padding at the section level, not micro-padding
- Animate type properties (scale, position) rather than opacity fades
Don’t:
- Add color accents or brand hues — they break the monochromatic contract
- Use drop shadows or card surfaces
- Mix typeface families; one condensed face dominates
- Use decorative dividers or ornamental elements
8. Responsive Behavior
- Breakpoints: likely standard (768px, 1280px based on common Webflow patterns)
- At mobile widths, headline scale reduces proportionally but remains dominant
- Section padding reduces but the type-first layout principle is preserved
- Navigation collapses to hamburger; no complex responsive patterns expected
9. Agent Prompt Guide
“Design in the style of eduardbodak.com: monochromatic (black and white only), with oversized condensed sans-serif headlines at 600 weight filling the viewport width. No decorative color, no shadows, no cards. Use scale contrast — massive type vs. small body — as the sole compositional tool. Interactions use color inversion only. White canvas, zero border-radius on interactive elements.”
Generated by Sparkbites — extracted from live CSS analysis
