Brand

A clear direction.

An original symbol. A distinctive yellow. A calm visual language for finance you can understand and work you can follow.

Bearing / StyrraVisual identity · 2026

01 / Symbol

Bearing.

An open circle and a separate directional wedge. The circle gives context, the opening gives room and the wedge points forward. A symbol of steering and clarity.

Clear space: at least ¼ of the symbol width.

16 px24 px40 px

Minimum size: 16 px. The same geometry at every scale.

Keep the original proportions and direction. The symbol works in one colour, on its own or with the wordmark. Do not add a frame, shadow or effect around it.

02 / Colour

Yellow gives direction. Neutrals give room.

Styrra Yellow highlights important actions and identity surfaces. A warm-white canvas, white work surfaces and dark text keep everything else clear. Yellow is an accent, not a status code.

Styrra Yellow#E4F222--s-accent
Ink#20211D--s-ink
Canvas#F3F3F0--s-bg
Surface#FFFFFF--s-surface
Hairline#E6E7E1--s-line

Text on yellow always uses Ink. White text belongs on dark surfaces.

03 / Typography

Geist.

Geist Sans carries headings, body text and the interface. Medium weight for headlines and actions, regular for body text. Geist Mono is reserved for amounts, accounts and identifiers.

Geist Sans / Medium

Understand the numbers. See the next step.

Geist Mono / Regular0123456789
4 812,50 SEK

Web headings range from 28–64 px, adapted to the screen. Body text is 14–18 px with generous line height. Use tabular numerals for financial comparisons. The fonts are licensed under SIL Open Font License 1.1. Read the licence ↗

04 / Behaviour

It should feel just as clear.

Space for the content: Start with 4 px. Use 8–16 px within a group, 24–32 px between groups and 64–120 px between editorial sections. Let the relationship between content guide the space.
A clear next action: Yellow marks primary actions. Use neutral surfaces for everyday work and concrete button labels: Review, Approve, Export.
Motion with a purpose: Hover and press feedback takes 150–180 ms. Content stays in place. Respect the reduced-motion preference.
Readable and reachable: Use Ink on yellow, visible keyboard focus and at least 44 px targets for important controls. Communicate status with words and symbols, not colour alone.
Say what is true: Write calmly and concretely. Show company, period, source and next step. Label example data, explain exceptions and confirm work only when it is actually complete.

05 / Assets

Start with the original.

Vector files for digital use. Choose a version with clear contrast against its background and preserve the clear space.