# MRT-M06: Responsive design specifications for widget
**Area:** Mobile-Responsive Testing
**Model:** minimax/minimax-m2.5
**Tokens:** 6,583
**Cost:** $0.0066
**Time:** 3030ms
**Timestamp:** 2026-02-16T12:19:09.581750

---

# Sunaiva Talking Widget — Responsive Design Specification

**Document Version:** 1.0  
**Product:** Sunaiva Talking Widget  
**Target Users:** Australian tradie businesses (plumbers, electricians, HVAC, builders, landscapers)  
**Last Updated:** January 2025

---

## 1. Overview

This document defines the responsive design system for Sunaiva Talking Widget — the embeddable AI voice widget for tradie websites. The specification ensures consistent user experience across all device sizes, from mobile phones through to large desktop displays.

### Design Principles

- **Mobile-first:** Designs start with mobile and scale up
- **Touch-friendly:** Minimum 44px touch targets on mobile
- **Performance-conscious:** Optimized asset loading per breakpoint
- **Brand-consistent:** Maintains Sunaiva's professional but approachable voice across all viewports

### Device Targets

| Breakpoint | Width | Primary Devices |
|------------|-------|-----------------|
| xs | 320px–374px | Older smartphones, compact phones |
| sm | 375px–413px | Modern iPhone/Android |
| md | 414px–767px | Large phones, phablets |
| lg | 768px–1023px | Tablets, small laptops |
| xl | 1024px–1439px | Desktop, large tablets landscape |
| 2xl | 1440px+ | Large desktop displays |

---

## 2. Typography Scale

### Font Stack

```css
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
```

### Type Scale

| Level | Base Size (xs–md) | Base Size (lg–2xl) | Line Height | Font Weight | Use Case |
|-------|-------------------|-------------------|-------------|-------------|----------|
| display | 28px / 1.2 | 40px / 1.15 | 1.2 / 1.15 | 700 | Hero headlines |
| h1 | 24px / 1.25 | 32px / 1.2 | 1.25 / 1.2 | 700 | Page titles |
| h2 | 20px / 1.3 | 26px / 1.25 | 1.3 / 1.25 | 600 | Section headers |
| h3 | 18px / 1.35 | 22px / 1.3 | 1.35 / 1.3 | 600 | Card titles |
| body-lg | 17px / 1.6 | 18px / 1.55 | 1.6 / 1.55 | 400 | Lead paragraphs |
| body | 15px / 1.6 | 16px / 1.55 | 1.6 / 1.55 | 400 | Body text |
| body-sm | 13px / 1.5 | 14px / 1.5 | 1.5 / 1.5 | 400 | Secondary text |
| caption | 12px / 1.4 | 12px / 1.4 | 1.4 / 1.4 | 500 | Labels, captions |
| button | 15px / 1 | 15px / 1 | 1 | 600 | Button text |

### Responsive Type Implementation

```css
/* Base (xs-sm) */
html { font-size: 16px; }

/* Medium (md) */
@media (min-width: 414px) {
  html { font-size: 17px; }
}

/* Large (lg+) */
@media (min-width: 768px) {
  html { font-size: 16px; }
}

/* Extra Large (xl+) */
@media (min-width: 1024px) {
  html { font-size: 18px; }
}

/* 2X Large */
@media (min-width: 1440px) {
  html { font-size: 18px; }
}
```

### Text Truncation

| Element | Mobile | Desktop |
|---------|--------|---------|
| Headlines | 2 lines max | 3 lines max |
| Body text | 3 lines with "Read more" | Full display |
| Buttons | Full text, no truncate | Full text |

---

## 3. Spacing Scale

### Base Unit
Base unit: **4px**

### Spacing Scale

| Token | xs–md | lg–2xl | Usage |
|-------|-------|--------|-------|
| space-1 | 4px | 4px | Tight inline spacing |
| space-2 | 8px | 8px | Icon gaps, tight padding |
| space-3 | 12px | 12px | Component internal spacing |
| space-4 | 16px | 16px | Standard padding |
| space-5 | 20px | 24px | Section padding (mobile) |
| space-6 | 24px | 32px | Card padding (mobile) |
| space-7 | 32px | 40px | Section gaps (mobile) |
| space-8 | 40px | 48px | Large section spacing |
| space-9 | 48px | 64px | Hero spacing |
| space-10 | 64px | 80px | Page-level spacing |

### Component-Specific Spacing

| Component | xs–md Padding | lg–2xl Padding | Gap Between Elements |
|-----------|---------------|----------------|---------------------|
| Button (primary) | 12px 20px | 14px 28px | 12px |
| Button (secondary) | 10px 18px | 12px 24px | 12px |
| Input field | 12px 16px | 14px 20px | 16px |
| Card | 16px | 24px | 16px |
| Modal | 20px | 32px | 24px |
| Widget container | 16px | 24px | 20px |

### Grid Gutters

| Breakpoint | Container Max Width | Gutter | Columns |
|------------|---------------------|--------|---------|
| xs–sm | 100% (full width) | 16px | 4 |
| md | 100% | 20px | 4 |
| lg | 768px | 24px | 8 |
| xl | 1024px | 32px | 12 |
| 2xl | 1280px | 40px | 12 |

---

## 4. Breakpoint Specifications

### 4.1 XS Breakpoint (320px–374px)

**Viewport:** Compact smartphones  
**典型设备：** iPhone SE, older Android devices

#### Layout Structure

- Single column layout, full-width content
- Stacked elements only — no horizontal arrangements
- Fixed-position elements use full viewport width with tight margins
- Bottom navigation/widget uses 100% width, 16px horizontal padding

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | Fixed bottom-center, 56px diameter, 16px margin from edges |
| Widget panel | Slides up from bottom, 90vh max-height, full-width |
| Form inputs | Full-width, 44px minimum height |
| Buttons | Full-width, stacked vertically with 12px gap |
| Text content | Left-aligned, 16px horizontal padding |
| Images | Full-width, object-fit: cover, aspect-ratio preserved |

#### Typography Adjustments

- Display: 24px
- H1: 20px
- H2: 18px
- Body: 14px
- All text left-aligned, no justified text

#### Touch Targets

- Minimum touch target: 44px × 44px
- Button padding: 12px vertical, 16px horizontal
- Form inputs: 44px height minimum

#### Specific Constraints

- Hide non-essential decorative elements
- Collapse expanded menus to hamburger or bottom sheet
- Reduce icon sizes to 20px
- Single-line text fields only (no multi-line on mobile unless explicit)

---

### 4.2 SM Breakpoint (375px–413px)

**Viewport:** Modern standard smartphones  
**典型设备：** iPhone 13/14, Samsung Galaxy S series, Google Pixel

#### Layout Structure

- Single column, full-width with 16px side margins on content areas
- Widget trigger remains fixed-bottom, 60px diameter
- Slight increase in spacing between elements

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | Fixed bottom-center, 60px diameter, 20px margin |
| Widget panel | Slides up, 85vh max-height, 8px horizontal margin |
| Cards | Full-width with 16px horizontal margin |
| Grid items | 2-column grid for feature lists (if applicable) |
| Navigation | Collapsed to hamburger or bottom bar |

#### Typography Adjustments

- Display: 26px
- H1: 22px
- Body: 15px
- Line height remains compact for readability

#### Touch Targets

- Minimum: 44px × 44px
- Button height: 48px minimum
- Increased tap-friendly spacing between interactive elements

---

### 4.3 MD Breakpoint (414px–767px)

**Viewport:** Large smartphones, small tablets in portrait  
**典型设备：** iPhone Plus, iPhone Pro Max, iPad Mini

#### Layout Structure

- Content uses 20px horizontal padding
- Container max-width: 100%
- Widget panel can use 400px max-width centered
- 2-column grids for feature comparisons

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | 64px diameter, 24px margin from bottom |
| Widget panel | 420px max-width, centered, 16px margin from edges |
| Pricing cards | Stack vertically or 2-column if space permits |
| Feature lists | 2-column grid with 16px gap |
| Images | Maintain aspect ratio, max 100% width |

#### Typography Adjustments

- Display: 28px
- H1: 24px
- Body: 15px
- Body-sm: 13px

#### Touch Targets

- Minimum: 44px × 44px
- Increased padding on interactive elements
- Consider hover states (though limited on touch)

---

### 4.4 LG Breakpoint (768px–1023px)

**Viewport:** Tablets, small laptops  
**典型设备：** iPad, iPad Pro 11", Microsoft Surface Go, small laptops

#### Layout Structure

- Container max-width: 768px, centered
- 24px horizontal padding
- Multi-column layouts become viable
- Widget can transition from bottom-fixed to inline embed option

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | 68px diameter, 28px bottom margin, or inline placement |
| Widget panel | 500px max-width, centered, or side-panel option |
| Pricing cards | 3-column grid |
| Feature sections | 2-column layouts with image + text |
| Navigation | Horizontal nav bar, dropdown menus |
| Forms | 2-column layout for label + input |

#### Typography Adjustments

- Display: 34px
- H1: 28px
- H2: 22px
- Body: 16px
- Body-sm: 14px

#### Spacing Adjustments

- Section padding: 48px vertical
- Card padding: 24px
- Gap between elements: 24px

#### Grid System

```css
.container {
  max-width: 768px;
  padding: 0 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
```

---

### 4.5 XL Breakpoint (1024px–1439px)

**Viewport:** Standard desktop, tablets landscape  
**典型设备：** Laptop 13-15", iPad Pro 12.9" landscape, small monitors

#### Layout Structure

- Container max-width: 1024px, centered
- 32px horizontal padding
- Full multi-column layouts
- Widget supports both floating and embedded modes

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | 72px diameter, 32px bottom margin, or inline |
| Widget panel | 560px max-width, or side-panel (400px) |
| Pricing cards | 3-column with equal width |
| Feature sections | 50/50 split: text left, visual right (alternating) |
| Navigation | Full horizontal nav with mega-menu support |
| Forms | Inline labels, horizontal button groups |
| Testimonials | Horizontal carousel or grid |

#### Typography Adjustments

- Display: 38px
- H1: 32px
- H2: 26px
- H3: 22px
- Body: 16px
- Body-sm: 14px
- Caption: 12px

#### Spacing Adjustments

- Section padding: 64px vertical
- Card padding: 32px
- Gap between elements: 32px

#### Grid System

```css
.container {
  max-width: 1024px;
  padding: 0 32px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
```

---

### 4.6 2XL Breakpoint (1440px+)

**Viewport:** Large desktop displays  
**典型设备：** 27" monitors, large laptops, 4K displays

#### Layout Structure

- Container max-width: 1280px, centered
- 40px horizontal padding
- Generous whitespace, centered content column
- Widget supports all placement options

#### Component Behavior

| Component | Behavior |
|-----------|----------|
| Widget trigger button | 72px diameter, 40px bottom margin |
| Widget panel | 600px max-width, or side-panel (480px) |
| Pricing cards | 3-column with expanded content area |
| Feature sections | 50/50 with larger imagery, more text |
| Hero sections | Full-width background, centered content (max 800px) |
| Navigation | Full horizontal nav, search in header |

#### Typography Adjustments

- Display: 40px
- H1: 36px
- H2: 28px
- H3: 24px
- Body: 18px
- Body-sm: 14px
- Caption: 12px

#### Spacing Adjustments

- Section padding: 80px vertical
- Card padding: 40px
- Gap between elements: 40px
- Generous white space to frame content

#### Grid System

```css
.container {
  max-width: 1280px;
  padding: 0 40px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
```

---

## 5. Component Behavior Changes by Breakpoint

### 5.1 Widget Trigger Button

| Property | xs–sm | md | lg | xl–2xl |
|----------|-------|----|----|--------|
| Size | 56px / 60px | 64px | 68px | 72px |
| Position | Fixed bottom-center | Fixed bottom-center | Fixed or inline | Fixed or inline |
| Bottom margin | 16px / 20px | 24px | 28px | 32px / 40px |
| Icon size | 24px | 28px | 32px | 32px |
| Shadow | elevation-3 | elevation-3 | elevation-2 | elevation-2 |

### 5.2 Widget Panel/Modal

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Width | 100% (xs), 90% (sm), 420px max (md) | 500px max | 560px / 600px max |
| Height | 85-90vh | 80vh max | 700px max |
| Position | Bottom sheet, full-width | Centered modal | Centered modal |
| Border radius | 16px top corners | 16px | 20px |
| Padding | 16px | 24px | 32px |
| Backdrop | Semi-transparent black | Semi-transparent dark | Blur + dark |

### 5.3 Navigation

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Mobile | Hamburger → slide-out menu / bottom sheet | N/A | N/A |
| Desktop | N/A | Horizontal bar with dropdowns | Horizontal bar with mega-menu |
| Logo size | 100px max-width | 120px | 140px |
| Menu items | Full-width buttons, 48px height | Inline links | Inline links with spacing |

### 5.4 Pricing Cards

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Layout | Stack vertically, full-width | 3-column grid | 3-column grid |
| Card width | 100% | ~240px | ~320px |
| Features list | Scrollable if >5 items | Full display | Full display |
| CTA button | Full-width | Full-width | Full-width |
| Highlighted card | Scale 1.02, shadow | Border accent | Border + background tint |

### 5.5 Form Elements

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Input height | 48px | 48px | 52px |
| Label position | Above input | Above input | Left of input (inline) |
| Input width | 100% | 100% | Auto, min 200px |
| Button group | Stack vertically | Horizontal | Horizontal |
| Validation message | Below input | Below input | Right of input |

### 5.6 Buttons

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Primary height | 48px | 48px | 52px |
| Primary padding | 12px 20px | 14px 24px | 14px 28px |
| Secondary height | 44px | 44px | 48px |
| Icon + text gap | 8px | 10px | 12px |
| Border radius | 8px | 10px | 12px |

### 5.7 Cards (Feature, Testimonial, etc.)

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Padding | 16px | 24px | 32px |
| Border radius | 12px | 16px | 20px |
| Shadow | elevation-2 | elevation-2 | elevation-1 |
| Image height | 160px | 200px | 240px |
| Max-width | 100% | 100% | None (grid) |

### 5.8 Tables (Pricing comparison, feature matrix)

| Property | xs–md | lg | xl–2xl |
|----------|-------|----|--------|
| Display | Horizontal scroll or card view | Table or card grid | Full table |
| Cell padding | 12px | 16px | 20px |
| Sticky header | Yes | Yes | Optional |
| Row height | Auto | Auto | Auto |

---

## 6. Image Sizing & Asset Strategy

### 6.1 Responsive Image Breakpoints

| Breakpoint | Max Render Width | Recommended Source Width |
|------------|------------------|-------------------------|
| xs–sm | 374px | 748px (@2x) |
| md | 413px | 826px (@2x) |
| lg | 768px | 1536px (@2x) |
| xl | 1024px | 2048px (@2x) |
| 2xl | 1280px | 2560px (@2x) |

### 6.2 Image Sizing by Component

| Component | xs–md | lg | xl–2xl |
|-----------|-------|----|--------|
| Hero background | 100vw, object-fit: cover | 100vw | 100vw |
| Hero foreground | 100% width, max 300px | 400px | 500px |
| Feature icon | 40px | 48px | 56px |
| Card image | 100% width, 160px height | 200px height | 240px height |
| Logo (header) | 100px | 120px | 140px |
| Logo (footer) | 80px | 100px | 120px |
| Avatar/testimonial | 48px | 56px | 64px |
| CTA illustration | 200px max-width | 280px | 360px |

### 6.3 Image Formats

| Use Case | Format | Notes |
|----------|--------|-------|
| Photographs | WebP with JPEG fallback | Use srcset for responsive loading |
| Icons | SVG | Inline or sprite, not PNG |
| Logos | SVG (preferred) or PNG | Provide @1x and @2x |
| Illustrations | SVG or WebP | Animated SVGs acceptable |
| Background patterns | SVG or CSS gradient | Lightweight, tileable |

### 6.4 Lazy Loading Strategy

```html
<!-- Below-fold images -->
<img 
  src="placeholder.jpg" 
  data-src="image-400.jpg" 
  data-srcset="image-400.jpg 400w, image-800.jpg 800w"
  data-sizes="(max-width: 413px) 400px, (max-width: 767px) 800px, 1200px"
  class="lazy"
  alt="Description"
>

<!-- Above-fold hero (eager) -->
<img 
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="100vw"
  loading="eager"
  alt="Hero description"
>
```

### 6.5 Aspect Ratios

| Component | Aspect Ratio | Object Fit |
|-----------|--------------|------------|
| Card images | 16:9 | cover |
| Hero illustrations | 4:3 or 16:9 | contain |
| Avatar images | 1:1 | cover |
| Background banners | 21:9 or 16:9 | cover |
| Feature screenshots | 16:10 | contain |

---

## 7. Implementation Reference

### 7.1 CSS Custom Properties

```css
:root {
  /* Breakpoints (for reference in JS) */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 375px;
  --breakpoint-md: 414px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-2xl: 1440px;
  
  /* Container widths */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 768px;
  --container-xl: 1024px;
  --container-2xl: 1280px;
  
  /* Horizontal padding */
  --padding-x-xs: 16px;
  --padding-x-sm: 16px;
  --padding-x-md: 20px;
  --padding-x-lg: 24px;
  --padding-x-xl: 32px;
  --padding-x-2xl: 40px;
  
  /* Vertical spacing */
  --space-section-xs: 40px;
  --space-section-sm: 48px;
  --space-section-md: 56px;
  --space-section-lg: 64px;
  --space-section-xl: 80px;
  
  /* Typography */
  --font-size-display: clamp(24px, 5vw, 28px);
  --font-size-h1: clamp(20px, 4vw, 24px);
  --font-size-body: clamp(14px, 2vw, 15px);
  
  /* Component sizes */
  --button-height-sm: 44px;
  --button-height-md: 48px;
  --button-height-lg: 52px;
  --input-height: 48px;
  --touch-target-min: 44px;
  
  /* Widget specific */
  --widget-trigger-xs: 56px;
  --widget-trigger-sm: 60px;
  --widget-trigger-md: 64px;
  --widget-trigger-lg: 68px;
  --widget-trigger-xl: 72px;
}
```

### 7.2 Media Query Mixins (SCSS)

```scss
$breakpoints: (
  'xs': 320px,
  'sm': 375px,
  'md': 414px,
  'lg': 768px,
  'xl': 1024px,
  '2xl': 1440px
);

@mixin breakpoint($breakpoint) {
  $width: map-get($breakpoints, $breakpoint);
  @if $width {
    @media (min-width: $width) {
      @content;
    }
  }
}

@mixin breakpoint-max($breakpoint) {
  $width: map-get($breakpoints, $breakpoint);
  @if $width {
    @media (max-width: #{$width - 1px}) {
      @content;
    }
  }
}

// Usage examples
.card {
  padding: 16px;
  
  @include breakpoint('lg') {
    padding: 24px;
  }
  
  @include breakpoint('xl') {
    padding: 32px;
  }
}
```

### 7.3 JavaScript Breakpoint Detection

```javascript
const breakpoints = {
  xs: 320,
  sm: 375,
  md: 414,
  lg: 768,
  xl: 1024,
  xxl: 1440
};

function getCurrentBreakpoint() {
  const width = window.innerWidth;
  if (width < breakpoints.sm) return 'xs';
  if (width < breakpoints.md) return 'sm';
  if (width < breakpoints.lg) return 'md';
  if (width < breakpoints.xl) return 'lg';
  if (width < breakpoints.xxl) return 'xl';
  return '2xl';
}

// Listen for breakpoint changes
let currentBreakpoint = getCurrentBreakpoint();
window.addEventListener('resize', () => {
  const newBreakpoint = getCurrentBreakpoint();
  if (newBreakpoint !== currentBreakpoint) {
    currentBreakpoint = newBreakpoint;
    document.body.dataset.breakpoint = currentBreakpoint;
    // Trigger custom event for components that need to react
    window.dispatchEvent(new CustomEvent('breakpointChange', { 
      detail: { breakpoint: currentBreakpoint } 
    }));
  }
});
```

---

## 8. Testing Checklist

### Visual Regression Testing Points

- [ ] Widget trigger visible and tappable at all breakpoints
- [ ] Widget panel opens/closes smoothly at all sizes
- [ ] Navigation collapses and expands correctly
- [ ] Pricing cards stack/grid appropriately
- [ ] Forms remain usable and properly aligned
- [ ] Images load and display at correct sizes
- [ ] Typography remains readable and properly scaled
- [ ] Touch targets meet 44px minimum on mobile
- [ ] No horizontal scroll at any breakpoint
- [ ] All interactive elements accessible via keyboard

### Device-Specific Testing

| Device Category | Test Devices |
|-----------------|--------------|
| Small phones | iPhone SE, Pixel 4a |
| Standard phones | iPhone 13/14, Samsung S21/S22 |
| Large phones | iPhone Pro Max, Samsung Ultra |
| Tablets | iPad Mini, iPad Air, iPad Pro |
| Laptops | MacBook Air, Dell XPS 13 |
| Desktops | iMac 27", external monitors |

---

## 9. Document Control

| Version | Date | Author | Changes |
|---------|------|--------|---------|
| 1.0 | January 2025 | Sunaiva Design Team | Initial specification |

### Next Steps

1. **Design Team:** Create Figma variables and auto-layout components matching these specs
2. **Development:** Implement CSS custom properties and responsive utilities
3. **QA:** Execute testing checklist across all breakpoints
4. **Analytics:** Set up breakpoint tracking to validate user device distribution

---

*End of Specification*