marijanapav.com

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.

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.