Skip to content
Civic Pulse, home
Washington Community Alliance

Design: Organize, chosen by WCA in October 2026

Brand guidelines

How Civic Pulse looks, sounds and writes. It follows Washington Community Alliance’s Data Hub brand guidelines. Every color, font and part on this page is the real one the site and its emails use, so this page can’t drift from the product.

Color

Every color has a job. Tokens are in convex/brand.ts and src/app/globals.css; use the token, never the hex.

Text, paper and lines

Most of every page. Ink is the black in WCA's wordmark.

  • Aa

    Ink

    #231f20

    Titles, body text, card outlines, the majority flag

  • Aa

    Ink 2

    #3f3b3c

    Long text, secondary lines

  • Aa

    Muted

    #5a5657

    Captions, hints, dates

  • Aa

    Paper

    #f2f5f8

    Page background

  • Aa

    White

    #ffffff

    Campaign cards, panels, fields

  • Aa

    Sunken

    #e4ecf3

    Meter tracks, stage pills, wells

  • Aa

    Line

    #d7e1ec

    Dividers and card borders

  • Aa

    Line strong

    #c5d4e2

    Field borders, empty states

Logo colors

From WCA's logo. Navy and blue carry the Organize design; mint and orange are the accents.

  • Aa

    Navy

    #004068

    Header, hero bands, staff sidebar, share cards, email header, the outer focus ring

  • Aa

    Blue

    #0769a2

    Public buttons, supporters on a meter, section numbers

  • Aa

    Teal dark

    #006c63

    Links in staff tools, supports, steps marked done

  • Aa

    Teal

    #009c90

    Charts and fills behind ink text

  • Aa

    Mint

    #84cdc7

    Mint buttons and highlights on navy, the coalition panel

  • Aa

    Mint wash

    #d4e5e2

    Progress pills, passed-a-chamber pills, explainer

  • Aa

    Orange

    #f68f3e

    Still needed on a meter, top priority, the inner focus ring

  • Aa

    Brown

    #933e1c

    Opposes, stopped bills

Navy band

The header, hero and campaign headers sit on navy. These keep panels and text readable on it.

  • Aa

    Navy panel

    #0a4f7c

    Panels on a navy band, like the countdown board

  • Aa

    Navy line

    #2b6a96

    Borders and dividers on navy

  • Aa

    Navy text

    #b5cade

    Quiet text on navy

Warm accents

From WCA's Data Hub orange row. Soft fills behind ink or brown text.

  • Aa

    Orange pale

    #fdcea8

    The light stripe in still needed

  • Aa

    Peach

    #fbb884

    Stopped bills on the standing bar

  • Aa

    Peach wash

    #fee5cf

    Top priority pills, hearing notices, view-only notes

Do

  • Use blue for public buttons and teal dark for links and staff tools.
  • Put ink text on peach, orange, teal and mint. Put white text on navy, blue, teal dark and brown.
  • Pair orange with blue or teal, the way WCA's logo does.
  • Show where a legislator stands with a word and a mark, not color alone.

Don't

  • Put blue and red next to each other anywhere outside a partisan chart.
  • Use peach, orange or mint as text on paper or white. They are too light to read.
  • Add a color that isn't on this page. Add it to convex/brand.ts with a reason first.
  • Use green for support and red for oppose. Ours are teal and brown.

Approved text pairings

  • Aa

    Body text

    14.9 to 1

  • Aa

    Captions

    6.6 to 1

  • Aa

    Hero text

    10.9 to 1

  • Aa

    Staff buttons

    6.3 to 1

  • Aa

    Public buttons

    5.9 to 1

  • Aa

    Mint buttons

    9.0 to 1

  • Aa

    Quiet text on navy

    6.4 to 1

  • Aa

    Opposes

    5.7 to 1

Type

Montserrat for everything, in three weights the way WCA uses it: Black for titles, Bold for headings, Regular for text.

Page title

Black 900, 48 to 72px, tight

Help move 14 bills in 2027

Card title

Bold 700, 22 to 24px

Fair wages for farmworkers

Section heading

Bold 700, 20 to 24px

Who’s with us

Body

Regular 400, 16 to 17px, 1.55 line height

The House committee hears this bill on Tuesday at 10am. Sign in before 9am to say you support it. You don’t have to speak.

Labels and captions

Semibold 600 or Medium 500, 13 to 14px

Step 2 of 5 on the road to law

Numbers

Black 900, tabular figures

47 / 50

Do

  • Sentence case for every heading and button.
  • Tabular figures for counts that sit in columns or change.
  • One idea per heading, under ten words.

Don't

  • Italics, anywhere. Use bold or a new sentence instead.
  • All caps for anything longer than a bill number.
  • Any other typeface, including in emails and share cards.

Page layout

Every public page follows the Organize design WCA chose: a navy band on top, cards with a 2px ink outline below, and one blue pill for the main action.

Kicker

Headline with one mint word

A sentence or two of plain lead text in navy text.

Numbered section

Home page sections are numbered in the order someone should go: the campaigns, your legislators, champions.

Do

  • Start every public page with the navy band and its curved bottom edge.
  • Number the main home page sections, in the order people should take them.
  • Use a 2px ink outline and 20px corners for cards and panels; quieter wells get no outline.
  • Give each card one blue pill button, labeled with where it goes.

Don't

  • Hard drop shadows, tilted stickers or poster colors. Those were from the Rally concept.
  • More than one mint word in a headline.
  • Two blue pill buttons side by side. Pair blue with an outline pill instead.

Building blocks

The real components from the code, from the Organize design. Staff tools use the quieter set.

Buttons

Public buttons are pills: blue for the main action, outline next to it, mint and ghost on navy. Staff tools use the square set.

Majority meter

Blue is supporters WCA has recorded, orange stripes are how many more are needed, the flag is a majority (50 of 98 in the House, 25 of 49 in the Senate). Every campaign shows both chambers. These are recorded positions, not floor votes.

House31 of 50 needed
19 to go98 members
Senate18 of 25 needed
7 to go49 members

19 more House supporters and 7 more Senate supporters needed for a majority.

House52 of 50 needed
Majority reached98 members
Senate9 of 25 needed
16 to go49 members

16 more Senate supporters needed. The House has a majority.

Pills and section numbers

Pills label a card: the bill number in ink, top priority in peach, the stage in gray or mint. Sections on the home page are numbered in blue tiles.

HB 1234Number pendingTop priorityIn committeePassed House

Campaign card

One per bill on the home page: pills, title, summary, both meters, the path, the next thing to do, and one button.

HB 1234Top priorityIn committee

Fair wages for farmworkers

Sets a minimum wage floor for agricultural work and adds overtime after 40 hours.

House31 of 50 needed
19 to go98 members
Senate18 of 25 needed
7 to go49 members

Step 2 of 5: In committee. Next: a committee vote, then the House floor.

Ask your three legislators to back it

Open the campaign for HB 1234

Where legislators stand

Always the word and the mark together. Party shows as a letter only, in ink.

SupportsOpposesUnknownDRTop priority

Bill path

Five stops from introduced to signed. Blue is done, ink with a peach ring is where the bill is now, brown means it stopped.

Fields

Label above, hint below, teal dark focus ring.

We only email you about bills you save.

Charts and data

Civic Pulse is nonpartisan. Charts compare bills, chambers and stages, not parties.

Do

  • Chart with blue, teal, orange, teal light and navy, in that order.
  • Label every bar or line with words. Don't make anyone match colors to a legend.
  • Say where numbers come from: the Legislature's record, or WCA's own count of supporters.

Don't

  • Color legislators by party on this site.
  • Use red and blue for anything, since people read them as parties.
  • Show a chart without the count it's based on.

Party colors, for reference only

For WCA Action Fund materials about parties, which carry the c4 logo. They are listed here so nobody guesses, and the build fails if Civic Pulse uses them.

  • democrat#0769a2
  • democrat (alt)#6b4c9a
  • republican#c8102e
  • republican (alt)#f16524
  • independent#fac566
  • independent (alt)#4a9a3d

Words

Write the way a good organizer talks: plain, specific and about what to do next.

The Senate committee hears SB 5123 on Tuesday at 10am. Sign in before 9am to support it.

Make your voice heard! Join the movement for justice today.

47 more House supporters needed for a majority.

We're building unstoppable momentum in Olympia.

This bill didn't pass this session. Our policy team expects it back in 2027.

Not a defeat. A beginning.

Save this bill and we'll email you when it moves.

Stay in the loop and never miss a beat.

Do

  • Aim for an eighth-grade reading level. Short sentences, common words.
  • Name bills as HB 1234: Short title. Spell out a term like "engrossed" the first time, or leave it out.
  • Use digits for numbers, and say what they count.
  • Say "Washington Community Alliance" the first time on a page, then "WCA" or "we".
  • Use the Legislature's own words for its steps: public hearing, committee vote, sign in to testify.

Don't

  • Em dashes. Use a comma, colon, period or parentheses.
  • Italics, or pairs like "Not X. Y." and "Less X, more Y."
  • Words like empower, impactful, leverage, journey, unlock, seamless or game-changing.
  • Exclamation marks, except in a thank-you after someone acts.
  • Telling people how a legislator will vote. Say what they've said or how they voted.

Email

Every email Civic Pulse sends uses one layout and these rules. Templates are React Email files in convex/emails, and the previews below are rendered from them.

From

Civic Pulse from WCA <civicpulse@notifications.backpackops.com>. Sent by Backpack through Resend for now.

When WCA has its own address

WCA can switch to an address on wacommunityalliance.org. Only the EMAIL_FROM setting changes; the templates stay the same.

Reply-to

A person on WCA's policy team, so a reply always reaches someone

Subject

What happened, then the bill: Public hearing set: HB 1234, Tue, Jan 19, 10:30 AM

Preview text

The next step: Sign in before the hearing to say you support it.

Layout

Navy hero with WCA's mark and the headline, one white card with Organize's majority bars and numbered steps, one blue pill button, WCA's logo and links in the footer

Bill alertSubject: Public hearing set: HB 1234, Tue, Jan 19, 10:30 AM
Answer to a questionSubject: Resources on HB 1234: Fair wages for farmworkers

Do

  • One main button per email, labeled with the action: Sign in to say where you stand, Open the campaign.
  • Put the date, time and place in the body in full, in Pacific time.
  • Every email has a plain-text version, rendered from the same template.
  • Alerts include a one-click unsubscribe that leaves saved bills alone.

Don't

  • Emoji or exclamation marks in subjects.
  • Sending anything to people who didn't ask for it.
  • Images that carry words. Some inboxes block them.

Automatic checks

tests/brand.test.ts runs on every build (npm run verify). It fails the build when:

  • Any page, email, script or doc has an em dash.
  • A color appears that isn't in convex/brand.ts.
  • globals.css and convex/brand.ts disagree on a color.
  • Any typeface other than Montserrat is loaded or named.
  • Party colors are used outside this page.
  • A text color on this page's approved pairings falls under 4.5:1 contrast.

Rules a machine can’t check, like reading level and tone, are reviewed by a person before anything ships.