A · Editorial
The Editorial spread
A magazine that happens to sell a cleaning service. Cream paper, forest-green accent, hairline rules, drop caps, a B&W photo essay.
- Fraunces serif
- Cream + ink + forest
- Photo-led
- Warm
Vol. III · Issue 07 · Vancouver, BC
Three ways
to shine.
Three design directions for True Shines Cleaning — Vancouver's meticulous residential & commercial cleaning crew. Meticulous, dependable, honest.
02 · The three directions
Pick a direction.
Same brand, three committed visual languages. Each one is a full 5-page site. Click OPEN LIVE to walk through it end to end.
B · Cinematic
The Cinematic trailer
A Spielberg poster for a Vancouver cleaning crew. Purple → sunset orange, lens-flare hero, single right-side light, slow Ken Burns, scroll-pinned story.
- Cormorant Garamond
- Purple + sunset + cream
- Photo-led
- Maximal
C · Brutalist
The Brutalist slab
Infrastructure, not marketing. 4px visible border grid, mono ALL-CAPS deck, oversized claim, instant hover flips, route list instead of a stock footer.
- Space Grotesk
- Bone + ink + hazard orange
- Type-led
- Cool
“
Cleaning is detail work. So is design. We built three.
— The brief, in one line. Vancouver, August 2026.
04 · Why three?
Each variant attacks a gap.
The reference site — a generic cleaning template — is content-light, visually flat, and forgettable. We built three committed responses, not one safe one.
01
Editorial — because the work is craft.
Variant A treats the site like a magazine spread because residential cleaning is craft work. Drop caps, hairline rules, a B&W photo essay, "The Kitsilano Clean" feature. The signal: we sweat the details, on the page and in your apartment. Cream paper, forest-green accent, Fraunces serif at 144px.
↳ Best for: design-aware homeowners, editorial brands, premium service buyers.
02
Cinematic — because the city is golden.
Variant B makes the homepage feel like a movie poster for a Vancouver crew. Lens-flare hero, purple → sunset orange → cream, Cormorant Garamond, slow Ken Burns, scroll-pinned story, single right-side light source. The signal: we are the cleaning crew that looks like the city at 7pm in August.
↳ Best for: high-emotion buyers, hospitality clients, brand-led owners.
03
Brutalist — because operations matter.
Variant C strips it back to concrete, mono ALL-CAPS, 4px borders, hazard orange. "WE CLEAN. WE LEAVE. WE BILL FAIRLY." The signal: we are a serious operation, not a marketing site. Space Grotesk, instant hover flips, a "BURNABY → KITS → YALETOWN" route list instead of a stock footer.
↳ Best for: property managers, commercial clients, ops-minded owners.
05 · The matrix
A · B · C, side by side.
Same brand, same five pages, same Vancouver content. Three committed visual languages. The contrast is the point.
Dimension
A Editorial
B Cinematic
C Brutalist
Direction
Magazine spread
Movie trailer
Concrete slab
Palette
Cream · ink · forest
Purple · sunset · cream
Bone · ink · hazard orange
Type
Fraunces · Inter · Mono
Cormorant · Inter
Space Grotesk · Inter · Mono
Motion
Subtle fade, drop-cap reveal
Ken Burns, scroll-pin
No scroll anims, instant hover
Signature
Vol. III · Issue 07 strip
Lens-flare sunset hero
4px border grid, route list
Pages
5 (index · services · process · reviews · contact)
5 (same five)
5 (same five)
Cost
$0
$0
$0
Pick this if…
"We want to feel premium, considered, literary."
"We want to feel cinematic, emotional, the city."
"We want to feel like operations, not marketing."
06 · How it's built
No CMS. No backend. No mystery.
Static HTML, one CSS file, one JS file. Free hosting. Every photo is verified. Every form opens a real email, not a broken endpoint.
01
GSAP + ScrollTrigger
Fade-up on scroll, triggers at 80% viewport. No jank, no layout shift, no spinner chrome. Just entries that arrive when you read them.
02
Cloudflare Pages
One wrangler pages deploy overwrites the whole project —
showcase, variant-a-editorial, -b-cinematic,
-c-brutalist. Free tier, global edge, custom domain ready.
03
mailto: forms
Every "Get a quote" opens a real email to hello@trueshines.ca with a prefilled subject and body. No PHP, no Formspree, no silent failures.
04
Verified-photo protocol
32 unsplash URLs, each checked for HTTP 200. Every <img>
carries an onerror handler that drops opacity to 0.4 instead
of showing a broken icon. No stock-photo surprises.
07 · The build, by the numbers
3
variants
Editorial · Cinematic · Brutalist
15
pages
5 per variant, all live
$0
to build
no CMS, no agency, no plugin fees
1
deploy
one Cloudflare Pages push
08 · Ship it
Pick a direction.
We'll ship it next week.
Reply with the letter — A, B, or C — and we'll lock that variant as production, point the domain at it, and hand you the keys. The other two stay in the repo as your design system bible.
1155 W Pender St, Vancouver, BC V6E 2P4 · Mon–Fri 7am–7pm · Sat 8am–5pm