Leithon English
00 — The brand

First
Touch

A first touch is the moment that decides everything after it. Control taken at speed, under pressure, without ever looking like effort. That is the standard I hold an interface to, and this page is the spec the rest of the site is built from. Every colour, every rule and every piece of motion here is doing a job.

01 — Philosophy

Loose on the ball, precise in the box.

01
Confidence, not noise

Big type, quiet surface. The page never shouts to be interesting.

02
Warmth over polish

Warm ink, warm chalk, a joke where a joke belongs. Never corporate-sterile.

03
Show the touch

Motion earns its place by making things feel controlled. Settle, don’t slide.

02 — Voice & tone
  • First person, contractions, short sentences. Talk like a teammate.
  • Confident about the work, never self-important.
  • Football and Jamaican warmth as texture, never as costume. One image per page.
  • Numbers beat adjectives. "400ms back" over "significantly faster."
  • At most one emoji per page, and only in a human’s voice. Never in UI chrome.
  • No em dashes in prose. They flatten the rhythm. The numbered eyebrow is the one exception, because there the dash is a typographic device.
SAY

"Baller on the football field, slinging code across the stack."

DON'T SAY

"Leveraging cutting-edge solutions to drive impact at scale."

03 — Color

Never pure black, never pure white. Accents share lightness and chroma so they never fight. Target 90% ink/chalk, 8% kit, 2% gold.

Ink 900
--ft-ink-900
#0E110F
Primary surface
Ink 700
--ft-ink-700
#1A1F1C
Raised surface on ink
Ink 500
--ft-ink-500
#363E39
Hairlines, disabled
Fog
--ft-fog
#8A9490
Body text on ink
Chalk 100
--ft-chalk-100
#F5F3EC
Light surface, text on ink
Chalk 300
--ft-chalk-300
#E2DED3
Hairlines on light
Chalk 500
--ft-chalk-500
#C6C1B4
Muted text
Kit
--ft-kit
#4499D7
Primary accent, one per viewport
Gold
--ft-gold
#D89A1A
Secondary accent, used sparingly
04 — Typography

Three faces, fixed roles. Never Inter, Roboto or Arial. Never a second display face.

Ships fast, plays both ways
BRICOLAGE GROTESQUE
800 · 96px · -0.035em
Headlines only
Section headings sit here
BRICOLAGE GROTESQUE
600 · 40px · -0.025em
Body copy runs in Instrument Sans at 18px with a 1.65 line-height and never wider than 68 characters. It should read like someone talking, not like documentation.
INSTRUMENT SANS
400 · 18px · 1.65
Body, UI, nav
01 — Selected work
JETBRAINS MONO
500 · 12px · 0.16em
The eyebrow, and the fingerprint
05 — Vocabulary

Six devices, and every page on this site is assembled out of them. Nothing else gets invented. When something new is actually needed, it gets added here first.

Chalk line
1px hairlines dividing strips. Pitch markings.
02 — EYEBROW
Eyebrow
Numbered mono caption above every heading.
10
Kit number
Oversized mono numeral as an index.
Ghost Primary
Buttons
Ghost by default. One filled action per page.
Strip
Full-bleed bands. Sections never float as cards.
Arc
Quarter-circle terminator. Used once, never repeated.
06 — Motion

Slight overshoot, then settle. That is the first touch. Hover the cards to feel it.

--ft-ease-touch
cubic-bezier(.22, 1.2, .36, 1)

Anything that appears, expands, or answers a pointer. 280ms.

--ft-ease-glide
cubic-bezier(.4, 0, .2, 1)

Ambient and continuous motion: marquees, parallax. 620ms.

HOVER translateY 2-4px, never scale text · ENTRANCE 620ms max, 60ms stagger, opacity + 12px rise · REDUCED-MOTION drop transforms, keep opacity
07 — Do / Don't

The light strip proves the same vocabulary works inverted. Same lines, same eyebrows, same restraint.

DO
  • Full-bleed strips separated by hairlines
  • One accent per viewport
  • Numbers, dates and tech names in mono
  • Whitespace as the loudest element
DON'T
  • Gradient backgrounds, glassmorphism, glow
  • Rounded card with a coloured left border
  • Drop shadows for hierarchy
  • Stock illustration or emoji in UI chrome
  • More than two typefaces on screen at once
08 — Take it with you

One markdown file an AI can read.

Hand brand.md to Claude, a coding agent, or a designer and the output comes back speaking First Touch.

brand.md tokens.css