# 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*