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
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.
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.
Ingamana
nicheCreative Studio
a development-studio portfolio that runs as a near-silent black-on-white index, ABC Monument Grotesk set tiny (10-16px), captioned project tiles laid out like a contact sheet, and a single expo-out reveal curve doing all the motion work.