The complete visual identity system for Forward Justice — colors, typography, spacing, logos, and components. Built for consistency across all platforms and contexts.
Three primary brand colors plus a neutral system. All values provided in HEX, RGB, and OKLCH for Tailwind 4 compatibility. Click any value to copy.
Main brand color. Used for nav bar, section backgrounds, headlines, and all primary UI elements.
High-energy accent. Used for the 'Change' word emphasis, Donate button, and key call-to-action elements.
Grounding accent. Used for the compass mark in the logo, label lines, teal underlines, and supporting CTAs.
Primary page background. Warm off-white that gives the site a gritty, editorial, slightly aged quality.
All body copy on light backgrounds. Softer than pure black for better readability.
Subtle dividers, card borders, and muted background tints. Keeps the cream palette cohesive.
Teal hover state. Used when Forest Teal needs a darker variant for interactive states.
Crimson hover/active state. Slightly darker than Crimson for interactive depth.
Lighter navy for hover states on dark backgrounds and secondary navy sections.
Four typefaces form a deliberate hierarchy. All sizes use clamp() for fluid scaling between 320px (mobile) and 1440px (desktop). No fixed px values in production code.
Serif editorial authority. Used for H1–H4. Italic variant used for the 'Change' accent word.
Warm, readable serif for all body copy. Optimized for long-form reading at comfortable sizes.
Clean geometric sans for all interface elements — nav, buttons, labels, captions.
Condensed display for large background numbers, section counters, and decorative accent text.
All headings use Libre Baskerville except H5–H6 which use DM Sans for UI contexts.
Hero headlines only. Maximum visual impact. Paired with italic 'Change' accent word.
clamp(2.8rem, 6vw, 6.5rem)Major section headings. Sets the editorial tone for each content area.
clamp(2rem, 4vw, 3.5rem)Card titles, sidebar headings, and sub-section labels within major sections.
clamp(1.4rem, 2.5vw, 2.25rem)News card titles, team member names, event titles.
clamp(1.1rem, 1.8vw, 1.5rem)Footer column headers, sidebar labels, form section titles.
clamp(0.95rem, 1.2vw, 1.125rem)Section labels, category tags, nav labels. Always uppercase.
clamp(0.65rem, 0.9vw, 0.75rem)Body, UI, and accent text roles with full clamp() specifications.
Forward Justice is a nonpartisan law, policy, and strategy center dedicated to advancing racial, social, and economic justice in the U.S. South.
Hero body copy, lead paragraphs, featured article intros.
clamp(1.05rem, 1.5vw, 1.2rem)When the South moves, the nation moves. Our work spans voting rights, criminal justice reform, economic equity, and public safety — all grounded in the lived experience of Southern communities.
Standard body copy for articles, descriptions, and card content.
clamp(0.95rem, 1.2vw, 1.05rem)Published March 15, 2026 · 5 min read
Captions, footnotes, card meta text, timestamps.
clamp(0.8rem, 1vw, 0.9rem)OUR WORK →
Buttons, navigation links, CTAs, form labels.
clamp(0.8rem, 1vw, 0.875rem)01
Large background numbers, section counters, decorative display text.
clamp(3rem, 8vw, 10rem)clamp(MIN, PREFERRED, MAX)The browser picks the PREFERRED value (a viewport-relative unit like 6vw), but never goes below MIN or above MAX. This gives you fluid type that scales proportionally across all screen sizes without breakpoint-specific overrides.
font-size: clamp(2.8rem, 6vw, 6.5rem);An 8-point base grid. All spacing values are multiples of 4px. Container padding scales with viewport width using the same responsive logic as typography.
0.25rem4pxIcon gaps, tight label spacing0.5rem8pxInternal component padding1rem16pxBase unit. Mobile container padding1.5rem24pxTablet container padding, card padding2rem32pxDesktop container padding, section gaps3rem48pxSection vertical padding (mobile)4rem64pxSection vertical padding (tablet)6rem96pxSection vertical padding (desktop)8rem128pxHero vertical paddingmax-w-[1280px]Standard page content. Used for most sections.
max-w-[1400px]Hero sections and full-bleed editorial bands.
max-w-[720px]Article body, long-form reading, forms.
The Forward Justice logo comes in two color variants (Mono and Inverted) and four configurations. Always use SVG source files for digital applications.
Light backgrounds, print, single-color applications.
Dark backgrounds, navy sections, reversed applications.
Favicon, social avatar, icon-only contexts.
Dark background icon-only contexts.
Always maintain a minimum clear space equal to the height of the "F" in the wordmark on all four sides of the logo. Never place the logo on busy photographic backgrounds without a solid color backing. Never stretch, rotate, recolor, or add drop shadows to the logo.
Core interactive components with correct color pairings and typography. These are the building blocks of all Forward Justice digital properties.
A landmark victory for voting rights in the South, expanding access to democracy for tens of thousands.
Read More →Over 55,000 North Carolinians had their voting rights restored through our Unlock Our Vote campaign.
Read More →