EBS · Concept F — Blueprint Internal · 18 August 2026
trevor.marketing personal project

Design system
as built — concept F

Every token, face and interval “Blueprint” actually ships, measured off the running page. North star: a drawing set at night: cool dark sheet, hairline grid, everything set square.

Deliverable
F - Blueprint.html
Measured
18 August 2026 · computed-style probes in the preview browser
Brand
Client (EBS) · presented via trevor.marketing
Color
01

Palette, with measured contrast

All three concepts derive from the three colors sampled off the real EBS logo (blue #25468F, gray #828485, green #61BC49) — never from the old site's Elementor theme. Ratios below are measured on this concept's own grounds.

--ground #191b1c The sheet (cool dark)
--ink #eff0f0 15.14:1 Display, headings, pills
--ink-2 #a8adaf 7.62:1 Body, eyebrows
--ink-3 #878d8f 5.13:1 Captions, pagers
--line rgba(239,240,240,.13) The grid — a three-step hairline ladder (.13/.22/.34) plus a .42 dot
--sig #61bc49 7.24:1 EBS green — fills, rules and lit accents in imagery; renders as text nowhere (verified)
The green rule, verified

EBS green is 2.30:1 on light grounds and ~7.3:1 on the dark ones. On this concept that means: fills and lit accents only — it renders as text nowhere on the page. Probed live: zero elements render green text.

Type
02

Faces and roles

Rendered in the real faces (all Google Fonts, embedded in the site as woff2 subsets: 4 woff2 subsets, 153 KB (Schibsted Grotesk 400/500 · Space Mono)).

Forty lines. Two offices.
Schibsted Grotesk 40061.9px / 1.05 · −.035emH1 — quiet weight, the grid does the drama
Forty lines. Two offices.
Schibsted Grotesk 40040.3px / 1.1Section headlines
Forty lines. Two offices.
Schibsted Grotesk 40015px / 1.6Body
Forty lines. Two offices.
Space Mono · uppercase11px Eyebrows (numbered 01–05), pagers, annotations
Geometry
03

Shape, spacing, rules

  • Radius: 0px — drawing-set square, no exceptions
  • Controls: 44px minimum; pills are hairline-bordered, ink on ground
  • Grid: 2-column module: --col derived from viewport minus pads; rows clamp(120px, 13.5vh, 168px)
  • Rules: the .13/.22/.34 line ladder draws the page like a title block
Components
04

The parts, re-rendered from measured values

The concept is a single-file build, so these specimens are re-rendered here from the measured values rather than sharing its stylesheet. Every number came off the running page.

Pill Start a project
Numbered eyebrow 02  /  What we carry
Hairline ladder
Display Air is engineered
before it is felt.
Motion
05

Timing and guards

WhatMeasured
Keyframes0 — every move is JS: wipe plates, drawn rules, the magnet wall
Reveals.rv classes via IntersectionObserver; h1/h2 line-split manually
Reduced motionhandled — 2 @media blocks
Focus:focus-visible styled, 6 rules — the strongest of the three
Honesty
06

Where the build and the intent disagree

WhereWhat shipsConsequenceDebt or decision
Office cardsScript-rendered into #offGrid — empty div in HTMLNo-JS readers and crawlers get no addresses or phone numbers from that section (the closing CTA now carries both numbers)Debt — server-render
Pager labels“01 — 09” uses em dashesIndex separators, exempted from the prose dash count in the copy auditDecision
0 CSS keyframesAll motion lives in JSThe stylesheet alone doesn't describe the motion; reduced-motion guards do existDecision, noted
Measured from the shipped build, not a spec Probes: getComputedStyle + WCAG ratios in the running page 18 August 2026