Keystone Security Systems
A concept exploring how a commercial low-voltage contractor can present capability, compliance and project history as a technical document a facilities manager can forward to a decision maker.
- Business type
- Commercial low-voltage & security integration
- Design direction
- Specification document — editorial, tabular, institutional
- Palette
- Warm stone and graphite with a restrained oxblood
- Typography
- Georgia display, IBM Plex Mono labels, Inter text
- Primary priority
- Be credible enough to forward internally
Desktop home page — the full layout, rendered live rather than screenshotted.
The design objective
Commercial buying looks nothing like residential. Nobody books an integrator at midnight. They shortlist three, check licensing and bonding, read a project brief, and forward it internally to someone who never visited the site. So this concept is built as a document rather than a funnel: a persistent numbered rail down the left, a capability matrix showing what actually changes when one contractor holds the whole scope, sector pages with the relevant compliance standards named, and figure-captioned photography. There is not a single rounded card on the site.
Mobile home page
On a phone
Not the desktop layout, squeezed.
The mobile view reorders the page around what someone actually does on a phone. What matters most on a laptop is rarely what matters most standing in a driveway, so the hierarchy changes rather than just the column count.
- Editorial hero with numbered capability index
- Capability matrix crossing systems against integration points
- Sector index with project counts
- System architecture diagram
- Standards and compliance tables
- Market brief interior page with named regulations
Interior page
Market brief — K–12 & higher education
The same page, rebuilt for a phone
Decisions
The choices that shaped it.
- 01
A capability matrix instead of a services grid
A real table crossing six systems against six integration points — one credential database, one event timeline, shared cable plant. It gives the page a technical reason to exist visually, and it makes the argument for single-contractor scope in a way six cards never could.
- 02
A numbered rail runs down the whole page
Every section carries a section number and label in a 132px left rail. It reads like a specification, orients a reader who arrives mid-scroll, and is the structural device that makes this site feel unlike the other two before a single word is read.
- 03
Licensing and bonding sit beside the headline
Licence numbers, bonding capacity and coverage area in a compact index next to the opening statement. Those four facts decide whether a qualified buyer keeps reading, so they are not buried in a footer.
- 04
Markets, not services — with the standards named
The interior page is a market brief for education that names NFPA 101, FERPA and the state school code, and says how each is met. A hospital and a school buy the same hardware for entirely different reasons, and naming the reason is what proves the understanding.
- 05
Serif, monospace, hairlines, no cards
Georgia for display, IBM Plex Mono for every label and figure number, Inter at 15.5px for body. Stone and graphite with one restrained oxblood. Photography desaturated toward the palette so the page reads as one document rather than a page with pictures on it.
Keystone Security Systems is not a real company and did not commission this project. It was built to work through a real problem — how a commercial low-voltage & security integration should present itself online — and everything shown is a genuine, complete design rather than a mockup of one. No performance figures are claimed, because there is no live site to measure.
This kind of thinking, applied to your business.
Tell us what you do and what your current site is not doing. We will tell you what we would change.