"Design system for stressed users"
A purpose-built UI component library designed to reduce cognitive overload and technostress for people navigating high-stakes legal and court processes.
People interacting with the justice system are often stressed, overwhelmed, and cognitively depleted. Standard UI patterns — dense forms, legal jargon, information overload — make things worse. Research shows cognitive overload leads to errors, abandonment, and worse outcomes for the most vulnerable users.
The Cognitive Load Reducer UI Kit provides step-by-step flows, plain language interfaces, progress tracking, and "Explain Like I'm 12" toggles — a complete design system built specifically for users under stress.
- Self-represented litigants complete tasks without overwhelm
- Parents in crisis navigate complex processes with clarity
- Courts see higher completion rates and fewer errors
- Developers ship accessible, human-centered justice tools faster
┌─────────────────────────────────────────┐
│ Cognitive Load UI Kit │
├──────────┬──────────┬───────────────────┤
│ Step │ Plain │ Progress │
│ Flows │ Language │ Tracking │
│ │ Toggle │ │
├──────────┼──────────┼───────────────────┤
│ Info │ Error │ "ELI12" │
│ Chunking│ Recovery │ Explainer │
├──────────┴──────────┴───────────────────┤
│ Accessible Component Primitives │
│ (WCAG 2.1 AA Compliant) │
├─────────────────────────────────────────┤
│ Theming + Customization Layer │
└─────────────────────────────────────────┘
| Layer | Technology |
|---|---|
| Components | React + TypeScript |
| Styling | Tailwind CSS + CSS custom properties |
| Accessibility | WCAG 2.1 AA compliant |
| Documentation | Storybook |
| Testing | Jest + React Testing Library + axe-core |
| Design Tokens | Standardized spacing, typography, color |
| Component | Description |
|---|---|
| StepFlow | Multi-step wizard with progress bar and save state |
| PlainLanguageToggle | Switch between legal language and plain English |
| ELI12 Explainer | "Explain Like I'm 12" popup for any legal term |
| ChunkedForm | Break long forms into digestible sections |
| ErrorRecovery | Friendly, non-punitive error messages with guidance |
| ProgressTracker | Visual progress through multi-step processes |
| CalmAlert | Non-alarming notifications for stressed users |
| ReadingLevelIndicator | Shows content reading level in real time |
git clone https://github.com/yourusername/cognitive-load-ui-kit.git
cd cognitive-load-ui-kit
npm install
npm run storybook- Parents under stress navigating custody processes
- Self-represented litigants completing court forms for the first time
- Elderly users interacting with court technology
- People with cognitive disabilities who need simplified interfaces
- Justice tech developers building empathetic applications
- Core component library (StepFlow, PlainLanguageToggle, ELI12)
- Storybook documentation
- WCAG 2.1 AA audit and compliance
- Design token system
- Reading level detection engine
- Anxiety-reduction animation patterns
- Dark mode / high contrast themes
We welcome contributions! See CONTRIBUTING.md for guidelines.
MIT License — See LICENSE for details.
This project is provided for informational and educational purposes only and does not constitute legal advice, legal representation, or an attorney-client relationship. No warranty is made regarding accuracy, completeness, or fitness for any particular legal matter. Always consult a licensed attorney in your jurisdiction before making legal decisions. Use of this software does not create any professional-client relationship.
I build AI-powered platforms that solve real problems. I also speak about it.
CoTrackPro · admin@cotrackpro.com
→ Hire me: AI platform development · Strategic consulting · Keynote speaking
AWS AI/Cloud/Dev Certified · UX Certified (NNg) · Certified Speaking Professional (NSA) Author of Screen to Screen Selling (McGraw Hill) · 100,000+ professionals trained