Zika Alert

Zika Alert Design System

A comprehensive, trauma-informed design system for public health applications. Built with accessibility, clarity, and user safety at its core.

Design Foundations

Colors

5 carefully crafted color palettes with 50 total tokens for consistent, accessible design.

Typography

12 responsive typography roles using clamp() for fluid scaling across all devices.

Headline

Body Text

Caption

Layout

Responsive grid system with semantic utilities for consistent app structure.

Component Library

Components organized by atomic design methodology: atoms → molecules → organisms.

Building Blocks

Atoms — Foundational UI elements

View All →
Button Icon Badge Chip Input Text Textarea Select Checkbox Radio Toggle Spinner Skeleton Tooltip Surface Divider

Narrative Sections

Molecules — Composed component groups

View All →
Card Modal Toast Inline Alert Form Field Input Group Search Field Tabs Breadcrumbs List Item Nav Item Metric Card Risk Badge Tag List Toggle Row

Interface Frameworks

Organisms — Complex UI structures

View All →
App Header App Footer Docs Sidebar App Shell

More organisms coming soon: DocsLayout, ComponentShowcase, MapControlPanel, AlertCard...

Design Principles

Trauma-Informed

Prioritizes safety, trust, and clarity. Avoids aggressive colors, provides clear messaging, and maintains calm, supportive interactions.

Accessible

WCAG 2.1 AA compliant with proper contrast ratios, touch targets, keyboard navigation, and screen reader support.

Responsive

Fluid typography and layouts that adapt seamlessly from 360px mobile devices to large desktop screens.

Consistent

Semantic utilities and design tokens ensure visual consistency across all platforms and touchpoints.

Technology Stack

Tailwind CSS v3.4.18 Alpine.js v3.15.2 Laravel 12 Vite 7