Wheel The World

Overview

Wheel The World is an accessible travel platform designed to empower travelers with disabilities by connecting them with inclusive, wheelchair-friendly experiences globally. The design system embodies "Accessible Modernism"—a philosophy that prioritizes clarity, usability, and human-centered interaction without sacrificing contemporary aesthetics. The visual language combines a clean, light-dominant palette with strategic teal (#0e3e3d) and blue (#2f6fe4) accents that evoke both trust and exploration. Every interface element is crafted with intentional spacing (24px gutters, 8px unit grid), generous touch targets (48px minimum button height), and high-contrast text (on-surface #232323 against surface #ffffff at 16.5:1 WCAG AAA ratio) to ensure usability for all users, regardless of ability. The brand personality is warm, empowering, and direct—never patronizing. Voice: "Discover accessible adventures tailored to your needs. Every destination, every moment, designed for you." The UI celebrates the joy of travel while removing friction through predictable patterns, clear microcopy, and accessible color combinations (primary blue #2f6fe4 maintains 7.2:1 contrast on white backgrounds).

Colors

The color system is rooted in a light, accessible foundation with strategic accent deployment. **Primary (#2f6fe4)** is the signature action color—used exclusively on call-to-action buttons, active states, focus rings (3px rgba(47, 111, 228, 0.1) blur), and key interactive elements. It maintains WCAG AAA contrast (7.2:1) on white and passes WCAG AA on secondary-container (#d5e2fa). **Secondary (#0e3e3d, a deep teal)** anchors the brand's connection to water and accessibility—deployed on secondary buttons, badges, and supporting UI elements. Its fixed variant (#1a716e) provides a lighter, more approachable tone for container backgrounds. **Tertiary (#3182ce)** serves as a secondary accent for status indicators and supplementary CTAs. **Surface stack** progresses from #ffffff (base) through

Typography

The type system uses Lato (a humanist sans-serif from Google Fonts) across all scales, creating a cohesive, approachable voice. **Display (56px, 700 weight, -0.02em tracking)** is reserved for hero headlines and major page titles—rarely used, but when deployed, it commands attention with its generous line-height (64px) and negative letter-spacing to tighten the visual mass. **Headline-lg (36px, 600 weight)** anchors section headers and modal titles, with -0.015em tracking to maintain elegance. **Headline-md (28px, 600 weight)** breaks up content zones and card titles. **Title-lg (22px, 600 weight)** is used for subsection headers and form labels. **Body-lg (18px, 400 weight, 28px line-height)** is deployed in introductory paragraphs and prominent descriptive text—the generous line-height (

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full grid). **Spacing philosophy** is semantic and hierarchical: `md` (24px) is the default gutter between sections and card padding, `lg` (40px) separates major content zones (hero to features, features to testimonials), and `xl` (64px) is reserved for page-level margins on ultra-wide screens. The `unit` (8px) is the atomic increment—all spacing values are multiples of 8px to maintain visual rhythm. **Container max-width** of 1280px ensures readability by preventing line-length from exceeding 75 characters on body text (16px × 1280px ÷ 2 columns ≈ 320px per column at desktop). **White-space** is generous and intentional: card padding is alwa

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not darkness. **Level 1 (Base)**: No shadow; surface is #ffffff with 1px border at {colors.outline-variant} (#cccccc). **Level 2 (Standard Card)**: `box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.06)` with 1px border at {colors.outline-variant}. This soft, close shadow (1px vertical offset, 8px blur, 0px spread) creates subtle separation without visual heaviness. **Level 3 (Elevated/Hover)**: `box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1)` on card-hover and modal overlays. The increased vertical offset (4px) and blur (12px) signal interactive eleva

Shapes

The shape system follows "Soft-Technical Precision"—rounded corners are used strategically to soften the interface while maintaining clarity and hierarchy. **sm (0.125rem / 2px)**: Reserved for minimal, almost-imperceptible rounding on very small elements (e.g., inline code blocks, micro-interactions). **DEFAULT (0.375rem / 6px)**: The most-used radius for input fields, small buttons, and form controls—provides a friendly, approachable feel without appearing childish. **md (0.5rem / 8px)**: Used for list items, chips, and secondary UI elements. **lg (0.75rem / 12px)**: Applied to primary butto

Components

Action Elements **Button-primary** (#2f6fe4 background, white text, label-md typography, 12px horizontal × 12px vertical padding, 48px height, 0.75rem border-radius, 0 1px 8px 0 rgba(0,0,0,0.08) shadow) is the primary CTA—used for form submission, navigation, and key conversions. On hover, shift to #2b6cb0 with an elevated shadow (0 4px 12px 0 rgba(47, 111, 228, 0.2)) and apply `transform: translateY(-2px)` over 200ms to signal interactivity. On active/pressed, darken to #2353ab and reduce shadow to base level. **Button-secondary** (transparent background, primary text, 1px outline at {colors.outline}, same padding/height/radius) is used for secondary actions and navigation—on hover, fill with surface-container-low (#efefef) and upgrade outline to primary (#2f6fe4). Both button variant

Do's and Don'ts

**Do**

• Do use primary (#2f6fe4) exclusively for CTAs, focus states, and active navigation—never use it for passive text or backgrounds.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, list items) to meet WCAG 2.5.5 Target Size.
• Do apply 24px (md) padding to cards and 12px (sm) padding to form inputs—this spacing is non-negotiable for accessibility and visual hierarchy.
• Do use Lato at 16px (body-md) with 24px line-height for body copy—this 1.5x ratio is optimized for readability and dyslexia-friendly rendering.
• Do layer focus rings as 3px rgba(47, 111, 228, 0.1) blur around interactive elements for keyboard navigation clarity.
• Do transition all interactive state changes (hover, active, focus) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) (ease-out) for snappy, responsive feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text—use on-surface (#232323) for primary text and on-surface-variant (#575757) for secondary text to reduce eye strain.
• Don't apply shadows larger than 0 10px 24px 0 rgba(0,0,0,0.15)—excessive shadows create visual heaviness and undermine the clean, modern aesthetic.
• Don't mix border-radius values within a single component family (e.g., don't use 6px on one button and 12px on another)—consistency is critical for brand recognition.
• Don't use secondary (#0e3e3d) or tertiary (#3182ce) as primary CTAs—reserve primary (#2f6fe4) for the most important user actions to maintain visual hierarchy.
• Don't reduce button height below 48px or input height below 44px, even on mobile—these minimums are required for WCAG 2.5.5 compliance and reduce mis-taps.
• Don't apply text-shadow or text-outline to body copy—use only on label-sm when layered over images, and only at 0 1px 2px rgba(0,0,0,0.08) to maintain legibility without artifacting.