Nite Riot
www.nite-riot.comLos Angeles commercial production company portfolio — cream #fcfaf5 light theme over pure black dark theme, ATF Alternate Gothic Condensed + Fixture grotesque, header-fixed live LA clock, narrow centred 9-tile project grid, and a mix-blend-mode: difference H1 that inverts as it crosses the hero image.
Design tokens
- display
- Fixture (Light 300, SemiBold 600) - geometric grotesque from Display Type
- body
- ATF Alternate Gothic ATF Book (400) - condensed gothic, 101 hits
- demi
- ATF Alternate Gothic ATF Demi (600) - heavier condensed cut, used for wordmark
- mono
- none - no mono font in stack
- icon
- webflow-icons (base64-inlined Webflow icon font)
Do / Don't
Reference it for
- Cream rgb(252, 250, 245) light theme + pure black rgb(0, 0, 0) dark theme as a two-state inversion driven by scroll position
- mix-blend-mode: difference on the hero H1 + fixed header so text colours invert automatically as image content passes underneath
- ATF Alternate Gothic Condensed (ATF Book + ATF Demi) as the condensed gothic workhorse for nav, body, footer ticker
- Fixture Light + SemiBold as the geometric grotesque for the 28px hero H1 and 40px section headlines
- All-caps everywhere (text-transform: uppercase declared on body) — no lowercase in the entire interface
- Tight type scale: 11 / 11.25 / 15 / 16 / 28 / 40px — six steps, no in-between
- -1.2px letter-spacing on 40px display + +0.33px on 11px micro — editorial-display tracking discipline
- 16.5px line-height on 15px body — a snug 1.1× ratio
Do not copy
- The "NITE RIOT®" wordmark in ATF Alternate Gothic Demi Condensed
- The ATF Alternate Gothic ATF Book + ATF Demi typeface licence (Webflow-distributed but commissioned)
- The Fixture Light + SemiBold typeface licence
- The "Strategic Thinkers. Smart Strategy. Thoughtful Execution. Bold Brands." hero phrasing verbatim
- The Los Angeles LOS ANGELES (CA) // ●04:04 PM clock unless the studio is genuinely LA-based
- The exact (BL//SH) and (GP) design and art credits
- The specific 9-tile grid order (King Kong / Xeomin / Coach …) or any client list
- The WORK⁽²⁴⁾ / INSPIRED⁽¹⁰⁾ exact counter values
Signature moves
scroll-driven two-state theme inversion
a cream light theme (rgb(252,250,245)) and pure-black dark theme invert as a two-state flip driven by scroll position, with a mix-blend-mode: difference hero H1 and fixed header that auto-invert as image content passes underneath.
all-caps condensed-gothic + geometric-grotesque system
all-caps everywhere (text-transform uppercase on body) across a tight six-step scale (11/11.25/15/16/28/40px), with ATF Alternate Gothic Condensed as the workhorse and Fixture for the 28px hero H1 and 40px headlines, tracked -1.2px on display and +0.33px on micro.
taxonomic site-chrome instead of navigation
site chrome replaces conventional nav: a live LA clock with pulsing red dot, numbered nav counters (WORK with superscript counts), a sticky footer bar (copyright / last update / pager / credits) and a looping project-name marquee above it.
Related references
General Condition
nicheCreative Studio
Self-aware "this might be a design studio" hero on near-black with vivid red display + rainbow-bordered chrome — WordPress+Elementor post-modern creative aesthetic.
Abhishek Jha
nicheDesign Portfolio
Indian designer personal portfolio — 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.
Alche
strongCreative Studio
The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.
Alejandro Mejias
nicheDesign Portfolio
A Melbourne solo UX designer's Framer-built portfolio in a brutalist bracket-wrapped monospace voice — black-on-white chrome punctuated by a single neon-yellow accent, dotted-grid hero, and full-bleed yellow about page.