Design System

SVG Pattern Library

9 reusable, seamless SVG background patterns for Justice Juice sections. Each accepts color, opacity, and className props.

Usage: add className="absolute inset-0 w-full h-full" on the parent and set it to relative overflow-hidden.

Dark

Light

PatternCircles

Community & belonging — interconnected rings

<PatternCircles color="…" opacity={0.07} />

Dark

Light

PatternHands

Empathy & welcome — open hands

<PatternHands color="…" opacity={0.07} />

Dark

Light

PatternDialogue

Conversation & exchange — speech bubble pairs

<PatternDialogue color="…" opacity={0.07} />

Dark

Light

PatternScale

Fairness & justice — balance scale

<PatternScale color="…" opacity={0.07} />

Dark

Light

PatternPaths

Collaboration & journey — converging paths

<PatternPaths color="…" opacity={0.07} />

Dark

Light

PatternLeaves

Growth, peace & hope — botanical leaves

<PatternLeaves color="…" opacity={0.07} />

Dark

Light

PatternGrid

Structure, order & education — dot grid

<PatternGrid color="…" opacity={0.07} />

Dark

Light

PatternWave

Peace & flow — calm sine waves

<PatternWave color="…" opacity={0.07} />

Dark

Light

PatternMentorship

Guidance & protection — mentor arc

<PatternMentorship color="…" opacity={0.07} />

Import

import {
  PatternCircles, PatternHands, PatternDialogue,
  PatternScale, PatternPaths, PatternLeaves,
  PatternGrid, PatternWave, PatternMentorship,
} from "@/components/shared/patterns";

// In your section:
<section className="relative overflow-hidden">
  <PatternWave color="#1a2e38" opacity={0.07} />
  <div className="relative z-10">…</div>
</section>