Change.org Brand Design System Deep Dive

1. Brand Overview

Change.org exists in a space that’s both civic and emotional: it’s a platform for petitions, activism, and social cause visibility. The design language walks a fine line between seriousness (to convey credibility) and accessibility (to encourage participation).

The first impression is lean and purposeful. No heavy skeuomorphism, no decorative indulgence. The decisions here show prioritization of clarity over aesthetic complexity: solid blocks of color, clean typography, restrained shadows. That’s exactly what you want for a mission-driven platform—you’re not here to impress with visuals, you’re here to get someone to click “Sign.”

Scroll through the site and you’ll notice a hierarchy in your peripheral vision even before reading content. Blues grab attention for interactive elements, greys form subtle separators, and red surfaces highlight urgent or cause-related elements. Nothing feels like it’s fighting for attention—all colors have their place. The 8px spacing grid gives rhythm, so, even when text sizes and card shapes shift, the site feels predictable.

A lot of the brand presence comes from typography: Commissioner is the sole family used across headings, buttons, links, and captions, with weight variation and subtle tracking changes to control tone. Bold weights for calls-to-action, regular for body text, slight negative letter-spacing on large headings to make them feel tighter and more intentional.

The buttons and links are understated but clear: white or transparent backgrounds, consistent corner radii, minimal focus indicators unless necessary. No gradiented hover states; instead, the expectation is that action cues will be signaled by position and copy, not visual ornament.

Overall: straightforward, tight, designed for speed and trust. There’s a civic-but-modern personality here—open, but with just enough brand signature that you’d recognize Change.org in a screenshot without a logo.

2. Color System

2.1 Primary Colors

The semantic "primary" token is rgb(71, 113, 255) → #4771ff. A saturated, mid-bright blue with a balance between energy and professionalism. It’s used for interactive edges (borders, chips) rather than big color fills, which keeps it from feeling overpowering.

Interesting choice: they also have a deeper blue (#003cd6) and an even darker navy (#003193). These act as functional shades—links, headings—but aren’t “branded” in the same emotive way. Competitors in this space (e.g., Avaaz) lean more into saturated reds or greens for urgency; Change.org’s blue pushes associations with reliability and action rather than outrage.

2.2 Complete Palette

Color Name / Context	Hex	Role	Usage
Light Grey Background	#e5e7eb	Neutral	Box backgrounds, borders, typographic brand areas
Dark Text	#403a49	Core Text	Default text color, borders
Link Blue	#003cd6	Interaction	Links, inline actions
Primary Blue	#4771ff	Brand / CTA	Chip borders, primary UI accents
White	#ffffff	Surface	Buttons, cards
Black	#000000	Utility	Rare text/icon use
Deep Navy	#003193	Headings	Body large text, clamped lines
Alert Red	#f34e49	Functional	Badges, urgent icons
Secondary Grey	#766f81	Utility	Outlines, subtle borders
Transparent overlay grey	rgba(64,58,73,0.05) → #403a49	Hover/focus	Background overlay on hover
Accent Orange	#ffb64d	Functional	Hover/focus states within certain interactive contexts
Dim Blue	#0038bc	Hover/focus	Specific interactive contexts

2.3 Color Relationships

There’s a deliberate contrast ladder:

Body text (#403a49) on white (#ffffff) is high-contrast (meets WCAG AAA).
Links (#003cd6) vs body text are more saturated/darker—readable and clearly differentiated.
Primary blue (#4771ff) borders on white have strong visibility but might need focus outlines for accessibility since thin lines can vanish.

No dark mode tokens here. Everything reads as designed for light backgrounds.

2.4 Usage Guide

Works well:

Primary blue (#4771ff) with white background + dark text overlay → crisp and inviting.
Red (#f34e49) on light grey (#e5e7eb) → urgency without burning the eyes.

Avoid:

Alert red on deep navy—low contrast and odd emotional signal.
Pure black (#000000) for body text—it breaks the established text color’s softer tone.

3. Typography

3.1 Font Families

Single font system:

"Commissioner", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

No Google Fonts call recorded; likely self-hosted or preloaded via CSS file. No Adobe Fonts. No variable font usage.

3.2 Type Scale

Element Context	Font Family	Size	Weight	Line Height
Heading-1	Commissioner	80px (5.00rem)	700	1.10
Heading-1	Commissioner	40px (2.50rem)	700	1.20
Heading-1	Commissioner	32px (2.00rem)	400	1.25
Heading-1	Commissioner	32px (2.00rem)	700	1.25
Heading-1	Commissioner	18px (1.13rem)	700	1.33
Heading-1	Commissioner	18px (1.13rem)	500	1.33
Heading-1	Commissioner	18px (1.13rem)	400	1.33
Heading-1	Commissioner	16px (1.00rem)	400	1.50
Button	Commissioner	16px (1.00rem)	400	1.15
Link	Commissioner	16px (1.00rem)	400	1.50
Heading-1	Commissioner	16px (1.00rem)	700	1.50
Caption	Commissioner	14px (0.88rem)	700	1.71
Caption	Commissioner	14px (0.88rem)	400	1.43
Link	Commissioner	14px (0.88rem)	400	1.43
Caption	Commissioner	0px	400	NaN

That “caption” at 0px is likely an unused or placeholder token—ignore it in implementation.

3.3 Hierarchy

Big primary headings (80px, 700 weight) are rare—possibly homepage hero. The rest falls into 40px/32px ranges, giving flexibility. Body is 16px 1.5 line height—comfortable on both desktop and mobile. Captions at 14px with heavier weight are prominent labels, not subtle hints.

4. Spacing & Layout

4.1 Spacing Scale

8px grid backbone. Common values:

px	rem	Count	Notes
1px	0.06rem	38	Hairlines, borders
2px	0.13rem	3	Micro gaps
4px	0.25rem	27	Tight internal padding
8px	0.50rem	40	Base unit
10px	0.63rem	4	Odd—used in button padding
12px	0.75rem	17	Input paddings
14px	0.88rem	6	Spacing in icons/text combos
16px	1.00rem	24	Standard gaps
24px	1.50rem	3	Larger section padding
32px	2.00rem	23	Card internal spacing
40px	2.50rem	7	Hero spacing
44px	2.75rem	6	Buttons with fixed height
48px	3.00rem	4	Larger CTA buttons
60px	3.75rem	1	Section separation
93px	5.81rem	1	Unique layout spacing
112px	7.00rem	3	Hero top/bottom
120px	7.50rem	1	Large page top padding

4.2 Layout

Breakpoints:

Tablet: 768px
Desktop: 1204px

Usage suggests a fluid system with capped widths and 8px-multiple gutters.

5. Visual Elements

Border radius:

Radius	Usage
4px	badges
6px	occasional links
8px	buttons, inputs, cards
12px	rare card variant
999px	pills, avatars

Full pill usage at 999px means all circular elements follow a consistent extreme radius.

Shadows:

One consistent shadow style:

rgba(0, 0, 0, 0.05) 0px 2px 2px, rgba(58, 41, 62, 0.06) 0px 3px 19px

Light, diffuse—just enough lift for cards.

Borders:

Mostly 1px solid neutrals (#e1dde9, #e5e7eb)
Some dotted (2px) decorative lines

6. Components

6.1 Buttons

Primary Variant (white background)

Default:

Background: #ffffff
Color: #403a49
Padding: 8px 16px
Border-radius: 8px
Border: none
Font size: 16px, weight: 400

Hover:

Background: initial (no change)

Focus:

Outline: transparent 2px

Secondary Variant (transparent background with border)

Default:

Background: transparent
Color: #403a49
Padding: 10px 12px
Border-radius: 8px
Border: 1px solid #766f81
Font size: 16px, weight: 400

Hover: no visual change

6.2 Links

Two styles:

Default link (#403a49, underline)
Action link (#003cd6, no underline)

Hover states not altered—static link styling reinforces trustworthiness.

6.3 Forms

Select-one:

Background: #ffffff
Color: #403a49
Border: none
Border-radius: 0px
On focus: elevated box-shadow

6.4 Cards

Not explicitly extracted as a "Card" component, but white surfaces (#ffffff), 8px radius, light shadow above are consistent patterns.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #4771ff;
  --color-link-blue: #003cd6;
  --color-dark-text: #403a49;
  --color-light-grey: #e5e7eb;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-deep-navy: #003193;
  --color-alert-red: #f34e49;
  --color-secondary-grey: #766f81;
  --color-hover-overlay-grey: rgba(64,58,73,0.05);
  --color-accent-orange: #ffb64d;
  --color-dim-blue: #0038bc;

  /* Typography */
  --font-family-primary: "Commissioner", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1: 5rem; --font-weight-h1: 700; --line-height-h1: 1.10;
  --font-size-h2: 2.5rem; --font-weight-h2: 700; --line-height-h2: 1.20;
  --font-size-h3: 2rem; --font-weight-h3: 400; --line-height-h3: 1.25;
  --font-size-h3-bold: 2rem; --font-weight-h3-bold: 700; --line-height-h3-bold: 1.25;
  --font-size-body-large-bold: 1.13rem; --font-weight-body-large-bold: 700; --line-height-body-large-bold: 1.33;
  --font-size-body-large-medium: 1.13rem; --font-weight-body-large-medium: 500; --line-height-body-large-medium: 1.33;
  --font-size-body-large: 1.13rem; --font-weight-body-large: 400; --line-height-body-large: 1.33;
  --font-size-body: 1rem; --font-weight-body: 400; --line-height-body: 1.50;
  --font-size-button: 1rem; --font-weight-button: 400; --line-height-button: 1.15;
  --font-size-link: 1rem; --font-weight-link: 400; --line-height-link: 1.50;
  --font-size-caption-bold: 0.88rem; --font-weight-caption-bold: 700; --line-height-caption-bold: 1.71;
  --font-size-caption: 0.88rem; --font-weight-caption: 400; --line-height-caption: 1.43;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-60: 60px;
  --space-93: 93px;
  --space-112: 112px;
  --space-120: 120px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.05) 0px 2px 2px, rgba(58,41,62,0.06) 0px 3px 19px;
}

8. AI Coding Assistant Prompt

# Change.org Design System Specification

You are a Change.org design expert. Build UIs matching their visual language exactly.

## Brand Context
Change.org is a civic-focused platform using a modern, accessible design language. Colors are functional with minimal ornamentation. Typography is clean and consistent, spacing follows an 8px grid.

## Color Palette
- Primary Blue: #4771ff — Chip borders, primary UI accents
- Link Blue: #003cd6 — Inline links and action text
- Dark Text: #403a49 — Body text
- Light Grey: #e5e7eb — Backgrounds, borders
- White: #ffffff — Surfaces for cards/buttons
- Black: #000000 — Occasional icon use
- Deep Navy: #003193 — Large body headings
- Alert Red: #f34e49 — Urgent badges
- Secondary Grey: #766f81 — Outlines, subtle borders
- Hover Overlay Grey: rgba(64,58,73,0.05) — Hover states
- Accent Orange: #ffb64d — Hover/focus accents
- Dim Blue: #0038bc — Hover/focus state for interactive elements

## Typography
Font family: "Commissioner", ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 80px | 700 | 1.10 | Hero titles |
| H2 | 40px | 700 | 1.20 | Section titles |
| H3 | 32px | 400 | 1.25 | Sub-headlines |
| H3 Bold | 32px | 700 | 1.25 | Highlighted headings |
| Body Large Bold | 18px | 700 | 1.33 | Important labels |
| Body Large Medium | 18px | 500 | 1.33 | Secondary labels |
| Body Large | 18px | 400 | 1.33 | Standard text |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 16px | 400 | 1.15 | Button labels |
| Link | 16px | 400 | 1.50 | Inline links |
| Caption Bold | 14px | 700 | 1.71 | Emphasized captions |
| Caption | 14px | 400 | 1.43 | Standard captions |

## Spacing & Grid
Base: 8px
Values: 1px, 2px, 4px, 8px, 10px, 12px, 14px, 16px, 24px, 32px, 40px, 44px, 48px, 60px, 93px, 112px, 120px
Map to components: buttons often use 8px vertical padding, larger CTAs up to 48px height.

## Border Radius
- sm: 4px — badges
- md: 8px — buttons, inputs, cards
- lg: 12px — rare larger cards
- full: 999px — pills, avatars

## Shadows & Depth
Shadow: rgba(0,0,0,0.05) 0px 2px 2px, rgba(58,41,62,0.06) 0px 3px 19px — Cards and lifted surfaces

## Components

### Primary Button
Default:
- background: #ffffff
- color: #403a49
- padding: 8px 16px
- border-radius: 8px
- border: none
- font: 16px/1.15 Commissioner, weight 400
Hover: no change
Focus: outline: 2px solid transparent
Disabled: opacity 0.5

### Secondary Button
Default:
- background: transparent
- color: #403a49
- padding: 10px 12px
- border: 1px solid #766f81
- radius: 8px
Font same as primary

### Navigation Links
- Default (#403a49, underline) or (#003cd6, no underline)
- No hover state changes

### Input Fields (Select-one)
- background: #ffffff
- text: #403a49
- border: none
- radius: 0px
- focus: elevated shadow

### Cards
- background: #ffffff
- radius: 8px
- shadow: --shadow-card
- padding: 32px typical

## Layout & Responsive Rules
Breakpoints:
- Tablet: 768px
- Desktop: 1204px
Container widths capped near these breakpoints. Gutters in 8px multiples.

## Interaction Rules
- Transition: background and border changes at 150ms ease
- Focus indicators: 2px outline or elevated shadow
- Buttons maintain text alignment center

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Use Commissioner for all text
- Keep hover changes minimal
- Use full radius pills for avatars and chip-style buttons

## DON'T List
- Don't add custom shadows
- Don't mix sharp and rounded corners in same context
- Don't use colors outside palette
- Don't add hover animation delays

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #403a49;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid transparent;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #403a49;
  padding: 10px 12px;
  border: 1px solid #766f81;
  border-radius: 8px;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 32px;
}
```

### Input
```css
.select-one {
  background: #ffffff;
  color: #403a49;
  border: none;
  border-radius: 0;
}
.select-one:focus {
  box-shadow: var(--shadow-card);
}
```

9. Summary

TL;DR
Change.org’s design system is utilitarian, precise, and accessible. It lives on an 8px grid, speaks in a single typographic voice (Commissioner), and uses functional blues and greys with rare sparks of red for urgency. Edges are clean, shadows are light, and focus stays on readability.

Brand Keywords

civic-modern
blue-functional
grid-disciplined
typography-driven

Change.org Design System: Civic-Modern UI Patterns

Brand Identity

Color Palette

Typography

Design Style

Full Analysis