Brand Kit — Placeholder

Warm enough to trust, clear enough to act on.

A community-advocacy identity for organisations that need to feel human without feeling amateur. Everything is rounded and softly lit — layered diffuse shadows, never a hard offset — and because accessibility is a stated value here, the measured contrast ratio ships alongside every colour.

Start with colour See the blocks

The palette

Contrast is a brand rule, not a checklist item. Every pairing below is measured, and the two that fail AA are labelled as decorative-only rather than quietly dropped.

01 — Colour

One anchor, one alarm, two supports

Pine anchors every action. Clay raises urgency. Sky and wheat are atmosphere — they never carry a message on their own.

Sand

#F4F0E8

Page ground. Warm and low-glare for long-form reading.

bark on sand12.5:1 AAA

Card

#FFFDF8

Raised surfaces. Off-white so it reads as paper, not screen.

bark on card13.4:1 AAA

Shell

#E9E3D6

Inset panels, stat blocks, pills, and the date chip on an event row.

bark on shell11.2:1 AAA

Bark

#2E2A25

All primary text. Warm near-black that sits comfortably on sand.

on sand12.5:1 AAA

Moss

#6B7264

Secondary copy and labels. The lightest text tone permitted.

on sand4.4:1 AA

Pine

#1F6B5C

Primary action, active nav, progress fill, stat figures, links.

white on pine6.3:1 AA

Clay

#C4562F

Urgency — deadlines, petitions closing, destructive confirmations.

white on clay4.5:1 AA

Sky

#7FA9B8

Illustration, gradients, and category pills. Decorative support only.

white on sky2.5:1 failsbark: 5.6:1

Wheat

#E8C87E

Highlights, "new" markers, and the warm end of illustration gradients.

white on wheat1.6:1 failsbark: 8.8:1

Do

Put bark on sky and wheat — both pass comfortably that way round.
Keep pine for the action and clay for the deadline attached to it.
Use sky and wheat together in gradients and illustration, where contrast is moot.

Don't

Set white on sky (2.5:1) or white on wheat (1.6:1). Both fail badly.
Use clay as a general accent — it should mean time pressure, nothing else.
Reach below moss for body text. There is no lighter approved text tone.

02 — Typography

Newsreader for the argument, Public Sans for the ask

The serif makes the case; the sans makes it actionable. Public Sans is a civic-design face, which is exactly the register this brand wants.

Display / ArgumentNewsreader 500 / 600

The bus route was cut in March. Two hundred households noticed immediately.

Headlines, campaign titles, stat figures, and donation amounts. Newsreader has an optical-size axis — it tightens automatically at display sizes, so no manual tracking.

Body / ActionPublic Sans 400 / 500 / 600

We meet the second Tuesday of every month at the library on Center Street, and the agenda goes out the Friday before. Childcare is provided. If you need a ride, say so on the form and someone will pick you up.

Body copy, buttons, form labels, navigation, pills, and every number in a table.

Pills & labelsPublic Sans 600 · .04–.08em

Housing Transit New Archived

Pills replace bordered tags throughout. Tracking stays gentle — .04em for pills, .08em for the uppercase kicker. This brand never shouts in caps.

Type scale

Role	Face	Size
Display	`News 600`	`46 / 1.14`
H1	`News 600`	`36 / 1.18`
H2	`News 600`	`28 / 1.2`
H3	`News 600`	`20 / 1.3`
Body	`Sans 400`	`16 / 1.62`
Small	`Sans 400`	`14 / 1.5`
Button	`Sans 600`	`15 / 1`
Pill	`Sans 600`	`12 / .04em`
Kicker	`Sans 600`	`12 / .08em`

Rules of thumb

If it states a problem, it's Newsreader. If it requests an action, it's Public Sans.
Body measure caps at 62 characters — this brand publishes long explanations.
Minimum body size is 16px. Never shrink copy to fit a layout.
Numbers are always tabular so donation tiers and tables align.
No all-caps headlines. Caps appear only in 12px kickers and pills.

03 — Shape & Depth

Round corners and soft, layered light

Every shadow here is two stacked layers — a tight one for contact and a wide one for ambience. A single-layer shadow always looks cheap.

Elevation

sh-1 resting

sh-2 card

sh-3 feature

Shadows are warm-tinted (rgba(46,42,37,…)), never neutral black — a grey shadow on sand reads dirty. Hover lifts one step; it never adds a new shadow style.

Radii

10 control

14 card

20 feature

999 pill

Every interactive element is a pill. Buttons, tags, nav items, and progress bars all use 999px — that single decision does most of the work of making this brand feel approachable.

04 — Components

The parts you'll reach for

Buttons

Pine is the standing primary. Clay appears only when something genuinely closes soon. Quiet is the everyday secondary and carries no shadow at rest.

Pills

Housing Closing soon Transit New Archived

Sky and wheat pills carry bark text, not white — that's the pairing that passes. Neutral shell pills handle everything that isn't a category.

Impact stats

2,140

Households reached

17

Partner orgs

88%

Renewal rate

Figures in pine Newsreader, labels in moss. Shell background, no shadow — stats sit in the page, not on it.

Form fields

Your name

How would you like to help?

Anything we should know?

Focus adds a 4px pine ring at 16% — soft, but unmistakable for keyboard users.

05 — Blocks

Layout blocks

Transit

Restore the 14 line

The route was cut without a public hearing. We're asking the transit board to restore weekday service and publish the ridership data behind the decision.

1,712 of 2,000 signatures86%

Sign the petition Read the brief

Upcoming

Sep09 Monthly member meetingCenter St. Library · childcare provided RSVP
Sep18 Transit board hearingCity Hall, room 301 · public comment Soon
Oct02 Block canvass trainingTwo hours · no experience needed Open

$10

Covers printing for one canvass block.

Give monthly

Most chosen

$25

Childcare for one member meeting.

Give monthly

$50

A month of transit fare for two organisers.

Give monthly

Other

Any amount, one-time or recurring.

Choose

Meetings are open. Come see how it works.

Second Tuesday, every month. Agenda goes out the Friday before, childcare provided, rides available on request.

Take action