# marijanapav.com

Source: https://marijanapav.com/
Captured: 2026-09-20
Tags: portfolio, about, light, both, bento, minimal, swiss, calm, human, technical, playful
Colors: #f7f7f7, #d0d0cf, #6b7273, #111211, #7b9095, #b7afa7, #56514b, #333231
Type (h1): Archivo · 16px/24px · 400 — "Designer crafting brands and websites Designer crafting brands and websites"
Type (h2): IBM Plex Mono · 12px/16px · 600 · tracking 2.4px — "LATEST SIDE-PROJECT"
Type (body): Inter · 14px/24px · 400 — "I'm a Brand Designer at Vercel, working across brand, web, and code in the devto"
Type (small): IBM Plex Mono · 12px/16px · 600 · tracking 2.4px — "DIGITAL STAMP COLLECTION"
Type (button): Inter · 12px/16px · 400 — "Branding"
Button: "Branding" — fill #f0f4f3, text #484848, radius 9999px, border 0px, padding 4px 12px, height 24px, type 12px/400
Radii: 9999px (41), 6px (37), 10px (26), 4px (16), 9px (13)

## Images

- Hero (desktop): https://media.lvly.design/library/marijanapav-com/hero.webp?v=fe32eaa8
- Page crop (mid-1): https://media.lvly.design/library/marijanapav-com/mid-1.webp?v=833ff7a9
- Page crop (mid-2): https://media.lvly.design/library/marijanapav-com/mid-2.webp?v=0a254bd7
- Hero (mobile): https://media.lvly.design/library/marijanapav-com/mobile-hero.webp?v=ad3ab188
- Full page (desktop): https://media.lvly.design/library/marijanapav-com/full.jpg?v=8c21cf07
- Full page (mobile): https://media.lvly.design/library/marijanapav-com/mobile-full.jpg?v=0ec387e4
- Clip preview (mp4): https://media.lvly.design/library/marijanapav-com/video-zqt8wz.preview.mp4?v=ce5768fb

A designer's personal page that reads like a well-kept workbench: one oversized grotesk sentence at the top, then everything else demoted into a bento of small white cards floating on a #f8f8f8 ground. The discipline is all in the label system — every card is headed by a 12px IBM Plex Mono line, uppercase at 2.4px tracking, so a cat photo, a Pantone chip, a dot-matrix status ticker and a git file tree all read as entries in one catalog rather than as decoration. Color is withheld almost completely: #111211 ink, #6b7273 for secondary text, and the only saturation on the page comes from the photographs themselves. Radii are small and consistent — 10px cards over 6px inner wells — except for the 9999px capsules (tag pills, the floating nav, the theme toggle), and that one exception is what keeps a dense grid from reading as a dashboard. It works because the hierarchy is only two steps deep: a single display line that makes the claim, then a flat field of equal-weight cards you browse instead of read.

## Steal-worthy details

- Display line as the entire hero — one grotesk sentence at roughly 86px on the 1440 capture, weight 400 with slightly negative tracking, wrapped to exactly two lines and left aligned to the page gutter. No kicker, no subhead, no button: the sentence is the whole top of the page, and the rest of the layout starts below it.
- Pure white cards on an off-white ground — every block is #ffffff at a 10px radius with a hairline border on the #f8f8f8 page, and nothing carries a shadow. The 1% lightness gap plus the hairline is the only separation used, which is why a packed grid still reads as calm.
- One mono label per card, and never a second — IBM Plex Mono 12px/16px, weight 600, letter-spacing 2.4px, uppercase, flush left in the card's top row, with an arrow or 16px icon flush right on the same baseline. It is the single device that makes wildly different card contents feel like one system.
- Tag pills that continue a sentence — "What I do" sits as plain 14px body text, and the discipline pills run inline right after it at the same baseline: 24px tall, 9999px radius, #f0f4f3 fill, #484848 label at 12px/400, 4px 12px padding, no border. Reading them as a phrase rather than a filter row is the trick.
- Three-state theme control as one capsule — moon, sun and monitor glyphs inside a single white 9999px pill in the top-right corner, the active state a filled inner pill. It replaces a toggle and a settings menu with one 40px-tall control.
- Navigation floats at the bottom, not the top — a centered white capsule pinned above the viewport's bottom edge, hairline border, four labels, the current page shown as a filled inner pill, with a separate round "back to top" capsule beside it. The top edge stays free for the display line.
- A single high-contrast artifact per page — the "SYSTEM MONITOR" card runs a black LED dot-matrix marquee scrolling live latency text, the only near-black fill in an otherwise off-white grid. One loud object earns its place precisely because everything around it is quiet.
- Blur-gated reveal instead of a placeholder — the in-progress card shows its image heavily blurred behind a dark "Click to see" capsule with an eye-off icon, so unfinished work still occupies its grid cell and still looks composed.

## Style recipe

Set the page ground to #f8f8f8 and raise every content block onto a #ffffff card at a 10px radius with a 1px hairline at roughly 8% ink. No shadows anywhere; the 1% lightness gap plus the hairline is the whole elevation system.

Use exactly three families. A tight grotesk (Archivo or similar) for one display line per page — 80–90px at a 1440 breakpoint, weight 400–500, tracking about −0.02em, left aligned, wrapped to two lines. Inter 14px/24px, weight 400, for all prose. IBM Plex Mono 12px/16px, weight 600, letter-spacing 2.4px, uppercase, for every label, eyebrow and card header. Nothing sits between 14px and the display size: skip the intermediate headings entirely and let the mono labels carry structure.

Color roles: ink #111211, secondary #6b7273, hairlines and dividers the ink at 8–10%, muted fills #f0f4f3. Do not introduce a hue — let photographs supply every saturated pixel on the page.

Radii come in two bands and no others: 10px for cards, 6px for media and wells inside them, and 9999px for every interactive atom. Make those atoms identical everywhere — 24px tall, 4px 12px padding, #f0f4f3 fill, #484848 label at 12px/400, no border — and reuse the same capsule for tags, toggles, nav items and status chips.

Lay out a three-column grid on a 24px gutter, cards free to span one or two rows so the field looks packed rather than ruled; collapse to a single column in the same order on mobile. Inside a card, media goes full-bleed to the 6px inner radius with the mono label above it, never over it. Fill pending or empty cards with faint graph paper — 1px lines at about 6% ink on a 16px pitch — rather than a gray block.

Lift navigation off the top edge: float it as a centered white capsule pinned to the bottom of the viewport, hairline border, the current item a filled inner pill, and put a three-state theme control (dark / light / system) as a second segmented capsule in the top-right corner.

Motion is restrained — 150–200ms fades on hover, no lift, no scale. Allow exactly one loud object per page (a black dot-matrix marquee, a QR block, a stamp sheet) and keep everything around it near-white. Gate unfinished content by blurring it behind a dark capsule button instead of hiding the card, and close the page with a "last updated" date in the smallest mono in the layout.