---
status: archived
created: '2026-03-16'
tags:
  - ui
  - mobile
priority: high
created_at: '2026-03-16T07:51:51.869Z'
related:
  - 005-poll-creation-management
  - 008-voting-system
  - 009-public-sharing
updated_at: '2026-03-16T09:07:18.408Z'
transitions:
  - status: archived
    at: '2026-03-16T09:07:18.408Z'
---

# Mobile-First UI Design

> **Status**: 📦 Archived · **Priority**: High · **Created**: 2026-03-16 · **Tags**: ui, mobile

## Overview

Design all UI mobile-first. The primary use case is people voting on their phones. Desktop is a secondary concern—layouts should scale up, not be shoehorned down.

## Design

### Principles

- Touch targets ≥ 44px
- Single-column layout on mobile; expand on larger screens
- Bottom navigation bar (thumb-friendly)
- Minimal chrome—content first
- System font stack for performance

### Key Screens

1. **Home / Poll list**: Cards showing poll title, status, vote count
2. **Create poll**: Simple form, large inputs, toggle for anonymity
3. **Poll detail**: Results visualization, vote buttons, participant list
4. **Profile**: Edit name, bio, tags
5. **Poll management** (owner/mod): User list, role controls, start/stop

### Navigation

- Bottom tab bar: Home, Create (+), Profile
- Poll detail accessed by tapping a poll card
- Management accessed via gear icon within poll detail

### Styling

- Tailwind CSS with mobile breakpoints as default
- Dark mode support (respects `prefers-color-scheme`)
- CSS transitions for state changes (vote submitted, poll status change)

## Plan

- [ ] Design bottom tab navigation component
- [ ] Build poll list (home) with card layout
- [ ] Build poll creation form (mobile-optimized)
- [ ] Build poll detail view with results visualization
- [ ] Build profile edit page with tag management
- [ ] Build poll management panel (users, roles, lifecycle)
- [ ] Add dark mode toggle / system preference detection
- [ ] Test on various mobile viewport sizes

## Test

- [ ] All touch targets meet 44px minimum
- [ ] Layout works on 320px–428px width (small to large phones)
- [ ] No horizontal scroll on any page
- [ ] Dark mode renders correctly
- [ ] Navigation is accessible via keyboard/screen reader