# Practice Management Consultants, Brand Guide *Version 2.0, February 2026* *Design Philosophy: "The Hermès of Healthcare Advisory"* --- ## 1. Brand Positioning **Tagline:** *The Advisory Standard* **Brand Promise:** C-suite level, full-spectrum practice leadership for physician practices of all sizes, delivered with the precision of Patek Philippe, the restraint of Bottega Veneta, and the authority of McKinsey. **Brand Descriptors:** - "Medical Practice Advisory" (not "Consulting") - "Full-Spectrum Practice Hands-On Leadership" - "C-suite level" expertise - "Advisory Leadership" **Tone of Voice:** - Authoritative yet approachable - Restrained confidence, never salesy - Editorial and precise, every word earns its place - First-person plural ("we") when speaking as the firm --- ## 2. Design Philosophy The visual identity draws from three pillars: 1. **Quiet Luxury** *(Bottega Veneta, Hermès)*, Restrained elegance, generous whitespace, understated confidence 2. **Precision & Heritage** *(Rolex, Patek Philippe, Cartier)*, Every detail intentional; thin gold rules, meticulous spacing 3. **Elite Advisory Authority** *(McKinsey, Bain, BCG)*, Minimal ornamentation, commanding typography, confidence through simplicity ### What We Avoid - Pulsing animations, bouncing elements, floating orbs - Saturated rainbow color accents - Heavy drop shadows or glow effects - "Tech startup" visual signals (gradient blobs, neon accents) - Star ratings, badge counters, urgency indicators - Heavy font weights in body text - Rounded corners (rounded-2xl), we use sharp, precise corners --- ## 3. Color Palette ### Primary Colors | Token | HSL | Hex | Usage | |-------|-----|-----|-------| | **Midnight Navy** `--primary` | `215 55% 12%` | `#0F1C2E` | Primary backgrounds, headers, navbar, footer | | **Champagne Gold** `--accent` | `42 52% 57%` | `#C5A05E` | Accent color, CTAs, highlights, rules | | **Warm Ivory** `--background` | `36 33% 97%` | `#FAF8F5` | Page backgrounds | | **Deep Charcoal** `--foreground` | `0 0% 10%` | `#1A1A1A` | Body text | ### Secondary & Supporting Colors | Token | HSL | Usage | |-------|-----|-------| | **Navy Light** `--navy-light` | `215 40% 22%` | Hover states on navy elements | | **Navy Dark** `--navy-dark` | `215 60% 8%` | Deep backgrounds, overlays | | **Gold Light** `--gold-light` | `42 40% 72%` | Subtle gold highlights | | **Gold Dark** `--gold-dark` | `43 58% 40%` | Gold hover/pressed states | | **Warm Parchment** `--muted` | `35 18% 93%` | Muted surface backgrounds | | **Cream Dark** `--cream-dark` | `35 18% 93%` | Alternate section backgrounds | | **Warm Gray** `--warm-gray` | `30 6% 55%` | Secondary text, captions | ### Borders & Surfaces | Token | HSL | Usage | |-------|-----|-------| | **Border** `--border` | `35 14% 88%` | Card borders, dividers | | **Card** `--card` | `0 0% 100%` | Card backgrounds | ### Gradients | Name | Value | Usage | |------|-------|-------| | **Hero Gradient** | `135deg, navy → navy-light` | Hero section overlay | | **Gold Gradient** | `135deg, gold → gold-light` | Gold text gradient effect | | **Cream Gradient** | `180deg, cream → cream-dark` | Subtle section backgrounds | | **Overlay** | `180deg, rgba(15,28,46,0.92) → 0.75` | Image overlays | ### Shadows | Name | Value | Usage | |------|-------|-------| | **Soft** | `0 2px 16px -4px navy/0.06` | Default card shadow | | **Medium** | `0 6px 24px -6px navy/0.1` | Hover state elevation | | **Large** | `0 16px 40px -12px navy/0.12` | Modal/prominent elements | | **Gold** | `0 2px 12px -4px gold/0.15` | Gold-accented elements | --- ## 4. Typography ### Font Families | Role | Font | Fallback Stack | |------|------|----------------| | **Display / Headings** | Playfair Display | Georgia, serif | | **Body / UI** | Inter | system-ui, sans-serif | ### Weights Used | Font | Weights | Usage | |------|---------|-------| | **Playfair Display** | 400, 500, 600, 700 | Headings (700 for h1, 600 for h2–h3) | | **Inter** | 300, 400, 500, 600 | Body at 300 (light), UI labels at 400–500 | ### Typographic Rules - **Body text**: `font-light` (300 weight), airy, editorial feel - **Uppercase labels**: `text-xs` with `tracking-[0.3em]`, Chanel/Hermès editorial spacing - **Section subheadings**: `text-xs` uppercase with gold color - **Headings**: Playfair Display, never lightweight, command the page - **Line height**: Generous on body (`leading-relaxed`), tight on headlines - **Anti-aliasing**: Always `antialiased` globally --- ## 5. Spacing & Layout ### Section Padding ``` Mobile: px-6 py-20 Tablet: px-12 py-28 Desktop: px-20 py-36 ``` ### Container Widths - **Narrow** (`container-narrow`): `max-w-4xl`, long-form text - **Wide** (`container-wide`): `max-w-7xl`, section layouts ### Principles - 20% more whitespace than "standard" web design - Generous gaps between grid items (`gap-14` to `gap-16`) - Breathing room around all elements, never cramped - Sections separated by thin gold hairline rules (`luxury-rule`) --- ## 6. UI Components ### Buttons | Variant | Description | |---------|-------------| | **Default** | Navy background, cream text | | **Hero** | Champagne gold background, dark text, `tracking-[0.05em]` | | **Hero Outline** | Transparent with cream border, used on dark backgrounds | | **Outline** | Thin gold/40 border, transparent fill | | **Gold** | Solid gold, dark text | | **Navy** | Solid navy, cream text | | **Ghost** | No border, subtle hover | | **Link** | Gold text with underline on hover | **Button Rules:** - Corner radius: `rounded-sm` (sharp, precise, never rounded-full or rounded-2xl) - Letter-spacing: subtle tracking on hero/CTA buttons - Hover: elegant darkening, no glow or shadow expansion - Sizes: default (h-10), sm (h-9), lg (h-12), xl (h-14) ### Cards - Border: 1px with `border-border` or `border-accent/20` - Corner radius: `rounded-sm` only - Shadow: none by default; `shadow-soft` on hover - Padding: generous (`p-8` to `p-10`) ### Form Inputs (Hermès Style) - Bottom-border only (no full box borders) - `border-b border-accent/30` at rest - `focus:border-accent` on focus - Background: transparent - No rounded corners on inputs - Placeholder text: `text-muted-foreground/50` ### Dividers - **Luxury Rule**: 1px height, `accent/0.3` opacity - **Luxury Rule Double**: 1px + 3px offset shadow, both at `accent/0.25` - Used between sections and within content for editorial rhythm --- ## 7. Motion & Animation ### Principles - **Duration**: 0.6s–0.8s for entrances (slow, graceful) - **Easing**: `cubic-bezier(0.25, 0.1, 0.25, 1)`, luxury easing curve - **Transitions**: `duration-500` for interactive hover states - **Framer Motion**: 0.6–0.8s with custom easing ### Approved Animations | Name | Duration | Effect | |------|----------|--------| | `fadeUp` | 0.8s | Translate Y 20px → 0, opacity 0 → 1 | | `fadeIn` | 0.6s | Opacity 0 → 1 | | `scaleIn` | 0.5s | Scale 0.97 → 1, opacity | | `slideRight` | 0.7s | Translate X -20px → 0, opacity | ### Stagger Delays - `delay-100` through `delay-500` in 100ms increments ### Forbidden Animations - `animate-pulse`, too urgent - `animate-bounce`, too playful - `animate-float`, too tech/SaaS - `group-hover:scale-110`, luxury elements don't jump at you - Any animation with < 0.5s duration on entrances --- ## 8. Iconography - **Library**: Lucide React - **Style**: Thin stroke weight (`strokeWidth` default or explicit thin) - **Color**: Gold (`text-accent`) on dark backgrounds; Navy (`text-navy`) on light - **Size**: `h-4 w-4` for inline, `h-5 w-5` for buttons, `h-6 w-6` for feature icons - **Never**: Multi-colored icon backgrounds, gradient fills, or bouncing icon animations - **Preferred**: Monochrome icons within thin gold-bordered circles --- ## 9. Photography & Imagery - **Style**: Editorial, warm-toned, professional - **Treatment**: Dark overlays (`gradient-overlay`) for text legibility - **Portraits**: 4:5 aspect ratio (editorial portrait format) - **Loading**: Always `loading="lazy"` with descriptive alt text - **No hover zoom**: Images remain static, quiet confidence --- ## 10. Logo Usage - **Primary**: `pmc-logo-full.png`, full wordmark - **Navbar height**: `h-[78px]` desktop, `h-[95px]` large desktop - **Footer height**: `h-[152px]` - **Clear space**: Generous padding around logo at all times - **Background**: Works on both ivory and navy backgrounds - **No effects**: No glow, no pulse, no complex CSS filters --- ## 11. Competitive Positioning Visual Language When benchmarking against competitors (ECG, Huron, MGMA, Big 4): - Use animated stat counters with serif display fonts - Gold underlines beneath key statistics - Clean comparison tables with thin borders and ample whitespace - Gradient gold icons for PMC differentiators --- ## 12. Accessibility - All interactive elements have `aria-label` attributes - Schema.org structured data on key pages - Semantic HTML throughout (`
`, `
`, `
`, `