Emergency Hotline: Call 1-844-363-1423 (United We Dream Hotline)
ICE Encounter
Emergency

UX/UI Design System Hub

Central repository for design principles, component specifications, accessibility guidelines, and crisis-ready interface patterns for 223-page immigration advocacy platforms.

Design for Crisis, Build for Trust

Immigration advocacy platforms serve users under extraordinary psychological stress. A person facing an ICE encounter at their door, a workplace raid, or a traffic stop checkpoint experiences severely degraded cognitive capacity. Every design decision must account for this reality.

This design system provides comprehensive guidance for building crisis-ready, accessible, and trustworthy digital advocacy tools across 223+ pages and 23 specialized resource sections.

The 223-Page Challenge

Challenge Solution
Deep hierarchies 6-pillar macro-navigation + faceted taxonomy
Diverse audiences 6 specialized user journey maps
Complex legal content Progressive disclosure + citation popovers
Crisis access Offline-first PWA + precached emergency assets
Massive search corpus Pagefind static search with content weighting

Core Design Principles

1. Crisis-First Architecture

Principle Implementation
Flat navigation 1-2 clicks to critical rights
Scenario-based IA Organize by situation, not legal taxonomy
Progressive disclosure Simple first, details on demand
Just-in-time delivery Right information at the moment of need

2. Trauma-Informed Design

Based on SAMHSA principles:

  • Safety - Predictable, calming interfaces
  • Trustworthiness - Clear sourcing and attribution
  • Empowerment - User control over information depth
  • Cultural sensitivity - Multilingual, inclusive design

3. Mobile-First Performance

Constraint Target
Network Functional on 3G
Devices Older Android phones
Data plans Prepaid/limited data
Connectivity Offline-capable

Design System Components

Information Architecture

Structuring 223 pages across 23 sections using faceted taxonomy:

6-Pillar Navigation
├── Emergency Help → Red Cards, Hotlines, Rapid Response
├── Know Your Rights → Home, Workplace, Traffic, Schools
├── Legal Process → Court, Appeals, DACA/TPS, Criminal-Immigration
├── For Professionals → Attorneys, Social Workers, Faith, Healthcare
├── Tools & Data → Facilities, Flights, Mapping, Surveillance
└── Advocacy & Organizing → Coalitions, Policy, OpSec
Taxonomy Dimension Purpose
Audience General Public, Attorneys, Social Workers, Faith, Journalists, Observers
Resource Type Guide, Printable, Legal Brief, Screening Tool, Dataset, Toolkit
Urgency Level Emergency, Time-Sensitive, Preparedness, Reference
Legal Topic Deportation, DACA/TPS, Appeals, Criminal-Immigration, Asylum

Information Architecture Guide →

Mobile-First Design

Critical patterns for vulnerable populations:

Pattern Rationale
Thumb-zone navigation One-handed crisis use
56px touch targets Larger than standard for stressed users
PWA caching Offline access to rights
Data conservation Prepaid plan constraints

Mobile-First Design Guide →

Search & Discovery

At 223 pages, search transitions from secondary fallback to primary navigation:

Feature Implementation
Static search Pagefind WASM-based indexing
Content weighting Crisis content boosted (10.0 weight)
Faceted filtering Audience, Type, Urgency, Topic pills
Autocomplete High-volume crisis queries
Term normalization "la migra" → "ICE", "papers" → "documentation"

Search & Discovery Guide →

Accessibility Requirements

WCAG 2.1 AA compliance and beyond:

Requirement Standard
Color contrast 4.5:1 minimum
Focus indicators Highly visible
Screen reader Full landmark/ARIA support
Cognitive load Grade 6-8 reading level

Accessibility Guide →

Multilingual UX

Serving diverse language communities:

Pattern Implementation
Language switcher Native script labels
RTL support Full UI mirroring
Code-switching Mixed-language tolerance
Font optimization Unicode subsetting

Multilingual UX Guide →

Trust & Credibility

Building confidence in legal information:

Signal Pattern
Disclaimers Progressive disclosure
Attribution Primary source links
Timestamps "Last Updated" visibility
Verification Attorney review badges

Trust & Credibility Guide →

Audience Journeys

Six specialized user journeys serving divergent needs:

Audience Context Interface Priority
General Public (Crisis) Facing immediate enforcement Zero-click access, offline PWA, giant buttons
Immigration Attorneys Researching precedents, drafting briefs Citation popovers, copy-to-clipboard, data density
Social Workers Administering trauma assessments Interactive screening tools, privacy notices
Faith Leaders Organizing sanctuary/rapid response Action-oriented routing, batch downloads
Legal Observers Documenting field operations Offline forms, IndexedDB sync, mobile-optimized
Journalists/Researchers Analyzing enforcement data Dashboards, CSV/JSON export, methodology docs

Audience Journeys Guide →

Visual Design

Typography and hierarchy for legal content:

Element Specification
Line length 60-75 characters
Line height 1.5 minimum
Color palette Blues/greens for calm
Red usage Emergency only

Visual Design Guide →

Component Library

Reusable UI components for legal advocacy:

Component Purpose
Alert system Info/Warning/Critical levels
Resource cards Facility/legal aid display
Accordions FAQ progressive disclosure
Quick Exit Safety escape button
Legal citation popovers Inline Bluebook citations with hover details
Data tables Sticky headers, mobile card transform
Legal timelines Vertical, expandable court proceedings
Assessment forms Clinical screening with real-time scoring

Component Library →

Sitemap Architecture

Content structure for 223 pages across 6 pillars:

Level Items
Primary nav 6 macro-pillars (mega-menu on desktop)
Secondary nav Mobile accordion, sectional sidebars
Footer 4-column desktop, accordion mobile
Breadcrumbs Schema.org markup, mobile truncation
URL structure < 60 chars, subdirectory i18n

Sitemap & Navigation Guide →

Performance & Offline-First

Core Web Vitals + PWA architecture for crisis resilience:

Requirement Implementation
LCP < 2.5s Critical CSS inlining, responsive images
Offline-first Workbox service workers, precached crisis assets
Field data sync IndexedDB + Background Sync API
Build optimization 11ty incremental builds, API fetch caching
Total budget < 800KB per page on 3G

Performance Guide →

Implementation Stack

11ty Static Site Architecture

src/
├── _data/           # Global data (site.json, schema.json)
├── _includes/
│   ├── layouts/     # Base, guide, hub templates
│   └── components/  # Alert, card, accordion partials
├── resources/       # Documentation content
├── know-your-rights/ # Rights guides
├── state/           # 50 state pages
└── scss/            # Design tokens, components

Key Technologies

Technology Purpose
Eleventy (11ty) Static site generation with incremental builds
Pagefind Static WASM search with faceted filtering
Workbox PWA service workers, caching strategies
IndexedDB Offline field data storage with sync
HTML Popover API Legal citation inline display
SCSS/BEM Component styling with design tokens

Design Checklist

Before Launching Content

  • [ ] WCAG 2.1 AA compliance verified
  • [ ] Mobile thumb-zone navigation tested
  • [ ] Offline PWA caching functional
  • [ ] Reading level at Grade 6-8
  • [ ] Legal disclaimers properly placed
  • [ ] Source attribution complete
  • [ ] Multilingual content tested
  • [ ] Core Web Vitals passing

Emergency Content Specific

  • [ ] 1-tap access to critical rights
  • [ ] Quick Exit button functional
  • [ ] Emergency hotline prominent
  • [ ] Works on 3G connection
  • [ ] Offline Red Card available

Related Resources