justicehub-brand-alignment

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     /* Max-width container */
.section-padding       /* py-20 */
.headline-truth        /* Hero headlines */
.hero-stat             /* Large mono numbers */

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