# rauno.me

Source: https://rauno.me/
Captured: 2026-10-22
Tags: portfolio, landing, light, both, swiss, minimal, confident, technical, playful, calm
Colors: #f3f3f3, #ffff02, #010101, #707070, #b2b2b2, #919191, #cfcfcf, #545454
Type (h1): X · 32px/normal · 500 — "Rauno Freiberg is an Estonian interaction designer working with Vercel and Devou"
Type (body): X · 75px/normal · 400 — "Make it fast. Make it beautiful. Make it consistent. Make it carefully. Make it "
Radii: 12px (5), 9999px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/rauno-me/hero.webp?v=2e410b39
- Page crop (mid-1): https://media.lvly.design/library/rauno-me/mid-1.webp?v=7a9f777a
- Page crop (mid-2): https://media.lvly.design/library/rauno-me/mid-2.webp?v=7ce3f0a4
- Hero (mobile): https://media.lvly.design/library/rauno-me/mobile-hero.webp?v=040328f7
- Full page (desktop): https://media.lvly.design/library/rauno-me/full.jpg?v=a656cf0c
- Full page (mobile): https://media.lvly.design/library/rauno-me/mobile-full.jpg?v=d29c1fd2
- Clip preview (mp4): https://media.lvly.design/library/rauno-me/video-s8n9n4.preview.mp4?v=68550c97

A personal site built as a horizontal reel of white poster cards on a flat #ededed ground. Vertical scroll drives the strip sideways, and a tick-mark minimap at the top tracks your place in it. Each card holds one idea and one graphic: the intro card puts a large, ragged-indented grotesk bio over a pure #ffff02 circle that bleeds off the card's right edge. The cards after it switch to an orange disc, a cropped "Craft" wordmark set so large it overflows the card, and a pixel-art pointer in electric blue. Each card gets its own single saturated color, there are no buttons, and the only chrome is a small gray caption above each card and a hairline crosshair cursor. The whole thing reads like a Swiss exhibition wall turned into a scrollable filmstrip.

## Steal-worthy details

- Tick-mark minimap as navigation: a row of 1px gray vertical ticks with one outlined rectangle marking the current card. It is a scrollbar, a progress bar and a table of contents in about 200px.
- Bio set in alternating indents: every other line starts about 56px in, so one plain sentence reads as a typographic composition with no extra styling, color or weight.
- A single flat circle of pure #ffff02 sits behind the type, its right edge flush with the card's edge, and the text runs straight over it. One shape and one color do all the branding.
- A hairline crosshair replaces the cursor in the viewport's center, the only sign that the cards are interactive. It is a precise, tool-like touch suited to a designer's site.
- The next card peeks in at the right edge, its caption ("Devouring Details") floating above it in small gray text. The partial card tells you to keep scrolling without any arrow.
- Each project card gets its own single flat color (yellow, orange, ink black, pixel blue) and one oversized graphic or cropped word, so the reel stays varied while the card frame never changes.
- Scroll-jacked horizontal strip: the page is about 6,100px tall but holds no vertical content, because vertical scroll only moves the cards sideways.

## Style recipe

Build the page as a gallery of poster-like cards on a flat neutral ground. Use #ededed or #f3f3f3 for the canvas and pure #ffffff for the cards. Card corners are square or barely rounded (no more than 12px), with no shadows and no borders. Reserve 9999px radii for circles and tiny indicators. Use one neo-grotesk for everything (Neue Haas Grotesk, Inter Display or a system sans as fallback), at regular to medium weight (400–500), with default tracking and normal line-height. Set display type very large, around 6–8vw, in near-black #1a1a1a. Let a single word overflow its card when it is the subject, and give a multi-line statement alternating indents of about 1.5em instead of changing its weight or color. Label each card with a small 13–14px caption in mid-gray #707070, set above the card rather than inside it. Give each card exactly one flat, saturated color and one geometric or pixel graphic: pure yellow #ffff02 is the signature, with orange #ff5a00 and electric blue #0000ff as sibling cards. Shapes are flat, with no gradients and no outlines, and they may bleed off a card's edge. Skip buttons entirely. Navigation is a strip of 1px gray ticks (#b2b2b2) with one outlined rectangle for the current item, and a thin crosshair cursor. The next card should always peek in at the viewport edge, which signals that there is more to see. Keep gray steps tight (#cfcfcf, #919191, #707070, #545454) and spend color only inside the cards.