primary.studio

A Swiss-neutral agency page that spends all of its budget on two things: enormous type and other people's photographs. The ground is a barely-warm off-white (#fafafa) and the ink is a near-black (#120a06), and between them there is nothing — no cards, no panels, no shadows, no filled containers of any kind. Suisse Int'l Regular does every job at one weight (400), so hierarchy is carried entirely by size, and the size jump is enormous: a 110px display headline set solid (line-height equal to font-size) at -0.04em tracking, then a 60px section head, then a 44px pull quote, and then a cliff straight down to 10–12px micro-labels with positive tracking. Nothing occupies the middle. The work itself arrives as a full-bleed collage of overlapping image panels at staggered bottom edges, each captioned not by an overlay but by a small "→ LABEL" chip notched into a cut-out of the page ground, so the photographs stay uncropped and undimmed. Punctuating all of that are two devices: full-bleed black panels that invert the whole viewport for a quote or the closing CTA, and a single acid lime (#c8ff54) used no more than three or four times on the entire page — a bar chart, a ticker, one icon circle. The result reads as a studio confident enough to show client work at full brightness and put its own voice in 10px.

Build on a warm off-white ground (#fafafa) with near-black ink (#120a06) and exactly one saturated accent — an acid lime (#c8ff54) — rationed to three or four appearances on the whole page. Set everything in one grotesque (Suisse Int'l, or Neue Haas Grotesk / Inter as substitutes) at a single weight of 400; never reach for 600 or 700, and let size alone carry hierarchy. Make the scale a barbell with no middle: display 110px / line-height 110px / letter-spacing -0.04em, section head 60px / 69px / -0.03em, lead or pull quote 44px / 1.2 / -0.02em, then drop straight to micro labels at 10–12px with +0.01em positive tracking and uppercase where they name something. Set all display type solid — line-height equal to font-size — and left-align it against a generous left margin around 23% of the viewport, with body measures capped near 40–50% so the right side of the page stays empty on purpose.

Chrome is hairlines only: 1px rules at full ink opacity or rgba(0,0,0,.12), no fills, no shadows at any elevation, no cards. The single radius in the system is the pill — 999px — and it applies to nav items, CTAs and nothing else; images and panels are hard 0px corners, full-bleed to the viewport edge. Buttons are near-black (#0f0f0f) on white text at 12px with asymmetric padding (16px 36px 16px 16px) so an icon circle can sit flush against the leading edge. Put a second line of 10px gray inside the primary CTA carrying urgency or availability.

For imagery, never crop into a grid of equal tiles: overlap full-bleed panels at staggered bottom edges and caption each by notching a small ground-colored chip with an "→ LABEL" into its corner, so the photograph is never dimmed, scrimmed or overlaid. For rhythm, invert whole viewports — flip the ground to near-black edge to edge for a quote or a closer and let the type stay the same size and weight it was on white. Encode data with the accent rather than decorating with it: horizontal bars with their labels set inside the bar ends, a full-bleed ticker strip of 12px caps separated by arrow glyphs, a filled circle behind a single icon. Vertical rhythm is large and constant — roughly 160–200px of air above and below each section, with a labeled hairline rail closing the ones that describe a span of time. Motion is minimal: opacity and a short upward translate on entry, 200–300ms ease-out, plus the accent circle as the only thing that ever moves on its own.