American Red Cross Brand Standards

Overview

A minimalist design system inspired by The Economist's visual language. This skill applies Red Cross branding with restraint—letting critical humanitarian data speak without decorative interference.

Keywords: branding, Red Cross, ARC, visual identity, dashboard styling, data visualization, Economist style, minimalist design, humanitarian, disaster response, GIS styling

Design Philosophy

"When everything is urgent, nothing is."

• Red as surgical accent: Use sparingly (maximum 10% of any composition)
• Data-forward: Information hierarchy drives all design decisions
• Purposeful whitespace: Dense layouts obscure critical information
• No decoration without function: Every element must communicate

Brand Guidelines

Color Palette

Primary Identifier

Working Palette (Warm Neutrals)

Functional Colors (Muted)

Typography

Font Stack

Type Scale

Visual Elements

Rules (Horizontal Lines)

• Heavy rule (2-3px, Black): Section separators, header/footer boundaries
• Light rule (1px, Gray 300): Content dividers, table rows
• Red rule (3px, Red Cross Red, 40px width): Brand accent marker

Spacing Scale

Data Visualization Rules

The One-Red Rule

In any single visualization (chart, table, dashboard card), use Red Cross Red to highlight exactly one critical metric. All other data uses the neutral gray palette.

Chart Styling

Primary data point:  #ED1B2E (Red Cross Red)
Secondary data:      #737373 (Gray 500)
Tertiary data:       #a3a3a3 (Gray 300)
Grid lines:          #e5e5e5 (Gray 100)
Background:          #f7f5f2 (Cream) or #ffffff (White)

Table Styling

• Header row: 2px top border (Black), bold text
• Data rows: 1px bottom border (Gray 100)
• Highlight row: Red text for critical value only
• Alternating backgrounds: Not recommended (use whitespace instead)

Dashboard Cards

Background:     White (#ffffff)
Border:         1px Gray 100 (#e5e5e5) or none
Shadow:         Subtle, on hover only
Metric value:   Display size, Headline font
Metric label:   Caption size, Body font, Gray 500

Usage Guidelines

Do

✓ Use red exclusively for the cross symbol, primary CTAs, and single-metric highlights ✓ Maintain generous whitespace—let data breathe ✓ Use horizontal rules to create visual hierarchy ✓ Present data in the serif headline font for gravitas ✓ Use monospace for all numerical data ✓ Keep backgrounds warm (cream) not cold (pure gray)

Don't

✗ Apply red to multiple elements in the same view ✗ Use red for decorative borders or background fills ✗ Fill every available space with content ✗ Add decorative graphics that don't communicate data ✗ Use more than 3 font weights in a single view ✗ Combine multiple accent colors in data visualizations

Application Contexts

Dashboards

• Use cream background for main canvas
• White cards for data modules
• Single red metric per card (the most critical one)
• Timestamp in monospace, top-right corner

Reports & Documents

• Heavy black rule below main title
• Section numbers in red (e.g., "01", "02")
• Pull quotes in serif italic
• Data tables with minimal borders

Presentations

• Title slides: Red rule accent (40px) below headline
• Data slides: One red data point per chart
• Generous margins (minimum 48px)
• No background images or gradients

Maps & GIS Applications

• Red for active incidents, alerts, critical facilities
• Gray scale for context layers
• Cream/white for basemap styling
• Monospace for coordinate displays and measurements

Code Examples

CSS Custom Properties

:root {
  /* Primary */
  --arc-red: #ED1B2E;
  --arc-black: #1a1a1a;
  --arc-white: #ffffff;
  
  /* Neutrals */
  --arc-gray-900: #2d2d2d;
  --arc-gray-700: #4a4a4a;
  --arc-gray-500: #737373;
  --arc-gray-300: #a3a3a3;
  --arc-gray-100: #e5e5e5;
  --arc-cream: #f7f5f2;
  
  /* Functional */
  --arc-alert: #c41e3a;
  --arc-success: #2d5a27;
  --arc-caution: #b8860b;
  --arc-info: #1e4a6d;
  
  /* Typography */
  --font-headline: 'Libre Baskerville', Georgia, serif;
  --font-body: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  --font-data: 'IBM Plex Mono', Consolas, monospace;
}

Python (matplotlib/seaborn)

ARC_COLORS = {
    'red': '#ED1B2E',
    'black': '#1a1a1a',
    'gray_700': '#4a4a4a',
    'gray_500': '#737373',
    'gray_300': '#a3a3a3',
    'gray_100': '#e5e5e5',
    'cream': '#f7f5f2',
}

# Example: Highlight max value in red, others in gray
colors = [ARC_COLORS['red'] if v == max(values) else ARC_COLORS['gray_500'] for v in values]

ArcGIS Arcade Expression

// Conditional symbology: Red for active, gray for inactive
IIF($feature.status == 'ACTIVE', '#ED1B2E', '#737373')

File Structure

red-cross-brand-guidelines/
├── SKILL.md                          # This file
├── red-cross-brand-standards.jsx     # Interactive React reference
├── assets/
│   ├── arc-palette.ase              # Adobe Swatch Exchange
│   ├── arc-palette.gpl              # GIMP/Inkscape palette
│   └── fonts/                       # Font files (if licensed)
└── templates/
    ├── dashboard-template.html
    ├── report-template.docx
    └── presentation-template.pptx

Version History

Credits

Design system created by Dragon (Jeff Franzen), GIS Developer, American Red Cross.

Inspired by The Economist's visual language and Edward Tufte's principles of data visualization.