RetireWise is a premier digital brokerage connecting retirees with rigorously vetted annuity advisors through precision-led financial insights. This guide codifies the visual language, voice, and components that make the brand feel trustworthy, premium, and exact.
Connect retirees with rigorously vetted annuity advisors through precision-led financial insights.
Every advisor is vetted for experience, licensing, and background — so you can plan retirement with absolute confidence.
Precise. Trustworthy. Calm. Educational, never salesy. Premium without being exclusive.
A restrained, verdant palette rooted in Racing Green. Sea Green is the single accent — used sparingly for highlights, eyebrows, and hover states. Neutrals carry a faint green undertone to stay cohesive.
A serif/sans pairing that signals both heritage and clarity. Fraunces (serif) carries headings and figures; Inter (sans) handles body and UI.
Weights: 100–900 · Used for H1–H6, hero copy, figures, brand name
Every RetireWise advisor is rigorously vetted for experience, licensing, and background — so you can plan your retirement with absolute confidence.
Weights: 300, 400, 500, 600, 700 · Used for body, labels, inputs, nav
tabular-nums on figuresThe wordmark is set in Fraunces semibold. The mark is a simple monogram — a squared "R" — used as a compact identifier in footers and favicons.
Minimum padding equal to the cap height of the "R" on all sides.
Wordmark no smaller than 120px wide; mark no smaller than 24px.
No drop shadows, no rotation, no color recoloring, no stretching.
A Swiss-grid foundation: generous whitespace, a 12-column max-width container (max-w-7xl), and signature "horizon rules" — thin gradient lines that separate sections and anchor the eye.
A 1px gradient line (transparent → Sea Green → transparent) tops or bottoms major sections. Use the lighter via-[#2E8B57]/40 variant for subtle dividers.
Every section opens with a centered eyebrow: two short rules flanking an uppercase, tracking-widest label in Sea Green at xs/sm size.
Core building blocks, each tuned to the brand. Rounded corners (radius 0.5rem), subtle green-tinted shadows, and Sea Green hover transitions.
Motion is calm and purposeful — fade-ups and gentle slides that ease the eye, never distract. Staggered entrances build rhythm; hovers shift green and lift subtly.
Fade up 20px → 0, 0.6s ease, staggered 0.1s delays.
Primary → Sea Green, 300ms; shadow lifts with green tint.
This block animates in on scroll — the signature entrance.
Bright, airy, architectural — sunlit libraries, modern offices, and garden views. People are absent or peripheral; the emphasis is on calm, considered spaces that imply wisdom and stability.
The voice is precise, confident, and educational. Short declarative sentences. Numbers are specific. The tone reassures without overselling — we state facts, not promises.
"Retire with Precision."
Short, confident, brand-defining. Specific verbs, no filler.
"Every RetireWise advisor is rigorously vetted for experience, licensing, and background."
States the standard concretely — no vague claims.
"Amazing deals! Act now and save big on your retirement!"
No hype, no urgency tricks, no exclamation marks in body copy.
A living document. All tokens are defined in src/index.css and tailwind.config.js — update there first, and this guide reflects the source of truth.