Built in Sweden. Designed for Nordic trust.
SANN — Swedish for true, honest, genuine, trustworthy. Pronounced
/san/. Always uppercase.
Sweden is the origin and the proof point; the Nordic region is the market frame. SANN keeps its Swedish name, restraint and infrastructure principles in every language without making Sweden the boundary of the brand.
Make the safe and verifiable path feel like the simplest path.
Restraint is not coldness. Every screen should help someone decide or act.
Show a verified state, receipt or clear consequence instead of trust theatre.
These principles decide the interface when no component example exists. They apply to the SANN app and every SANN product, regardless of theme, platform or product accent.
Each view has one obvious next step. Secondary actions remain available but quieter.
Say what is true now before asking someone to approve, change or share anything.
Name who, what, amount, duration and reversibility before a significant decision.
Lead with the decision. Put legal, protocol and audit detail one deliberate step away.
Every important action ends in a durable status, receipt, timestamp or audit event.
Design undo, retry, cancellation and support paths together with the happy path.
SANN is a branded house. The masterbrand carries trust; product names describe the customer job in the language of their canonical market. Existing Swedish-market products keep their Swedish names in every locale. Features and technical components do not become brands merely because they have names in the codebase.
Company, trust layer and primary app. The app is light by default; contained dark surfaces create focus at moments of identity, verification and consent.
Products with a materially different culture or reputational risk use an independent name with a restrained endorsement: Verifierad med SANN or Byggd på SANN.
Use the divider in headers, footers, launch graphics and other deliberate brand signatures.
Omit the divider in prose, legal text, metadata, email sender names and accessible labels.
Once context is established, navigation and page titles use the short product noun.
| Internal or former name | Visual lockup | Written reference | Inside the product |
|---|---|---|---|
| Capsule / main app | SANN | SANN | “SANN-appen” only when prose needs the distinction |
| Mandat / Mandat | SANN | Mandat | SANN Mandat | Mandat |
| Aktieboken | SANN | Aktiebok | SANN Aktiebok | Aktiebok |
| SANN Förening / Club | SANN | Förening | SANN Förening | Förening |
| Messenger | — | Not a separate consumer brand | Meddelanden |
| Pay | — | Not a separate consumer brand | Betalningar · “Betala med SANN” at checkout |
| Authentication / Login | — | Not a separate product | Fortsätt med SANN · Verifiera med SANN |
| Graph | — | Technical and partner-facing only | SANN Graph |
Write complete customer experiences in the market language. Developer APIs and protocol contracts stay English. Swedish origin remains part of the masterbrand; never mix languages inside one interface level.
Use the base category noun. Put benefit, audience and emotion in the subtitle.
A navigation item does not need a logo, launch campaign or SANN prefix in its own UI.
Company, trust layer or primary app: use SANN.
Use SANN | category noun as the signature. Choose one canonical product name for its market; do not translate the brand name per screen.
Use a plain functional label without SANN.
Use descriptive English API vocabulary.
Use an independent brand with a restrained SANN endorsement.
Keep it internal. A package name is not a public name.
The canonical SANN wordmark remains unchanged. A thin vertical divider creates the product signature: SANN | Mandat. In interfaces, draw the divider as a 1 px rule — do not use a font glyph — so its weight, height and colour stay controlled. The lockup remains monochrome; product colour belongs in the experience around it.
Never typeset SANN. Use the approved SVG and preserve its proportions.
10 px optical space on each side at a 21 px wordmark. Use a subdued line token.
Live text in the product UI font. Vertically centred; never baked into a logo file.
Mandat is the reference implementation: the same lockup component appears in the global header and footer. The header establishes product context; the footer repeats it with a functional product description and operational metadata.
One compact signature. Product navigation starts beside it.
Centralt administrerade köpmandat som ger ett tydligt beslut i kassan.
The primary SANN app, Mandat, Aktiebok and Förening are all light, task-focused systems. They share restraint, clear hierarchy and evidence-led states, while preserving the tokens their work requires. Dark is a contained focus surface or an explicitly supported theme — never the assumed default.
Flat-white everyday UI. Dark identity card as a contained trust anchor.
#ffffff · #f2f3f6 · #0f1115
Precise decision instrument. Cool whites, midnight ink and one indigo action colour.
#061b31 · #533afd
Modern Bolagsverket. Warm paper, forest green and restrained document chrome.
#254b38 · warm cream
Approachable administration. Airy surfaces, human rhythm and a calm green accent.
#287a5d · cool white
sann.com is the one canonical home for the SANN masterbrand. Country paths identify a commercial and legal market; language is a separate choice inside that market. Product subdomains run the applications. Public API and documentation hosts exist only where they represent a stable contract — never merely because a service has its own container.
Market positioning, pricing, search content and lead capture live together.
sann.com/se/mandat
Login, workspace selection and the product use one locale-independent origin.
mandat.sann.com
Global English home and market-specific product marketing.
sann.com/
sann.com/se/
sann.com/no/ · /dk/ · /fi/
Separate sessions, deploys and product boundaries.
app.sann.com
mandat.sann.com
aktiebok.sann.com
forening.sann.com
Only public audiences and protocols get hosts.
api.sann.com
docs.sann.com
status.sann.com
admin.sann.com
| Surface | Canonical host | Rule |
|---|---|---|
| Marketing | sann.com |
Global English root; country offers live below market paths |
| Primary app | app.sann.com |
Never publicly call it Capsule |
| Mandat | mandat.sann.com |
Public product and receipt issuer use Mandat, not Mandat |
| Aktiebok | aktiebok.sann.com |
Matches the canonical category noun |
| Förening | forening.sann.com |
ASCII hostname; visible copy retains ö |
| Core API/OIDC | api.sann.com |
One stable platform issuer and base URL |
| Documentation | docs.sann.com |
Developer content; English by default |
| Administration | admin.sann.com |
Access controlled and never indexed |
| URL | Meaning | Default language |
|---|---|---|
sann.com/ |
Global offer | English |
sann.com/se/ |
Sweden | Swedish |
sann.com/no/ |
Norway | Norwegian Bokmål |
sann.com/dk/ |
Denmark | Danish |
sann.com/fi/ |
Finland | Finnish |
sann.com/fi/sv/ |
Finland | Swedish override |
sann.com/no/en/ |
Norway | English override |
Direct URL and explicit saved choice win. Then use a supported device or browser language; the market default comes last. A language header may suggest, never redirect.
Give each version a stable URL, a self-canonical and reciprocal hreflang links. A language switch keeps the equivalent page and never silently changes market.
Existing SANN choice precedes the standard ui_locales hint, then browser
language and English fallback. A partner hint never persists over the user's choice.
After the market segment, use the page language: lowercase words, hyphens and ASCII transliteration. No file extensions or internal names.
User-visible paths may use the product's canonical market language. Keep IDs opaque, keep personal data out of URLs and do not rewrite a live route merely on language switch.
OAuth, well-known, API and MCP paths follow technical conventions and are not localized.
| Environment | Pattern | Example |
|---|---|---|
| Production | {product}.sann.com |
mandat.sann.com |
| Shared development | {product}.dev.sann.com |
mandat.dev.sann.com |
| Pull-request preview | {product}-pr-{number}.preview.sann.com |
mandat-pr-482.preview.sann.com |
| Local development | Documented localhost ports | localhost:7212 |
Use mandat.sann.com/mcp. Create a nested hostname only when it needs a
genuinely separate origin and policy.
Start at forening.sann.com/{slug}. After verification, the association's
own domain becomes canonical.
Never set Domain=.sann.com. Share sign-in through OIDC, not a parent-domain
cookie.
sann.se/* → sann.com/se/*Permanent
When owned: sann.no/* → /no/* · sann.dk/* → /dk/* · sann.fi/* → /fi/*Permanent
www.sann.com → sann.comPermanent
sann.se/mandat → sann.com/se/mandatExplicit path map
mandat.sann.se → mandat.sann.com · capsule.sann.se → app.sann.comReviewed migration
Country domains are regional entry points, never separate masterbrand sites. Preserve only approved marketing paths and query parameters; use an explicit map when localized slugs differ. API, OIDC, Universal Link, webhook and receipt issuer changes require an explicit protocol and security review and are never covered by a broad marketing redirect.
The SANN wordmark. Use white on dark, dark on light. Minimum clear space is equal to the height of the letterforms on all sides.
Minimum wordmark width: 56 px digital or 18 mm print. Minimum product-lockup width: 140 px. Keep one cap height of clear space on every side. At smaller sizes, use the approved app icon or plain accessible text instead.
How the mark shows up across digital surfaces, print, and physical goods. Always white on dark or dark on light — never rotated, recolored outside the brand palette, or reshaped.
SANN is best-in-class on privacy and security — but ~95% of users neither know nor care what E2EE or zero-stored-PII means. Lead with the user benefit ("you choose what to share"), mention a guarantee once where it matters, and route the deep story to a dedicated security/dev surface. Let security be the quiet default.
The brand speaks in two registers that share the same DNA — typeface, logo, icon discipline, and the "security is felt, not announced" rule.
#f2f3f6, with near-black text and blue interaction.
The monochrome brand anchors the light products: the SANN mark, app icon and contained identity surfaces retain authority without turning whole workflows black. The shipped SANN app has one light palette today. A complete dark theme must be implemented and accessibility-tested as a system; it must not be created by inverting individual screens.
These are the shipped SANN app tokens, taken from its source of truth. White is both the base and card surface; pale grey separates screen regions. Hairlines, not tinted cards, carry most structure. Product-specific systems remain documented in Product lockups.
Use this inverse scale for identity cards, scanners, assistant bubbles and other focused trust moments. It also forms the base for a future dark theme, but does not make that theme complete by itself.
Typography is shared by behaviour, not forced by one font file. The SANN core and editorial brand surfaces and the SANN app use Inter. Product interfaces may use an approved native system stack for speed and platform fidelity; Mandat and Förening do this today, while Aktiebok uses Inter.
Headlines, presentations, marketing and this manual. Never typeset the wordmark.
Prioritise predictable rendering. Do not add a blocking webfont only for conformity.
Amounts, identifiers, timestamps and protocol examples — never ordinary body copy.
Use one coherent icon family per product surface: Lucide in SANN web products, SF Symbols on iOS and Material Symbols on Android. Match the same meaning across platforms; do not mix families on one screen. Icons inherit text colour and never replace a required label. No emoji as interface controls.
The glyphs above show semantic slots, not an instruction to import Material Icons on web. Use the current platform library and keep stroke, optical size and label treatment consistent.
All systems align to a 4 px base rhythm and mobile-first responsive layouts. Radius and density communicate product character: Mandat is precise, Aktiebok document-like and Förening more accommodating.
| System | Content width | Screen gutter | Radius character |
|---|---|---|---|
| SANN editorial | 1120 px | 24 px | 10–14 px |
| SANN app | Fluid native screen | 16 px | 8 / 12 / 16 / 20 / pill |
| Mandat | 1320 px | 20–24 px | 4 px · crisp |
| Aktiebok | 1280 px | 16–24 px | 6–14 px · document-like |
| Förening | 1280 px | 16–24 px | 8–12 px · approachable |
SANN app controls are light-first: near-black primary actions, quiet outlined secondary actions and blue for focused platform actions. Product components use the owning product's accent and radius tokens. State colour always travels with an icon or explicit text label.
Domain workflow, information hierarchy, density, accent and product-specific copy.
Owned wrappers, semantic tokens, visual states, motion, labels and validation policy.
Roles, ARIA, keyboard interaction, focus management, portals and collision behaviour.
Native HTML on web; native iOS and Android controls in the SANN mobile app.
Dialog, Alert Dialog, Menu, Popover, Select, Combobox, Tabs, Switch, Tooltip and Toast.
Buttons, links and simple text inputs do not need a primitive merely for consistency.
Feature routes import SANN product components, not raw primitives with ad hoc styling.
import { Switch } from '@base-ui/react/switch' // Base UI exposes state; SANN applies semantic tokens. <Switch.Root className="SannSwitch"> <Switch.Thumb className="SannSwitchThumb" /> </Switch.Root> /* Style [data-checked], [data-disabled] and :focus-visible. */
#0060cc · readable white labels · use when platform meaning benefits
#d03b30 · confirm consequences
Unread and pending counts share a red (#D03B30) pill with white text, 20 pt minimum height, 6 pt horizontal padding and 12 pt semibold tabular figures. Hide zero; cap visible counts at 99+ and announce the full count through the parent control. Use this treatment in navigation, conversations and requests. Native Apple tabs retain system badge geometry with the same colours and count rule. Verification and other status pills retain their semantic colours.
Standalone actions use pill corners: 52 pt minimum for regular buttons and 44 pt for compact actions and filters. Labels may wrap; adjacent actions stretch to the same height. Cards retain 16 pt corners and fields 12 pt: their shape communicates a different role.
Loading preserves the measured label width and uses a full-contrast spinner. Keyboard focus has a separate 2 pt ring. Status pills use opaque light tints with dark semantic text, including on dark identity surfaces.
Native text and fields use bundled Inter faces. Apple controls use SF Symbols; Android uses Material icons through the shared icon boundary. Decorative animation is brief and respects Reduce Motion.
Nordmontage AB · Order 1048 · Giltigt till 16.30
Labels are persistent, help is concrete and validation appears near the affected field. Use native inputs for simple entry and Base UI Field, Fieldset, Form, Select, Number Field, Combobox or OTP Field when their interaction model adds value. Behaviour and accessible relationships come from the primitive; SANN styling and localized content remain ours.
Ange ramarna som mottagaren får handla inom.
SVT Play frågar efter följande uppgifter.
Keep the label visible after entry. Put units beside the value and mark optional fields explicitly.
Use blur or submit for most fields. Reserve immediate validation for constraints the person can act on while typing.
Place the message by the field, connect it programmatically and summarise only when several fields fail.
| Input | Display convention | Example |
|---|---|---|
| Money | Swedish grouping, currency after amount | 24 800 kr |
| Date and time | Written month for people; ISO only in technical contexts | 2 september 2026 · 16.30 |
| Organisation number | Format while typing; store canonical digits | 559123-4567 |
| Required fields | State “Obligatoriskt”; never colour alone | Label + programmatic requirement |
Base UI exposes interaction state through properties and data attributes. Every SANN wrapper defines the visual, textual and accessibility response for the full state set before it is approved for reuse.
| State | Visual requirement | Behaviour and language |
|---|---|---|
| Hover | Subtle tonal change; never the only affordance | Pointer only; must not move layout |
| Focus visible | Minimum 2 px high-contrast ring with separation | Keyboard order follows the visual task order |
| Pressed | Immediate feedback through tone or 1 px movement | Action fires once; preserve label |
| Disabled | Reduced emphasis, still legible | Prefer explaining why nearby; do not use a tooltip as the only explanation |
| Loading | Stable dimensions and visible progress | Use aria-busy; prevent duplicate submission |
| Success / error | Icon + text + semantic colour | Name the result and next available action |
Identity, consent and mandate decisions use the same four-part rhythm. People should never discover the recipient, consequence, duration or reversibility only after committing.
Show who asks, exactly what leaves SANN, why it is needed and how long access lasts.
Keep amount, seller, purchaser, validity and order reference visible at the commitment point.
Use Base UI Alert Dialog for legal, financial or destructive consequences; initial focus goes to the safe action.
Provide undo when the action is easy to reverse.
Show recipient, scope and duration before the final button.
Repeat the concrete consequence and use an explicit confirming verb.
Every web product uses the same orientation model: product lockup, workspace, primary navigation, help and account. The shell may inherit product colour and density, but these locations and responsibilities do not drift between Mandat, Aktiebok and Förening.
Mandat
| Shell element | Rule | Responsive behaviour |
|---|---|---|
| Product signature | Top-left on web; spoken name omits divider | Descriptor may replace the full lockup after context is established |
| Workspace | Current organisation is always visible before consequential actions | Moves into the page header or navigation sheet |
| Navigation | Task nouns, stable order, one active item | Sidebar becomes drawer or a small set of bottom destinations |
| Account and help | Persistent, separate from task actions | Remain reachable within one tap |
| Environment | DEV and staging use a text badge, not colour alone | Never shown in production |
| Footer | Repeat signature, purpose, legal links and factual status | Stack groups; preserve reading order |
Tables are work surfaces, not spreadsheets embedded by default. Prioritise comparison, scanning and accountable actions. On narrow screens, preserve the task by turning each row into a summary record instead of shrinking every column.
| □ | Aktieägare ↕ | Aktieslag | Aktier | Andel | Status |
|---|---|---|---|---|---|
| ☑ | Martin Belak | A | 4 800 | 48,0 % | Aktuell |
| ☑ | Emulator Ventures AB | A | 3 200 | 32,0 % | Aktuell |
| □ | Anna Lind | B | 2 000 | 20,0 % | Aktuell |
Keep identifiers left, numbers right and use tabular numerals. Units live in headings or values consistently.
Show active filters, selected count and whether export or bulk action applies to visible or all results.
Use pagination for accountable sets, virtualisation for continuous exploration and server-side filtering for large records.
The examples below translate the same SANN manner across viewport and theme: restrained chrome, obvious task hierarchy, flat or lightly elevated cards, visible state and one primary action. The shipped SANN mobile app uses the light pattern. Dark examples define a coherent option for products that explicitly support it — not an automatic inversion.
Pale neutral page, white cards, near-black text and hairline separation. A contained dark card may anchor identity without changing the surrounding theme.
Near-black page, charcoal elevation and inverse text. Keep semantic colours stable, retest contrast and replace shadows with borders or tonal separation.
Quiet persistent navigation, 12-column-ready content and white work surfaces.
Identical information architecture; tonal elevation replaces the light-mode shadow.
Verifierad
Native header and tabs, 16 px gutter, pale page, white grouped rows and a dark hero.
Verifierad
Same content and spacing. Elevated charcoal cards, inverse text and blue focus remain.
Web navigation collapses deliberately; tables become summaries or horizontal regions, never illegible miniatures.
Use platform tabs, back behaviour, safe areas and input controls while keeping SANN hierarchy and tokens.
Loading, focus, pressed, error, charts, empty states and third-party embeds must work in the selected theme.
Prefer real artefacts, workflows and consequences over generic locks, glowing shields or staged handshakes. People are active participants, never anonymous compliance decoration.
Receipts, limits, order context and accountable action. Precise, never dramatic.
Paper, structured tables and continuity over time. Modern authority, not nostalgia.
Real participation, places and activity. Warm without becoming lifestyle stock.
Record source, consent, territory and expiry for every published image.
Describe the information or purpose, not colour and composition alone.
Keep essential words as HTML so they can translate, resize and be read aloud.
4.5:1 for normal text; 3:1 for large text and meaningful UI boundaries.
The visual signature is “SANN | Mandat”; its accessible name, page title and alt text are “SANN Mandat”. Decorative logo parts use empty alt text.
Hover, press and compact disclosure. Immediate, never theatrical.
Panels and route context. Animate opacity and transform before layout-heavy properties.
Progress may loop. Decorative shimmer and trace must not run forever.
Honour prefers-reduced-motion. The reduced experience must preserve state and
causality, not merely set every duration to zero.
Use the vertical divider only when the second name is a SANN-owned product.
Use neutral spacing or ×. Agree optical size, order and background with the partner.
Use “Verifierad med SANN”, “Fortsätt med SANN” or “Byggd på SANN” for a specific role.
This web page is the canonical manual. Product source tokens are authoritative for shipped UI values; this page explains how they relate. Proposed patterns are labelled before they become defaults, and replaced names remain in redirect maps rather than public navigation.
Documented here and represented by a maintained source component or asset.
Labelled in product work; not copied across the portfolio until reviewed.
Preserve compatibility, stop new use and give every migration an owner.