Design tokens, components, and content rules — the system this site is built to.
Chapter 1
Design
Colors, typography, components, spacing, iconography, and the focus + interaction patterns every template inherits. The visual system the writing system in Chapter 2 rests on.
01 / Colors
Brand Palette
Core brand color is Joe Blue (#294557). All text colors meet WCAG AAA (7:1) on their intended backgrounds.
Primary
#294557
Brand
Primary CTAs, nav, headings
#1e3444
Brand Hover
Light mode hover (darker)
12.9:1 white text — AAA ✓
#dce5ec
Brand Light
Hover fills, tag backgrounds
7.9:1 brand text — AAA ✓
#7cb8f7
Brand Blue
Dark mode primary & links
#a5d4fd
Brand Blue Hover
Dark mode hover
Text
#232323
Primary
Headings, body
15.4:1 on white
#475569
Secondary
Descriptions, meta
7.0:1 on white
#525252
Muted
Labels, captions
7.8:1 — AAA
#ffffff
On Brand
Text on dark backgrounds
10.1:1 on #294557
Dark Mode Text
#f1f5f9
Headings
H1–H6 in dark mode
14.5:1 on #0f172a
#e2e8f0
Body
Paragraphs, lists
12.8:1 on #0f172a
#a8b5c4
Muted
Descriptions, labels
8.3:1 on #0f172a
#7cb8f7
Links
Anchors, interactive
8.6:1 on #0f172a
Surfaces
#ffffff
Surface
Cards, modals
#f8fafc
Raised
CTA boxes, footers
#f7f7f7
Footer/BC
Page chrome
#0f172a
Dark Surface
Dark mode body
#1e293b
Dark Raised
Dark mode cards
Borders
#e5e7eb
Default
Cards, dividers
#d1d5db
Strong
Hover, inputs
#607888
Dark Default
Dark mode borders
#334155
Dark Subtle
Dark mode dividers
02 / Typography
Type Scale
Inter is the sole typeface. JetBrains Mono for data, stats, and code.
Primary flips to bright blue (#7cb8f7 bg + #0f172a dark text) for visibility against dark surfaces (8.55:1). Hover lightens to #a5d4fd (11.42:1). Secondary stays outlined blue. Filters: active uses bright blue fill.
04 / Components
UI Components
Standard components used across the site.
Card
Card Title
Cards use surface bg, default border, 12px radius. Hover adds shadow-md and stronger border.
Inverted Card
Brand bg cards for CTAs and hero sections.
Accordion
EAA, WCAG 2.1/2.2 (A, AA, AAA), ADA, EN 301 549, and DigiToegankelijk (NL).
Most audits take 2–4 weeks depending on site size and complexity.
Yes — monthly retainer packages include continuous scanning and quarterly reviews.
I help clients pursue compliance. I don't certify it. The line between those two sentences is where this practice's defensibility lives.
Chapter 2
Content
Voice, CTA labels, time + pricing formatting, compliance language, SEO conventions, imagery rules, claim discipline, confidentiality, and the governance loop that keeps this guide alive. The writing system the design system in Chapter 1 carries.
09 / Voice
How I sound
First-person singular, sentence case body, contractions allowed. No hedging on observations.
Pronouns
Use I, me, my, you, your. Avoid we, our, us, our team unless quoting a specific document.
✓"I'll review your information and reply within 24 hours."
✗"We'll schedule a call to discuss the proposal."Currently on /work-with-me intake modal.
✗"How we can work together"Currently a section header on /work-with-me.
Self-title
One canonical title used in <title>, <meta description>, og:title, JSON-LD Person.jobTitle, hero subhead, footer signature, LinkedIn, email signature.
→"EAA Accessibility Consultant"Practice repositioned to EU/EAA focus. Use everywhere — meta, OG, JSON-LD, hero, footer, LinkedIn.
✗"There may be a potential concern with the skip link."
✗"France is suing."Present-tense continuous without source overstates.
Adopted 2026-05-18
10 / CTA labels
Two buttons, used everywhere
Conversion CTAs collapse to two canonical labels. Nine variants currently coexist on the live site — delete on sight.
Primary CTA
→"Book a free 15-minute call"Direct booking link. No intermediate form. Used on every conversion-page hero, mid-page CTA band, footer CTA band, and blog-post footer.
Secondary CTA
→"Send project details"Opens project-brief modal form. Secondary on /work-with-me and /pdf-remediation. Not used on educational pages.
Don't use
✗"Work with me" — vague
✗"Get Started" — no specificity
✗"Get in touch" — no specificity
✗"Schedule a Call" — no duration
✗"Schedule Free Consultation" — no duration
✗"Book your free call" — case-studies variant
✗"Free Assessment" — PDF page variant
✗"Submit Request" — modal verb mismatch
✗"Contact" — bare verb
Adopted 2026-05-18
11 / Time & duration
One set of numbers, formatted one way
SLAs, free-call durations, and range formatting unified across every surface.
Response SLAs
First reply: 24 hours. Written proposal after intake: 24–48 hours. Retainer priority response: 12–24 hours.
✓"I reply within 24 hours and send written proposals within 24–48 hours."
✗Showing "24h", "12-24 hours", and "24-48 hours" on the same site without explaining the distinction.
Free call duration
15 minutes. Always.
✓"Book a free 15-minute call"
✗"free 30 minute consultation"Currently on /resources. Bug, fix on sight.
Formatting
✓Hyphen for compound adjectives modifying a noun: "15-minute call"
✓En-dash, no spaces for ranges: "24–48 hours", "5–15 hours", "2–3 weeks"
✗"24h" in body copy.Permitted in tight UI chips/badges only.
Adopted 2026-05-18
12 / Compliance language
How I write about standards, regulators, and risk
The vocabulary discipline that distinguishes a consultant from a salesperson.
Standard citation order
On first mention per page: EAA → WCAG 2.2 AA → EN 301 549. ADA Title II / Section 508 only when the engagement is explicitly US-facing — never in primary positioning copy. Abbreviate freely after first mention. WCAG 2.2 is current; cite 2.2 unless context is explicitly historical.
✓"This audit covers EAA, WCAG 2.2 AA, and EN 301 549."
✓"For your US-facing properties, the same audit covers ADA Title II." Only when client explicitly has US presence.
✗"WCAG 2.1 AA" in current body copy.Out of date on home and /blog cost post.
✗"WCAG" alone with no version number.
Claims I make
✓"WCAG 2.2 AA aligned"
✓"Conformance to EN 301 549 verified within tested scope"
✓"Remediation guidance toward EAA compliance"
✓"No critical WCAG 2.2 violations found in tested scope"
Claims I don't make
Compliance is a regulatory state determined by an authority. As a consultant I help clients pursue it. This isn't false modesty — it's the defensible representation under NL professional-services norms and US E&O exposure.
✗"WCAG-compliant" / "WCAG-certified"
✗"EAA-certified" / "EAA-compliant"
✗"100% accessible"
✗"I make you compliant"
✗"Lawsuit-proof"
Disability language
Default: person-first in B2B copy. Exception: identity-first when quoting a person or community source verbatim. Both are defensible; the community is genuinely split. Never edit a quoted source.
✓"Users with disabilities" on conversion pages and proposals.
✓"As a disabled user, I…" — quoted, identity-first preserved.
Regulatory enforcement claims
Cite a primary source or hedge the tense.
✓"France has begun filing actions under the EAA [source]."
✗"France is suing." Present-tense continuous without source.
✗"95% of websites fail basic accessibility checks" uncited.This is the WebAIM Million stat — link it inline.
Adopted 2026-05-18
13 / SEO conventions
One pattern, every page
Resolved by the Page model, not the template. Templates never write their own meta tags.
Title tag
Default pattern: {Page title} | Joe Gullo. Home is the exception — it's the most-linked URL on the site and deserves the keywords.
→"Joe Gullo — EAA Accessibility Consultant (WCAG 2.2, EN 301 549) · Leiden, NL"Home only.
✗"Home | Joe Gullo"Currently the home <title>. Wastes the most-valuable title slot on the site.
Meta description
Required per page. No page may fall through to the site default.
→Length: 140–155 characters, EN and NL.
→Resolution order: explicit seo_description → page intro excerpt (first 155 chars) → site default (forbidden on indexed pages).
✗Every blog post inheriting "Joe Gullo - Digital Accessibility Expert | EU, NL & US Compliance" — fix at the Page model level.
✗NL home meta description at 410 characters — Google truncates after ~120 on mobile.
Open Graph
→og:title matches the canonical page title — not the bare site name.
→og:description matches the page meta description — not the site default.
→og:image resolution: explicit seo_image → page hero photo → site default. 1200×630, WebP with JPG fallback.
→Blog posts: additional Article with explicit author, datePublished, dateModified.
→Person.jobTitle must equal the canonical self-title (§09).
Hreflang
✓Emit <link rel="alternate" hreflang="en|nl|x-default"> in the <head> of every page.
✗Hreflang only in the sitemap and nav, missing from the document head.
Adopted 2026-05-18
14 / Pricing format
One model. One currency display. One range syntax.
The pricing-model contradiction between the §04 demo FAQ and /work-with-me must resolve before new pricing copy ships.
Currency display
✓"€95" — no decimals on round amounts.
✓"€95 (≈ $104 USD)" — US parenthetical, shown once per page on US-targeted contexts.
✗"€95.00" — decimals on round EUR amounts.
VAT note
Required on any page that displays prices, in small text below the pricing grid.
→"All prices ex. VAT. EU B2B clients invoice under reverse-charge (BTW-id required)."
Ranges
✓"€3,500–€5,000", "5–15 hours" — en-dash, no spaces.
✗"€3.500-€5.000" — NL thousands separator + ASCII hyphen.Currently in the NL translation file.
Tier anchors
Every pricing tier shows a number. "Contact" is not a price.
✓"Custom projects from €5,000"
✗"Custom Project → Contact"Currently on /work-with-me. Lowest tier-click rate on the page.
Pricing model — pending decision
Current live model is hourly with stated typical scopes. Previous packaged model lives only in the NL translation file as orphaned strings. The §04 demo FAQ above still references packages ("Most audits take 2–4 weeks", "monthly retainer packages"). The contradiction must resolve in one direction.
ACommit to hourly: update §04 FAQ, delete NL package strings.
BRestore packages: rewrite /work-with-me to match the §04 FAQ.
Adopted 2026-05-18 · Pending: model resolution
15 / Imagery & alt text
Editorial documentary, not marketing
The voice doesn't restrict imagery — it restricts decorative imagery. Editorial photography, documentary photography, and informational screenshots are all on-brand. Stock photography, gradient illustrations, smiling-team marketing photography, AI-generated imagery, and decorative shapes are off-brand.
The reference aesthetic
Documentary editorial, in the lineage of magazine-byline portraiture and design-press book photography. Real things, real settings, ambient light, neutral palette. The image should look like it was taken by a magazine photographer, not a marketing agency.
→The Atlantic / The New Yorker — editorial portrait photography. Subject in real environment, looking past the camera, ambient light. Never staged smiles.
→Stripe Press book photography — matte, considered, single-object compositions. Detail shots of work-in-progress over heroic wides.
→37signals founder photography — founder + product + workspace, all real, no models. Slightly under-exposed, warm but not commercial.
→Pentagram case studies — documentary process photography. The work + the people doing the work + the tools they use.
→"Designed by Apple" — macro detail photography of tools, materials, surfaces.
Image inventory by section
Where each kind of image goes, and why it goes there.
→Hero — small editorial portrait (head + shoulders, looking off-camera) beside the practitioner line; vectorised signature mark under the byline; favicon-sized site marks in the receipts card.
→Pullquote — one macro detail (keyboard, screen-reader headphones, stack of printed audit reports, notebook open to WCAG SC notes). Visual punctuation, not illustration.
→Why-now / enforcement — flat schematic line-map of the EU with cited jurisdictions marked (reference: Reuters Graphics, FT visual journalism). Screenshots of public regulator decision documents with the relevant paragraph highlighted, captioned "[regulator] decision, [date], paragraph 4".
→Methodology — photograph of Joe mid-audit at his actual workstation (the workflow is the subject, not Joe). Screen-reader output screenshot (VoiceOver + NVDA side by side). Real axe-core CI output. Thumbnail of an SC enumeration table from a real audit (redacted). Macro of a printed, marked-up audit report.
→Disclosure — inline thumbnail of the joegullo.com accessibility-statement page, click-through to the full statement.
→Case studies — full-bleed product UI shots (Hour Terms dashboard / invoice / settings; Sluip cycling tracker in light + dark themes). joegullo.com case study uses screenshots of itself.
→About — wider editorial portrait from the same shoot as the home crop. Conference / speaking photos when they exist, each captioned with event + date + topic. Workspace photographs (bookshelf with visible a11y / web-standards books). One locality shot of The Hague — subtle.
→Blog — pattern A: one real-world detail photograph per post (audit notebook, screen-reader headphones, regulator letter). Pattern B: thin-line monochrome illustrations. Pick one and stay consistent. Photography reinforces shipper / practitioner; illustration reinforces thought-leader.
→Resources / tools — custom restrained line-art icons for each free tool (Phosphor / Lucide subset as starting set). Real screenshots of tool output inside the tool's own page.
→Tier 2 (this month) — half-day editorial photo shoot in The Hague (NL rate: €600–1,200). Brief: 4 portrait setups (tight crop, three-quarter at desk, candid-while-working, environmental wide); 8–10 macro details (keyboard, headphones, monitor with axe output, printed report with sticky notes, notebook, coffee, bookshelf); 2–3 locality shots. Goal: 30–40 retouched images, one consistent grade applied to all.
→Tier 2 (this month) — EU regulatory map illustration. Commission from an editorial illustrator: line-based, monochrome, schematic, no decorative flourish. €200–500, 1–2 week turnaround.
→Tier 3 (over time) — conference / speaking photos acquired as engagements happen. Blog header library built per post (pattern A: 4–6 macro details per quarter; pattern B: per-post or batch illustration). Regulator decision-document screenshots added with each citation.
Off-brand, even with the loosened standard
✗Stock photography — zero. The aesthetic gap between "your real workspace" and Adobe Stock is unbridgeable.
✗AI-generated imagery — currently identifiable at scale. Not in the brand.
✗Smiling-team-around-a-laptop photography — solo practice. There's no team. Don't fake one.
✗Gradient blobs, abstract shapes, decorative geometric patterns — not editorial.
✗Logos of WCAG, EAA, EN 301 549, or regulator logos used decoratively — text references are correct; logo use implies an endorsement relationship that doesn't exist.
Visual-system discipline
Treat the 30–40 images from the shoot as one publication.
→One photographer. One colour grade (matte, neutral, slightly warm — one LUT, applied across every image).
→One crop discipline — all portraits share the same vertical crop ratio; all detail shots share the same square ratio.
✗"Compliant by [date]" without explicit scope and named regulatory framework.
✗"Better than [named competitor]"Comparison advertising under EU rules requires substantiation; not worth the risk.
Anti-overlay stance — reusable verbatim
Use this paragraph as-is on conversion pages. Buyers who want a quick widget are bad-fit; this paragraph disqualifies them at no cost.
"I don't sell accessibility overlays. Overlays mask accessibility problems, increase legal exposure — every major US overlay lawsuit since 2019 has gone against the overlay — and degrade the experience for the users they claim to help. I fix the actual site."
AI disclosure
→AI-generated copy on the site is labeled at the post level.
→Audits using AI tools name them in the methodology section. "AI-assisted, human-verified" on first mention.
✗Auto-generated meta descriptions or alt text.Both are human-written.
Adopted 2026-05-18
17 / Confidentiality & disclosure
What I can publish about engagements
Default to anonymity. Name only with documented written permission.
Without written client permission
✓"I worked with a Dutch e-commerce retailer on EAA scope." Sector + scope only — no employee count, no revenue band.
✓"Findings included 14 critical issues across navigation and forms." Anonymized aggregate.
✗Named client.
✗Logo display.
✗Quoted internal communication.
With written client permission
Every case study must show consent provenance: "Published with permission of [client], [date]."
✓Named case study with dated consent.
✓Logo display.
✓Quoted testimonial with named attribution.
Press / journalist inbound
→Default attribution: first name + role. "Joe, an accessibility consultant in Leiden".
→Full attribution only with explicit per-quote approval.
→I don't comment on active enforcement actions or pending lawsuits.
Adopted 2026-05-18
18 / Reference
A–Z lookup for one-off decisions
Findable rules. Optimized for ctrl-F, not for reading order. Every entry derives from a decision in §09–17.
Term
Rule
Accessibility
Lowercase as common noun. Capitalize only in proper-noun contexts ("Web Accessibility Initiative").
ADA
Demoted (EAA pivot). Mention only when an engagement is explicitly US-facing. Use ADA Title II (public sector) or ADA Title III (private sector). Never in primary positioning or meta copy.
Audit
A scoped engagement with a written deliverable. "Review" is informal. Don't mix.
Compliant / Compliance
See §12. "Aligned", "conformance", "toward compliance" preferred over "compliant".
Spell out on first mention per page: "European Accessibility Act (EAA)". Abbreviate after. Primary positioning anchor — every conversion page should reference EAA in the first viewport.
EAA deadline
The relevant date is 28 June 2025 (compliance becomes enforceable). Reference the deadline when urgency is needed, but always with a verb that's accurate ("enforceable from", "begun applying from") rather than vague ("coming up").
EN 301 549
Always with space and decimal. Not "EN301549". Not "EN 301-549".
Hyphen vs en-dash
Hyphen for compound adjectives ("15-minute call"). En-dash for ranges ("24–48 hours").
Joe Gullo
First mention: Joe Gullo. Subsequent: Joe or I. Never Mr. Gullo.
Leiden
Canonical branding location. The Hague / Den Haag appear only in the privacy-policy address block.
Netherlands
Spelled out. Not Holland. NL allowed in tight UI (badges, footer chips).
Now playing / journal / moments / photos
Personal-brand surfaces. Linked from /about only, not the global footer on conversion pages.
PDF
Uppercase. PDF remediation unhyphenated.
Person-first vs identity-first
Default person-first in B2B copy. Quote identity-first verbatim from source.
Pricing display
EUR primary, no decimals on round amounts, en-dash for ranges. See §14.
Section 508
Demoted (EAA pivot). US federal context only — and only when the client has stated US public-sector need. Never in primary positioning copy.
SLA
24h first reply, 24–48h written proposal. Retainer clients: 12–24h priority. Don't show all three on the same page without context.
US clients
Welcome but not foregrounded. US-facing engagements are taken when the client has EU operations as well, or when the work is bounded (PDF remediation, VPAT). Don't lead positioning copy with US. See §12.
VAT
Note required on every pricing page. EU B2B reverse-charge phrasing.
VPAT / ACR
VPAT 2.4 on first mention; Accessibility Conformance Report (ACR) in parenthetical. US federal context.
WCAG
Always with version: WCAG 2.2 AA. Never bare WCAG in body copy.
WCAG-EM
The methodology. "WCAG-EM evaluation methodology" on first mention.
Years claim
"16 years in digital, 6 in accessibility." Never "16 years in compliance."
Last reviewed 2026-05-18 · Next review 2026-08-18
19 / Governance
How this guide stays alive
Content guides rot faster than design guides. These four rules are the only reason this one won't.
When to update
→After every audit (mine or external) that finds drift.
→Every quarter: re-read decisions, prune what's no longer true, propose new ones.
→When a copy decision is contested in writing, settle it here.
PR checklist
Every PR touching copy or template markup must answer three questions in the PR template:
1Which decision (§XX) does this implement?
2If no decision applies, propose one in the same PR and add it here.
3Update ✓/✗ examples in the relevant section if the change replaces an existing pattern.
One owner, one source
This page is canonical. No Notion fork, no Figma annotation, no parallel brand book. Anything contradicting it is wrong — including the design system in §01–08 and including the demo FAQ in §04. Conflicts resolve in favor of this section.
Versioning
Each section dates its Adopted line. When a section changes, append Revised YYYY-MM-DD rather than overwriting — the history is the audit trail.