| 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 (ONE system: refined brutalist, see /DESIGN.md)
| Context | Background | Key colours |
|---|
| Public / marketing | Off-white #F5F0E8 | Black #0A0A0A, red #DC2626 (CTAs only) |
| Inverted / hero bands | Black #0A0A0A | Off-white text, one red or emerald moment |
| Data / intelligence | Black #0A0A0A | Emerald #059669 (works), red #DC2626 (fails) |
| Steward / community | Off-white #F5F0E8 | Emerald #059669 accent |
| Admin / tooling | Off-white #F5F0E8 | Hairline borders, mono labels |
Key Classes
.container-justice
.section-padding
.headline-truth
.hero-stat
Edges & elevation
Sharp corners (radius 0 default), 1-2px solid borders, NO drop shadows by default.
The old hard offset shadow shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] is RETIRED. Use it at most once per page on a primary CTA as a deliberate constructivist accent, never as the default card treatment.
Data Colours
- Success / community / what works: Emerald
#059669 (use #047857 for emerald text on cream)
- Failure / detention: Red
#DC2626
- Always show comparison (works vs fails) side by side. One colour moment per section.
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 |
