Brand
Windsor Harlow identity system.
A two-colour identity stretched into a three-role system. The logo gives us green and blue; the teal between them is the connective tissue. Blue carries structure, teal marks anything technical, green is rationed to one point of emphasis per view.
- Display type
- Newsreader — 200 / 300
- Body type
- Archivo — 400 / 500
- Utility type
- IBM Plex Mono — 400
- Core colours
- Violet, Cyan, Amber on Ink / Paper
The mark
Two forms, interlocked.
Neither shape closes on its own
The mark is two hooked forms turned against each other — green reaching down and left, blue reaching up and right — each closing the gap the other leaves open. It holds at 16px and carries both brand colours without the wordmark beside it.
Monogram — violet-to-cyan gradient
Reverse — paper on ink
Single colour — ink on violet
Primary horizontal lockup — minimum width 180px. Clear space on all sides equals the monogram's cap height.
Colour
Three brand colours. Two surfaces.
Amber never exceeds 5% of a layout
R0 G121 B202
Brand blue. Primary: buttons, links, active states, eyebrows.
R31 G166 B184
Data and technical. Capability labels, stack keys, mono metadata.
R46 G216 B156
Brand green. Emphasis only: one accented word, stage numbers, lead markers. Deepens to #0A7A55 on paper.
R12 G11 B31
Dark surfaces, headlines, body text.
R243 G243 B249
Page background. Slate #4C6169 for secondary text.
Typography
Three faces, three jobs.
Newsreader · Archivo · IBM Plex Mono
Display — Newsreader 200
Systems that keep running
Display — Newsreader 300 italic accent
Senior engineers, documented handoff
Body — Archivo 400
An LLM feature is not a model problem. It is a retrieval problem, an evaluation problem, and a cost problem wearing a model's clothes. We start at the end: an evaluation set built from the questions your users actually ask.
Utility — IBM Plex Mono 400
STAGE 03 · TERRAFORM · LANGGRAPH · APEX · 6–10 WEEKS
| Role | Face | Weight | Size | Used for |
|---|---|---|---|---|
| Display XL | Newsreader | 200 | clamp(2.6rem → 5.05rem) | Page headlines. One per screen. |
| Display L | Newsreader | 300 | clamp(1.95rem → 3.05rem) | Section headings. |
| Display M | Newsreader | 300 | 1.3 → 1.66rem | Card and panel titles. |
| Body | Archivo | 400 | 16.5px / 1.62 | All running text. |
| Lede | Archivo | 400 | 1.05 → 1.24rem / 1.58 | Opening paragraphs, in Slate. |
| Label | IBM Plex Mono | 400 | 10–11px / .14em tracking | Eyebrows, metadata, data. Uppercase. |
Voice
How Windsor Harlow sounds.
Specific, plain, willing to say no
Do
- Name the failure mode before the capability. "Most AI pilots die in month two" earns the sentence that follows.
- Use numbers you can defend, and no others. No invented client counts, no fabricated satisfaction scores.
- Say what you will not do. Declining work is the most credible thing a consultancy can write.
- Write for the engineer who will inherit the system, not the executive who signs the invoice.
- Keep sentences short enough to read on a phone between meetings.
Do not
- Use "cutting-edge", "world-class", "seamless", "end-to-end", "synergy", "leverage" as a verb, or "digital transformation".
- Claim clients, logos, awards or team size that do not exist. It is the fastest way to lose an enterprise buyer who checks.
- Stack three adjectives where one specific noun works.
- Use green for large fills, or more than one emphasis per headline. It is a highlighter, not a background.
- Introduce a fourth accent colour, or use the blue–green gradient on type smaller than 24px.
- Set body copy in Newsreader, or headlines in Archivo.
Application
Rules that keep it consistent.
Layout
- Hairline rules at 1px in --rule separate content. Boxes and shadows do not.
- The blue–green gradient appears as a 2px edge or an underline sweep — never as a page background or a large fill.
- Zero border radius everywhere. The system is squared by design.
- Section rhythm comes from one variable, --band. Do not hand-tune padding per section.
- Grids are asymmetric — a narrower heading column against a wider content column. Never centre long text.
Motion
- The page-load sequence is a staggered rise: eyebrow, headline lines masked upward, lede, buttons. Total under 900ms, one time only.
- One reveal on scroll, 700ms, 18px rise, easing cubic-bezier(.2,.7,.2,1). Nothing bounces.
- Ambient motion — the aurora field on dark bands and the pipeline flow in the hero — runs slow enough to read as atmosphere, 26 seconds and up per cycle. If it draws the eye, it is too fast.
- Gradient edges wipe in on hover from a single origin. Hover states shift position or draw a rule. They do not glow or scale.
- prefers-reduced-motion disables all of it. This is not optional.
Photography and imagery
- No stock photography of handshakes, glass towers or diverse teams pointing at monitors.
- Where imagery is needed, use architecture diagrams, terminal output, dashboards — artefacts of the actual work.
- Duotone in Windsor Ink and Paper if photography becomes unavoidable.
Files
Assets and production notes.
The lockup SVGs set the wordmark as live text in Newsreader with a Georgia fallback. That is correct for the website, where the webfont is loaded. Before any print, signage or third-party use, convert the text to outlines so the letterforms cannot substitute.
Favicon is a filled ink square with a claret cap rule and the reverse monogram — legible at 16px, which the full lockup is not.
