Back to Showcase Eisenhower Health Foundation — Marketing Showcase
E
Eisenhower Health Design System

Color Palette Specimen

Desert community,
not hospital system.

The Eisenhower Health Foundation palette draws from the Coachella Valley landscape -- warm earth, sage-covered foothills, and the deep indigo of a desert evening sky. Every color says "belonging" before it says "institution."

Primary Colors

Desert Sand

Primary background. Replaces clinical white.

HEX#F5E6D3
RGB245, 230, 211
HSL34, 72%, 89%

Terracotta

Primary accent. Headlines, CTAs, emphasis.

HEX#C2724F
RGB194, 114, 79
HSL18, 49%, 54%

Deep Indigo

Text, headers, institutional gravity.

HEX#1B2A4A
RGB27, 42, 74
HSL221, 47%, 20%

Sage

Charts, data viz, proof-of-impact elements.

HEX#8B9F82
RGB139, 159, 130
HSL101, 13%, 57%

Supporting Colors

Mountain Shadow

Tertiary text, captions, supporting info.

HEX#6B5B5B
RGB107, 91, 91
HSL0, 8%, 39%

Warm White

Page/card backgrounds. Never pure white.

HEX#FAF7F2
RGB250, 247, 242
HSL38, 50%, 96%

Dusty Rose

Sparingly for community/inclusion content.

HEX#D4A0A0
RGB212, 160, 160
HSL0, 36%, 73%

Tints & Shades

Each primary color expanded into a 9-step scale from 10% tint (lightest) to 90% shade (darkest). Use lighter tints for backgrounds and hover states; darker shades for text on light surfaces and active states.

Desert Sand

10%
20%
30%
Base
50%
60%
70%
80%
90%

Terracotta

10%
20%
30%
40%
Base
60%
70%
80%
90%

Deep Indigo

10%
20%
30%
40%
Base
60%
70%
80%
90%

Sage

10%
20%
30%
40%
Base
60%
70%
80%
90%

WCAG Contrast Matrix

Contrast ratios for every primary and supporting color combination. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px bold / 24px regular) and UI components.

Foreground / Background White
#FFFFFF		 Black
#000000		 Desert Sand
#F5E6D3		 Warm White
#FAF7F2		 Deep Indigo
#1B2A4A
Desert Sand 1.2:1 17.0:1 -- 1.1:1 10.2:1
Terracotta 3.3:1 6.3:1 2.8:1 3.1:1 3.1:1
Deep Indigo 12.4:1 1.7:1 10.2:1 11.6:1 --
Sage 2.6:1 8.0:1 2.2:1 2.5:1 4.8:1
Mountain Shadow 4.8:1 4.4:1 3.9:1 4.5:1 2.6:1
Dusty Rose 1.9:1 11.1:1 1.6:1 1.8:1 6.6:1
AA pass (4.5:1+)
AA Large only (3:1+)
Fail (<3:1)

Color Pairing Guide

Approved combinations for common UI contexts. Each pairing has been validated for contrast compliance and brand coherence.

Page Layout

Deep Indigo on Warm White

Primary reading context. The default combination for all body content, ensuring maximum readability with warmth.

11.6:1

Headlines

Deep Indigo on Desert Sand

Hero sections and featured content. The warm sand background signals importance while maintaining strong contrast.

10.2:1

Call to Action

White on Terracotta

Primary buttons and action prompts. Terracotta draws the eye without clinical urgency.

3.3:1 (Large)

Data Callouts

Desert Sand on Deep Indigo

Impact statistics and numerical highlights. Dark background creates visual weight for key data.

10.2:1

Secondary Actions

Outlined Button

Ghost buttons for secondary actions. Pair with solid terracotta CTAs for clear hierarchy.

11.6:1

Community Content

Deep Indigo on Dusty Rose

Use sparingly for inclusion/community-focused sections. Warm and approachable.

6.6:1

Dark Mode Mapping

Dark mode preserves brand warmth by using desaturated, lightened variants rather than cold grays. Surfaces use deep indigo variants; text shifts to desert sand tones.

Light Mode

Community Impact Report

Your generous contributions helped provide 2,400 hours of free care to Coachella Valley families.

$4.2M raised in 2025
Dark Mode

Community Impact Report

Your generous contributions helped provide 2,400 hours of free care to Coachella Valley families.

$4.2M raised in 2025
Token Light Mode Dark Mode Notes
--bg-page Warm White #FAF7F2 #141E33 Deep indigo at 95% depth
--bg-surface White #FFFFFF #1E2D4A Slightly lighter for elevation
--bg-elevated White #FFFFFF #263756 Modals, dropdowns, popovers
--text-primary Deep Indigo #1B2A4A Desert Sand #F5E6D3 Headlines, body text
--text-secondary Mountain Shadow #6B5B5B #B8AFA5 Captions, supporting text
--accent Terracotta #C2724F #D4936E Lightened 15% for dark surfaces
--data Sage #8B9F82 #A3B89A Lightened 12% for dark surfaces

CSS Custom Properties

Copy-paste ready CSS variables. Include the :root block in your stylesheet; the dark mode block activates automatically via prefers-color-scheme or a manual [data-theme="dark"] attribute.

:root {
  /* ========================================
     Eisenhower Health Foundation
     Brand Color Tokens — Light Mode
     ======================================== */

  /* Primary Palette */
  --ehf-desert-sand:       #F5E6D3;
  --ehf-terracotta:        #C2724F;
  --ehf-deep-indigo:       #1B2A4A;
  --ehf-sage:              #8B9F82;

  /* Supporting Palette */
  --ehf-mountain-shadow:   #6B5B5B;
  --ehf-warm-white:        #FAF7F2;
  --ehf-dusty-rose:        #D4A0A0;

  /* Semantic Tokens — Light */
  --bg-page:               var(--ehf-warm-white);
  --bg-surface:            #FFFFFF;
  --bg-elevated:           #FFFFFF;
  --bg-accent:             var(--ehf-desert-sand);
  --text-primary:          var(--ehf-deep-indigo);
  --text-secondary:        var(--ehf-mountain-shadow);
  --text-accent:           var(--ehf-terracotta);
  --text-data:             var(--ehf-sage);
  --border-default:        #E8DFD4;
  --border-subtle:         #F0E8DD;

  /* Terracotta Tints/Shades */
  --ehf-terracotta-100:    #F6E3DA;
  --ehf-terracotta-200:    #ECC7B5;
  --ehf-terracotta-300:    #E3AB90;
  --ehf-terracotta-400:    #D48F6C;
  --ehf-terracotta-500:    #C2724F;  /* base */
  --ehf-terracotta-600:    #A65F41;
  --ehf-terracotta-700:    #8A4D34;
  --ehf-terracotta-800:    #6E3C28;
  --ehf-terracotta-900:    #522C1D;

  /* Deep Indigo Tints/Shades */
  --ehf-indigo-100:        #D0D4DC;
  --ehf-indigo-200:        #A2AAB9;
  --ehf-indigo-300:        #738097;
  --ehf-indigo-400:        #455574;
  --ehf-indigo-500:        #1B2A4A;  /* base */
  --ehf-indigo-600:        #16233E;
  --ehf-indigo-700:        #111C32;
  --ehf-indigo-800:        #0C1526;
  --ehf-indigo-900:        #070E1A;

  /* Sage Tints/Shades */
  --ehf-sage-100:          #E8ECE6;
  --ehf-sage-200:          #D1D9CD;
  --ehf-sage-300:          #BBC6B4;
  --ehf-sage-400:          #A4B39B;
  --ehf-sage-500:          #8B9F82;  /* base */
  --ehf-sage-600:          #74866C;
  --ehf-sage-700:          #5D6D56;
  --ehf-sage-800:          #475441;
  --ehf-sage-900:          #303B2B;
}

/* ========================================
   Dark Mode
   Activates via OS preference or manual toggle
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:             #141E33;
    --bg-surface:          #1E2D4A;
    --bg-elevated:         #263756;
    --bg-accent:           #1E2D4A;
    --text-primary:        var(--ehf-desert-sand);
    --text-secondary:      #B8AFA5;
    --text-accent:         #D4936E;
    --text-data:           #A3B89A;
    --border-default:      #2A3D5E;
    --border-subtle:       #223350;
  }
}

[data-theme="dark"] {
  --bg-page:               #141E33;
  --bg-surface:            #1E2D4A;
  --bg-elevated:           #263756;
  --bg-accent:             #1E2D4A;
  --text-primary:          var(--ehf-desert-sand);
  --text-secondary:        #B8AFA5;
  --text-accent:           #D4936E;
  --text-data:             #A3B89A;
  --border-default:        #2A3D5E;
  --border-subtle:         #223350;
}

Tailwind CSS Config

// tailwind.config.js — Eisenhower Health Foundation
module.exports = {
  theme: {
    extend: {
      colors: {
        'desert-sand':      '#F5E6D3',
        'terracotta': {
          100: '#F6E3DA',
          200: '#ECC7B5',
          300: '#E3AB90',
          400: '#D48F6C',
          DEFAULT: '#C2724F',
          600: '#A65F41',
          700: '#8A4D34',
          800: '#6E3C28',
          900: '#522C1D',
        },
        'deep-indigo': {
          100: '#D0D4DC',
          200: '#A2AAB9',
          300: '#738097',
          400: '#455574',
          DEFAULT: '#1B2A4A',
          600: '#16233E',
          700: '#111C32',
          800: '#0C1526',
          900: '#070E1A',
        },
        'sage': {
          100: '#E8ECE6',
          200: '#D1D9CD',
          300: '#BBC6B4',
          400: '#A4B39B',
          DEFAULT: '#8B9F82',
          600: '#74866C',
          700: '#5D6D56',
          800: '#475441',
          900: '#303B2B',
        },
        'mountain-shadow':  '#6B5B5B',
        'warm-white':       '#FAF7F2',
        'dusty-rose':       '#D4A0A0',
      },
    }
  }
}