rauno.me

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.

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.