Hugo Baron
nuageboi.frThe 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.
Design tokens
- display
- nx (ultra-condensed brutalist, weight 700 only)
- body
- akm (semi-bold geometric sans, weight 600)
- mono
- nm (small system face, weights 500 + 700)
Do / Don't
Reference it for
- Signal-green rgb(7, 196, 44) accent as the sole chromatic device on an otherwise black / white / rgb(216,216,216) warm-off-white page
- rgb(216, 216, 216) warm-light-grey body background, not pure white, not off-white-blue, a slightly warm muted neutral
- Bimodal type scale: 8/10/12/14/16/32/48 ladder for content, then a 200 / 695px jump for display, no middle
- Custom ultra-condensed nx display face at 200-695px for outro "LET'S COLLABORATE" marquee + load-screen numerals
- akm semi-bold (600) geometric sans as the dominant body voice, 5:1 over every other face
- "Loading screen as hero" gimmick: pre-load INITIALIZING DATA / L04D1NG: NN/114 ticker + giant count-up numeral
- Leetspeak mono micro-caps (L04D1NG, NU4G3B01) as ambient brand voice in chrome
- Horizontal repeating ticker across viewport (// L04D1NG: 92 / 114 // repeated 4x) as visual rhythm
Do not copy
- The NUAGEBOI® wordmark or alias
- The exact rgb(7, 196, 44) signal-green hue if the client brand has its own primary
- The bespoke akm / nm / nx custom fonts, substitute with Inter + JetBrains Mono + Bebas Neue Condensed (or Anton)
- The "L04D1NG / INITIALIZING DATA" leetspeak voice if the brand isn't gen-z-leaning music-video adjacent
- The 200-695px display sizes unless the brand has real content to fill the scale
- The "LA CIGALE (LIVE VISUALS)" / Hugo's specific project metadata
- The pre-load count-up gimmick on B2B SaaS, it reads as performative
- The single canvas-noise overlay on content-heavy pages, it disrupts text legibility
Signature moves
single-signal-colour brutalist portfolio
a signal-green (#07c42c) accent is the sole chromatic device on a warm light-grey #d8d8d8 page with a black/white token spine, no box-shadow at all.
bimodal type scale with giant condensed display
a bimodal scale runs 8-32-48px for content then jumps to 200-695px for a custom ultra-condensed display marquee, with -0.24px tracking on tight 12px body.
loading-screen-as-hero with cropped marquee
a pre-load count-up ticker ("INITIALIZING DATA / L04D1NG: NN/114") plus giant numeral acts as the hero, and a scrolling marquee bleeds cropped letterforms off the viewport edges, over a single canvas-noise grain overlay.
Related references
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.
Jens Bosman
nicheFilm Production
The reference for solo motion-director portfolios - pure black canvas with monumental Helvetica display type, pill-shaped chip nav, and a single sticky "W." / vertical "Honors" chrome mark.
Lanserring
flagshipTrades
a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.
Lazy Eight
strongCreative Studio
a gallery-minimal brand-studio portfolio where a near-white canvas, one large black-and-white image and a tiny "Explore ↓" are the entire first screen, image carries everything, type whispers, and a single classic link-blue is the only colour.