Design system
Sona — Brand & Design System
The complete system behind Sona — logo, color, type, motion, the cast, voice, and the marketing, social, print and email playbooks. Every token is sourced 1:1 from the app and the live site.
Essence
Overview
An AI chatbot that works like a team, not a single bot. Built Watch-first, with an iPhone companion. Personality: warm, clever, calm, effortless.
- •The brand is “Sona” — mixed case. Never “SONA”, “sona”, or “S.O.N.A.”
- •“Sona” is a proper noun — never translated in any locale.
- •“Sona Pro” is the subscription tier — two words, both capitalised.
- •Specialists: ChefAI, DevBot, FitCoach (no space); Muse, Lingua, Tutor, Calm.
- •The developer / company is Heywrist.
Identity
Logo
The real app icon + the “Sona” wordmark in the rounded brand face with the blue→purple gradient. Full export pack — every size and color, one download button each — is in Assets below.
Sona
Clearspace: keep the width of the “o” clear on all sides. Minimum: mark 20px, lockup 96px wide. Default surface is dark; use mono white over photography. Never recolor the wordmark, set it in another typeface, or replace the mark with the ✨ emoji.
Palette
Color
Dark-first. Purple is reserved for Sona; every specialist owns its accent. Tap any swatch to copy.
Type
Typography
Rounded for the brand (SF Pro Rounded on Apple, Nunito elsewhere), Geist for body, Geist Mono for code.
System
UI & motion
18px card radius, surfaces that stack by lightness, capsule buttons, hairline borders, soft spring motion.
Motion is soft, spring-led, and quiet — it guides attention, never blocks. Everything respects reduced-motion.
Characters
The cast
Sona leads and brings in the right specialist. Eight built-in experts, each with its own accent.
Expressions
Persona & emotion art
Every character ships in eight expressions — drop them into posts, replies, stickers and reactions. Tap any portrait to download the full-res PNG.
| Happy | Laugh | Thumbs up | Clapping | Waving | Thinking | Sad | Cry | |
|---|---|---|---|---|---|---|---|---|
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
|  |  |  |  |  |  |  |  |
Swipe the grid sideways to see every expression →
Words
Voice & tone
Warm · plain · confident · concise. Lead with the answer; cut the hype. Address the user as “you”; keep “Sona” untranslated.
- ✓Set the wordmark as “Sona” — mixed case, rounded face.
- ✓Reserve purple for Sona; let specialists own their accent.
- ✓Lead with the answer. Warm, plain, concise.
- ✓Default to dark. Spend gradient on the one thing that matters.
- ✕Don’t write “SONA”, recolor the gradient, or swap the typeface.
- ✕Don’t accent generic UI in Sona’s purple.
- ✕Don’t use the ✨ emoji as the logo (it’s the character glyph).
- ✕Don’t stretch, rotate, or box the mark, or crowd its clearspace.
Go-to-market
Marketing
App Store, Open Graph, ad units, and the CTA system. Source of truth for store assets: asc/sona.yaml.
Screenshot style: dark UI on a Sona-gradient or starfield backdrop, a bold rounded caption per frame (≤ 5 words). OG / social card is 1200 × 630 (wired into the site metadata).
- 1Download free
- 2Download on the App Store
- 3Download on Watch
- 4Ask Sona / Start chatting (in-product)
Physical
Offline & print
Designs are dark-first and authored in RGB. Convert + proof for CMYK.
- •Author in RGB on dark; convert + proof for CMYK — the gradient dulls, so nudge saturation up.
- •Use a rich black (≈ C40 M30 Y30 K100), not flat K100, for large dark fields.
- •Prefer dark substrates; on white / uncoated stock use the mono logo.
- •Bleed 3mm, safe margin 5mm from trim. QR → the App Store URL; use Apple’s official badge.
Lifecycle
600px, single column, dark-first. The wordmark ships as an image — mail clients rarely load webfonts.
- 1Preheader — hidden, 40–90 chars, extends the subject
- 2Header — Sona lockup (as an image) on #0A0A14
- 3Hero — one headline, one support line, one CTA
- 4Body — one idea per block
- 5CTA — bulletproof button, ≥ 44px tall
- 6Footer — address, unsubscribe, social, © Sona
- •600px content, single column, stacks at ≤ 480px.
- •Email-safe stack: -apple-system, “SF Pro Rounded”, Segoe UI, Roboto, Arial. The wordmark must be an image.
- •Bulletproof buttons (table / VML); white-on-black or Sona-gradient with a #7C82FF solid fallback.
- •Dark-first: set color-scheme; use a transparent-PNG logo that reads on dark + light.
- •Always alt text; design to survive images-off (never put the CTA inside an image).
Tone: transactional = plain, warm, factual, one clear next step. Marketing = one delightful idea, one CTA, easy unsubscribe.
For everyone
Accessibility
Baked into the tokens — contrast, motion, targets, focus.
- ✓Body text meets WCAG AA; re-check every new colour pairing.
- ✓Every animation no-ops under prefers-reduced-motion.
- ✓Interactive targets ≥ 44 × 44px.
- ✓Logo accessible name “Sona”; character art gets descriptive alt.
- ✓Visible focus ring on all controls; never convey meaning by colour alone.
- ✓Support RTL (Arabic) — mirror the layout, keep the logo LTR.
Downloads
Assets
Vector + misc brand files, then the full logo export pack — every lockup, icon, wordmark, glyph, and mono mark, in every color, each with its own download button.
Mark + wordmark, horizontal. Default for nav, footer, decks, email header.
Vertical mark-over-wordmark — social profiles, title slides, posters.
Mark only, full-bleed square. App Store, favicons, launchers — pick the size you need.
“Sona” alone — inline in text, tight horizontal spaces.
The speech-bubble mark alone, no background tile — overlays, watermarks, odd-sized favicons.
Single-color squircle mark — stickers, swag, one-color print.
Pre-sized exports for each platform's icon pipeline.
Need device mockups or character art? Email press@sonapro.chat.
Source of truth
Governance
Tokens are code — this page renders them live. Change the token, then update the docs.
The written system lives in BRAND.md (repo root); this page and that doc are paired — update both in the same change. Don’t hardcode hexes in components; read the token.
Channels
Social media
Handle @sonapro · avatar = the app icon (never the wordmark) · domain sonapro.chat.
Your everyday AI — on iPhone & Apple Watch. Ask anything; we bring in the right expert. ⌚✨
Sona is an AI chatbot with a cast of expert characters. Watch-first. Ask anything → the right specialist answers. ⬇️ Free on iOS + watchOS.
Sona reimagines the AI assistant as a team of characters — built for Apple Watch and iPhone. By Heywrist.
Use 3–5, not a wall. One idea per post; lead with the hook; CTA in the last line or bio.