Live Healthy Chicago
Brand Guide
A complete reference for designers, developers, and communicators building on the Live Healthy Chicago identity. Use these guidelines to ensure every touchpoint is consistent, trustworthy, and community-centered.
Mission & Purpose
Live Healthy Chicago exists to close the blood pressure gap in Chicago's most underserved neighborhoods by bringing care directly to the community. Our brand communicates three core values.
Urgency
Heart disease is the leading cause of death in Chicago's priority neighborhoods. Our communications reflect genuine concern without resorting to fear-mongering or clinical jargon.
Community Vitality
We meet people where they are — in churches, barbershops, and community centers. Our brand is warm, approachable, and celebrates the strength already present in these neighborhoods.
Institutional Trust
Backed by Rush University Medical Center and a 60+ partner coalition, our brand carries the weight of credibility. Every design decision reinforces reliability and professional integrity.
Color System
Our palette is drawn from the approved style guide. Click any swatch to copy the hex value.
- Primary CTA buttons ("Register Now," "Check Your Numbers")
- Hypertensive crisis alerts
- Urgent health event promotions
- Section accent bars on dark backgrounds
- Navigation bars and sidebars
- Section headings and institutional titles
- Data visualizations and charts
- Body text on light backgrounds
- Sub-headlines and section labels
- Community-focused content blocks
- Interactive link states
- Progress indicators and tags
- Pressure Drop campaign materials only
- Celebratory milestones or announcements
- Highlight accents on very dark backgrounds
- Never use as background for body text
Typography
Three typefaces work together to balance authority, approachability, and legibility across all contexts.
Healthier Neighborhoods.
"Stronger Hearts. Healthier Neighborhoods."
Logo Usage
The Live Healthy Chicago logo exists in full-color (light backgrounds) and white-reversed (dark backgrounds) forms. Always maintain clear space equal to the height of the "L" in "Live" on all sides.
Do
- Use on white, light gray, or solid dark backgrounds
- Maintain minimum size of 120px wide in digital contexts
- Keep clear space equal to the logo height on all sides
- Use the approved CDN asset URL for consistency
- Stack with partner logos at equal visual weight
Don't
- Stretch, skew, or alter aspect ratio
- Recolor or apply filters (except approved white reversal)
- Place on busy photographic backgrounds without a scrim
- Use at sizes below 80px wide
- Add drop shadows, outlines, or decorative effects
Iconography
All icons must be flat, minimalist SVGs. No gradients, shadows, or 3D effects. Icons are always colorable via CSS using currentColor.
Style: Flat & Minimalist
Use outline-style SVGs. Avoid filled icons with gradients, drop shadows, or 3D rendering. Consistent stroke weight of 2px.
Implementation: Inline SVG
Use inline <svg> tags directly in HTML, or a library like heroicons. Do NOT use <img> tags for icons — they can't be styled with CSS.
Coloring: currentColor
Set SVG stroke or fill to currentColor. Apply brand colors via CSS classes (e.g., color: var(--star-red)).
Default Size: 24×24px
Default icon size is 24×24px (w-6 h-6 in Tailwind). Scale proportionally to 16, 20, 32, or 48px for specific contexts.
Brand Integration
Apply brand colors via CSS variables: var(--star-red), var(--sky-blue), etc. Never hardcode hex values in SVG attributes.
Accessibility
Decorative icons: aria-hidden="true". Functional icons (buttons without text): include aria-label or a visually-hidden label element.
Icon Size Scale
Voice & Tone
Our voice is consistent across all communications. Our tone adjusts based on context — warmer for community outreach, more authoritative for clinical partners.
Empowering, Not Alarming
We share facts that motivate action without creating fear. Every statistic is paired with what you can do about it. People have agency.
Plain Language, Always
We write for a community audience. No grant-writing jargon, no medical acronyms, no "silent killer" framing. Clear, direct sentences at a 6th–8th grade reading level.
Community-Centered
We talk about neighborhoods as places of strength, not deficiency. We celebrate the community partners, CHWs, and residents who are the backbone of this coalition.
Primary Audience: Community Members
Adults ages 30–65 in Chicago's 27 priority neighborhoods. Many are uninsured or underinsured. They respond to trusted messengers, practical information, and a sense of being seen and respected — not talked at.
Secondary Audience: Clinical & Coalition Partners
Healthcare providers, community organizations, public health officials, and institutional partners (Rush, CDPH, etc.). They expect credibility, evidence, and clear role definition. More formal tone is appropriate here.
Language Guide
Specific words and phrases that are approved, discouraged, or banned across all LHC communications.
Avoid These
Use Instead
Example Rewrites
UI Components
Reusable interface patterns used across livehealthychi.com. All components use Tailwind CSS classes or the CSS variables defined above.
Buttons
Stat Cards
Blood Pressure Display
Partner Logo Treatment
Medical Center
Public Health
Partner Logo
Institution
grayscale(1) with reduced opacity for visual cohesion.