Design system, voice standards, and component specifications for ClearPath Benefits. A system built for operational precision across every investor, partner, and member touchpoint.
ClearPath Benefits is a licensed Medicare brokerage built on distribution infrastructure, carrier depth, and operational discipline. The company represents 30+ carrier organizations across Medicare Advantage, Medicare Supplement, and Part D product lines, with nationwide licensing and a team that understands AEP execution, T-65 pipeline management, and year-round SEP capture.
ClearPath exists because the Medicare distribution landscape rewards operators who combine compliance rigor with marketing precision. The company is engineered for that intersection.
To build the most operationally sound Medicare brokerage in the market — one that earns carrier confidence, attracts top-producing agents, and delivers measurably better outcomes for every beneficiary it touches.
| Value | In Practice |
|---|---|
| Precision | Every recommendation is plan-specific and situation-aware, not a generic coverage overview |
| Transparency | Carrier compensation structures, plan limitations, and network restrictions disclosed upfront |
| Execution | AEP-ready infrastructure, compliant marketing at scale, rapid enrollment processing |
| Depth | 30+ carrier contracts, all plan types, licensed in 50 states — breadth that enables genuine comparison |
| Accountability | Post-enrollment follow-through: plan performance tracking, annual reassessment, retention focus |
Evaluating distribution capacity, unit economics, carrier mix, and growth trajectory. These audiences want to see operational maturity, not brochure language. They scan for proof of infrastructure: carrier count, licensing footprint, agent model, and leadership depth.
Assessing production volume, compliance posture, and the quality of downstream agents. Looking for a brokerage that protects their brand while driving qualified enrollment.
Age 65+ or qualifying individuals navigating plan selection during AEP, OEP, or a Special Enrollment Period. Motivated by clarity and trust, not jargon. Geographic concentration in South Florida with nationwide capacity.
ClearPath Benefits is the Medicare brokerage built for operators — where carrier depth, compliance infrastructure, and marketing precision combine to deliver better enrollment outcomes and scalable distribution. Unlike high-volume call centers or undifferentiated lead aggregators, ClearPath pairs multi-carrier access with plan-level expertise that earns both carrier confidence and beneficiary trust.
The ClearPath logo pairs a lighthouse icon with the "ClearPath Benefits" wordmark. The lighthouse signifies navigation and guidance — a beneficiary's beacon through complex plan selection. The winding path beneath represents the enrollment journey.
Dark background: Use logo on a white card or container. A reversed (white wordmark) variant is recommended for direct dark-background placement.
| Context | Min Height | Recommended |
|---|---|---|
| Website Navigation | 48px (mobile) | 60–72px (desktop) |
| Footer | 40px | 48px |
| Social / Profile | 180px | 400px+ |
| Print (business cards) | 0.5" | 0.75" |
Clear space: Maintain padding equal to the height of the lighthouse lantern room around all sides of the complete logo.
ClearPath's visual language communicates operational confidence. Where Gotham Healthcare leans warm and approachable, ClearPath is calibrated: precise spacing, restrained color, editorial typography. The aesthetic sits at the intersection of institutional credibility and modern healthcare technology — signaling to investors that this team understands both the regulatory landscape and the marketing machinery required to win in Medicare distribution.
Cool white backgrounds with deliberate negative space. Grid-aware layouts with clear information hierarchy. Visual density where it builds credibility, breathing room everywhere else.
A serif/sans-serif pairing gives headlines weight without stiffness. Monospace accents introduce a data-forward sensibility. The result reads like a well-designed annual report, not a template.
Beacon Gold appears sparingly — a deliberate signal, not decoration. When it shows up, it means something: a key metric, an active element, a navigation indicator. This economy of color builds its authority.
Professional credibility that rewards a closer look. Every design decision should withstand the scrutiny of both a Medicare compliance officer and a private equity associate reviewing the site during diligence.
ClearPath uses a three-font system: Playfair Display for display and headlines, Outfit for body text and UI, and JetBrains Mono for data, specs, and code. This pairing blends editorial authority with modern utility — the serif gives headlines weight and distinction, while the geometric sans-serif keeps body copy clean and scannable.
Navigate Medicare with precision
font-family: 'Playfair Display', Georgia, serif; /* Headlines, display, section titles */
ClearPath Benefits represents 30+ carrier organizations across Medicare Advantage, Supplement, and Part D.
font-family: 'Outfit', -apple-system, sans-serif; /* Body, UI, buttons, navigation */
30+ carriers · 50 states · AEP-ready
font-family: 'JetBrains Mono', monospace; /* Data labels, code, specs, metrics */
Medicare, optimized
/* Italic serif in beacon gold */ font-style: italic; color: #B5912D;
30+
Carrier partners
/* Metric display pattern */ font-family: 'JetBrains Mono'; font-weight: 600;
ClearPath's palette is cooler and more restrained than a typical Medicare brand. The navy anchors authority, the antique gold signals quality without shouting, and the teal provides a modern technology accent for data visualizations and interactive elements.
| Context | Element | Color |
|---|---|---|
| Light BG | Primary text | #132D44 Navy or #111827 Gray 900 |
| Secondary text | #374151 Gray 700 | |
| Gold accent text | #6E5517 Beacon Text — never bright gold | |
| Dark BG | Primary text | #FFFFFF at 85% opacity |
| Secondary text | #FFFFFF at 65% opacity | |
| Accent text | #D1AC4E Beacon Light | |
| Buttons | Primary CTA | Navy bg, white text |
| Beacon CTA | Beacon Gold bg, white text | |
| Outline | Transparent, Gray 300 border | |
| Signal | Transparent, Teal border + text | |
| Backgrounds | Page default | #F8F9FB White |
| Alternate sections | #EFF1F5 Fog | |
| Dark sections | #132D44 Navy or #0B1D2C Midnight |
ClearPath speaks like a seasoned operator briefing a board — precise language, specific proof points, zero filler. The voice earns trust through demonstrated competence rather than reassurance. It knows the difference between AEP and OEP, between a T-65 lead and a SEP trigger, and it assumes its most important audience does too.
| Attribute | What It Means | In Practice |
|---|---|---|
| Precise | Specific over vague, data over assertion | "30+ carrier contracts across MA, Supplement, and Part D" — not "wide selection of plans" |
| Confident | Authority earned through execution | "Licensed in all 50 states with AEP-ready infrastructure" — not "we're here to help" |
| Operational | Shows how the machine works | "Plan-level comparison, not carrier-level" — not "we compare plans for you" |
| Direct | Respects the audience's intelligence | "No cost to the beneficiary. Compensated by carriers." — period. |
| Measured | Calm authority, never oversells | No exclamation points. No "amazing." No "revolutionize." |
ClearPath occupies a specific position on each tonal axis. These spectrums guide writers toward the brand's center of gravity.
| Context | Tone | Example |
|---|---|---|
| Hero / Headlines | Assured, editorial | "Medicare, optimized." |
| Investor-facing copy | Operational, data-grounded | "30+ carrier contracts, 50-state licensing, year-round enrollment infrastructure." |
| Service descriptions | Clear, specific | "Medicare Advantage plans combine hospital, medical, and often prescription coverage into a single plan — often at a lower premium than Original Medicare plus a standalone supplement." |
| CTAs | Direct, low-friction | "Compare Plans" · "Talk to an Agent" |
| Compliance / Legal | Straightforward, no hedging | "We do not offer every plan available in your area." |
Lead with operational capability: carrier depth, licensing footprint, enrollment processing capacity. Investors need to see a machine, not a brochure. Speak to AEP readiness, agent support systems, and compliance infrastructure as evidence of scalable execution.
30+ carrier relationships is a competitive moat. Frame it as access — beneficiaries get genuine cross-carrier comparison, not a curated shortlist. For investors, this signals product breadth and revenue diversification. Always cite the specific number.
The differentiator is granularity. ClearPath doesn't compare carriers — it compares plans. Formulary details, network adequacy, cost-sharing structures. This specificity is what separates a brokerage from a lead generator.
In Medicare, compliance isn't overhead — it's a license to operate. Position ClearPath's adherence to CMS marketing guidelines not as a constraint but as proof that the operation is built for longevity. Carriers prefer partners who protect their brand.
"We do not offer every plan available in your area. Currently we represent 30+ organizations which offer a variety of products in your area. Please contact Medicare.gov, 1-800-MEDICARE, or your local State Health Insurance Program (SHIP) to get information on all of your options."
Placement: Footer area, above copyright. Must be clearly readable and never minimized, collapsed, or obscured by design treatment.
Use "usted" form throughout — formal and respectful. Target Latin American dialect for South Florida market context. Maintain the same measured, precise tone. All copy must be professionally translated; machine translation is never acceptable. Key phrase: "Medicare con claridad."
ClearPath buttons use a squared-off radius (6px) rather than pill shapes. This subtle distinction signals precision and modernity — every corner is intentional, nothing is rounded by default.
| Type | Background | Text | Border | Use Case |
|---|---|---|---|---|
| Primary | Navy | White | Navy | Primary CTAs |
| Beacon | Beacon Gold | White | Beacon | Phone CTAs, key actions |
| Outline | Transparent | Navy | Gray 300 | Secondary actions |
| Signal | Transparent → Teal | Teal → White | Teal | Data actions, technology |
/* ClearPath button base */ padding: 0.7rem 1.5rem; border-radius: 6px; /* Squared, not pill */ font-family: 'Outfit'; font-size: 0.88rem; font-weight: 500; border: 1.5px solid; transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
ClearPath replaces traditional card layouts with a panel grid — content blocks separated by 1px borders rather than floating with shadows. This creates a denser, more information-rich layout that signals operational seriousness.
White background, 1px shared borders, generous internal padding. The default content container for all sectioned information.
Standard panel with a 3px left border in Beacon Gold. Used for key content, messaging pillars, or featured information that should draw the eye.
/* Panel grid — 1px gap creates shared borders */ .panel-grid { display: grid; gap: 1px; background: #E5E7EB; /* Border color */ border-radius: 10px; overflow: hidden; } .panel { background: #F8F9FB; padding: 1.75rem; }
Metrics and KPIs use a dedicated tile component with monospace numerics. These tiles communicate "we measure what matters" — a signal that resonates with investors who evaluate operational maturity.
.tile-value { font-family: 'JetBrains Mono'; font-size: 1.5rem; font-weight: 600; color: #132D44; } .tile-label { font-size: 0.75rem; color: #9CA3AF; }
Section labels use squared tags with a monospace font and a leading dot indicator. This replaces the pill-shaped labels common in consumer healthcare sites with something more editorial and structured.
| Property | Specification |
|---|---|
| Max content width | 1080px |
| Side padding | 2rem (32px) |
| Section vertical padding | 5rem (80px) desktop / 3.5rem mobile |
| Panel grid gap | 1px (shared border pattern) |
| Component gap | 0.75rem – 1rem |
| Subsection spacing | 3rem between subsections |
ClearPath animations are quick and purposeful. Transitions feel responsive rather than theatrical — closer to a well-built application than a marketing site. The standard curve is slightly faster than typical, reinforcing the sense of operational precision.
| Token | Value | Use |
|---|---|---|
| Ease | cubic-bezier(0.25, 0.46, 0.45, 0.94) | Default transitions |
| Ease Out | cubic-bezier(0, 0, 0.2, 1) | Entrances, reveals |
| Fast | 150ms | Micro-interactions (hover color) |
| Base | 250ms | Standard transitions |
| Measured | 400ms | Section transitions |
| Slow | 500ms | Page-level entrances |
| Element | Hover Effect | Notes |
|---|---|---|
| Buttons | translateY(-1px) | Minimal lift. Shadow on primary only. |
| Panels | Background color shift | No lift or shadow — panels stay grounded. |
| Tiles | Border-color → beacon | Subtle highlight, no movement. |
| Links | Color → signal teal | Underline on hover for accessibility. |
ClearPath hover effects are deliberately understated compared to Gotham Healthcare's 4–8px card lifts. Restraint in animation signals maturity. The site should feel responsive, not performative.
/* Fade In Up — primary entrance */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } animation: fadeInUp 0.5s ease-out forwards; /* Stagger: 80ms offset per child */ .item:nth-child(1) { animation-delay: 0.08s; } .item:nth-child(2) { animation-delay: 0.16s; } .item:nth-child(3) { animation-delay: 0.24s; }
| Animation | Element | Details |
|---|---|---|
| Grid Fade | Hero background | Subtle CSS grid pattern at 3% opacity, no movement — static texture |
| Beacon Pulse | Hero accent word | 20s cycle, gold opacity 0.6 → 1.0 on the italic serif word — near-subliminal |
| Counter Roll | Data tiles | Numbers count up from 0 on scroll-into-view, 600ms total, using IntersectionObserver |
prefers-reduced-motionClearPath photography should feel candid and contemporary — active seniors, not posed. Cool-neutral color grading aligns with the brand palette. Avoid the warm golden-hour treatment common in Medicare marketing; ClearPath's visual approach is closer to editorial healthcare coverage than insurance advertising.
Senior individuals and couples in authentic settings. Outdoor activity, home settings, genuine conversation. No stethoscopes, no lab coats, no stock "doctor shaking hands" scenes. Diverse representation reflecting the national footprint.
High resolution (2× minimum for retina). WebP format preferred, AVIF where supported. Cool-neutral color grading — desaturate warm tones by 15–20%. Transparent backgrounds for hero imagery where possible.
Shallow depth of field. Natural window light preferred over studio. Compositions that leave negative space for text overlay. Avoid cropping faces — full or three-quarter framing only.
| Property | Specification |
|---|---|
| Style | Line icons, 1.5px stroke weight (thinner than Gotham's 2px) |
| Colors | Navy primary, Beacon Gold for active states, White on dark backgrounds |
| Sizes | Small: 16px · Medium: 20px · Large: 24px · Feature: 32px |
| Library | Lucide or Phosphor (consistent weight, open license) |
| Corners | Squared joins, matching button radius aesthetic |
ClearPath favors geometric abstractions over literal healthcare illustrations. Subtle grid patterns, topographic-style contour lines, or minimal geometric shapes at very low opacity (2–4%) as background textures. No clip art, no literal medical symbols.
All text must meet WCAG 2.1 AA standards minimum. AAA is the target for primary text pairings. Large text (18px+ or 14px bold) requires 3:1 minimum; normal text requires 4.5:1.
All interactive elements must have visible focus indicators, hover states, and disabled states.
/* Focus ring — navy with offset */ :focus-visible { outline: 2px solid #132D44; outline-offset: 2px; } /* Respect motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }
| Requirement | Detail |
|---|---|
| Heading hierarchy | Proper h1 → h2 → h3 sequence, no skipped levels |
| Landmark elements | Use <nav>, <main>, <footer>, <section> |
| Image alt text | Meaningful descriptions for content images; alt="" for decorative |
| Form labels | Every input requires an associated <label> |
| Phone numbers | Always use tel: links for one-tap dialing |
| Touch targets | Minimum 44×44px on mobile for all interactive elements |
Given the 65+ beneficiary audience: minimum 16px body text (already met), touch targets of at least 44×44px on mobile, high-contrast mode support via prefers-contrast: more, and no time-dependent interactions. All phone numbers should use tel: links for one-tap dialing. Avoid hover-only information disclosure — anything shown on hover must also be accessible via focus or tap.
Navy: #132D44 Midnight: #0B1D2C Beacon: #B5912D Beacon Text: #6E5517 Signal: #1A7F7F White: #F8F9FB Fog: #EFF1F5
/* Display */ 'Playfair Display', Georgia /* Body & UI */ 'Outfit', -apple-system /* Data & Code */ 'JetBrains Mono', monospace
/* Standard */ transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94); /* Entrance */ transition: all 0.5s cubic-bezier(0,0,0.2,1);
/* Button padding */ padding: 0.7rem 1.5rem; /* Border radius */ --radius: 6px; --radius-lg: 10px; /* Content max-width */ max-width: 1080px;