vagrant-studio
Stark Swiss modernist portfolio defined by massive uppercase display type and generous stark white space. Heavy reliance on clean media assets within softly rounded rectangular frames.
Visit siteRated
6.6/ 10
From 12 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.
- AI scorejudged
- 8.9
- Systemmeasured
- 5.4
- Distinctionmeasured
- 3.0
- on the grid
- 29%
- vertical rhythm
- 8%
- type on a scale
- 80%
- contrast passing AA
- 100%
- unlike the library
- 0.20
- model craft
- 7.7/10
- model deviation
- 5.1/10
Colour
Background#ffffff
Text#000000
Accent#4065f6
Surface#ffffff
Muted#000000
Typefaces
- Display
- Suisse Intl
- Body
- Suisse Intl
- Mono
- —
- Source
- self_hosted
- Scale
- 11 · 14 · 16 · 18 · 22
Layout
- Grid
- —
- Container
- —
- Spacing base
- 5px
- Radius
- 12px
Capture
- Category
- agency
- Sections
- 12
- Captured
- 2026-08-30
- Rhythm
- light → mixed → light x5 → mixed → dark → light → dark → light
Type rules
- giant uppercase grotesk branding at the viewport top
- body text set in compact single-family weights with minimal scale divergence
Colour rules
- monochrome white and black system with rare saturated asset color accents
- cobalt blue reserved exclusively for cookie banner notice
Voice rules
- sparse project metadata over narrative descriptions
- all-caps label strings
Holds it together
- stack project previews in single or alternating two-column layouts with rounded cards
- align project title, discipline, and year on a single horizontal line above each asset
Contrast
text on background21.0:1 AAA
muted text on background21.0:1 AAA
text on surface21.0:1 AAA
accent on background4.8:1 AA
background on accent4.8:1 AA
Type, measured
- Body
- 16px / 1.2
- Measure
- 175 characters
- Display
- 22px / 1.28
- Tracking
- 0em display
- Scale ratio
- 1.08
Voice
- Tone
- minimal, confident, matter-of-fact
- Sentences
- short
- Person
- first
- Vocabulary
- plain
- Calls to action
- send, contact
Built with
- Builder
- —
- Framework
- nuxt
- Motion
- lenis
- WebGL
- —
- Nav
- sticky_top_bar, 5 items, sticky
- Length
- 11 screens
Sections in page order
3 marked strong · 12- 00
hero
Monolithic, starkly contrasted typography dominates the viewport with an uncompromising Swiss modernist presence.
- Mood
- bold + raw
- Layout
- 1 col · stacked · balanced
- 01
hero
An industrial, camera-recorded outdoor billboard serves as an unconventional hero greeting, surrounded by stark location metadata.
- Mood
- raw + clinical
- Layout
- 24 col · full bleed · airy
- 02
video
A stark, minimalist video embed framed within a wide rounded black container against white space.
- Mood
- quiet + clinical
- Layout
- 1 col · centered · airy
- 03
showcase
Clean portfolio showcase featuring large rounded project previews with minimal uppercase labels.
- Mood
- quiet + editorial
- Layout
- 1 col · grid · balanced
- 04
showcase
Dramatic chiaroscuro studio photography of hands holding a tablet showcasing digital video work in a stark minimal layout.
- Mood
- editorial + bold
- Layout
- 16 col · stacked · airy
- 05
gallery
StrongCurated editorial gallery grid of architecture and design posters laid out with rigorous typographic precision and clean modular framing.
- Mood
- editorial + quiet
- Layout
- 6 col · grid · dense
- 06
showcase
Minimal studio portfolio showcase presenting side-by-side rounded visual case studies beneath sparse uppercase title labels.
- Mood
- editorial + quiet
- Layout
- 2 col · grid · balanced
- 07
announcement
StrongA stark and hypnotic festival announcement dominated by a giant white vinyl record against black scanline bars.
- Mood
- bold + raw
- Layout
- 2 col · centered · airy
- 08
showcase
StrongA cinematic, grain-textured black-and-white visual interlude creating a moody, abstract pause.
- Mood
- editorial + dreamy
- Layout
- 1 col · centered · airy
- 09
showcase
Quiet studio showcase pairing minimal typographic project tags with immersive wide-aspect media cards on stark white space.
- Mood
- quiet + editorial
- Layout
- 2 col · grid · airy
- 10
showcase
A monochromatic electric blue 3D render of a branded shipping container with stark white industrial typography.
- Mood
- bold + clinical
- Layout
- 1 col · centered · airy
- 11
showcase
Vibrant side-by-side project preview cards featuring bold typography and clean rounded corners.
- Mood
- bold + playful
- Layout
- 24 col · grid · balanced
