Design Principles

These are the principles we keep coming back to across the project.

1. Clarity first

The site should be easy to understand at a glance.

• Clear visual hierarchy
• Obvious primary actions
• Minimal visual competition on each page
• Content grouped and spaced intentionally

2. Readability for all ages

A big part of the audience is older adults, so readability is a top priority.

• Large, legible typography — body text is at least 16px, ideally 18px and up, so nobody has to zoom to read
• Strong contrast between text and background
• Comfortable line lengths, in the 50-75 characters per line range
• Clear labels, and headings clearly distinct from body text in size and weight
• Links that don't rely on color alone — an underline or other indicator marks them out from surrounding text

Color and contrast in practice below puts numbers to the contrast half of this.

3. Calm and approachable tone

The site should feel welcoming and trustworthy, not busy or overwhelming.

• Generous white space
• Limited color palette
• Familiar interface patterns
• Visual consistency across pages

The goal is to reduce cognitive load, not impress with complexity.

4. Brand in support of the task

People come to the site to give, volunteer, find meals, or get an answer. Color, imagery, and type should guide attention toward those tasks rather than decorate around them.

• Color used to highlight actions and key information
• Photography that feels respectful and authentic, showing the work and the people around it
• Typography carries much of the site's personality while staying easy to read
• Dark slate and lime create continuity without needing to dominate every page
• Brand elements support calls to action instead of competing with them
• Avoid overly stylized or stock-heavy visuals

The result should feel like MOWP without constantly announcing the brand.

5. Reusable, not repetitive

The same design system supports every page, but the pages don't all need the same sequence of sections.

• Match the page rhythm to the visitor's task
• Use cards only when comparison or choice makes them useful
• Use metrics, testimonials, and calls to action when they add something useful, not because a template has a slot
• Let transactional and help pages stay short
• Let program stories and campaigns use more varied layouts when the content supports them

Typography, spacing, color, and interaction keep the site consistent.

6. Modern, but not trendy

The design should feel current and professional without relying on short-lived trends.

• Timeless layout patterns
• Avoid novelty interactions
• Focus on durability and longevity

Color and contrast in practice

Text is built to meet WCAG AA contrast ratios at minimum — 4.5:1 for normal text, 3:1 for large text — and the palette gets checked against common forms of color blindness. Color is never the only way to communicate information (no "click the green button").

Here's how the brand palette holds up:

What we're not doing

A few things are out of scope:

• Not a high-frequency publishing site. Core pages are evergreen and News & Events updates as needed. The site should look well-tended even when nothing changes for a month.
• Not a complex or experimental interface. No unfamiliar interaction without a clear benefit to the visitor, and nothing that only works on hover. The menu panels are richer than a plain dropdown because What We Do has too many real destinations for one to communicate well.
• Not a free-form page builder. Pages use defined structures and components, which prevents layout issues and keeps the site consistent.
• Not visually busy. No dense pages with competing calls to action.