# Sona8 brand and design system

Version 3.0, 13 October 2026. The rules for anything that carries the Sona8 brand: pages, decks, emails, product screens and generated material. The pages at https://sona8.com/design show them; the values are in https://sona8.com/design/tokens.css and https://sona8.com/design/tokens.json. Where this file and a live page disagree, this file wins; tell madeleine@sona8.com.

## Claim and message

- Claim: "Listen & move forward." Exactly so: ampersand, full stop. Never reworded, translated or shortened.
- Supporting headline: "Turn employee knowledge into your next move."
- Call to action: "Book a demo".
- Product sentence, quoted as written: "Sona8 turns AI-led employee interviews into actionable insights, so you can understand what's happening and move transformation forward."
- Sona8 is based in Berlin, Germany, and works within the EU in line with the GDPR.
- The 8 is a circle over a square. The circle stands for the people, the square for the product champion. Together they stand for a continuous exchange of knowledge.
- One main message per asset: claim, supporting headline, what Sona8 does and why it matters, one concrete call to action.

## Colour

- White `#FFFFFF` (`--sona8-white`): The page.
- Light Grey `#FCFBFF` (`--sona8-light-grey`): Cards and bands that set a section apart.
- Highlight `#9677FF` (`--sona8-highlight`): The one accent fill: primary button, chips, selection, focus, the lead chart series. Never text on white. 3.29:1 on white, so never text. Black on Highlight 5.82:1.
- Dark Purple `#211F54` (`--sona8-dark-purple`): Accent text and links, pressed buttons, the footer and dark fields. 15.12:1 on white. White on Dark Purple 15.12:1.
- Black `#0F0F0F` (`--sona8-black`): Text, the logo, the client logo band.
- Muted text `#5C5A6E` (`--sona8-muted`): Secondary text. 6.68:1 on white.
- Highlight hover `#8466F2` (`--sona8-highlight-hover`): Primary button on hover.
- Hairline `#E7E5EF` (`--sona8-hairline`): The one hairline for cards, inputs and tables.
- Input border `#D4D1E0` (`--sona8-input`): Input borders.
- Chip fill `#F1F0F7` (`--sona8-chip`): Chips, ghost hover, free days in a calendar.
- Destructive `#C42B3C` (`--sona8-destructive`): Errors and deleting. Always with an icon and a word.
- Warning `#8A5A00` (`--sona8-warning`): Something needs a look. Always with an icon and a word.
- Success `#1C7A55` (`--sona8-success`): Done. Always with an icon and a word.
- Chart series, in this order: #9677FF, #211F54, #5B44C9, #0F0F0F, #7A788C.
- Ordinal ramp, light to dark: #D6CCFF, #B3A0FF, #9677FF, #5B44C9, #211F54.

- No gradients anywhere: buttons, covers, backgrounds and charts are flat.
- No glow. Shadows only in Dark Purple at low opacity.
- Highlight is a fill. Text on it is Black; White on Highlight fails contrast.
- State colours only where a person needs to act or read a state, and never as the only signal.
- No red-to-green scales for opinions.

## Type

- Hero: Newsreader Regular, 44 to 88 px, leading 1.05, -0.02em. The landing page headline.
- Banner: Newsreader Regular, 40 to 74 px, leading 1.1, -0.02em. The claim on a photo, the closing question.
- Display: Newsreader Regular, 40 to 60 px, leading 1.08. H1 on other pages.
- Title: Newsreader Regular, 32 to 44 px, leading 1.12. H2.
- Heading: Newsreader Regular, 24 px, leading 1.2. H3, names, step titles.
- Figure: Newsreader Regular, 48 px, tabular lining numerals. Big figures with their source.
- Body: Inter Regular, 16 to 17 px, leading 1.5 to 1.6. Body text, UI, emails, captions.
- Section label: Inter Bold, uppercase, 13 px, +0.1em. Small labels above a section, footer headings.
- Column header: Inter Bold, uppercase, 12 px, +0.04em. Table column headers.

- Two faces: Newsreader for headlines, quotes and long reading prose; Inter for body, UI and figures in running text.
- Headlines are never bold. No monospace face.
- Write everything in sentence case. Uppercase comes only from the style of section labels, column headers and buttons.
- Figures in Inter use tabular numerals.
- Where the fonts can't be installed: Georgia for Newsreader, Arial for Inter.

## Shapes and layout

- Buttons, chips, toggles and badges are pills. Inputs, cards, dialogs, tables and images have 8 px corners.
- Pages sit in a frame of 1 px rules that run past each other at every corner, so each crossing reads as a small cross.
- One hairline colour. One primary action per view.
- Primary button: Highlight with a Black label. Secondary: Dark Purple with a White label. Outlined: a Black hairline.

## Logo

- One colour at a time: Black on light surfaces, White on Black or Dark Purple, Purple sparingly on white.
- Clear space at least the width of the 8's square on every side.
- Minimum size: wordmark 72 px wide (20 mm in print), the 8 16 px tall.
- On photos: Black on a calm light area, White on a calm dark area.
- App icon: the black 8 on a Highlight tile. Favicon: the purple 8.

Never:
- Redraw, retype or rebuild it in a tool. Use the files.
- Stretch, rotate, outline, add a shadow or two colours.
- Fill it with a gradient.
- Put it in Dark Purple, or in Black on a dark surface.
- Generate it with an image model.

Files: https://sona8.com/assets/logo/ (sona8-logo-black.svg, sona8-logo-black.png, sona8-logo-white.svg, sona8-logo-white.png, sona8-logo-purple.svg, sona8-logo-purple.png, sona8-icon-black.svg, sona8-icon-black.png, sona8-icon-white.svg, sona8-icon-white.png, sona8-icon-purple.svg, sona8-icon-purple.png).

## Imagery

- Clean, people-focused colour photography: natural expressions, soft light, simple light backgrounds, room for copy.
- No robots, sci-fi screens, glowing networks or busy office stock.
- Name and role on pills along an edge: Highlight for the name, outlined for the role.
- A short quote can sit on a photo with a small Highlight dot. Label it illustrative unless it is sourced.
- Synthetic images only when labelled in the working file, and never shown as a real employee or customer.

## Motion

- The one brand effect is blur to sharp: content arrives soft and sharpens as understanding grows.
- Quick and calm. The first screen never animates on load.
- Under reduced motion everything is still and shown at once.

## Voice

- Warm: Respect for the people interviewed. They are people, not respondents.
- Clear: Concrete nouns, active verbs, short sentences.
- Confident: Say the benefit without hype or guarantees.
- Leading somewhere: Every piece ends in one next step.

- British spelling (organisation). English, German or Swedish; German uses du.
- No em dashes, middots or spaced hyphens as dashes. No exclamation marks, no emoji.
- No "It's not X, it's Y", no rhetorical triplets, no recap closers.
- Insight is capitalised when it means what Sona8 delivers.
- Never invent quotes, customers, logos or figures. Label illustrative copy as illustrative and give every figure its source.

- Product words: people, interview, project, question, theme, Insight, tension.
- Not for the product or its work: survey, pulse, audit, workspace, employees (as a product term), respondent, campaign, round, programme.
- Words to leave out: revolutionary, game-changing, seamless, cutting-edge, unlock, empower, supercharge, leverage, harness, elevate, transform, journey, actually, real.

Say this, not this (style examples, not client results):
- "Interview your whole company in days." Not: "Revolutionary AI-powered feedback solution!"
- "Two open positions have been empty since spring. 51 of 120 people raised it." Not: "Amazing engagement scores across the board!"
- "Find what works in one site, then copy it to the others." Not: "Unlock cutting-edge insights for your workforce."
- "AI asks and summarises. Your team decides." Not: "Let AI make your decisions for you."

## Retired, never use

- The violet system: #8B3DF5, #B794FF, Orchid #DE71F4, the violet-to-orchid gradient.
- The old site colours: navy #0A0B1C and #15173F, beige #F9F4EB, Near Black #1A2226, Slate #5B6B73.
- The old logo: a hollow ring with satellite rings joined by spokes.
- Public Sans, IBM Plex Mono, Fraunces, Geist and Arial as brand faces.
- The old slogan "Good strategy starts with listening."

## Files

- https://sona8.com/design/brand.md: this file.
- https://sona8.com/design/tokens.css: CSS custom properties.
- https://sona8.com/design/tokens.json: the same as JSON.
- https://sona8.com/design/llms.txt: index of pages and files.
- https://sona8.com/design/sona8-design-kit.zip: everything above and the logo SVGs in one zip.