Module 07 of 07 · Design System

Design System
+ Handoff

Complete Atomic Design component inventory, CSS token specification, live component demos, accessibility checklist, and copy-paste Developer Deployment Code.

// Color Tokens

Color System

Framework: Brad Frost — Atomic Design (ATOMIC-DESIGN.md § 2.1 Atoms). Token naming convention: --roverdoc-[role]-[variant]

Design Token Layer — All colors defined as CSS custom properties · OKLCH perceptual color model
Background Base
#141820
--rd-bg
Surface
#1E2530
--rd-surface
Elevated
#252B38
--rd-elevated
Border
#2E3A4A
--rd-border
Accent Primary
#00B4D8
--rd-cyan
Accent Deep
#0077B6
--rd-cyan-dim
Text Primary
#F0F4F8
--rd-text
Text Secondary
#8A9BB0
--rd-muted
Blue / Secondary
#2D6EA8
--rd-blue-2
Success
#2ED573
--rd-green
/* ═══ MyRoverDoc Design Tokens — paste into :root ═══ */
:root {
  /* ── Backgrounds ── */
  --rd-bg:        #141820;  /* Page background */
  --rd-surface:   #1E2530;  /* Cards, panels */
  --rd-elevated:  #252B38;  /* Dropdowns, tooltips */

  /* ── Borders ── */
  --rd-border:    #2E3A4A;  /* Default border */
  --rd-border-hover: #4A6080; /* Hover state border */

  /* ── Brand Accents ── */
  --rd-cyan:      #00B4D8;  /* Primary action, links, highlights */
  --rd-cyan-dim:  #0077B6;  /* Hover state for cyan */
  --rd-blue-2:      #2D6EA8;  /* Premium/prestige signals */

  /* ── Text ── */
  --rd-text:      #F0F4F8;  /* Primary text */
  --rd-muted:     #8A9BB0;  /* Secondary/supporting text */

  /* ── Semantic ── */
  --rd-success:   #2ED573;
  --rd-warning:   #2D6EA8;
  --rd-error:     #FF4757;
  --rd-info:      #00B4D8;

  /* ── Typography ── */
  --rd-font-display: 'Barlow Condensed', sans-serif;
  --rd-font-body:    'Barlow', sans-serif;
  --rd-font-mono:    'Space Mono', monospace;

  /* ── Spacing (4px base) ── */
  --rd-space-1: 4px;   --rd-space-2: 8px;   --rd-space-3: 12px;
  --rd-space-4: 16px;  --rd-space-5: 24px;  --rd-space-6: 32px;
  --rd-space-7: 48px;  --rd-space-8: 64px;  --rd-space-9: 80px;

  /* ── Breakpoints ── */
  --rd-bp-sm:  640px;   /* Mobile landscape */
  --rd-bp-md:  768px;   /* Tablet */
  --rd-bp-lg:  1024px;  /* Desktop */
  --rd-bp-xl:  1280px;  /* Wide desktop */
  --rd-bp-2xl: 1440px;  /* Max content width */
}
// Typography Scale

Type System

Google Fonts: Barlow Condensed (display) · Barlow (body) · Space Mono (technical labels, code). Minimum 16px body — accessibility requirement.

Display / HeroBarlow Condensed 800
clamp(64px, 9vw, 130px)
RoverDoc
--rd-font-display
font-weight: 800
text-transform: uppercase
Section TitleBarlow Condensed 700
40–48px
Business Strategy
font-size: clamp(36px, 4vw, 48px)
font-weight: 700
Card TitleBarlow Condensed 700
24–28px
Air Suspension Repair
font-size: 26px
font-weight: 700
Body TextBarlow 400
15–16px · line-height 1.6
Transparent pricing — no commission-driven advisors, no franchise overhead. You pay for the repair. That's it. All estimates provided before any work begins.
font-size: 15px
line-height: 1.6
color: --rd-muted
Label / MonoSpace Mono 400
9–11px · tracking .12em
// Module 01 · Business Strategy · Former Dealership Tech
font-size: 10px
letter-spacing: 0.14em
text-transform: uppercase
// Atomic Design — Atoms (Brad Frost)

Component Library — Atoms

Framework: Brad Frost — ATOMIC-DESIGN.md § 2.1 Atoms. Live demos — all components rendered in the design system's actual CSS tokens.

Live Components — hover to see interaction states
Buttons — 4 Variants
Min touch target: 44px · Focus ring: 2px cyan outline · Cursor: pointer
Form Inputs — States
Default → Focus (cyan) → Error (red) · Inline validation on blur
Status Badges
Service Complete Parts On Order Needs Attention Scheduled
Used in: Portal service history, booking confirmations, status updates
Service Card — Hover State
Land Rover Specialist
Air Suspension
Complete diagnosis and repair for all Land Rover EAS systems.
Hover: border → cyan · translateY(-2px) · 0.25s ease
// Brad Frost — Atomic Design Methodology

Full Component Inventory

Framework: Brad Frost — "Atomic Design," 2016. ATOMIC-DESIGN.md § 2.1–2.5 — Atoms → Molecules → Organisms → Templates → Pages

01
Atoms
Basic building blocks — not further divisible
Button / Primary
Button / Secondary
Button / Ghost
Button / Danger
Input / Text
Input / Textarea
Input / File Upload
Input / Date Picker
Badge / Status
Icon / 20px
Icon / 24px
Label / Form
Divider / Horizontal
Divider / Vertical
Avatar / User
Progress Bar
Checkbox
Radio Button
Toggle Switch
Star Rating
Skeleton Loader
Spinner
Tooltip
Link
02
Molecules
Simple groups of atoms functioning together
Form Field (Label + Input + Error)
Search Bar
Nav Item (Icon + Label)
Service Chip Selector
Review Star Block
Price Comparison Row
Booking Step Indicator
Vehicle Tag (make + model)
Contact Method Block
Upload Zone
Stat Pill (value + label)
Portal Sidebar Item
03
Organisms
Complex UI sections — distinct page areas
Site Navigation (sticky)
Hero Section
Dealer vs. RoverDoc Comparison
Services Grid
Review Carousel
Stats Bar
Booking Form (4-step)
Estimate Request Form
Customer Portal Dashboard
Service History Table
Loyalty Points Block
Footer (4-col)
Model-Specific Hero
Photo Gallery / Work Documentation
Blog Post Card Grid
04–05
Templates / Pages
Page layouts with organisms assembled
Homepage Template
Service Category Page
LR Model Page (SEO)
Booking Flow Template
Customer Portal Template
About Page Template
Blog Post Template
Contact / Location Page
Parts E-Commerce Template
// Accessibility Checklist — WCAG 2.1 AA

Accessibility Requirements

WCAG 2.1 Level AA compliance required. Auto repair customers include older adults (65+) who may use screen magnification or assistive tech. Non-negotiable.

Color + Contrast
✓
Text contrast ≥ 4.5:1 — --rd-text on --rd-bg = 12.4:1 ✓
✓
Large text contrast ≥ 3:1 — --rd-muted on --rd-bg = 4.8:1 ✓
✓
Never use color alone to convey status — always pair with icon or text label
✓
Focus indicators: 2px solid --rd-cyan outline on all interactive elements
Typography + Sizing
✓
Minimum 16px body — no text below 12px anywhere (labels use 10px but are non-essential)
✓
user-scalable not disabled — remove the existing viewport restriction (SEO fix also)
✓
Line height ≥ 1.5 for all body copy — improves readability for dyslexic users
✓
Text resizable to 200% without horizontal scrolling (responsive layout)
Interactive Elements
✓
Touch targets ≥ 44×44px — all buttons, nav items, form controls, chips
✓
Full keyboard navigation — Tab, Enter, Escape, Arrow keys for all interactive UI
✓
Phone number as tel: link — fix callto: bug (also a conversion fix)
✓
Skip to main content link — first tab stop for screen reader users
Semantic HTML + ARIA
✓
Semantic HTML5 landmarks — header, nav, main, section, footer, aside
✓
All images have alt text — descriptive, include location + service type
✓
Form labels associated with inputs via htmlFor/id pairing — no placeholder-only labels
✓
ARIA live regions for booking confirmation, form success/error states, status updates
// HANDOFF-TEMPLATES.md — Developer Deployment Code

Developer Deployment Code

Framework: HANDOFF-TEMPLATES.md — Deployment Code Template. Copy this block into a new conversation with the Frontend Developer. Complete structural spec ready.

Copy-paste ready · Spec Engineer Mode output · HANDOFF-TEMPLATES.md format
Developer Deployment Code — MyRoverDoc.com Redesign
--- DEVELOPER DEPLOYMENT CODE --- You are the Developer. I am the Designer (). Here are the approved wireframes and design tokens. Implement this in Next.js 14 (App Router) + Tailwind CSS using clean, component-based code. ## Design Context Product: MyRoverDoc.com — Land Rover specialist, Readington NJ Purpose: Replace WordPress site with full-featured Next.js app Positioning: "Dealership-Trained. Independent-Priced. Honest By Design." Blueprint: Module 01–07 at /roverdoc/*.html () ## User Flow Reference (Module 04) Flow 01: Homepage → Book Service (4-step form) → Confirmation → Portal Flow 02: Homepage → Get Estimate → Email response → Booking Flow 03: Email reminder → Portal login (magic link) → Dashboard → Rebook ## Design Tokens (paste into tailwind.config.js + globals.css) See color system above (CSS custom properties). Font imports: Barlow Condensed: weights 300, 400, 600, 700, 800 Barlow: weights 300, 400, 500, 600 Space Mono: weight 400, 700 ## Component Requirements Priority 1 — Ship with v1: - StickyNav: logo | links | "Book Service" CTA (--rd-cyan button) - HeroSection: credential label + H1 + dual CTA + vehicle image + stat bar - DealerComparison: 2-col comparison block (dealer=dark, roverdoc=cyan accent) - ServicesGrid: 3-col card grid with hover states (see Module 05 WF) - ReviewCarousel: 3-up Google reviews with star rating - BookingFlow: 4-step form with vehicle select, service chips, date picker, contact - EstimateForm: 3-field + photo upload with microcopy - ContactPage: GMB embed + NAP + hours + schema markup - Footer: 4-col + social links + LocalBusiness schema JSON-LD Priority 2 — v1.1: - CustomerPortal: dashboard + service history table + loyalty points - ModelPages: 6 LR model SEO landing pages (WP template) - BlogModule: MDX-based blog with SEO metadata ## Responsive Behavior Mobile-first. Breakpoints: sm(640) md(768) lg(1024) xl(1280) 2xl(1440) Nav: sticky, hamburger on mobile (full-screen overlay) Booking form: single column on mobile, 2-col on lg+ Service grid: 1-col mobile → 2-col md → 3-col lg Portal: sidebar collapses to bottom tab bar on mobile ## SEO Requirements (Module 02 — Critical) - Remove user-scalable=0 from viewport meta IMMEDIATELY - Add LocalBusiness + AutoRepair JSON-LD schema to all pages - Fix callto: → tel: for phone number - Write unique meta descriptions for every page - Add FAQ page with FAQPage schema markup - Verify all image alt text includes location + service type ## Accessibility Checklist - All interactive elements: min 44px touch target - Full keyboard navigation (Tab, Enter, Escape) - Focus ring: 2px solid var(--rd-cyan) with 2px offset - Skip-to-main-content as first tab stop - Form labels: htmlFor/id pairs, no placeholder-only - ARIA live regions for: booking confirmation, form errors, status updates --- END DEPLOYMENT CODE ---
Handoff Note: This Deployment Code references all 7 modules of the Blueprint. Copy it into a new conversation with the Frontend Developer skill. The developer has creative freedom in implementation details but must respect all structural constraints, design tokens, accessibility requirements, and SEO fixes listed above.

Framework: HANDOFF-TEMPLATES.md — "Deployment Code is the product. The handoff spec must be copy-paste ready for the developer."