JusticeHub brand alignment and design system. Use for page creation, design review, component patterns, accessibility, and copy writing.
name: justicehub-brand-alignment
description: JusticeHub brand alignment and design system. Use for page creation, design review, component patterns, accessibility, and copy writing.
JusticeHub Brand Alignment
Core Philosophy
"Truth needs no filter, accessible by design"
- Direct & Uncompromising
- Evidence-Based (data-driven, research-backed)
- Accessible First (WCAG AAA)
- Community-Centered
- Revolutionary Infrastructure
Voice Rules
| DO | DON'T |
|---|
| "Australia locks up children. Communities have the cure." | "Together we can make a difference" |
| "24x Indigenous kids locked up vs non-Indigenous" | "Disproportionate representation" |
| "FIND HELP NOW" | "Learn More" |
| Blunt honesty, numbers over narratives | Soft language, charity framing |
Style Contexts
| Context | Background | Key Colors |
|---|
| Homepage/Marketing | White | Black, Red accent |
| ALMA Intelligence | Dark (#0a0f16) | Green/Orange data |
| Steward/Community | White | Green-700 accent |
| Admin/SimCity | Gray-50 | Hard shadows |
Key Classes
.container-justice /* Max-width container */
.section-padding /* py-20 */
.headline-truth /* Hero headlines */
.hero-stat /* Large mono numbers */
SimCity Shadow
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] /* hover */
Data Colors
- Success/Community: Blue (#1e40af)
- Failure/Detention: Orange (#ea580c)
File References
| Need | Reference |
|---|
| Color palette | references/colors.md |
| Components | references/components.md |
| Page templates | references/templates.md |
| Accessibility | references/accessibility.md |
| Steward styling | references/steward-styling.md |