The complete design system, voice guidelines, and component specifications for Gotham Healthcare's digital presence. Built for consistency across every touchpoint.
Gotham Healthcare Partners LLC is a licensed Medicare insurance agency helping seniors navigate Medicare plan selection across all 50 states. Founded with 25+ years of combined industry experience, the company partners with 30+ insurance carriers to provide unbiased plan comparisons at no cost to clients.
Headquarters: 6700 N. Andrews Ave. Suite 712, Ft. Lauderdale, FL 33309
To simplify Medicare for seniors by providing expert, personalized guidance without pressure or cost — empowering informed healthcare decisions.
| Value | Expression |
|---|---|
| Trustworthiness | Licensed agents, transparent process, no hidden fees |
| Simplicity | Making complex Medicare decisions easy to understand |
| Service | 100% free to clients, putting their needs first |
| Expertise | 25+ years experience, partnerships with 30+ carriers |
| Accessibility | Nationwide coverage, bilingual support (EN/ES) |
Evaluating company credibility, scale, and growth potential. Looking for professional presentation and market position. Interested in leadership visibility, carrier relationships, and operational maturity.
Age 65+ or qualifying disabled individuals seeking unbiased plan comparison. Value personal service over automated tools. May prefer phone consultation. Geographic focus on South Florida with nationwide reach.
For seniors navigating Medicare choices, Gotham Healthcare is the trusted partner that makes plan selection simple and stress-free, because we combine decades of expertise with genuinely free, personalized service — unlike transactional comparison websites or high-pressure sales operations.
| Differentiator | Detail |
|---|---|
| Personal guidance | Licensed agent (not a call center) |
| Free service | Compensated by carriers, never the client |
| No-pressure approach | Consultative, not transactional |
| Multi-carrier access | 30+ carrier options compared |
| Bilingual support | English and Spanish |
The primary logo is a square format featuring the "GH" letterform set against a city skyline silhouette with a caduceus-topped spire and the Gotham Healthcare wordmark below. Two variants exist: the full-color version for light backgrounds, and a CSS-inverted monochrome white version for dark backgrounds (used on the live site via filter/invert effects).
Primary — Light Backgrounds
Inverted — Dark Backgrounds (CSS)
| Variant | File / Method | Usage |
|---|---|---|
| Primary (Square) | gotham-logo.png | Light backgrounds, all standard contexts |
| Inverted (White) | CSS: filter: brightness(0) invert(1) | Dark / navy backgrounds |
| Favicon only | favicon.ico (GH monogram) | Browser tab only — never in content |
| Context | Min Height | Recommended |
|---|---|---|
| Website Navigation | 58px (mobile) | 70–91px (desktop) |
| Footer | 48px | 48px |
| Social Media Profile | 180px | 400px+ |
| Print (business cards) | 0.5" | 0.75" |
A simplified "GH" monogram is used as the browser favicon only. It should not appear in any other context — always use the full Gotham Healthcare logo shown above for navigation, headers, print materials, and all brand touchpoints.
Clear Space: Maintain padding equal to the height of the "G" letter around all sides.
The Gotham Healthcare visual identity is characterized by warm backgrounds, geometric sans-serif typography, subtle premium animations, generous whitespace, card-based layouts, and desaturated accent colors.
Cream and warm beige backgrounds replace harsh whites. The palette feels inviting and approachable rather than clinical.
Subtle animations and desaturated gold tones project quality without appearing cheap or over-designed.
Card-based layouts and generous whitespace create clear visual organization that builds trust with both seniors and investors.
Sophisticated healthcare aesthetics that inspire trust with both seniors and investors, avoiding both dated corporate blue/gray and trendy startup vibes.
A geometric sans-serif with modern, friendly characteristics similar to Söhne and Graphik. Available free via Google Fonts.
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
Medicare made easy
font-weight: 500; letter-spacing: -0.03em; color: #1D3344;
Medicare made easy with Gotham
font-style: italic; font-weight: 400; /* Lighter than surrounding */
Reserved for the hero "with Gotham" only. A subtle gold shimmer sweeps across on a 15-second cycle using background-clip: text with desaturated gold (#D4B052). Must respect prefers-reduced-motion.
| Context | Element | Color |
|---|---|---|
| Light BG | Primary text | #1D3344 Navy |
| Secondary text | #475569 Slate 600 | |
| Gold accent text | #654F0A Gold Text — never bright gold | |
| Dark BG | Primary text | #FFFFFF White |
| Secondary text | White at 80% opacity | |
| Accent text | #F5B800 Gold | |
| Buttons | Primary CTA | Navy bg, white/cream text |
| Secondary CTA | Gold bg, navy-dark text | |
| Ghost/outline | Transparent with navy border | |
| Backgrounds | Page default | #FDFAF7 Cream |
| Hero cards | Gradient: #F5F2EF → #EFEAE7 | |
| Footer | Navy with slight darkening overlay |
| Attribute | Description | Example |
|---|---|---|
| Trustworthy | Honest, transparent, no hype | "No pressure, no obligation — just honest guidance" |
| Warm | Personal, caring, not corporate | "We're here to help" not "Our representatives are standing by" |
| Clear | Simple language, no jargon | "Medicare made easy" not "Streamlined enrollment solutions" |
| Confident | Authoritative without arrogance | "25+ years experience" not "Industry-leading expertise" |
| Supportive | Acknowledges concerns, offers help | "Navigating Medicare shouldn't be complicated" |
| Context | Tone | Example |
|---|---|---|
| Hero / Headlines | Confident, inviting | "Medicare made easy with Gotham" |
| Service descriptions | Informative, helpful | "Medicare Advantage plans combine your hospital and medical coverage…" |
| CTAs | Direct, warm | "Get Free Consultation" |
| Contact / Support | Reassuring, available | "We're here to help. Call or send us a message…" |
| Legal / Compliance | Clear, honest | "We do not offer every plan available in your area…" |
Lead with "Medicare made easy." Acknowledge complexity, promise clarity. Avoid overwhelming with options.
Emphasize licensed agents and years of experience. Show: 25+ years, 30+ carrier partners. Prove the no-cost, no-pressure approach.
Highlight personalized attention and free consultations. "We work for you, not the insurance companies." Guidance through the entire process.
Scale: All 50 states, 30+ carriers. Variety: All Medicare plan types. Convenience: Compare everything in one place.
Use "usted" form throughout (formal, respectful). Target Latin American dialect for South Florida context. Maintain the same warm, trustworthy, professional tone. Key phrase: "Medicare hecho fácil." All copy must be professionally translated — never machine translation.
"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 clear, readable, and not hidden or minimized.
| Type | Background | Text | Border | Use Case |
|---|---|---|---|---|
| Primary | Navy | White/Cream | None | Main CTAs |
| Secondary | Gold | Navy Dark | None | Phone CTAs |
| Ghost | Transparent | Navy | 1.5px Navy | Secondary actions |
| Ghost Gold | Transparent → Gold | Navy | 1.5px Gold | Service cards |
/* All buttons */ padding: 1rem 2rem; border-radius: 9999px; /* Pill shape */ font-size: 1rem; /* 16px — NEVER 18px */ font-weight: 500–600; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
White background, 16px radius, 2rem padding, subtle shadow. The default content container.
border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
Standard card + 3px gradient border top (navy → gold). Scales to 4px and lifts 8px on hover.
Warm gradient background with 20px border radius. Used for featured hero content.
| Element | Desktop | Mobile |
|---|---|---|
| Section padding (vertical) | 96px (6rem) | 64px (4rem) |
| Card grid gap | 24–32px | 16–24px |
| Form field gap | 16–24px | 16px |
| Container max-width | 1040px | Full – 48px |
| Nav container max-width | 1344px | Full – 48px |
| Side padding | 24px | 24px |
| Name | Value / Duration | Usage |
|---|---|---|
| Ease Standard | cubic-bezier(0.4, 0, 0.2, 1) | Most transitions |
| Ease In | cubic-bezier(0.4, 0, 1, 1) | Elements exiting |
| Ease Out | cubic-bezier(0, 0, 0.2, 1) | Elements entering |
| Ease Bounce | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful interactions |
| Fast | 150ms | Micro-interactions |
| Base | 300ms | Standard transitions |
| Slow | 500ms | Page/section transitions |
| Slower | 600ms | Entrance animations |
| Element | Lift Amount | Notes |
|---|---|---|
| Buttons | 2px | + scale 1.02 + subtle glow |
| Cards | 4–8px | + deeper shadow |
| Badges | 2–4px | + gold ring accent |
/* Fade In Up — primary entrance */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } animation: fadeInUp 0.6s ease forwards; /* Stagger Pattern */ .item:nth-child(1) { animation-delay: 0.1s; } .item:nth-child(2) { animation-delay: 0.2s; } .item:nth-child(3) { animation-delay: 0.3s; }
| Animation | Element | Details |
|---|---|---|
| Letter Wave | Hero CTA button | Each letter in <span>, translateY(-2px) staggered on hover |
| Gradient Pulse | Hero headline | 15s cycle, gold highlight sweeps "with Gotham" — almost subliminal |
| Flowing Waves | Hero background | Animated SVG sine curves, 50s cycle, 4.2% opacity |
Senior individuals and couples with warm, natural lighting. Clean, light backgrounds. Genuine expressions (not forced smiles). Active, healthy lifestyle depictions.
High resolution (2× for retina). WebP format preferred (90% smaller than PNG). Transparent backgrounds for hero images. Consistent warm color grading.
Optimistic but realistic. Warm and approachable. Professional but not clinical. Diverse representation.
| Property | Specification |
|---|---|
| Style | Medical/healthcare themed, line art or simple vectors |
| Treatment | Desaturated (grayscale via CSS filter), very low opacity (5–8%) |
| Approved elements | Stethoscope, Caduceus, Rx symbol, Medical cross, Clipboard, Shield |
| Placement | Asymmetric, diagonal visual flow, counter-rotation (+8°, -5°) |
| Responsive | Hidden on mobile |
| Property | Specification |
|---|---|
| Style | Line icons, 1.5–2px stroke weight |
| Colors | Navy primary, Gold for accents, White on dark BGs |
| Sizes | Small: 16px · Medium: 20px · Large: 24px · Feature: 40–48px (in colored circles) |
All text must meet WCAG 2.1 AA standards: normal text at 4.5:1 minimum, large text (18px+) at 3:1 minimum.
All interactive elements must have visible focus indicators, hover states, active/pressed states, and disabled states (when applicable).
/* Focus Style */ outline: 2px solid #1D3344; outline-offset: 2px;
All animations must respect the user's system preferences:
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
| Requirement | Detail |
|---|---|
| Heading hierarchy | Proper h1 → h2 → h3 sequence, never skip levels |
| Landmark elements | Use <nav>, <main>, <footer> |
| Image alt text | Meaningful alt for content images; alt="" + aria-hidden="true" for decorative |
| Icon buttons | Always include aria-label for icon-only buttons |
| Form labels | Every input must have an associated <label> (visible or sr-only) |
Given the 65+ primary audience, the site should also consider: minimum 16px body text (already met), touch targets of at least 44×44px on mobile, high-contrast mode support, and avoiding time-dependent interactions. All phone numbers should use tel: links for one-tap dialing.
Navy: #1D3344 Gold: #F5B800 Gold Text: #654F0A Cream: #FDFAF7 Cream Dark: #F5F2EF
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
padding: 1rem 2rem; font-size: 1rem; border-radius: 9999px;