Back to the homepage

J2 Recruitment design system

Codified, so every page after this one is cheaper.

Derived from the October 2026 brief. Bar: Egon Zehnder and Spencer Stuart for whitespace and proof, Wise for type weight and accent discipline, Jonathan Stark for first-person structure.

Colour

Ink #121210
Paper #FFFFFF
Stone #F4F1EC
Ember #F0661E
Muted #6B6660

Ember is punctuation: at most one filled element per viewport, only on a call-to-action, an active state or one highlight. Never on headings or body copy. No blue, no gradients.

Type

Display 72 / 900

Satoshi Black, letterspacing -0.035em, line-height 0.98. Mobile 44px.

Heading 40 / 900

Letterspacing -0.02em. Mobile 30px.

Body 17 / 400, line-height 1.6, measure 680px. Mobile 16px.

Label 12 / 700 / 0.12em uppercase

Satoshi from Fontshare under the ITF Free Font Licence, which permits commercial use. Chosen over Inter because the lesson's first slop marker is the default typeface.

Buttons

Pills only, radius 9999px, 48px minimum height. Primary is Ember on Ink text. Secondary is Ink on Paper, inverting on dark bands.

Logomark

J2J2J2 Recruitment

Retained from the 2011 identity, redrawn as SVG. Minimum 40px. Never recoloured, never on Ember.

Bands and spacing

Band orderPaper, Stone, Ink, Paper, Stone, Ink. Flat colours, one Ember element per band at most.
Section padding112px desktop, 72px mobile
Gutter24px desktop, 16px mobile
Content width1120px, body measure 680px
OrnamentNone. Section markers are labels. No rules, icons, shadows, gradients or motion.
CardsStone, 1px border #E6E1D9, radius 12px, 32px padding

Voice rules the design carries

PersonFirst-person singular. No "we", "our" or "team".
Signature phrasesNeed a lead-in sentence; never a bare headline.
ProofNumbers with one line of story. No capability bullet lists.
ImageryAn illustrated John Hillard character, generated in Higgsfield from the owner's reference photos, replaces photography. No stock. Generated 26 October 2026 in Higgsfield (Nano Banana Pro) from four reference photos; files in img/: john-portrait.png, john-phone.png, john-walking.png, candidates and job JSON in img/candidates/. Character brief: man in his forties, close-cropped dark hair, broad open smile with direct eye contact, navy blazer over an open-collar light-blue or small-check shirt, no tie. Flat illustration in the site palette (Ink line, Paper and Stone fills, one Ember accent), no gradients, drawn against a plain background so it sits inside the 4:5 portrait frame. Secondary scenes: at a desk on the phone, and walking in a business district.
Call-to-actionOne, "Email John", top and bottom. Nothing competes.