Tag
Campaign card
Card body copy with a progress meter beneath.
Style guide
Design system
Every color, type style, and component used in this template. Change a value here and it updates site-wide — all tokens live at the top of styles.css.
Color
Pine 900#0e2a22
Pine 700#17453a
Pine 500#276b58
Pine 100#d8e7e0
Ember 500#e35c2b
Ember 100#fbe3d8
Sand 100#f3ede3
Ink 900#16201b
Rule: ember is reserved for giving actions only. If everything looks urgent, nothing does.
Typography
Display / Fraunces 600
Heading 2 / Fraunces 600
Heading 3 / Fraunces 600
Lede — Public Sans 400 at a larger step, used for the sentence beneath a heading.
Body copy — Public Sans 400, 1.65 line height, capped near 68 characters for comfortable reading. Inline links stay in pine.
Eyebrow / Public Sans 700 uppercase
Buttons
Cards & progress
Plain card
Cards without media stretch to match their row.
Quote
A pull quote set in Fraunces.— Attribution
Stat block
91¢
of each dollar to programs
4,180
households served
14
days to shelf