Screenshot of Stravagario

Stravagario

stravagar.io

The 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 Portfolio Creative Archive Personal Site niche

Design tokens

page
text
textMuted
surfaceLight
surfaceWhite
blackInk
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