[program photo]
Linked card
Charitable Pharmacy
No-cost prescriptions for neighbors who can’t afford their medicine. The whole surface is clickable.
RFP §3.1 · Component-based design system
The design system, rendered.
Every page in this wireframe is assembled from the same small set of tokens and components. This page is the system itself — direct evidence that the deliverable is reusable, consistent, and bespoke (no off-the-shelf UI kit).
Foundations
Color tokens
The entire palette is a restrained ink/paper grayscale plus one civic accent. Components reference these CSS variables only — never raw hex — so the final brand palette is a single-file change in the design phase.
--color-ink
--color-ink-2
--color-ink-3
--color-ink-4
--color-rule
--color-rule-2
--color-paper
--color-paper-2
--color-paper-3
--color-accent
--color-accent-soft
Foundations
Type scale & families
Lora (serif) carries editorial headlines, Inter (sans) handles UI and body, and a mono face labels code and eyebrows. The DisplayHeading component is the single source of truth for serif headlines.
Display XL — Neighbors helping neighbors
Display LG — Neighbors helping neighbors
Display MD — Neighbors helping neighbors
Display SM — Neighbors helping neighbors
Serif · font-serif
Aa Bb Cc 123
Sans · font-sans
Aa Bb Cc 123
Mono · font-mono
Aa Bb Cc 123
This is the .eyebrow utility
paired with components aboveThis paragraph uses the .prose utility — Lora at a comfortable measure for long-form editorial copy. For more than 150 years, neighbors have shown up for one another with food, medicine, and a hand paying a bill.
Components
Badges
Compact status / category labels used on cards, events, and locations. Four tones, two sizes.
NeutralAccentOutlineInkAccent · md
Components
Cards
The workhorse content tile, composed from Card / CardMedia / CardBody / CardTitle / CardText.
[program photo]
Static card
Choice food pantry
Neighbors select their own groceries, with dignity.
Components
Placeholder tiles
Every image and video lives as a labeled Placeholder so the committee sees creative intent without committing to photography in the wireframe phase.
[wide / default — hero video]
[square / soft]
[tall / default]
Components
Form fields
Inputs, selects, textareas, and checkboxes share one token-driven treatment so every form — contact, search, the member portal — reads as one system. Labels are always associated for accessibility.
Components
Alerts & callouts
The accent alert mirrors the site-wide AlertBanner (RFP §3.2 seasonal notices); the soft note is the lower-emphasis aside used inside content.
Cold-weather shelter is open tonight. Find a location →
Note
This is a soft, lower-emphasis callout for context that supports the surrounding content without demanding the reader’s full attention.