Hero · Quick-form
Two dropdowns, then go.
2-step quick start
Commercial office
10,000 to 50,000 sq ft
Free · no obligation · GTA only
← All workClient
A security integrator's site built around how they actually work
- Client
- Lunarlink Solutions
- Year
- 2026
- Sector
- Security · GTA
- Scope
- Brand · Site · Copy
lunarlinksolutions.com
Loading 3D scene
The hero
Three.js, lazy-loaded, drag to spin.
Stack
8Next 16
App Router · Turbopack
React 19.2
Server + client
Tailwind v4
OKLch tokens
Three.js
Hero only · lazy
Motion
Page transitions · beams
next-themes
System-aware toggle
Base UI
Headless primitives
Geist
Sans + Mono
Brief
A Toronto security integrator launching with one site that covers four product lines, ten service municipalities, and both commercial and residential audiences without making any of them feel like an afterthought.
What we did
Lunarlink launched as a single integrator across four product lines (video, access, alarm, cybersecurity) and two audiences: commercial buyers comparing vendors, and homeowners who just want a quote. The site had to hold both without watering either down. The homepage opens with one sentence about who they serve, then a four-pillars diagram showing the integration story instead of a feature grid. Industries each get their own page, so a healthcare buyer never reads retail copy by mistake. The service area is a ten-municipality carousel with response-time estimates. Residential runs on its own track with a quieter tone and a faster path to a free assessment. We handled the brand, the site, and the copy. One typeface, one accent, one motion cue.
Brand system
Light · DarkLunarlink
Brand system
Display · Geist
Security,
built for how
you live and work.
One typeface family across the entire site. Geist for display and body, Geist Mono for technical accents. Numerals kept tabular so spec rows align cleanly across cards.
Color · OKLch
Perceptually uniform tokens. The brand blue holds a single OKLch coordinate across both modes, so the accent never drifts in hue.
- --background#FFFFFF
- --card#FFFFFF
- --foreground#1A1A1A
- --muted-foreground#626262
- --border#EBEBEB
- --brand#3656F7
The four pillars
04Video
Cameras chosen so footage holds up as evidence in court.
Access
Doors, gates, elevators on one credential, with audit logs.
Alarm
Intrusion and panic, monitored locally, with regulated install.
Cybersecurity
The network the cameras run on is part of the install from day one.
Decisions
06Color
OKLch tokens for the whole palette.
Perceptually uniform color. The brand blue holds one OKLch coordinate across light and dark, so the accent never shifts hue between modes. HSL would have drifted; OKLch stays put.
3D
Three.js on the hero only, lazy-loaded.
The cube earns its weight because it carries the brand. Everywhere else, motion is CSS or a small Motion sequence. The Three.js bundle ships behind a dynamic import so first paint stays light.
Homepage
A two-step assessment on the homepage.
Most vendor sites bury the quote behind a long form. We pulled it forward to two dropdowns and a button. Site type, site size, start. The full conversation happens in a call.
Industries
Each industry gets its own page.
A healthcare buyer reads healthcare copy. A retail buyer reads retail copy. A hospital install is different work from a retail rollout, and the site says so.
Platform
The four pillars shown as a diagram.
The story is integration: video, access, alarm, and network designed together. A diagram shows that. Four feature tiles would just show four products.
Service area
Ten cities, each with a response time.
A map of the GTA is decoration. A carousel of ten municipalities, each with a four-hour response window for active service clients, gives a buyer something concrete to weigh before signing on.
Tools on the live site
03Three live tools sit on top of the content layer: a hero quick-form, a five-question security score, and a per-year cost calculator.
Tools · Security Score
Five questions per category, scored on the spot.
Question 3 of 5 · Cameras
How is camera footage retained?
- Local DVR, no off-site copy
- Cloud, 30-day retention
- Cloud, 90-day retention with audit trail
- Not sure
Score so far
62 / 100
Cameras and access on track. Network needs work.
- Critical
- Weak
- OK← you
- Strong
- Your score is in the OK band.
Tools · ROI Calculator
False-alarm fines and downtime, totalled per year.
Inputs
14
$320
22
$1,400
Estimated annual cost
$0
Recoverable: ~$28,720 with integrated monitoring and access control.
Page atlas
22 routesTwenty-two routes, each with its own content layer. Sorted by line count so the depth shows.
/412 L
/residential329 L
/careers244 L
/privacy233 L
/resources226 L
/referral207 L
/quote197 L
/subcontractors191 L
/terms186 L
/about144 L
/solutions120 L
/contact116 L
/compliance102 L
/tools93 L
/products73 L
/guides72 L
/service-areas68 L
/compare67 L
/industries57 L
/insights46 L
/glossary42 L
/support34 L
ConversionDiscoveryTrustKnowledgeLegalOperational22 routes · 3,259 lines of page-level JSX
Audiences
02Commercial
Buyers comparing vendors.
Industry-specific pages, integrated platform story, partner logos, on-site assessments. Built so a healthcare or manufacturing buyer can shortlist without a sales call.
Toronto and the GTA
Residential
Homeowners who just want a quote.
Quieter tone, clearer scope, faster path. The same integrator, but the homepage doesn't ask homeowners to read commercial copy first.
Toronto and the GTA
Next project