# FIRST TOUCH · brand spec

Personal brand of **Leithon English**, Senior Software Engineer.
Single source of truth. Pass this whole file to an AI before it writes copy, UI, or slides for me.

---

## 1. Philosophy

**Loose on the ball, precise in the box.**

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 for every interface
I ship and every surface this brand appears on.

Three rules follow from it:

1. **Confidence, not noise.** Big type, quiet surface. The page never shouts to be interesting.
2. **Warmth over polish.** Warm ink, warm chalk, a joke where a joke belongs. Never corporate-sterile.
3. **Show the touch.** Motion earns its place by making things feel *controlled*. Settle, don't slide.

## 2. Voice and tone

- First person, contractions, short sentences. Talk like a teammate at the training ground.
- Confident about the work, never self-important. Credit is shared and outcomes are stated plainly.
- Football and Jamaican warmth are welcome as *texture*, never as costume. One image per page, not five.
- Numbers beat adjectives. "400ms back" over "significantly faster."
- Emoji: at most one per page, and only in the voice of a person (a wave, a ball). Never in UI chrome.
- **No em dashes in prose.** They flatten the rhythm and they are the first thing that makes
  copy read as generated. Use a full stop, a comma, or rewrite the sentence so it doesn't need
  the crutch. The numbered eyebrow (§4) is the one exception, because there the dash is a
  typographic device rather than punctuation.

**Say:** "Baller on the football field, slinging code across the stack."
**Don't say:** "Leveraging cutting-edge solutions to drive impact at scale."

## 3. Color

Never pure black, never pure white. Ink is warm-cool; chalk is warm.

| Token | Hex | Use |
| --- | --- | --- |
| `--ft-ink-900` | `#0E110F` | Primary surface, dark sections |
| `--ft-ink-700` | `#1A1F1C` | Raised surface on ink |
| `--ft-ink-500` | `#363E39` | Hairlines on ink, disabled |
| `--ft-fog` | `#8A9490` | Body text on ink |
| `--ft-chalk-100` | `#F5F3EC` | Light surface, text on ink |
| `--ft-chalk-300` | `#E2DED3` | Hairlines on light |
| `--ft-chalk-500` | `#C6C1B4` | Muted text on light |
| `--ft-kit` | `#4499D7` | Primary accent, one per viewport |
| `--ft-kit-deep` | `#1172AD` | The primary, on a chalk surface |
| `--ft-gold` | `#D89A1A` | Secondary accent, rare, for a second state |
| `--ft-gold-deep` | `#9B6000` | The secondary, on a chalk surface |

Both accents sit in a narrow lightness and chroma band, `oklch(0.66-0.73 L / 0.12-0.15 C)`,
so they never fight. The primary is the blue carried over from my resume.
**Ratio target: 90% ink/chalk, 8% kit, 2% gold.** If accent reads as a background, it's wrong.

The bright accents fail contrast on chalk, which is what the `-deep` pair is for.

## 4. Typography

- **Display: Bricolage Grotesque.** Headlines only. Tight: `-0.03em`, line-height `0.94` to `1.0`.
- **Text: Instrument Sans.** Body, UI, nav. Line-height `1.6` to `1.7`, max `68ch`.
- **Mono: JetBrains Mono.** Eyebrows, tags, metadata, code, numerals in tables.

Every section opens with an **eyebrow**: mono, 12px, uppercase, `0.16em` tracking,
prefixed with a two-digit number (`01 — SELECTED WORK`). This is the brand's fingerprint,
and it is the only place an em dash belongs.

Never: Inter, Roboto, Arial. Never a third display face. Never all-caps body copy.

## 5. Vocabulary (the primitives)

Six devices. Everything on the site is built from them, and nothing else gets invented.
When something new is actually needed, it gets added here first.

1. **Chalk line.** 1px hairline rules dividing full-width strips. Pitch markings.
2. **Eyebrow.** The numbered mono caption above every heading.
3. **Kit number.** An oversized mono numeral used as an index (`01` to `04`), kit-colored.
4. **Ghost button.** No fill, 1px border, pill radius. The filled kit button is reserved for
   the single primary action on a page.
5. **Strip.** A full-bleed horizontal band, alternating ink and chalk. Sections never float as
   cards on a page background.
6. **Arc.** A quarter-circle corner mark, the penalty-area arc, used as a section terminator and
   never repeated decoratively.

## 6. Motion

`--ft-ease-touch: cubic-bezier(0.22, 1.2, 0.36, 1)` gives a slight overshoot, then settles.
That is the *first touch*. Use it for anything that appears, expands, or responds to a pointer.
Use `--ft-ease-glide` for continuous or ambient motion such as marquees and parallax.

- Hover: translate 2–4px, never scale text.
- Entrances: 620ms maximum, staggered 60ms, opacity plus a 12px rise.
- Respect `prefers-reduced-motion`. Drop the transforms and keep the opacity.

## 7. DO / DON'T

**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.
- A rounded card with a colored left border.
- Drop shadows for hierarchy. Use hairlines and a change of surface instead.
- Stock illustration, hand-drawn SVG spot art, or emoji in UI chrome.
- More than two typefaces on screen at once.

## 8. Assets

- `brand/tokens.css` holds the CSS custom properties.
- `brand/brand.md` is this file.

Attribution appreciated, not required.