Haswell Creative — Case Study 33
Start a project

Penspy Security · Cyber Security & Audit · Concept

A security firm that looks like it has nothing to hide

Cyber security sites sell fear: black backgrounds, green code, a hooded figure. Penspy Security is an independent auditor, so it needs to be trusted more than it needs to scare anyone. We built a single bright, glass-clear hero where every claim sits in plain sight.

Role
Art direction, generated film, front-end build
Year
2026
Deliverables
Single-file responsive hero (HTML, CSS, vanilla JS), looping background film, logo mark, three-tier layout system, entrance choreography
The Penspy Security homepage on desktop and on a phone. A pale blue studio film shows a glass lens pierced by a thin glass blade. The headline reads Find It Before Attackers Do, beside a frosted glass card headed Verified.
A lens and a blade: the auditor's loupe and the penetration tester's tool, in one object. The whole page is lit like a clean room, not a war room.

The problem

Search for cyber security in Vancouver and the results are all versions of one look: a black page, a padlock made of circuit lines, and a stock photo of someone in a hoodie at a laptop. The pitch underneath is fear, meaning breaches, ransom and fines, followed by a demo form.

Penspy sells to controllers, CFOs and compliance leads who have been told they need a SOC 2 report or a penetration test before they can close a customer. They do not need to be frightened. They need to believe that whoever signs the report will say what they found, even if it's bad news for the client.

The firm also does two jobs that usually live in separate companies: offensive testing and independent audit. The site had to hold both without reading like two businesses stitched together.

The approach

Three moves, in order.

01

Light the room, don't darken it

The whole palette is a pale studio blue. A slow film of a glass lens with a thin glass blade through it gives two ideas one image: the auditor looks through, and the tester cuts in. Only the light moves across the floor. Nothing on the page flashes or glitches.

02

Put the method in the proof panel

The frosted card shows Penspy's engagement as four named stages (scope, test, fix, attest) with a meter drawn across them, instead of an animated threat map. It tells a buyer what they are paying for before they ask.

03

Measure every pixel against one comp

Every size on the page is a multiple of one design unit, measured from a 1280 × 960 comp. The film stretches to fill any screen while type and glass keep their proportions. Three layout tiers are chosen by the frame's shape rather than by device name, so a rotated phone gets its own composition.

The work

What we built.

The homepage

The Penspy Security hero at desktop width: a lens-and-slash logo mark, a frosted navigation pill, a dark Book an audit button, the headline Find It Before Attackers Do, a Verified glass card with a four-stage meter, a contact card, and the figures 340+ and 98% along the bottom.
The headline takes the left half and the glass takes the right. The film runs between them. The address, phone and email get their own glass card directly below the proof panel, not a footer nobody scrolls to.
A close-up of the frosted Verified card, showing a shield icon, the line Penetration Testing & SOC 2 Audit, a meter labelled Scope, Test, Fix and Attest filled to the second stage, and the contact card beneath it.
The meter fills from the left as the page loads, stopping at the testing stage. The whole engagement is shown in one line, readable at a glance.
The hero on a landscape tablet: the headline and tagline on the left, the Verified card and contact card stacked on the right, the two figures and the How we test pill along the bottom.
On a landscape tablet, the fixed positions give way to a two-column grid. The copy and glass stay side by side, and the contact card sits in the grid under the panel.

On a phone

Three portrait screens: the phone hero with the stacked headline and full-width Verified card, the same phone with the menu open showing Services, Audits, a Book an audit button and the full contact block, and a portrait tablet layout.
In portrait, the navigation collapses into a glass menu that also carries the full address, phone and email, so the column never runs out of height. Display type scales with the width, while labels and buttons have a minimum size so they stay readable and tappable.

Also delivered

The background film was generated for the project from written art direction: the still came first so the lens, the blade and the light were fixed before any motion, then it was animated into a silent ten-second loop whose last frame matches its first. Anyone who has asked their device for reduced motion gets the first frame, held still.

The page is one HTML file with no framework and no build step. The entrance animation adds its starting states before the first paint and removes them when it finishes, so without JavaScript the page simply renders complete. Open the live page →

Results

What the build has to hit.

1 file

HTML, CSS and JS, no framework

1.4 MB

Ten-second background film

0

Hooded hackers or green code

3

Layout tiers, chosen by screen shape

Penspy Security is a concept project. The company, address, phone number and email are fictional, and the figures on the page (340+ tests, 98%) are placeholder copy rather than claims.