# Feeding America design system

> Captured from https://www.feedingamerica.org/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/feeding-america/). An independent analysis for reference: Feeding America and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Feeding America sets its hero in Arial Black at 144px with tight tracking over a full-bleed photo, then drops to 18px Arial body in #333f48 slate. An olive #4e5b31 utility bar sits on top, #fef8ee cream fills the bands below, and two square buttons share the nav: #b22d3a red to give and #ffb81c gold to find help.

- Theme: light
- Mood: bold, heavy type, cream, red and gold, photo-led
- Category: Nonprofit

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#fef8ee` | Raised panels, bands and cards |
| Text | `#333f48` | Primary ink, 10.8:1 on the background |
| Accent | `#b22d3a` | Primary actions |
| Highlight | `#f3dd6d` | Brand color in artwork, marks and badges |

Full palette, most used first: `#ffffff`, `#333f48`, `#fef8ee`, `#f3dd6d`, `#4e5b31`, `#b22d3a`.

## Typography

- **Arial**: display and body, 69.7% of the text. Use Arimo. Arial is a licensed system font. Arimo is a free metric compatible stand-in.
- **arial_blackregular**: display, 30.3% of the text. Use Archivo Black. Arial Black is a licensed system font. Archivo Black is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | arial_blackregular | 144px | 500 | 1 | -0.03em |
| Heading | arial_blackregular | 40px | 500 | 1.2 | -0.021em |
| Subheading | Arial | 18px | 400 | 1.5 | 0 |
| Body | Arial | 18px | 400 | 1.5 | 0 |
| Small | Arial | 16px | 700 | 1.2 | -0.005em |

Sizes in use, largest first: 144px, 72px, 64px, 40px, 30px, 28px, 22px, 20px, 18px.

## Spacing

Values sit on a 4px grid.
Values in use: 3px, 6px, 8px, 12px, 14px, 16px, 20px, 24px, 32px, 36px.

## Shape

Corner radii, smallest first: 4px, 12px, pill (9999px).

Shadows, most used first:

- `rgb(217, 217, 217) 0px 1px 0px 0px`

## Components

### Primary button ("Donate")

- Fill: #b22d3a
- Text: #ffffff, 16px at weight 700
- Border: none
- Corner: 4px
- Height: 37px, padding 9px 14px

### Secondary button ("Find Food")

- Fill: #ffb81c
- Text: #333f48, 16px at weight 700
- Border: none
- Corner: 4px
- Height: 37px, padding 9px 14px

### Card

- Fill: #4e5b31
- Border: none
- Corner: 4px
- Shadow: none

## Do

- Run the hero headline enormous and heavy, tracked slightly tight.
- Give the two main actions two different warm colors so each audience finds theirs.
- Use a warm cream band rather than grey to separate sections.

## Don't

- Use pure black for body text: the ink is a slate #333f48.
- Round the nav buttons into pills; they keep a 4px corner.
- Add a display serif: the whole page is Arial in two weights.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #fef8ee;
  --color-text: #333f48;
  --color-accent: #b22d3a;
  --color-highlight: #f3dd6d;
  --font-display: "arial_blackregular", system-ui, sans-serif;
  --text-display: 144px;
  --weight-display: 500;
  --font-heading: "arial_blackregular", system-ui, sans-serif;
  --text-heading: 40px;
  --weight-heading: 500;
  --font-subheading: "Arial", system-ui, sans-serif;
  --text-subheading: 18px;
  --weight-subheading: 400;
  --font-body: "Arial", system-ui, sans-serif;
  --text-body: 18px;
  --weight-body: 400;
  --font-small: "Arial", system-ui, sans-serif;
  --text-small: 16px;
  --weight-small: 700;
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 36px;
  --radius-1: 4px;
  --radius-2: 12px;
  --radius-3: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.