Basement

basement.studio

a digital studio's portfolio rendered as a black-canvas magazine - Geist for body, the bespoke "flauta" for display moments, 1920px full-bleed project tiles with no border-radius and no shadows, and a 7-transition motion budget that prioritises bold typography over interaction polish.

Creative Studio Digital Branding Studio flagship

Design tokens

page-pure-black
near-black-1a
surface-2e
text-white
text-light-grey
text-light-grey-90
text-muted-grey
text-soft-grey
deep-black-overlay-90
body
Geist, "Geist Fallback"
display
flauta, "flauta Fallback"
fallback
Times

Do / Don't

Reference it for

  • Geist + flauta as the body+display pairing. Geist is free and ubiquitous; flauta (or substitute with a distinctive paid display face) gives the brand its tonal signature.
  • A pure black #000000 page with no border-radius anywhere. The sharpness IS the brand position.
  • One declared box-shadow across the entire homepage — basement refuses elevation as a visual tool.
  • 1920px content cap (47 hits) used at full-bleed — project tiles span the viewport.
  • Project tiles as the page's structural primitive: header in display face + brand colour + oversize visual + capability-tag list + 3-line description.
  • Capability tags in tiny mono / sans (Websites & Features / Marketing Execution / IRL Experience Design).
  • Superscript count tags in nav (Showcase (25), Blog (28)) — small typographic detail that signals "active studio".
  • Bold project copy with first-person plural ("Partnering with Vercel means pushing the limits…", "We crafted a high-performance, story-driven website").

Do not copy

  • flauta — bespoke (possibly commissioned for basement). Substitute with another distinctive display face the client owns.
  • The exact "cool shit" tone — basement-coded; a more corporate brand can't carry it.
  • The 1920px full-bleed project tile layout on briefs without a strong project library.
  • The 0-radius discipline on consumer brands that need to feel warm — sharpness reads as commercial confidence.
  • 23 named keyframes for what is essentially a black-and-grey page — most are unused. Subset.

Signature moves

pure-black no-radius no-shadow magazine canvas

a pure black #000000 page with no border-radius anywhere and one declared box-shadow across the homepage makes sharpness the brand position.

full-bleed project tile as structural primitive

1920px full-bleed project tiles (display-face header + brand colour + oversize visual + capability-tag list + 3-line description) are the page's structural primitive, with superscript count tags in nav (Showcase (25)).