# BCBSNE Brand & UI Style Spec (Master)
Source: Blue Cross and Blue Shield of Nebraska official Brand Guidelines — internal Standards.site portal (password-restricted; contact Amy.Lillethorup@NebraskaBlue.com for access). Guidelines version 1.1, last updated June 2025. Built from the full authenticated guide: Brand Strategy, Logo, Typography, Color, Photography, Verbal Identity, Brand Extensions.

**This document is the single source of truth for any UI, copy, or brand asset generated for this project.** Every AI tool working on this codebase (Lovable, GitHub Copilot, Claude, or otherwise) must follow it by default, without being re-asked each time.

> **Coverage note:** the guide itself marks several sections "Coming soon" as of v1.1: Extended-palette usage examples, verbal-identity messaging framework/headlines/CTAs/word bank, video/motion, most brand-extension sub-brands beyond Nebraska Blue Foundation, Audience/Positioning/Vision (brand strategy), and most digital-application examples. This spec documents what's confirmed; gaps are marked "not yet published" rather than invented.

---

## 0. Brand Strategy (foundational — informs tone of everything below)

**Mission:** We are a champion for the health and well-being of our members and the communities we serve.

**Values:**
- **People Matter** — our work impacts people's lives; it's an honor to serve each other, our customers, and our community.
- **One Team** — we work as one team, respecting and celebrating diverse perspectives.
- **Default to Action** — we value action and decision-making over delay; willing to take strategic risks.
- **Do the Right Thing for the Right Reasons** — decisions serve the long-term best interests of customers and organization.
- **Embrace Change** — approach change with possibility, curiosity, and adaptability.
- **Leadership and Ownership Perspective** — everyone is empowered to take initiative.

**Value proposition (three-part):**
1. Coverage for the care you need from a network of doctors you trust
2. Commitment to lowering the cost of care while improving health outcomes
3. Support and guidance from a team that's here in Nebraska

**Brand personality / voice pillars — Helpful, Human, Smart** (see §5 Verbal Identity for full detail on each).

---

## 1. Logo

Our logo is the primary identifier for the brand — it captures the company's name, mission, and legacy. **Never edit, recolor, distort, stretch, outline, rotate, apply shadows/effects/patterns, or use unapproved colors on the logo.**

### Lockup variants (in order of preference)
1. **Two-line (preferred)** — name stacked on two lines; used on the website, member ID cards, and HQ building.
2. **Three-line** and **one-line** — alternate arrangements, permitted as needed for layout fit/legibility.
3. **Symbols only** — the Cross + Shield mark alone, without the wordmark. Permitted only where space/technical constraints require it (digital use, promotional items, architectural/interior applications) — **the full logo must appear elsewhere in the vicinity** whenever symbols-only is used alone.
4. **Square lockup** — logo inside a square/circle, for social media icons/avatars only.

### Symbol styles
- **Standard Symbols** (preferred) — include the "Interior Elements" (illustrations of the Vitruvian Man and the Rod of Asclepius) inside the Cross and Shield.
- **Solid Symbols** — no interior elements; use only when the Interior Elements would be illegible/confusing at small size or in a constrained medium (embroidery, small promo items, digital use).

### Approved color variants (only these — no others)
1. **Preferred:** Symbols in Process Blue with white interior elements; name in Process Blue.
2. Symbols in Process Blue with white interior elements; name in white.
3. Symbols in white with blue interior elements; name in white (reverse, for dark backgrounds).
4. Black/white print only: symbols in black with white interior elements; name in black.
5. Opaque standard symbols in Process Blue with white interior elements — include ® indicia.
6. Opaque solid symbols in Process Blue — include ® indicia.
7. Translucent solid symbols in white, 55–65% opacity, overlaid on a photographic background only (never solid color) — do **not** use ® indicia in this case.

### "Window" treatment (sales/marketing/advertising only — never administrative or operational use)
- Interior of the Cross/Shield is filled with photography instead of solid color, positioning a member "at the center of everything we do."
- Must always appear in close combination with the full logo.
- Both Cross and Shield must be filled with a single static image positioning a person at the center of at least one Symbol.
- A detailed image must fill at least 2/3 of a Symbol — solid color fills are not allowed.
- Surrounding background should ideally be blue.
- If cropped, ensure 3 points of the Cross and 2 points of the Shield remain visible.
- Never use ® indicia with the window treatment.

### Scaling & clear space
- The logo reads well even at small size, but if legibility becomes an issue at small scale, it's too small — switch to Solid Symbols if Interior Elements stop being legible.
- **Clear space from text/graphics:** equal to the height of the Cross.
- **Clear space when combining with product marks/taglines/other BCBSNE assets:** equal to one arm's width of the Cross.

### Don'ts
Don't stretch · Don't outline · Don't use unapproved colors · Don't apply shadows or effects · Don't rotate · Don't apply patterns.

### Tools
- A **Logo Generator Tool** exists in the brand portal for downloading the correct logo format/filetype — use it rather than hand-exporting/recreating logo files. Still must follow every standard on this page.
- Contact the Brand team (Amy Lillethorup) with questions.

### Confirmed real logo asset files (from the brand portal's asset library)
| File | Description |
|---|---|
| `Blue _ Standard Symbols _ Two Lines _ BCBSNE Logo.svg` | Two-line lockup, Standard Symbols, Process Blue — **preferred/primary logo** |
| `Blue _ Standard Symbols _ Three Lines _ BCBSNE Logo.svg` | Three-line lockup |
| `Blue _ Standard Symbols _ One Line _ BCBSNE Logo.svg` | One-line lockup |
| `Blue _ Standard Symbols _ Symbols Only _ BCBSNE Logo.svg` | Symbols-only mark, Process Blue |
| `Blue _ Solid Symbols _ Symbols Only _ BCBSNE Logo.svg` | Symbols-only mark, Solid Symbols variant |
| `White _ Standard Symbols _ Three Lines _ BCBSNE Logo.svg` | Reverse/white, three-line |
| `Black _ Standard Symbols _ Three Lines _ BCBSNE Logo.svg` | Black/white-print variant, three-line |
| `clearspace.svg`, `lockupclearspace.svg` | Clear-space diagrams |
| `SquareLogoConstruction.png` | Square/avatar lockup construction guide |
| `windowtreatment1-01.png` | Window-treatment example |
| `symbols-color-use-01/03/04.jpg` | Approved color-usage examples |

*(All hosted at `firebasestorage.googleapis.com/.../documents/f084501b437/ef92a9a5238/...` in the brand portal — download the actual files from the portal's Logo Generator Tool or asset library and add them to your project's asset folder; don't hot-link the portal URLs into a live product.)*

---

## 2. Color

Color amplifies brand expression and personality. **Process Blue is core to the brand — it's in the name twice** ("Blue" Cross and "Blue" Shield) and should be present in most layouts.

### Primary palette
| Name | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
| Process Blue | `#0099CC` | 0/130/202 | 100/10/0/10 | Process Blue C |
| White | `#FFFFFF` | 255/255/255 | 0/0/0/0 | White C |

### Secondary palette
| Name | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
| Midnight Blue | `#003359` | 0/51/89 | 100/57/12/61 | 540 C |
| Sky Blue | `#8FCAE7` | 143/202/231 | 44/1/0/0 | 2905 C |

### Neutral palette
| Name | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
| Black | `#1E1E1E` | 30/30/30 | 0/0/0/100 | Process Black C |
| Ogallala Blue | `#BED6DB` | 190/214/219 | 22/2/3/3 | 552 C |
| Sandhills | `#F2E4D2` | 242/228/210 | 4/9/16/0 | 9180 C |
| Gainsboro | `#E0E1E2` | 224/225/226 | 1/0/0/11 | not specified |
| Silver | `#B2B9BE` | 178/185/190 | 6/3/0/25 | not specified |
| Light Slate Gray | `#838C97` | 131/140/151 | 13/7/0/41 | not specified |

**Use Black for default body copy in most touchpoints.**

### Extended palette
Used for data visualization, digital-interface clarity, illustration vibrancy, and calling attention to digital buttons/interface elements. **Use sparingly** — shown below in order of brand priority, orange (most preferred) → red (least preferred). Each hue has a light/core/dark trio.

| Hue | Light | Core | Dark |
|---|---|---|---|
| Orange | `#FFC89E` Light Orange | `#FF8F1C` Monument Orange (PMS 1495 C) | `#BD6813` Dark Orange |
| Green | `#ABDAC4` Light Green | `#44BB8D` Tractor Green (PMS 3395 C) | `#308A68` Dark Green |
| Pink | `#F6A6B4` Light Pink | `#EF4270` Prairie Rose Pink (PMS 1915 C) | `#B23152` Dark Pink |
| Purple | `#CCB5D8` Light Purple | `#9B6EAF` Stormcloud Purple (PMS 2080 C) | `#725082` Dark Purple |
| Yellow | `#FFE6B0` Light Yellow | `#FCCC00` Meadowlark Yellow (PMS 116 C) | (no dark variant published) |
| Red | `#EE9B9A` Light Red | `#CC203B` Memorial Red (PMS 193 C) | `#981B2A` Dark Red |

### Proportion rule (color balance in any layout)
- Process Blue should dominate — treat as roughly the majority color in most compositions.
- Black for all long-form text.
- Accent/tertiary colors (from the extended palette) used sparingly — guide gives an example split of **30% / 16% / 4%** for primary/secondary/accent-tier usage in a composition (use as a directional ratio, not a strict formula).

### CSS variables (drop-in)
```css
:root {
  /* Primary */
  --bcbsne-process-blue: #0099CC;
  --bcbsne-white: #FFFFFF;

  /* Secondary */
  --bcbsne-midnight-blue: #003359;
  --bcbsne-sky-blue: #8FCAE7;

  /* Neutral */
  --bcbsne-black: #1E1E1E;
  --bcbsne-ogallala-blue: #BED6DB;
  --bcbsne-sandhills: #F2E4D2;
  --bcbsne-gainsboro: #E0E1E2;
  --bcbsne-silver: #B2B9BE;
  --bcbsne-light-slate-gray: #838C97;

  /* Extended — light/core/dark per hue, use sparingly */
  --bcbsne-orange-light: #FFC89E;  --bcbsne-orange-core: #FF8F1C;  --bcbsne-orange-dark: #BD6813;
  --bcbsne-green-light:  #ABDAC4;  --bcbsne-green-core:  #44BB8D;  --bcbsne-green-dark:  #308A68;
  --bcbsne-pink-light:   #F6A6B4;  --bcbsne-pink-core:   #EF4270;  --bcbsne-pink-dark:   #B23152;
  --bcbsne-purple-light: #CCB5D8;  --bcbsne-purple-core: #9B6EAF;  --bcbsne-purple-dark: #725082;
  --bcbsne-yellow-light: #FFE6B0;  --bcbsne-yellow-core: #FCCC00;
  --bcbsne-red-light:    #EE9B9A;  --bcbsne-red-core:    #CC203B;  --bcbsne-red-dark:    #981B2A;
}
```

---

## 3. Typography

**Primary typeface: Univers** (designed 1957, Adrian Frutiger) — a neo-grotesque sans-serif balancing precision/restraint with humanistic, less rigid forms. Use Univers wherever technically possible; it's one of the most defining characteristics of the brand identity.

**Backup typeface: Arial** — use only if Univers isn't installed on the machine/environment.

### Confirmed type hierarchy
| Level | Weight/cut | Case | Kerning | Leading |
|---|---|---|---|---|
| Primary headline | Univers 59 Ultra Condensed | ALL CAPS | 15 | type size × 0.86 |
| Secondary headline | Univers 47 Light Condensed | Sentence case | 0 | type size × 1.2 |
| Body heading | Univers 65 Bold | Sentence case | 0 | type size × 1.1 |
| Body text | Univers 45 Light | Sentence case | 0 | type size × 1.33 |
| Disclaimers/taglines | Univers 47 Light Condensed | Sentence case | 0 | type size × 1.2 |

Reference test-scale examples from the guide's type tester: Headline = Univers LT Std 59 Ultra Condensed at 80/88pt; Subhead = Univers LT Std 65 Bold at 30/36pt; Body = Univers LT Std 57 Condensed at 15/21pt.

> **Resolves earlier discrepancy:** an earlier pass of this spec flagged uncertainty over whether body copy uses Univers or Open Sans. **Confirmed: Univers throughout** (Univers 45 Light for body, Univers 65 Bold for inline body headings) — Open Sans is not part of the documented type system. Arial is the only approved fallback.

### CSS variables (drop-in)
```css
:root {
  --bcbsne-font-primary: 'Univers LT Std', Arial, sans-serif;
  --bcbsne-font-fallback: Arial, sans-serif;

  --bcbsne-h1-weight: 59; /* Ultra Condensed */
  --bcbsne-h1-tt: uppercase;
  --bcbsne-h1-kerning: 15px;
  --bcbsne-h1-leading-multiplier: 0.86;

  --bcbsne-h2-weight: 47; /* Light Condensed */
  --bcbsne-h2-leading-multiplier: 1.2;

  --bcbsne-body-heading-weight: 65; /* Bold */
  --bcbsne-body-heading-leading-multiplier: 1.1;

  --bcbsne-body-weight: 45; /* Light */
  --bcbsne-body-leading-multiplier: 1.33;
}
```

### Setting-type principles
- **Left-align type** — more modern appearance, easier legibility.
- Clear margins/padding: margin ≈ long edge ÷ 24.
- Use a well-ordered grid consistently — precision/organization is core to the brand feel.
- Build a clear, consistent typographic hierarchy for information organization.

### Don'ts
- Don't use alternative typefaces on public-facing materials — including default PowerPoint/Word fonts.
- Don't use incorrect leading/tracking values — follow the table above.

---

## 4. Photography

Photography conveys **empowerment with a superior sense of stability and security.** Three categories:

1. **Lifestyle** — people whose lives BCBSNE impacts. Concepts: Engaged (never posed/sitting), captures moments of inspiration (candid, unposed), Active (implies action), Focused (fully absorbed).
2. **Metaphoric** — less literal, restful/reflective imagery engaging intellect and emotion. Concepts: Human (references humanity), Aspirational, Distinctive, Simple subjects (readily understood).
3. **Health and recovery** — showcases the end benefit of BCBSNE's services. Concepts: Focused, Positive (never negativity/uncertainty), Genuine (candid, unposed).

### Principles
- **Maintain authenticity** — never artificial, manipulated, overly posed, or stylized. Prefer natural/existing light sources; artificial light only when required, aiming for realism over drama. People appear candid/spontaneous, unaware of camera. Interiors/outdoor settings shot true-to-life, not obviously staged.
- **Express diversity** — reflect Nebraska's actual cultures/communities; never distort/exaggerate subjects to force diversity.
- **Eliminate special effects** — no lens filters, duotones, or other stylized/distorting techniques.

### Don'ts
Don't use over-exaggerated/uncandid subjects · Don't use overly posed/stylized stock-smile imagery · Don't use overused/unnatural lens filters · Don't select metaphoric imagery without human reference · Don't select medical imagery with a negative/disconcerting focus · Don't use non-professional-quality images.

*(A curated library of approved photos exists for BCBSNE internal users — access via the brand portal.)*

---

## 5. Verbal Identity

**Brand voice: Helpful, Human, Smart** — consistent across all communications; tone flexes with context, voice does not.

| Pillar | Does sound | Doesn't sound |
|---|---|---|
| **Helpful** | Reliable, straightforward, accurate | Patronizing, presumptuous, patriarchal, self-serving |
| **Human** | Compassionate, personal, understanding | Overly familiar, unprofessional, disingenuous |
| **Smart** | Knowledgeable, informed, confident | Academic, arrogant, overly complex |

### Writing guide
**Do:** write like humans speak · use American spelling · active voice · clear/consistent language even if repetitive · conversational where appropriate · match tone to content type.
**Don't:** overly formal language · more words than needed · passive/negative tone · aggressive/condescending tone · wishy-washy/polarizing language · jargon.

**Simplicity checklist (used for benefits-related communications):**
- Keep content simple, single-goal, no fluff/combined messages.
- Organize by topic with customer-centric subheads; use bullets.
- Paragraphs ≤150 words, 2–5 sentences.
- Clear calls to action (what + why).
- Provide relevant links/phone/email for more info.
- Prefer 1–2 syllable words (e.g. "use" not "utilize").
- Avoid jargon (e.g. "drug list" not "formulary"); spell out acronyms on first use (e.g. "Explanation of Benefits (EOB)").
- Use positive phrasing over negatives ("don't").
- Avoid long noun strings; one idea per sentence.
- Use inclusive language (reference the internal glossary of inclusive terminology).
- Cut filler words (very, really, actually, carefully).
- Use active voice ("You pay $20" not "Visits cost $20").
- Personal pronouns (I/you/we) welcome for a conversational feel.
- Target 6th-grade reading level or lower.
- Structure: tell them what you'll tell them → tell them → recap + next steps.
- Check compliance/disclaimer requirements before publishing.

### Copy style & formatting
- Preferably Univers or Arial.
- Generous white space; avoid intimidating text blocks.
- Support with relevant charts/graphics without adding visual noise.
- Bold/underline/embolden key terms; use headers for long content.
- Avoid dark-background/light-text combos that hurt colorblind/visually-impaired readers.
- Use quality images; caption "Image BCBSNE" for owned images, attribute others correctly.
- Hyperlink meaningful phrases, not bare URLs or "click here."
- Bulleted/numbered lists for clarity. Never "get creative" with fonts or font colors.

### Diversity, Equity & Inclusion
DEI is woven throughout the guide rather than kept as a separate document — reflected in imagery diversity requirements, accessibility considerations, and inclusive-language guidance (referencing an internal glossary of preferred terms).
- **Diversity:** presence of differences (race, ethnicity, gender, gender identity, sexual orientation, age, socioeconomic class).
- **Equity:** ensuring processes/programs are impartial, fair, and provide equal possible outcomes.
- **Inclusion:** ensuring people feel a genuine sense of belonging.

### Independent Licensee (IL) tagline
Required on public communications selling/administering Blue-branded products/services (per Brand Regs 3.2):
> "Blue Cross and Blue Shield of Nebraska is an independent licensee of the Blue Cross Blue Shield Association."

**Not required for:** radio/TV ads, internet ads <3 sq in, out-of-home advertising, business cards, envelopes, promotional items, sponsorship-only logo use, career fairs, internal employee communications, or Nebraska Blue Foundation communications. When in doubt, include it or ask the Brand team.

### Boilerplate (don't alter without Communications team approval)
**One sentence:**
> Blue Cross and Blue Shield of Nebraska, an independent licensee of the Blue Cross Blue Shield Association, provides coverage for the care you need, access to the providers you trust and support from a team here in Nebraska.

**Short (press releases):**
> Through births and broken bones, tests and treatments, trauma and triumphs, Blue Cross and Blue Shield of Nebraska (BCBSNE) is there with you. Since 1939, we have ensured coverage for the care you need, access to the providers you trust and support from a team that's here in Nebraska. As an independent licensee of the Blue Cross Blue Shield Association, BCBSNE represents the nation's most experienced health insurance brands that collectively cover one in three Americans. Learn more at NebraskaBlue.com.

### Emoji use
Sparing and intentional only. Max 1–2 emojis per message, never replacing words (screen-reader accessibility). Avoid person/hand emojis where possible (use a generic object equivalent); if unavoidable, default yellow skin tone unless tied to a specific observance. Preferred set: 💙🌽😎🪥🩺👓🔭👟🌎👏🎈🏅. Avoid emojis with dual/inappropriate meanings; verify via a resource like Emojipedia if unsure. Be cautious with flag emojis (political sensitivity).

---

## 6. Brand Extensions

### Nebraska Blue Foundation (founded 2024)
Powers BCBSNE's philanthropic initiatives — supports programs improving Nebraskans' health/well-being and the state's economic vitality.

**Foundation palette:** leads with Process Blue, paired with a "sunny yellow" (NBF Goldenrod) symbolizing optimism — intentionally echoing Nebraska's state flower (Goldenrod) and state bird (Western Meadowlark).

| Name | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
| Process Blue | `#0099CC` | 0/130/202 | 100/10/0/10 | Process Blue C |
| NBF Goldenrod | `#FFDD55` | 255/221/85 | 0/13/67/0 | not specified |
| Sky Blue | `#8FCAE7` | 143/202/231 | 44/1/0/0 | 2905 C |
| Midnight Blue | `#003359` | 0/51/89 | 100/57/12/61 | 540 C |

**Confirmed logo asset files:** `NBF_Horizontal_Blue.svg`, `NBF_Horizontal_BlueWhite.svg`, `NBF_Horizontal_Black.svg`, `NBF_Horizontal_White.svg`, `NBF_Stacked_Blue.svg`, `NBF_Stacked_BlueWhite.svg`, `NBF_Stacked_Black.svg`, `NBF_Stacked_White.svg` — choose the arrangement that best fits your layout.

*(Not yet published in the guide: brand architecture, naming conventions, product sub-brands, and the "You Belong at Blue" / "Be Well at Blue" initiatives.)*

---

## 7. Practical Defaults for AI-Generated UI

Where the guide doesn't spell out a digital-component rule directly, apply these derived defaults, consistent with everything above:

- **Primary buttons:** Process Blue (`--bcbsne-process-blue`) fill, white text; hover/active darkens to Midnight Blue.
- **Secondary/outline buttons:** Midnight Blue or Black border/text, transparent/white fill.
- **Links:** Process Blue, darken to Midnight Blue on hover.
- **Headings:** Univers, Midnight Blue, sentence case or uppercase (never lowercase) per the confirmed type hierarchy.
- **Body text:** Univers 45 Light (or Arial fallback), Black, left-aligned.
- **Backgrounds:** White base; Ogallala Blue or Sandhills for subtle alternating sections/cards.
- **Charts/data viz:** cycle through the extended palette's *core* hues (Monument Orange → Tractor Green → Prairie Rose Pink → Stormcloud Purple → Meadowlark Yellow → Memorial Red, in that priority order) before adding anything else.
- **Copy tone:** every generated string of user-facing copy (button labels, empty states, errors, onboarding) should be run through the Helpful/Human/Smart filter and the writing-guide checklist in §5 — short sentences, active voice, no jargon, 6th-grade reading level.
- **Imagery:** if generating or sourcing photography/illustration, follow the three categories and "maintain authenticity" principle in §4 — no overly-posed stock-smile imagery, no artificial filters/duotones.

---

## 8. What's Confirmed vs. Not Yet Published

**Fully confirmed (this document):** Brand strategy (mission/values/personality), full logo system, full color system (primary/secondary/neutral/extended), full typography hierarchy, photography principles, verbal identity/voice/writing guide/DEI/IL tagline/boilerplate/emoji rules, Nebraska Blue Foundation brand extension.

**Marked "Coming soon" in the guide itself (do not invent):** extended-palette usage examples, verbal-identity messaging framework/headlines/CTAs/word bank, brand strategy Audience/Positioning/Vision, video/motion guidelines, most digital-application examples (live website/app/digital-ad mockups), most brand-extension sub-brands beyond Nebraska Blue Foundation ("You Belong at Blue," "Be Well at Blue," product sub-brands, naming, architecture).

If a task requires detail from one of these gaps, flag it rather than fabricating a rule, and check with the Brand team (Amy.Lillethorup@NebraskaBlue.com) or the portal directly for updates.