Brand guidelines
The visual systembehind the practice
Ivory and warm stone ground, deep ink-navy authority, antique brass accent. Cormorant Garamond for voice, Jost for structure. Everything below is a live token from the site — not a screenshot.
01 — Palette
Colour
Ink Navy
var(--ink) · oklch(0.255 0.031 254)
Primary authority · headings, nav, footer
Ink Soft
var(--ink-soft) · oklch(0.39 0.028 254)
Secondary text on light ground
Antique Brass
var(--brass) · oklch(0.655 0.079 76)
Accent · eyebrows, rules, hovers
Brass Soft
var(--brass-soft) · oklch(0.82 0.045 82)
Selection, subtle highlight fills
Cream
var(--cream) · oklch(0.981 0.006 86)
Page ground
Stone
var(--stone) · oklch(0.935 0.008 86)
Alternating section bands
Sand
var(--sand) · oklch(0.888 0.012 84)
Borders, dividers, quiet surfaces
02 — Typography
Type scale
Cormorant Garamond · 300 · clamp(2.6rem → 5.75rem)
.display-xl
Neurologic care
Cormorant Garamond · 300 · clamp(2.1rem → 3.5rem)
.display-lg
Section headline
Cormorant Garamond · 300 · clamp(1.6rem → 2.25rem)
.display-md
Card heading
Jost · 300 · line-height 1.8
.body-lg
Diagnosis first. A multi-specialty team under one roof in Naples, Florida.
Jost · 400 · 0.2em tracking · uppercase
.nav-label
Jost · 400 · 0.28em tracking · brass
.eyebrow
The practice
03 — Identity
Monogram & lockup
- Keep clear space equal to the monogram radius on all sides.
- Never fill the monogram ring — brass hairline on ink or cream only.
- Minimum lockup width 180px; below that use the monogram alone.
- Never re-colour, outline, skew, or add shadow to the wordmark.
- The browser favicon uses the CNS monogram SVG at 64×64 with a transparent background.
04 — Shape
Corner radius
Cards, images, panels
rounded-2xl · 1rem
Every photograph, card grid, and surface panel is clipped with overflow-hidden rounded-2xl.
Buttons
0.875rem — set on .btn-base
Softened corners on every call to action, including the mobile call bar.
Controls & chips
rounded-xl · 0.75rem
Filter chips and icon buttons stay one step tighter than the surfaces they sit on.
Media alignment
items-start · self-start
In split sections, media columns hug their own height — never stretched to fill the row — and the top of the image sits level with the section headline, not the eyebrow.
05 — Components
Buttons & rules
.btn-base + .btn-ink / .btn-brass / .btn-outline-ink
.btn-base + .btn-brass / .btn-outline-cream
06 — Motion
Movement rules
Reveal on enter
Sections fade up 28px over 1s on the cubic-bezier(0.22, 1, 0.36, 1) curve. One reveal per band — never stagger every child.
Hover lift
Buttons translate -2px and swap to brass over 450ms. Links use a hairline underline that wipes left to right.
Reduced motion
prefers-reduced-motion disables reveals, the credential marquee, and smooth scroll entirely.
07 — Voice
Tone of voice
Lead with the diagnosis, not the sales pitch.
Never promise outcomes or cures.
Name the specialty and the provider precisely.
Avoid vague phrases like “world-class care”.
Keep sentences short and calm — reassurance over urgency.
No exclamation marks, no scare copy.
Contact for brand questions: 3200 Bailey Lane, Suite 200, Naples, FL 34105 · Monday – Friday · 8:00 am – 5:00 pm
08 — Assistant widget
Chat & voice widget
Skin
Header and user bubbles use ink #182432 on cream #faf9f4. The launcher circle stays ink #182432 with a brass #ad8a58 chat bubble icon. The call button and the chat bubble icon use antique brass #ad8a58 with cream text. The send button keeps ink #182432. Panel radius 18px, Jost type, CNS monogram beside the name in the header.
Rules
One canonical widget bundle, loaded once site-wide. Never introduce a second accent colour or icon set inside the widget — it inherits the palette above so it reads as part of the site, not a bolt-on. Voice and chat run through server-side endpoints (/api/retell-voice-token, /api/retell-chat, /api/retell-chat-completion); the Retell private key never ships to the browser.