Stravagario
stravagar.ioThe reference for the contemplative title-card portfolio — near-black canvas, a single italic literary quote, and a 0% loader-as-content that treats arrival itself as the brand statement.
Design tokens
- display
- esface
- displayItalic
- esface italic (weights 200, 300)
- secondaryDisplay
- bagoss
- ornamentalDisplay
- infamous
- body
- Arial, Helvetica, sans-serif (fallback only, no captured Latin sans body face)
- mono
- none
Do / Don't
Reference it for
- Near-black rgb(23, 23, 23) page background — not pure black, slightly lifted
- White-on-muted hierarchy via opacity rather than colour variants (the active row reads brighter than the surrounding labels)
- Single literary quote as hero content — Spanish Pablo Neruda, italic, centred, four lines
- Custom italic display serif for the quote at ~24-28px (ESFace Italic / Bagoss)
- Loader-as-content — 0% percentage that reads as ambient brand chrome, not a state to escape
- Four-corner label anchoring: year top centre, studio mark / subtitle / year-range mid-row, percentage bottom centre
- 10-16px tight micro-typography for all labels — chrome-density type
- Custom S-curve easing cubic-bezier(0.39, 0.575, 0.565, 1) — easeOutQuad-adjacent soft-land
Do not copy
- The Pablo Neruda quote ("Como marcha el reloj sin darse prisa...") — it is the studio's own literary signature
- The "Stravagario" wordmark and the "A collection of amenities" subtitle copy
- The Bagoss / ESFace / Infamous TRIAL fonts — these are foundry-trial licences and require commercial purchase before shipping production sites
- The "2020-2024" date-range framing unless the brand has a real four-year archive to point at
- The 0% loader-as-content gesture unless the brand has the patience-budget to let users sit on it
- The single-quote homepage pattern unless the brand has Stravagario's poetic conviction (most brands need to show value within 3 seconds)
- The Spanish-language quote for non-Spanish-speaking brand markets
- The intentionally empty <h1> and missing meta description — kills any SEO surface
Signature moves
literary-quote title-card hero
a single italic literary quote is the entire hero, centred and four lines in a custom italic display serif at ~24-28px, within an 856px constrained reading column on a near-black rgb(23,23,23) page
loader-as-content arrival gesture
a 0% percentage loader reads as ambient brand chrome rather than a state to escape, with film-grain (noiseAnim) and mask (maskAnim) keyframes, on slow 1-second transform durations with cubic-bezier(0.39, 0.575, 0.565, 1) soft-land
Related references
First Frame
nicheFilm Production
Paris production and post-production studio whose own site is the canonical example of full-bleed black + IBM Plex Mono micro-type + reel-as-hero — the cinematic-craft posture for a portfolio-led service business.
Gianluca Gradogna
nicheDesign Portfolio
a multidisciplinary designer's portfolio that floats a crisp white intro card over a dark, full-bleed photographic world, pairing a clean Neue Montreal grotesque with a high-contrast Times display serif and one slow in-out-sine colour fade.
Hugo Baron
nicheDesign Portfolio
The reference for solo motion-design portfolios that lean on a single brand colour, a giant condensed display face, and a "loading-screen-as-hero" gimmick to read as confident and craft-forward without an agency budget.
Ichiki 109
nicheDesign Portfolio
The reference for Japanese illustrator portfolios — Astro v5 build, IBM Plex Mono + Hiragino + barcode font, off-white blue-tint background, percentage-progress preloader.