# primary.studio

Source: https://www.primary.studio/
Captured: 2026-09-20
Tags: agency, landing, light, both, swiss, minimal, confident, energetic, premium, trustworthy
Colors: #fafafa, #120a06, #e693e4, #332922, #d4cdd2, #4d4c4e, #706c6f, #b2b1b4
Type (h1): Suisse Int'l Regular · 110px/110px · 400 · tracking -4.4px — "Blazing fast brand sprints for startups"
Type (h2): Suisse Int'l Regular · 60px/69px · 400 · tracking -1.8px — "At Primary, we believe exceptional branding is possible without the wait. So we "
Type (body): Suisse Int'l Regular · 44px/52.8px · 400 · tracking -0.88px — ""From understanding our ambitions, to crafting the direction, to executing with "
Type (small): Suisse Int'l Regular · 10px/10px · 400 · tracking 0.1px — "slots left for"
Type (button): sans-serif · 12px/normal · 400 — "Sprint past the competition"
Button: "Sprint past the competition" — fill #0f0f0f, text #ffffff, radius 999px, border 0px, padding 16px 36px 16px 16px, height 182px, type 12px/400
Radii: 50px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/primary-studio/hero.webp?v=fce63d35
- Page crop (mid-1): https://media.lvly.design/library/primary-studio/mid-1.webp?v=6a590202
- Page crop (mid-2): https://media.lvly.design/library/primary-studio/mid-2.webp?v=4ff08115
- Hero (mobile): https://media.lvly.design/library/primary-studio/mobile-hero.webp?v=6b167612
- Full page (desktop): https://media.lvly.design/library/primary-studio/full.jpg?v=ec7b2136
- Full page (mobile): https://media.lvly.design/library/primary-studio/mobile-full.jpg?v=cd841161
- Clip preview (mp4): https://media.lvly.design/library/primary-studio/video-nzywmz.preview.mp4?v=79a3ec93

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.

## Steal-worthy details

- Display type set **solid** — 110px size against a 110px line-height, tracking pulled to -4.4px (-0.04em), weight 400 not bold. Two lines stack with zero visual gutter, which is what makes a regular-weight headline read as loud
- The nav is **two separate hairline pills**, not one segmented container — "Work" and "Pricing" each get their own 999px outline and their own padding, floating centered with no bar, no fill and no border under the header
- The primary CTA is a **scarcity booking pill**: a filled circle icon (lightning) hard against the left edge, then a two-line stacked label — 14px "Reserve your spot" over a 10px gray "3 slots left for November". The subline does the selling; the button is only the frame
- The wordmark sits over a **hairline rule that stops short** — it runs from the left margin to about 18% of the viewport and simply ends, standing in for a header border without drawing one
- The portfolio band is **overlapping full-bleed panels at staggered bottoms**, and each one's caption is a "→ LABEL" chip in 12px caps notched into the page ground at its bottom-left corner. Nothing sits on top of a photograph, so no scrim and no dimming is ever needed
- Sections are closed by a **labeled progress rail**: a 1px hairline with a small square tick at each end and a 10px gray label above each tick ("Kickoff / Full Brand", "2004 / Now"). The same component is reused as a section footer to encode duration and history without a diagram
- The competitive claim is drawn as a **two-bar lime chart with the labels inside the bars** — a short "THEM" bar over a near-full-width "YOU" bar, both #c8ff54, no axis, no numbers, no legend. An argument rendered as a measurement
- Emphasis is a **full-bleed inverted panel**, not a card: the page ground flips to #120a06 edge to edge, the 44px quote sits at roughly 60% column width in the same regular weight, and attribution goes white name over gray role. The closing CTA does the same thing with a 999px pill outlined in a 1px white stroke at ~70% viewport width

## Style recipe

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.