TapToTalker

Overview

TapToTalker is an Augmentative and Alternative Communication (AAC) interface designed for users with speech and language differences, including those with autism, cerebral palsy, apraxia, and other conditions affecting verbal communication. The design embodies "Accessible Emotionalism"—a philosophy that combines clinical precision with warm, intuitive visual language. Each interaction is color-coded by emotional or functional intent (rose for desire, yellow for feeling, cyan for need, emerald for agency, violet for confirmation), transforming abstract communication into a tactile, emoji-driven experience that feels natural rather than clinical.

The brand voice is direct, affirming, and jargon-free. TapToTalker speaks to both users and caregivers with clarity and dignity, never patronizing. Sentences are short, action-oriented, and grounded in real communication needs: "Choose a message starter. Tap to speak. Your words matter." The interface celebrates communication as an act of agency, not accommodation. Every color choice, every touch target (minimum 48×48px), every animation (200–300ms easing) is calibrated to reduce cognitive load and maximize confidence.

Colors

The color system is rooted in semantic emotion-mapping rather than traditional brand hierarchy. Primary (cyan #06b6d4) is reserved for system actions and focus states—it signals interactivity and trust. The six message-starter cards use a pastel palette with 1px borders and soft shadows (0 10px 15px rgba with 0.1 opacity): Rose (#fff1f2 background, #fecdd3 border, #831843 text) for desire and affection; Yellow (#fffbeb, #fef08a, #78350f) for feelings and emotions; Cyan (#ecf9ff, #a5f3fc, #082f37) for needs and requests; Emerald (#ecfdf5, #a7f3d0, #064e3b) for agency and identity; Violet (#f5f3ff, #ddd6fe, #4c1d95) for confirmation and answers. Each card's shadow uses its own hue at 0.1 opacity (e.g., rose shadow: rgba(244, 63, 94, 0.1)) to create visual cohesion. The neutral surface stack

Typography

The type system prioritizes legibility and emotional clarity across a 12-point scale. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments; Headline-lg (40px, 600 weight) anchors major sections; Headline-md (28px, 600 weight) introduces card groups; Title-lg (20px, 600 weight) labels message starters; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry instructional text; Label-md (14px, 600 weight, 0.01em tracking) and Label-sm (12px, 500 weight, 0.05em tracking) handle metadata and badges. All type uses Inter (Google Fonts) for its geometric clarity and excellent screen rendering. Line-height is set to 1.5 for body text (24px on 16px base) to maximize readability for users with dyslexia or visual processing differences. Emoji labels (e.g., "I want to") us

Layout

The page uses a fluid 12-column grid with a max-width of 1280px (80rem), centered with mx-auto. The safe-shell container applies 24px horizontal gutter (md spacing) on mobile, scaling to 32px on tablet and 48px on desktop (lg spacing). The hero section (header + progress indicator) occupies the top 80px; the main message-card grid below uses auto-rows-fr with 12px gap (sm spacing) on mobile, scaling to 24px (md spacing) on tablet and 32px on desktop. Message cards are 1 column on mobile, 2 columns on tablet (sm breakpoint), and 3–4 columns on desktop (lg breakpoint). Vertical rhythm is maintained through consistent 24px section separators (md spacing) and 40px (lg spacing) between major sections. The container max-width of 1280px ensures that even on ultra-wide displays, the interface rema

Elevation & Depth

Depth is conveyed through a four-tier shadow system that mimics soft, diffused light rather than harsh drop-shadows. Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.05)—used for subtle UI elements like badges and disabled states. Level 2 (md): 0 4px 12px rgba(0, 0, 0, 0.08)—applied to interactive elements (buttons, input fields) to signal clickability. Level 3 (lg): 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)—used for message cards and modal containers to create clear separation from the background. Level 4 (soft): 0 18px 60px rgba(0, 0, 0, 0.07)—reserved for elevated containers and c

Shapes

The shape language is "Soft-Technical"—rounded enough to feel approachable and accessible, sharp enough to maintain clarity and hierarchy. Buttons and inputs use 0.5rem (8px) border-radius (lg), creating a subtle roundness that feels modern without being bubbly. Message cards use the same 8px radius to create visual consistency across interactive surfaces. Progress bars and badges use 9999px (full) for a pill-shaped appearance, signaling completion and metadata. The 8px radius is chosen because it's large enough to soften the interface for users with motor control challenges (reducing the cogn

Components

Action Elements Buttons come in two primary variants: primary (cyan background #06b6d4, white text, 48px height, 24px horizontal padding) and secondary (transparent background, slate text, 1px border #cbd5e1). Both use label-md typography (14px, 600 weight) and 8px border-radius. On hover, primary buttons darken to #0891b2 and gain a 4px shadow (0 4px 12px rgba(6, 182, 212, 0.3)); secondary buttons shift to surface-container-high background. Focus states apply a 4px ring of primary-fixed at 50% opacity (rgba(165, 243, 252, 0.5)). Icon buttons (48×48px, full border-radius) use white background with 1px slate border and sm shadow; on hover, they shift to surface-container-high and md shadow. All buttons use transition: all 150ms ease-out for smooth state changes.

Message Cards & Con

Do's and Don'ts

**Do**

• Do use the six semantic colors (rose, yellow, cyan, emerald, violet) consistently for message categories—users will learn the color-to-intent mapping within 2–3 interactions.
• Do maintain minimum 48×48px touch targets for all interactive elements; users with motor control differences require larger hit areas.
• Do apply 150–300ms transitions (ease-out) on all state changes; abrupt visual shifts can be disorienting for users with vestibular or attention differences.
• Do use emoji as primary visual anchors alongside text labels; emoji provides instant, language-agnostic communication cues.
• Do test all color combinations for 4.5:1 contrast ratio (WCAG AA) or higher; many AAC users have visual processing or color-blindness considerations.
• Do use Inter font exclusively; its geometric clarity and screen rendering are optimized for users with dyslexia and visual processing differences.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use #172033 for text and #f5f7fb for surfaces to reduce eye strain.
• Don't apply animations longer than 300ms or use easing functions like ease-in-out that feel sluggish; users may perceive slow animations as system lag.
• Don't mix semantic colors across categories (e.g., using rose for a need-based message); the color-to-intent mapping is a core accessibility feature.
• Don't reduce touch target sizes below 48×48px, even for secondary actions; this violates WCAG 2.5.5 (Target Size) and excludes users with motor control differences.
• Don't use color alone to convey meaning; always pair color with text labels, icons, or emoji to support users with color blindness.
• Don't apply box-shadow values larger than 0 18px 60px rgba(0, 0, 0, 0.07); excessive shadows create visual noise and can trigger sensory overload.