🔑

Vitalency Competitive Intel

Vitalency market research. Enter hub password to continue.

That's not right. Try again.

Vitalency - Private Hub

Logo Rationale + Design Direction

Source: design-direction-2026-05-10.md

Back to Hub
Doc

Logo Rationale + Design Direction

Design direction: Vitalency

The look: Aesop meets a luxury Boulder medspa finishing school. Editorial calm. Quiet authority. The site reads like a well-made physical object, a folded card on a marble counter, not a SaaS dashboard demo. Every surface earns trust without trying.

Why this register (and not the others)

Vitalency's buyer is a woman in her 40s who has been pitched by every "AI for medspas" SaaS company since 2024. The bro-marketing register (gradient hero, rocket emojis, "10x your revenue") is the single fastest way to lose her in three seconds. So is the cold-tech register (slate-and-electric-blue, code-screenshot hero, "API-first platform"). Both signal: this was built for someone else's customer.

What earns her time is a register she already lives in, the one her own clientele expects when they walk into her treatment room. Warm beige walls. Soft sage on a linen runner. One small piece of brushed gold hardware. Editorial serif on the menu, clean sans on the price card. No clutter. No urgency.

That register, applied to a B2B revenue site, is rare enough that it functions as positioning by itself. She knows within five seconds whether you understand her world. The design says yes before the copy does.

Color palette

Token Hex Use
--bg-warm #F5EFE6 Page background, warm beige, the linen runner
--bg-cream #FBF7F0 Secondary surfaces, card backgrounds
--sage #9CAF88 Soft sage, accents, dividers, quiet emphasis
--sage-deep #6F8A65 Sage for hover/links, readable
--gold #B8956A Muted gold: ONE accent, eyebrows + key CTAs
--gold-soft #D9C5A4 Subtle gold tint, borders, gentle highlights
--ink #2A2622 Body text, warm near-black, never #000
--ink-soft #5C544C Secondary text
--ink-mute #8A8077 Tertiary text, captions
--line #E8DFD2 Hairlines, dividers

Palette discipline: ONE muted gold accent. Never two warm metals on the same surface. Never use sage and gold together in a button. Sage is a quiet color, it lives in dividers and small marks. Gold is the single warm note that earns attention.

No gradients. No drop shadows beyond 0 1px 2px rgba(0,0,0,0.04). No glassmorphism. The luxury comes from typography and white space, not from FX.

Typography

Stack

Role Family Weight Why
Display headlines Cormorant Garamond 400, 500 High-contrast serif with Italian Renaissance bones, feels editorial, not corporate. Luxury medspas already use this register on print menus.
Body Inter 400, 500, 600 Clean, modern, neutral sans. Quietly competent. Doesn't fight the serif.
Eyebrow / label Inter 500, letter-spacing 0.18em, uppercase, 12px The small caps moment that says "considered."

Loaded from Google Fonts via <link rel="preconnect"> for fast first paint.

Scale

Display 1- 64px / 1.05 / weight 400 / Cormorant   (hero only)
Display 2- 48px / 1.1  / weight 400 / Cormorant   (page heroes)
H2- 34px / 1.2  / weight 500 / Cormorant
H3- 22px / 1.3  / weight 600 / Inter
Body L, 19px / 1.6  / weight 400 / Inter        (lede)
Body, 16px / 1.65 / weight 400 / Inter
Small, 14px / 1.5  / weight 400 / Inter
Eyebrow, 12px / 1    / 500 / 0.18em / uppercase

Mobile: ramp display 1 to 44px, display 2 to 34px, h2 to 26px. Generous line-height stays. Body never goes below 16px on phone.

Voice cue

When a serif runs next to a sans, the page reads "edited" instead of "designed." That's the Aesop trick. Vitalency is edited, every line considered, nothing extra.

Layout & spacing

  • Container max-width: 1080px. Site never gets wider, even on huge monitors. The whole point is calm, not maximal.
  • Vertical rhythm: 8px base unit. Sections breathe at 96–128px on desktop, 64–80px on mobile.
  • Asymmetric grids over centered ones. A 2-column section with a 5/7 split feels editorial; a 50/50 feels SaaS.
  • One thought per screen. Hero = positioning. Process section = how-it-works. Outcomes = three numbers. Don't stack value props on top of each other.
  • Hairline dividers, never shadows. A 1px sage line at 30% opacity across 80px is more luxurious than any card outline.

Imagery direction

The look: Aesop product photography meets a high-end Boulder medspa interior. Calm, soft-focused, light-driven. NEVER:

  • Stock-photo doctor pointing at iPad
  • Stock-photo women laughing in a meeting
  • Stock-photo dashboard / analytics on a glowing screen
  • Anything blue-tinted or clinical-corporate
  • Before/after treatment photos (medical gray area + wrong audience)

INSTEAD:

  • Soft natural light through linen curtains
  • Hands holding ceramic tea, marble counters, dried botanicals, a single orchid
  • Close-ups of textures: brushed metal, raw silk, wood grain, paper
  • Quiet interiors, empty treatment rooms with morning light
  • A laptop on a marble counter, not a phone in a manicured hand

Practical v0.1: The site ships with typography + color + space, not stock photography. A few small SVG marks and one or two CSS-rendered visual moments (a subtle sage-to-cream gradient block; a hairline arc behind the hero) carry the luxury feel without rolling the dice on stock libraries. Real photography enters in v1.1 once we either (a) commission a tight 6-shot set from a Boulder lifestyle photographer, or (b) license a curated micro-set from Death To Stock or Haute Stock's medspa-friendly collections.

Until then: white space is the photograph.

Component principles

  • Buttons: Primary = gold background, ink text, 10px radius, no shadow, no gradient. Secondary = transparent with 1px sage border. Both use Inter 500, 15px, 14px vertical padding. No "uppercase + tracked" buttons (too 2018-tech).
  • Cards: cream background, 1px sage line at 20%, 24px padding, 12px radius. No shadows. No hover lift, instead a tiny gold underline appears under the title on hover.
  • Forms: Inputs are bottom-bordered only, no full boxes (Aesop pattern). 1px sage line, gold on focus. Labels in eyebrow style above the input.
  • Lists: Use a thin sage square mark for bullets, not dots. Indent generously.
  • Eyebrows: Above every section header. Gold or sage-deep, never both.

Tone (to keep design and copy aligned)

  • Confident, not loud. "Most medspas leak 30–50% of repeat business at 90 days. We close that gap." NOT "Recover MASSIVE revenue with AI!"
  • ROI-honest. Specific numbers. Plain ranges. No "results may vary" mouse-print energy.
  • Operator to operator. Like a peer who happens to know systems, not a vendor pitching a platform.
  • NO em-dashes in published copy (per Annette's brand voice rules). Use commas, semicolons, or paragraph breaks. The visual rhythm comes from line length and spacing, not punctuation.
  • NO "AI platform," "transform," "disrupt," "revolutionize," "leverage," "10x," "future-proof" (per ICP.md).

What to NOT do (visual anti-patterns)

Anti-pattern Why it kills the register
Gradient hero (purple-to-pink) Reads SaaS bro
Glassmorphism cards with blur Reads 2022 startup
Dashboard screenshot hero Reads "I sell software"
Stock-photo woman laptop coffee Reads "I bought from Unsplash"
Two button colors (e.g. gold + sage) Reads "I couldn't decide"
Drop shadows on cards Reads cheap
"Trusted by [logo bar]" without real logos Reads desperate
Animated counter "$2,847,392 recovered!" Reads infomercial
Em-dashes in any copy Annette's brand rule
Orange or red anywhere Wrong temperature; breaks calm

Files reflecting this direction

  • website/src/layouts/BaseLayout.astro- token system + global typography
  • website/src/styles/tokens.css (inlined into BaseLayout for first-paint speed)
  • website/src/pages/index.astro- hero applies Display 1 + 5/7 asymmetric grid
  • website/src/pages/how-it-works.astro- four-step process with eyebrow + sage hairline
  • website/src/pages/about.astro- Annette's medical-tech credibility positioned in editorial column

Decision log

  • Cormorant Garamond over Playfair Display- Cormorant's italic is more restrained. Playfair has a flourish that tips into wedding-invitation territory.
  • Inter over Söhne / Suisse- free, ubiquitous, renders well. The luxury comes from the serif pairing, not the sans being unique.
  • Beige over true white- true white reads clinical and tech. Warm beige reads spa.
  • Sage over forest green- forest is masculine. Soft sage is the actual color of the linen runners in the medspa interiors I'm modeling on.
  • One gold accent, no copper / brass / champagne secondary- restraint signals confidence. Two warm metals would read "trying."

Design direction locked: 2026-05-10. The first build ships with type + color + space carrying the register; photography and small motion enter in v1.1 once the copy and structure are validated against Annette's first 2–3 client conversations in Boulder.

Private - Hub