Brand Style &
Design Guide

Brand Overview

United Medicare Advisors (UMA) is a licensed insurance advisory service that connects Medicare beneficiaries with trained, independent agents to find the right Medicare Supplement, Medicare Advantage, and Prescription Drug Plan coverage.

Mission

To simplify the Medicare experience by connecting beneficiaries with rigorously trained, independent advisors who provide personalized guidance at no cost to the customer.

Brand Voice & Tone

UMA’s voice strikes a balance between approachable and authoritative. We speak to an audience that is navigating a complex, sometimes overwhelming system — so our tone is always:

• Clear — No jargon without explanation. Short sentences. Direct language.
• Reassuring — We acknowledge complexity, then simplify it. “Don’t worry, we’ll walk you through it.”
• Knowledgeable — We cite specifics (plan letters, deductible amounts, enrollment periods) to build trust.
• Personal — “Your advisor,” “your plan,” “your needs.” Never generic.
• Honest — We present tradeoffs. “Plan N costs less, but you may pay small copays.”

Avoid: hard-sell urgency, fear-based language, overpromising, or Medicare jargon without context.

Logo Usage

The UMA logo exists in two primary variants:

• Dark logo — Used on light backgrounds (cream, white, light gray). This is the default.
• Light logo — Used on dark backgrounds (navy, navy-deep, blue, image overlays).

Minimum clear space around the logo should equal the height of the “U” in “UMA” on all sides. Do not stretch, rotate, recolor, or place the logo on busy backgrounds without an overlay.

Logo Files

Color Palette

Our palette is anchored by three logo-derived brand colors (Navy, Blue, Red) and extended with warm neutrals and functional accents. All colors are available as CSS custom properties.

Primary Colors

These three colors are derived directly from the UMA logo and form the foundation of the visual identity.

Usage: Navy is the primary text and header color. Blue is used for links, interactive elements, and secondary CTAs. Red is reserved for high-priority CTAs (phone numbers, urgency buttons).

Secondary & Accent Colors

Usage: Teal is the primary accent — used for eyebrow labels, badges, success states, and accordion indicators. Gold is used for star ratings and highlight callouts. Error red is for form validation only.

Hover / Dark Variants

Light Tints

Warm Neutrals & Surfaces

Note: UMA uses warm neutrals (stone tones) rather than cool grays. The page background is Cream (#FEFCF8), not pure white. Cards and elevated surfaces use white (#FFFFFF) to contrast against the cream canvas.

Typography

UMA uses a single-font system built on DM Sans from Google Fonts. One family serves display, body, and UI needs — achieving visual cohesion while keeping load times minimal.

Type Scale

Sizes use CSS clamp() for fluid scaling between breakpoints. Values shown are desktop maximums.

Fluid Type Tokens

Weight Usage

Spacing & Layout

A 6-step spacing scale provides consistent rhythm across all layouts. All values are defined as CSS custom properties and scale down at tablet and mobile breakpoints.

Spacing Scale

Section Spacing Utilities

Layout Containers

Background Utilities

Elevation & Shape

Shadows, border radii, and transitions create a consistent sense of depth and interaction across all components.

Shadows

Border Radius

Transitions

Buttons

Five button variants cover all use cases. All share DM Sans at 16px weight 700, 8px radius, and a subtle translateY lift on hover.

On Light Backgrounds

On Dark Backgrounds

How to Build

Option A: In Breakdance

1. Add a Button element
2. Set the button text and link
3. Open Advanced > HTML element and ensure it’s set to <a> for links or <button> for actions
4. In Advanced > CSS Classes on the wrapper div, add the class: btn-navy, btn-red, etc.
5. Leave the Breakdance Design tab properties blank — the CSS class handles all styling

Option B: In an HTML Code Block

Button Reference

Modifiers

Breakdance Note

In Breakdance, buttons render as <div class="bde-button"><button class="bde-button__button">. Our CSS targets the inner element. Always set the Breakdance Style toggle to “Custom” and add the class (e.g., btn-navy) to the wrapper div, not the inner button.

Cards

Cards are the primary content container across the site. All cards share a consistent border, radius, and hover behavior.

Base Card

Card Specifications

How to Build a Card

Option A: In Breakdance

1. Add a Div element (not Columns)
2. In Advanced > CSS Classes, add uma-card (or uma-card-featured for the featured variant)
3. Inside the Div, add an Eyebrow (Rich Text or Heading element) with class uma-eyebrow
4. Add a Heading element for the card title
5. Add a Rich Text element for the description
6. Optionally add a Button inside the card with appropriate button class
7. Leave all padding/border styling to the CSS class — don’t set spacing in the Design tab

Option B: In an HTML Code Block

Grid layout: Wrap multiple cards in a flex or grid container. Use display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; or Breakdance’s column settings on the parent Div.

Card Variants

Badges

Badges are small pill-shaped labels used inside cards, table headers, and plan descriptions to highlight status, category, or restrictions.

Badge Reference

How to Build a Badge

In Breakdance

1. Add a Rich Text or Text element
2. Type the badge label text (e.g., “Most Popular”)
3. In Advanced > CSS Classes, add two classes: uma-badge and the variant (e.g., uma-badge-teal)
4. Set the element tag to <span> in Advanced > HTML element if needed for inline placement

In an HTML Code Block

Sizing: Badges are 11px, font-weight 700, with padding 3px 10px and border-radius: 999px (pill shape). They inherit no extra margin — add spacing via the parent element.

Accordions / FAQ Pattern

The uma-fh-* class family powers all FAQ and expandable content sections across the site. It supports grouped questions with count badges, deep-linking, and schema markup.

Preview

Anatomy

• Group header (.uma-fh-group-head) — Cream background, bold label, teal count badge, chevron toggle
• Question trigger (.uma-fh-q) — Full-width button, 15px weight 600, teal +/− indicator
• Answer body (.uma-fh-a) — Hidden by default, shown when aria-expanded="true"
• Deep links — Each item has an id attribute for direct URL linking (e.g., #best-time-buy-medsup)

How to Build

FAQ accordions are always implemented as HTML Code Blocks (not Breakdance’s native Accordion element) to ensure consistent styling, schema markup, and deep-linking.

Minimal FAQ Accordion (no groups, no search)

Grouped FAQ (with category headers and count badges)

Key Styling Rules

• The + / − toggle is generated via .uma-fh-q::after — do not add it manually
• The expanded state is controlled by aria-expanded="true" on the button, which shows the adjacent .uma-fh-a via CSS adjacent sibling selector
• Deep link IDs should be kebab-case and descriptive (e.g., faq-plan-g-vs-plan-n)
• Answers can contain <p>, <ul>, <strong>, and links — but avoid headings inside answers

Schema Integration

Every FAQ component must include a <script type="application/ld+json"> block with FAQPage schema placed after the HTML. Each visible question/answer pair should have a corresponding entry in mainEntity.

Important: Schema text should be the plain-text version of the answer (no HTML tags). Keep it under 300 words per answer for optimal search engine display.

Data Tables

Tables display Medicare cost data, plan comparisons, and IRMAA brackets. They integrate with the Medicare Data Hub plugin for dynamic values.

Base Table (.uma-coverage-table)

• Navy header row with white text
• Alternating light row backgrounds
• Teal checkmark icons for coverage indicators
• Responsive: sticky first column on mobile with horizontal scroll

How to Build a Data Table

Data tables are always implemented as HTML Code Blocks to support token replacement, sticky columns, and coverage indicators.

Basic Coverage Table

Cell Status Classes

Responsive Wrapper

Always wrap tables in <div class="uma-table-responsive"> which adds overflow-x: auto and smooth touch scrolling. For wide comparison charts, the first column becomes sticky on mobile via position: sticky; left: 0;.

Comparison Chart (Mobile Pattern)

The standardized Medicare Supplement comparison chart uses a filter chip pattern on mobile (below 900px). Users tap pill-shaped buttons to show/hide plan columns. Default mobile selection: G, N, F.

• Active chips: solid blue background
• Pre-2020 chips (C, F): dashed border when inactive, dark navy when active
• Benefit name column stays sticky-left for context

Filter Chip HTML

The is-active class determines which plan columns are visible. JavaScript toggles this class on click and shows/hides the corresponding data-plan columns in the table.

Token Replacement

Tables use tokens that are dynamically replaced by the Medicare Data Hub plugin:

Forms & Lead Capture

UMA uses two lead form patterns — a single-page form and a progressive multi-step form — plus confirmation and thank-you page components.

Single-Page Lead Form

Used on /comparison-shop/. All fields visible at once with a trust signals sidebar (security badges, Trustpilot widget, carrier logos). Class prefix: .uma-lead-single, .uma-form-*.

How to Build

1. Create a new page in WordPress and assign a Breakdance template with no header/footer navigation
2. Add a Code Block element and paste the contents of uma-lead-form-single.html
3. The form uses a two-column layout: form fields on the left (.uma-lead-single-form), trust signals on the right (.uma-lead-single-sidebar)
4. Carrier logos and Trustpilot widget are embedded inside the sidebar — update the logo <img> paths to match your media library URLs
5. The form submits to the endpoint defined in the action attribute — update this with your LeadAcquire or Salesforce URL
6. Zip code can be pre-filled via a ?zip= query parameter (handled by the inline JS)

Progressive Multi-Step Form

Used on /guided-shopping/. Steps reveal one at a time with a randomized agent guide avatar. Includes SMS opt-in step with editable phone field and compliance disclaimer. Class prefix: .uma-lead-progressive.

Steps

1. Step 1: Name (first + last)
2. Step 2: Zip Code + Date of Birth
3. Step 3: Phone + Email + Consent disclaimer
4. Step 4: SMS Opt-In (optional, with editable phone field)
5. Step 5: Confirmation / redirect to thank-you page

How to Build

1. Create a page with the same no-nav Breakdance template used for the single form
2. Add a Code Block and paste uma-lead-form-progressive.html
3. The agent guide photo is randomized on page load from an array of agent image URLs — update the agentPhotos array in the JS with your actual agent photo URLs from the media library
4. Step visibility is controlled via .active class toggling in JS — only the current step is visible
5. Form data persists across steps in JS variables and is submitted as a single payload at the end
6. The SMS opt-in step pre-fills the phone number from Step 3 and allows editing; its disclaimer text is below the button

Confirmation Pages

Three confirmation page variants share the .uma-thankyou-* class family:

How to Build

1. Create a new page (e.g., /thank-you/, /consent-confirmation/, /newsletter-confirmation/)
2. Use Breakdance with the standard site template (header + footer visible)
3. Add a single Code Block element and paste the corresponding HTML file
4. Agent photos are randomized via a JS array — update the agentPhotos array with your media library URLs
5. Resource card links point to existing site pages (“Medicare Costs”, “Our Agents”, etc.) — update the href values

Navigation & CTAs

Persistent navigation and call-to-action elements that appear across all pages.

Sticky Footer CTA Bar

A fixed-bottom bar with “Compare Plans Free” button and phone number. Includes a Trustpilot widget. Hidden on /comparison-shop/ and /guided-shopping/ pages to avoid competing with the lead form.

How to Build

1. The sticky CTA is a Breakdance Global Block that renders on all pages via a Breakdance condition
2. It uses position: fixed; bottom: 0; left: 0; width: 100%; with a high z-index
3. To hide on specific pages, add the page slug to the exclusion condition in Breakdance > Global Blocks, or use CSS: .page-comparison-shop .uma-sticky-cta { display: none; }
4. The Trustpilot widget is embedded as an <iframe> inside the bar — set its width to 120px on desktop and 100px on mobile
5. On mobile, the bar stacks to a single column with the button full-width

Zip Code Entry CTA

An inline component with a zip code input field and “Compare Plans” button. On submit, navigates to /comparison-shop/?zip={value}. Available in red or blue-teal gradient variants. Class prefix: .uma-zip-cta.

How to Build

Drop uma-zip-cta.html into a Breakdance Code Block, or build manually:

Variant: Add class uma-zip-cta--gradient to the wrapper for a blue-teal gradient button instead of red.

Phone CTA Patterns

Carrier Logo Cloud

Animated carrier logo bar (.uma-carrier-cloud) showing partner insurance companies. Logos stagger in with a reveal animation. Used on homepage, about page, and carrier partner page.

How to Build

1. Drop uma-carrier-cloud.html into a Breakdance Code Block
2. Logos are <img> tags inside a flex container with flex-wrap: wrap and centered alignment
3. Each logo has a staggered CSS animation (animation-delay increments by 0.08s per logo)
4. To add or remove carriers, add/remove <img> tags and adjust the animation delay sequence
5. Logos should be uniformly sized (recommended: max-height: 48px) and use transparent PNG or SVG format

Component Catalog

Complete index of all HTML components in the design system. Each component is a self-contained file dropped into a Breakdance Code Block.

How to Use the Catalog

Every component below is an HTML file that you drop into a Breakdance Code Block. For each component:

1. Open the file and copy the entire contents
2. In your Breakdance page editor, add a Code Block element where you want the component
3. Paste the HTML into the Code Block
4. If the Dependency column says Global CSS, the site’s uma-global.css must be loaded (it should be by default via Breakdance Settings > Custom Code)
5. If it says Standalone, the file includes its own scoped <style> and <script> — no external CSS needed
6. If it says + Plugin, the Medicare Data Hub plugin must be active for token replacement

Lead Capture & Confirmation

Plan Content & Comparison

FAQ Components

Data Tables (Medicare Costs)

Interactive Tools

Site-Wide Elements

Page Templates

Standard page structures used across the site. Each template defines the section order, component placement, and spacing rhythm.

Plan Detail Page

Used for individual plan pages (e.g., /plans/medicare-supplement-insurance/medigap-plan-g/).

1. Hero section — Eyebrow + H1 + tagline badge + intro paragraph (bg-navy or hero-shape)
2. Key benefits — Checkmark list in a card or inline layout
3. Plan comparison chart — Highlighted column for the current plan
4. Estimated costs / pricing table — Tabbed by zip code, with carrier rates
5. FAQ accordion — Plan-specific questions with schema markup
6. CTA section — Zip code entry or “Compare Plans” button

Lead Form Pages

/comparison-shop/ (single form) and /guided-shopping/ (progressive form).

1. Form section — Full-width, two-column layout (form left, trust signals right)
2. No header nav or footer — Minimal distractions, logo only
3. Sticky CTA hidden — These pages suppress the global sticky footer CTA

Confirmation Pages

1. Checkmark hero — Animated check icon + confirmation headline
2. Info/step cards — 3-column grid of next steps or what-to-expect
3. Agent contact teaser — Randomized agent photos + phone CTA
4. Resource grid — 3 linked resource cards
5. Bottom CTA bar — Return to homepage or compare plans link

Resource / Content Pages

Used for /resources/medicare-costs/, /resources/medicare-enrollment/, etc.

1. Hero — H1 + intro paragraph on cream or navy background
2. Content sections — Alternating white/cream backgrounds with data tables, glossary accordions, or informational cards
3. FAQ section — Page-specific FAQ with schema
4. CTA footer — Zip code entry or phone CTA

Agent Pages

• Agent Listing (/our-agents/) — Trust banner + agent card grid + US agent map
• Agent Detail (/agents/[name]/) — Agent photo + bio, trust badges, product cards (flip-style), reviews, and contact CTA

Code Conventions

Standards for CSS naming, responsive design, and integration with Breakdance and WordPress.

CSS Naming

• All custom classes use the uma- prefix (e.g., uma-card, uma-h2, uma-lead-progressive)
• Button modifiers use btn- prefix (e.g., btn-navy, btn-lg)
• Utility classes (spacing, color, alignment) are unprefixed for brevity
• Standalone components use unique scoped prefixes (e.g., uma-pc-, uma-msc-, uma-rv-)

Responsive Breakpoints

Breakdance Integration Rules

1. Always set the Style toggle to “Custom” before applying CSS classes to buttons
2. CSS classes go in Advanced > Classes on the wrapper element
3. Leave Design tab properties blank for any element controlled by a CSS class
4. Default to plain Divs for layout — do not use Breakdance’s Columns element
5. Test on the frontend with a hard refresh (Cmd+Shift+R), not in the Breakdance editor

Token Replacement System

The Medicare Data Hub plugin (uma-medicare-data-hub.php) provides dynamic data via two mechanisms:

• Server-side: PHP the_content filter replaces tokens in post/page content
• Client-side: JavaScript replaces tokens in Breakdance Code Blocks (which bypass the_content)

Schema Markup

Structured data is output via the Medicare Data Hub plugin and inline in FAQ components:

• Organization / InsuranceAgency — Global, includes contactPoint, address, sameAs
• AggregateRating — Trustpilot review data on InsuranceAgency
• WebSite + SearchAction — Sitelinks search box
• BreadcrumbList — Auto-generated for all pages
• FAQPage — Inline on every FAQ accordion component

Implementation Notes

Architecture, file structure, and deployment details for the UMA design system.

File Architecture

CSS Delivery

• uma-global.css is the authoritative source file (13,000+ lines)
• For Breakdance: copy the file without the @import Google Fonts line and paste into Breakdance > Settings > Custom Code > CSS
• Google Fonts (DM Sans) is loaded via a <link> tag in the site <head> or via the Breakdance “Custom Fonts” setting

WordPress Plugin Dependency

The UMA Medicare Data Hub plugin (uma-medicare-data-hub.php) must be active for:

• Dynamic cost data tokens (2026, {cost:*}, {data:*})
• ACF Options pages for managing Medicare cost figures
• JSON-LD schema output (Organization, AggregateRating, WebSite, BreadcrumbList)
• Shortcodes for inline data display

Standalone Components

Components marked “Standalone” in the catalog include their own scoped <style> and <script> blocks. They load DM Sans from Google Fonts and can be used on any page — including paid landing pages or external sites — without uma-global.css.

Exporting This Guide as PDF

1. Open uma-brand-guide.html in any browser
2. Press Cmd+P (Mac) or Ctrl+P (Windows)
3. Set destination to “Save as PDF”
4. Ensure “Background graphics” is checked for color swatches
5. Print — the sidebar navigation is automatically hidden in print mode