DESIGN GUIDE · SHOWCASE V14
Noir
A four-act case file: the career told as an investigation that closes.
01 · CONCEPT
The concept
Advisor OS as a film-noir case file: four acts in career order, each product an exhibit found by a shaft of venetian-blind light, with facts typed on evidence tags and prices struck as case-file stamps. The world is strictly monochrome — one neon red is permitted, and it appears exactly twice: the OPEN ALL NIGHT sign in the cold open and the final call to action.
02 · PALETTE
Palette
- #101010
- Ink — page ground
- #0a0a0a
- Pit — intertitle frames
- #242424
- Smoke — rules, borders
- #565650
- Ash — heavy borders
- #a7a39a
- Dust — secondary text
- #e8e5df
- Paper — text, tags, light
- #e0362c
- Neon — used exactly twice
- #8f3a31
- String — corkboard thread
Product colours are quarantined: each appears once, as the stub edge of its evidence tag — #2dd4bf CMFAS Prep, #7aa2ff Pick a Time, #ff6b3d ActivityTracker, #b79bff FourLens.
03 · TYPE
Type system
Case closed
Oswald 400/500/600 — titles, act cards, intertitles, stamps, CTAs
The city doesn’t reward talent. It rewards sequence.
Cormorant italic 400–600 — the voiceover captions
EXHIBIT A · 3,684 practice questions on record
Special Elite 400 — evidence labels, facts, body copy, chrome
04 · SIGNATURE
The blind light
The signature element is a fixed shaft of venetian-blind stripes — a repeating linear gradient raked at 12° — whose position is scrubbed by scroll, so the light sweeps down the page as you read. Every section starts in shadow (dimmed and darkened) and is “found” when it enters the frame: the investigation mechanic and the reveal mechanic are the same thing.
It carries the whole site because noir is about light, not colour: with a monochrome palette, illumination is the only currency left, so where the light falls is where the story is.
05 · TECHNIQUES
Techniques used
- Light-as-parallax — GSAP ScrollTrigger scrubs the blind-stripe background-position against scroll (rAF fallback if GSAP fails to load).
- Scroll choreography — IntersectionObserver lifts each act from shadow (opacity + brightness filter transition) as it enters the viewport.
- Film grain — a fixed full-screen SVG rect filtered through feTurbulence fractal noise, desaturated, at 5% opacity.
- CSS/SVG evidence scenes — the exam hall, calendar-and-telephone, and corkboard are hand-drawn inline SVG; the red string is plain SVG quadratic paths under the pins. No bitmaps anywhere.
- Typewriter reveal — exhibit names type on via a clip-path inset animated with steps(), so no layout shifts and no overflow.
- Intertitle pacing — full-bleed black frames with double borders between acts, silent-film style, to force a beat between exhibits.
- Restraint as a technique — one accent colour, used twice; product colours confined to four tag stubs.
- Reduced motion — everything pre-lit, labels pre-typed, no drift, no flicker, no scrub; the resting page is the finished page.
06 · SCORECARD