Brand Guidelines
The visual identity system for Sona — a data and AI platform built for modern finance. These guidelines ensure consistency across every touchpoint, from product UI to marketing.
01 — Logo
The Sona wordmark is set in Aeonik Pro Bold at a tracked -1px. Use the full wordmark as the primary logo. Maintain generous clear space equal to the height of the "C" on all sides.
02 — Color Palette
A nature-inspired palette anchored by deep forest greens and warm neutrals. The accent lime-green is used sparingly for CTAs, highlights, and interactive states.
03 — Typography
Aeonik Pro is the sole typeface across all brand and product touchpoints. Its geometric clarity and humanist warmth match Sona's balance of technical precision and approachability.
04 — Voice & Tone
Our voice is the same everywhere. Our tone adapts to context — more precise in docs, more approachable in marketing, more direct in product UI.
We eliminate jargon unless it genuinely helps the reader. Every sentence earns its place. If it can be said in fewer words, it should be.
We know our product solves real problems. We state capabilities directly without hedging. No "might" or "helps to possibly" — just clear value.
Financial technology doesn't have to feel cold. We're approachable without being casual. Professional without being stiff. Human without being informal.
"Sona surfaces the signals that matter — so your team acts on insight, not instinct."
"Connect your data in minutes. See results immediately."
"Built for finance teams who move fast."
"Our revolutionary AI-powered platform leverages cutting-edge machine learning to disrupt the financial services paradigm."
"Get started on your transformative journey today!"
"We're super excited about this awesome new feature!!"
05 — UI Components
All interactive elements use full-radius pill shapes. Transitions are smooth (0.3s ease) and feedback is immediate. Hover states shift subtly — never jump or flash.
06 — Spacing & Layout
Consistent spacing creates visual rhythm. Use these values across all layouts — from marketing pages to product interfaces.
Cards and containers use 16px radius. Buttons and pills use 100px (full radius). Small elements use 8px.
16px / 100px / 8px
Main sections use 80px vertical padding on desktop, 60px on tablet, 48px on mobile.
80 / 60 / 48px
Card grids use 24px gap. Tighter component groups use 16px. Related text blocks use 12px.
24 / 16 / 12px
Content container caps at 1200px. Text blocks max at 640px for readability. Nav spans full width.
1200px / 640px
07 — Motion
Motion should feel natural and purposeful. Every animation serves a function — guiding attention, confirming interaction, or smoothing transitions.
Elements fade in with a 16px upward translate. Duration 0.6s with ease-out curve. Stagger children by 80ms.
0.6s ease-out / 16px Y
Interactive elements use 0.3s transitions. Cards lift 4px on hover. Buttons shift background color smoothly.
0.3s / translateY(-4px)
Standard: cubic-bezier(0.25, 0.1, 0.25, 1). Expressive: cubic-bezier(0.16, 1, 0.3, 1). Never use linear for UI.
ease-out / expressive
Respect prefers-reduced-motion. Disable transforms and set transitions to none. Opacity changes are acceptable.
@media (prefers-reduced-motion)