Internal reference

Brand & Design System

Derived from the client logo. Every colour below was sampled from the artwork, not chosen from a palette.

Logo

Full lockup — hero, print, invoices, empty states

Mark only — header, favicon, avatar

⚠ CLR-062 — the logo reads “Directory 2027”. Every other source says 2026: the proposal, the brief, all 12 data workbooks, this repository and the database name. The site currently renders 2026 from config/brand.php, defaulted to the contract rather than the artwork. One .env line changes it.

Colour

Sampled from the logo by pixel area.

Navy #2A344E

61.5% of logo · Header, footer, headings, primary buttons

Orange #F16436

35.6% of logo · Brand accent — fills, icons, large text

Rust #B44637

2.2% of logo · Hover / pressed states

Contrast audit

Pair	Ratio	WCAG	Verdict
White on Navy	12.36:1	AAA	Body text, buttons, header
Navy on White	12.36:1	AAA	Body text, headings
White on Rust	5.42:1	AA	Hover states
White on Orange	3.17:1	AA large only	Buttons must be ≥17px semibold
Orange on White	3.17:1	AA large only	Never for body text
Accent-text on White	4.83:1	AA	Links and accent text at body size

The one rule that matters. The logo orange fails AA for normal text. Use --color-accent for fills, icons and large display text; use --color-accent-text (#CF3E0E) for anything at body size. .text-accent is overridden to the safe value so the utility class is always safe.

Typography

Montserrat matches the logo wordmark — geometric, wide, flat terminals, double-storey a, straight-tailed y. Inter carries body and UI text, where it is far more legible at 14–16px than a geometric display face. Both self-hosted (PRP-191).

Lithium Battery

Directory 2026

Connect - Grow - Lead

Body copy in Inter at 16px. Buyers scan supplier listings for minutes at a time — legibility at small sizes beats display personality here.

Small text, 14px — meta, table cells, helper text.

Components

✓ Verified Featured Expiring soon 🔒 Locked

Paywall block

🔒 Phone

●●●●● ●●●●●

🔒 Email

●●●●●●●●●●

Subscribe to view contact details for all suppliers

View plans

The mask is a fixed decorative pattern, never a truncation of the real value. The CTA states the benefit, not the restriction — no red, no alarm styling. A locked field is an offer, not an error.

For a non-entitled viewer the real values are absent from the HTML, not hidden with CSS.