Internal design review

Design pages

Work-in-progress pages for internal review. Not for public distribution. Add feedback directly in Slack or by email.

Buy a Kit
Purchase landing page for the BikeRegister security kit. Three-tier pricing, plan toggle, testimonials, FAQ.
Ready for review
Bike Checker — v2
Accessibility-first redesign of the stolen bike checker. WCAG AA, full ARIA, mobile-first. Serial, frame ID, and plate tabs.
Ready for review
Partners
B2B brand-building page covering six partner types (insurers, retailers, cycling orgs, housing, employers, API). Includes enquiry form, integration options, testimonials, FAQ.
Ready for review
Stolen bikes
Filterable gallery with bike type, region, and date filters. Sighting report modal with full focus trap. Load more pagination. Sidebar with register prompt and tips.
Ready for review
Report stolen
Urgent-tone page for theft victims. Two paths: registered and unregistered. Inline form with validation, success state, post-report next steps, FAQ.
Ready for review
About us
Brand-building page covering origin story, police integration, values, timeline, and team. Targets press, partners, and new users verifying credibility.
Ready for review
Press
Media hub for journalists. Coverage grid, four spokespeople with topic chips, six downloadable assets, ten-row facts table with sources, company timeline, and press FAQ.
Ready for review

These markdown files define the rules every page is built from — strategy, design, copy, and technical constraints. They are the brief. Any new page should be generated using all relevant files.

PROJECT.md
Brand positioning, audiences, business goals, geographic scope
Foundation
DESIGN-SYSTEM.md
Colours, typography, spacing, components, motion, dark/light sections
Visual
ACCESSIBILITY.md
WCAG AA rules, ARIA patterns, keyboard nav, screen reader testing
Technical
PAGES.md
Every page: URL, title, meta, CTA, required sections, audience, intent
Structure
COMPONENTS.md
27 reusable UI components with markup patterns, states, and ARIA
Visual
COPY-TONE.md
Voice, tone by situation, British English rules, button labels, microcopy
Copy
MARKETING-STRATEGY.md
Ritson: segmentation, targeting, positioning, brand vs activation
Strategy
PERSUASION.md
Shotton: loss aversion, social proof, specificity, priming, concreteness
Strategy
CRO.md
Conversion rate optimisation: friction, CTAs, trust, forms, A/B testing
Strategy
SEO.md
Meta tags, schema markup, heading hierarchy, content rules, checklists
Technical
PERFORMANCE.md
LCP, CLS, INP targets, image rules, font loading, JS, mobile checklist
Technical
CONSTRAINTS.md
Hard technical rules: output format, JS, CSS, browser support, budget
Technical
CHANGELOG.md
Every iteration logged: what changed, why, and what decision was made
Process

How to add a new page

  1. 1 Ask Claude to generate the page, referencing the relevant MD files.
  2. 2 Download the HTML file and add it to your local bikeregister-pages folder.
  3. 3 Add a new card to this index.html file (or ask Claude to update it).
  4. 4 In Cloudflare Pages, click Create new deployment and drag the whole folder in.