Style guide | Pixel Perfect Websites

01 - Logo

One mark, two weights.

The mark is a square notched out of a square, with a single orange pixel in the corner. There is one lockup and one mark, each supplied in a light and a dark version. Pick whichever version holds its contrast against the surface it sits on. Nothing else is a logo: do not add a strapline, a container, a shadow or a second colour.

Use the SVG wherever the destination will take one. It stays sharp at any size, weighs almost nothing, and can be recoloured if we ever need to. The PNGs are there for the places that still refuse an SVG - some print portals, older email tools, a few social profiles. They have transparent backgrounds, so they sit on any surface, but they are fixed-resolution: never scale one up.

Lockup, dark surfaces

The default. Header and footer everywhere.

SVG version of the lockup, dark surfaces logo PNG version of the lockup, dark surfaces logo, 2000 x 315 pixels

Lockup, light surfaces

White bands, print, and anything on paper.

SVG version of the lockup, light surfaces logo PNG version of the lockup, light surfaces logo, 2000 x 315 pixels

Mark, dark surfaces

Where the full lockup would be illegible: avatars, favicons, stamps.

SVG version of the mark, dark surfaces logo PNG version of the mark, dark surfaces logo, 1024 x 1024 pixels

Mark, light surfaces

The same mark, inverted. Never recolour the orange square.

SVG version of the mark, light surfaces logo PNG version of the mark, light surfaces logo, 1024 x 1024 pixels

02 - Colour

Near-black rests. White punctuates.

The site's resting state is near-black. White bands are used as emphasis rather than as a default background, which is what keeps the contrast meaningful. The accent appears only on rules, ticks, markers and the comparison handle - never as a large fill.

Ink 900

#08090A

Page background. The resting state.

Ink 700

#141619

Charcoal band, for separating sections.

Paper

#FFFFFF

Inverted bands. Punctuation, not default.

Flare

#E8501E

Accent on dark. AA at 5.19:1.

Flare ink

#C1400F

Accent on light. AA at 5.22:1.

Text secondary

rgba(244,245,245,.66)

Body copy on dark bands.

Why two oranges

#E8501E reaches 5.19:1 against near-black, which passes WCAG AA for body text. The same orange on white manages only 3.77:1, which fails. Small text on light bands therefore uses #C1400F at 5.22:1. Use --flare on dark surfaces and --flare-ink on light ones.

03 - Typography

Two families, three voices.

Archivo is the display and interface face. It carries a width axis, so headlines are set at 116% width and 640 weight with tight negative tracking, while labels and buttons use the same file at normal width. Google Sans is the reading face for body copy and pull quotes. Both are self-hosted, subsetted to Latin, and licensed under the SIL Open Font Licence.

Display - Archivo, wdth 116, wght 640, tracking −0.036em

Being the best

Heading 1 - clamp(2rem, 4.05vw, 3.6rem)

What you are actually buying.

Heading 2 - clamp(1.75rem, 3.3vw, 2.9rem)

Most deals are lost before anyone speaks to you.

Heading 3 - clamp(1.2rem, 1.7vw, 1.55rem)

We are a good fit when

Deck - Google Sans, clamp(1.02rem, …, 1.22rem)

Pixel Perfect Websites designs, builds and grows the websites of organisations that intend to win their category.

Body - Google Sans 400, line-height 1.68, max 62ch

A buyer forms a judgement about your organisation in a few seconds, on a screen, usually months before a salesperson is involved. That judgement is comparative, and it is made on evidence. Bold marks the sentence that matters.

Meta label - Archivo 600, 0.7rem, tracking 0.16em, uppercase

Sector · Strategy · Design · Build

Footnote - 0.7rem, muted

Figures measured over a stated window. Anything indicative is marked as such.

The one rule worth keeping

Headings are set in a single face at a single weight. There is no italic, no mixed-family emphasis and no colour change inside a headline - the size and the width axis carry all the emphasis needed.

04 - Buttons and chips

Buttons, chips, and when to use them.

Buttons - rectangular, no radius, fill sweeps up on hover

Primary Ghost Small Arrow link

Chips - Google Sans 450, small size, 1px rule, no radius, sentence case

NHS
Brighton & Hove
eCommerce

Chips carry short facts about a piece of work, such as its sector and where it is. They sit under the heading they describe, never above it, one fact per chip, a word or two each. They are not links and not buttons, so they have no hover state.

No eyebrows

Headings stand on their own. There is no small uppercase label above a heading to introduce it - if the heading needs one, rewrite the heading. Two kinds of marker are allowed, because they carry information rather than decoration: sequence numbers on reference pages (the 01 - 06 on Legal and in this guide) and timings in the engagement timeline (Weeks 1-3). Facts about a piece of work go in chips beneath its heading.

05 - Space and motion

Rhythm, and how little it moves.

Spacing scale: 8px base. --s-1 (4px) through --s-10 (128px). Nothing outside the scale.
Section rhythm: --band-y, fluid from 4.5rem to 9rem.
Page margin: --gutter, fluid from 1.25rem to 4rem. Content caps at 1560px.
Radius: Zero everywhere, because a pixel has no rounded corner and the name of the company is the argument. Two exceptions: the comparison handle, which is round so it reads as grabbable, and the browser frame around the homepage screenshots, which is a picture of macOS rather than a piece of our own interface - drawn square, its traffic lights stop reading as a Mac and start reading as a mistake.
Reveal: Opacity plus an 18px rise over 0.85s. Applied to section heads and media, never to every paragraph.
Easing: cubic-bezier(0.22, 1, 0.36, 1) for entrances, 0.18s linear for hover colour.

Style guide.

One mark, two weights.

Near-black rests. White punctuates.

Two families, three voices.

Buttons, chips, and when to use them.

Rhythm, and how little it moves.