A · Editorial
The Editorial spread
A magazine that happens to sell a cleaning service. Cream paper, forest-green accent, hairline rules, drop caps.
- Fraunces serif
- Cream · ink · forest
- Photo-led
- Warm
Vol. III · Issue 07 · Vancouver, BC
Eight ways
to shine.
Eight design directions for True Shines Cleaning — Vancouver's meticulous residential & commercial cleaning crew. Three editorial / cinematic takes, five corporate takes. Each one a full 5-page site.
02 · The eight directions
Three editorial + five corporate.
Same brand. Same Vancouver content. Eight 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. Lens-flare hero, Ken Burns, scroll-pinned story.
- Cormorant Garamond
- Purple · sunset · cream
- Photo-led
- Maximal
C · Brutalist
The Brutalist slab
Infrastructure, not marketing. 4px borders, mono ALL-CAPS, oversized claim, instant hover flips.
- Space Grotesk
- Bone · ink · hazard
- Type-led
- Cool
D · Trust
The Trust card
OpenWorks / Merry Maids energy. Persistent "Book in 60s" CTA, partner-logo bar, shield-badged trust strip.
- Inter · IBM Plex Mono
- Navy · gold · cream
- Trust-led
- Warm
E · Corporate
The Corporate franchise
Jani-King / ServiceMaster energy. "EST. 1969" pedigree stamp, shield iconography, ISO 9001 cert wall, 3-tier GOOD/BETTER/BEST table.
- Helvetica system
- Royal blue · red
- Bold
- Trust-led
F · Modernist
The Modernist SaaS
Stripe-meets-services. "Integrated Facility Services" tagline, scroll-pinned KPI counters, animated logo carousel.
- Geist Sans · JetBrains Mono
- Charcoal · electric blue
- Dark
- B2B SaaS
G · Prosumer
The Prosumer clinic
Coverall / healthcare-grade. "HEALTHCARE-GRADE" stamp, HIPAA compliance wall, interactive quote calculator, before/after slider.
- Manrope
- White · teal · yellow
- Sterile
- Compliance-led
H · Enterprise
The Enterprise platform
AWS / Vercel / Linear. Floating dashboard mockup, 4×3 feature grid, "True Shines API" code block, "Documentation" footer.
- Inter Display · JetBrains Mono
- Off-black · electric violet
- Dark
- SaaS-marketing
"
Cleaning is detail work. So is design. We built eight.
— The brief, in one line. Vancouver, August 2026.
04 · Why eight?
Three editorial, then five corporate.
The reference site — a generic cleaning template — is content-light, visually flat, and forgettable. We built a magazine, a movie, and a concrete slab first. Then we went corporate: trusted, franchised, modern, clinical, and enterprise. Eight committed responses, not one safe one.
01
Editorial — because the work is craft.
Magazine spread. Drop caps, hairline rules, B&W photo essay, "The Kitsilano Clean" feature. The signal: we sweat the details.
02
Cinematic — because the city is golden.
Lens-flare hero, Cormorant Garamond, slow Ken Burns. The signal: we are the cleaning crew that looks like the city at 7pm in August.
03
Brutalist — because operations matter.
"WE CLEAN. WE LEAVE. WE BILL FAIRLY." 4px borders, mono deck. The signal: we are a serious operation, not a marketing site.
04
Trust — because trust wins contracts.
Navy + gold. Persistent "Book in 60s" CTA, partner-logo bar, shield-badged trust strip. The signal: we've been trusted since 2014.
05
Corporate — because pedigree matters.
Royal blue + red. "EST. 1969" stamp, ISO 9001 / GBAC cert wall, 3-tier GOOD/BETTER/BEST table. The signal: we are a serious national-scale operation.
06
Modernist — because B2B is the new SaaS.
Charcoal + electric blue. Scroll-pinned KPI counters, animated logo carousel, "Documentation" footer. The signal: we are the Stripe of facility services.
07
Prosumer — because compliance is a feature.
White + teal + signal yellow. "HEALTHCARE-GRADE" stamp, HIPAA/CDC/GBAC wall, interactive quote calculator, before/after slider. The signal: we clean medical facilities, dental offices, banks.
08
Enterprise — because the platform is the moat.
Off-black + electric violet. Floating dashboard mockup, 4×3 feature grid, "True Shines API" code block, "Documentation/Compliance/SLA" footer. The signal: we are the AWS of facility services.
05 · The matrix
All eight, side by side.
Same brand, same five pages, same Vancouver content. Eight committed visual languages. The contrast is the point.
Dim
A Editorial
B Cinematic
C Brutalist
D Trust
E Corporate
F Modernist
G Prosumer
H Enterprise
Inspiration
Magazine spread
Movie trailer
Concrete slab
OpenWorks / Molly Maid
Jani-King / ServiceMaster
Stripe / Linear
Coverall / healthcare
AWS / Vercel / Linear
Palette
Cream · ink · forest
Purple · sunset · cream
Bone · ink · hazard
Navy · gold · cream
Royal blue · red · white
Charcoal · electric blue
White · teal · yellow
Off-black · violet
Type
Fraunces · Inter
Cormorant · Inter
Space Grotesk · Inter
Inter · IBM Plex Mono
Helvetica system
Geist Sans · Mono
Manrope
Inter Display · Mono
Motion
Subtle fade, drop-cap reveal
Ken Burns, scroll-pin
Instant hover, 0ms
Sticky CTA, GSAP
Slide-in, minimal
KPI counter, scroll-pin
Quote calc, FAQ accordion
Dashboard, code block
Signature
Vol. III · Issue 07
Lens-flare sunset hero
4px border grid, route list
Persistent Book CTA + chat
EST. 1969 + shield cert wall
Live dashboard mockup
HEALTHCARE-GRADE stamp
4×3 feature grid + API
Pages
5
5
5
5
5
5
5
5
Cost
$0
$0
$0
$0
$0
$0
$0
$0
Pick this if…
"Premium, considered, literary."
"Cinematic, emotional, the city."
"Operations, not marketing."
"Trust & heritage, residential."
"Franchise, national scale."
"B2B SaaS, property managers."
"Healthcare, dental, banks."
"Enterprise platform, API."
06 · How it's built
No CMS. No backend. No mystery.
Static HTML, one CSS file per variant, one JS file per variant. 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 — 8 variants + showcase, all under subpaths. 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
~80 unsplash URLs, each checked for HTTP 200. Every <img> carries an onerror handler. No stock-photo surprises.
07 · The build, by the numbers
8
variants
3 editorial + 5 corporate
40
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 through H — and we'll lock that variant as production, point the domain at it, and hand you the keys. The other seven stay in the repo as your design system bible.
1155 W Pender St, Vancouver, BC V6E 2P4 · Mon–Fri 7am–7pm · Sat 8am–5pm