Style Guide

Monochromatic base — Near-monochromatic foundation using white (#FAFAFA), off-whites, neutral grays, and black as the single accent for primary CTAs. No gradients, no heavy shadows, no unnecessary decorative elements.

Executive aesthetic — Clean, uncluttered interfaces that feel like private investment or sovereign advisory platforms. Generous whitespace, refined typography, and restrained color usage.

Maximum 3-5 colors. One accent (black/neutral-900), rest are neutrals.

Geist Sans for all text. Font weights: light (font-light) for primary page headlines and body, extralight (200) where noted for legacy patterns, medium (500) for navigation and labels, normal (400) for general text.

Primary marketing headline uses tracking-tight and leading-tight. Relaxed line-height for body (leading-[1.7]).

Homepage hero hierarchy — The person or brand line is a single semantic <p> (not the page title): small caps, muted. The value proposition is the sole <h1>, larger and visually dominant; use an intentional <br /> inside the headline when a line break improves scanability.

Generous vertical padding between sections: py-20 to py-24.

Max content width: max-w-4xl (896px). Card padding: p-6 to p-8.

Primary CTA (Black)

className="rounded-md bg-neutral-900 px-6 py-3 text-[13px] font-medium text-white hover:bg-neutral-800"

Card

className="rounded-lg border border-neutral-200 bg-white p-6"

Section Label

className="text-[10px] font-medium uppercase tracking-[0.15em] text-neutral-400"

Homepage hero — eyebrow row

Dot plus dual uppercase labels (see SovereignLandingContent).

className="mb-8 flex items-center gap-3"
// dot: h-1.5 w-1.5 rounded-full bg-neutral-900
// labels: text-[11px] font-medium tracking-[0.2em] uppercase (neutral-500 / neutral-400)

Homepage hero — name line (secondary, not the h1)

className="mb-3 text-sm uppercase tracking-wide text-neutral-500"

Homepage hero — primary headline (h1)

className="mb-16 max-w-2xl font-sans text-4xl font-light leading-tight tracking-tight text-neutral-900 md:text-5xl"

• Border radius: 6-8px max (rounded-md, rounded-lg)
• No gradients, no heavy shadows
• No unnecessary icons or decorative elements
• Black (neutral-900) only for primary actionable elements
• All copy should feel executive-level, not marketing-heavy