Brand guidelines

Variants

Pick by background, not by preference. Full color is the default; monochrome exists for print and single-ink contexts.

Full color

Primary — light backgrounds

SVGCopy code

All white

Dark and blue backgrounds

SVGCopy code

All dark

Monochrome, print, single ink

SVGCopy code

Color icon + white wordmark

Dark backgrounds that keep the blue accent

SVGCopy code

Icon — full color

App icon, favicon, avatar

SVGCopy code

Icon — glyph only

Placed directly on brand color

SVGCopy code

Source files: /design/assets/Logo/

On backgrounds

The logo must always sit on a flat brand color or a quiet area of a gradient — never on a busy image without a scrim.

White

#FFFFFF

Warm White

#F7F4F2

Blue Light

#E8EEFF

Blue

#2A5AE9

Clear space & minimum size

Keep clear space equal to half the height of the icon on all four sides. Below 88px wide, drop the wordmark and use the icon alone.

Minimum lockup width

88px on screen · 24mm in print

Minimum icon size

24px on screen · 8mm in print

Core palette

Blue, Warm White and Dark are the primary brand colors across every application. Do not substitute unapproved alternatives.

Neutrals

A five-step scale from the brand dark. Use it for text hierarchy, dividers and disabled states — not as a second brand color.

Extended palette

Highlights, accents and marketing material only — always in balance with the core palette, and never as a replacement for it in primary brand applications. Mint is the loudest of the set; treat it as a spark, not a surface.

Gradients

The gradients carry the story, not just the surface: blue to mint is the before and after — friction resolved, conversion restored. Use them as backgrounds for depth, never behind body copy.

Pairings

Every approved mark-on-background combination, core palette first, extended palette below. The mark always inverts against its ground so it holds contrast down to 24px.

Text on color

Pairings carrying type, laid out as formats rather than text blocks: 400 tall, so the modular margin is 20px, the headline sits with its cap-height on the top margin, and the bottom margin carries the description and action on the left with the mark on the right. The ink is always the lightest or darkest member of its own pair, never the accent. Blue Light and Dark lead because they are the core palette; the four extended pairings below them are campaign work.

Families

Both load from Google Fonts. Do not substitute other faces in brand communication.

Weights

SemiBold is the heaviest weight the brand uses — never Bold or Black, in any family. Medium carries most applications, Regular the smaller body copy.

Type scale

Headlines are 4× the body size with tighter tracking. Subheads and buttons are 2×. As type size increases, tracking tightens.

Line-height

Larger type takes tighter line-height; smaller type needs more room to read. Headings sit between 110–120%, body copy around 140%.

Spacing

A 4px base unit, stepping up in the values below. Everything — padding, gaps, section rhythm — is a multiple from this scale. Nothing sits on an off-scale number.

Corner radius

Two extremes and little in between: controls are fully pilled, surfaces are close to square. That contrast is what makes a button read as a button.

Borders & elevation

Separation comes from hairlines, not shadows. One border colour, one weight, everywhere.

Layout

Buttons

One primary action per view, repeated down the page rather than competing with alternatives beside it. Blue is the only filled action colour; Dark is reserved for a second, quieter primary on light sections.

Primary, Secondary, Dark, Tertiary, Disabled, each at both sizes. Tertiary is text alone — no fill, no border, no arrow. It carries the third-most-important action on a view, and never the only one. On hover the label drops out of the bottom while a second copy arrives from above, clipped by the pill — one 420ms move. Nothing else changes: fill, border and text colour hold, so the roll is the whole of the feedback. Tertiary is the exception — with no fill to clip against it underlines instead. Disabled does not respond at all, and neither does anything when the visitor asks for reduced motion.

Cards & metrics

Result figures are the proof this brand runs on, so they are set as a layout, not as a text block: the frame is 420 tall, giving a 17px modular margin, the figure sits with its cap-height on the top margin, the label runs at a quarter of the figure size along the bottom margin, and the mark closes the card bottom-right at twice the margin.

Labels

Small, quiet, and never more than one accent colour in a single group. Labels are tags, so they take the fully pilled radius.

Exatom sells form conversion, so our own forms are the shortest argument we have. Everything below is what we ask clients to do: labels above the field, one column, one question at a time, and error text that names the fix instead of the failure.

States

Six states, and every one of them says something. A field that looks identical whether it is empty, wrong or accepted is a field people abandon.

Field types

Four beyond the text input. Radios and checkboxes are full-width targets, not 18px dots — on mobile the label is the tap area.

A form in full

The same rules assembled. One column, grouped by what the visitor is thinking about, and the address block does the lookup instead of asking for four fields. That single change is what moved Kia Germany.

What we hold ourselves to

Drawn from the friction points we find in client forms week after week. If our own form breaks one of these, it is a bug.

Exatom uses Phosphor for every icon, regular weight, on a 256 grid. It is the only icon library in the system — no Lucide, no Heroicons, no emoji standing in for an icon. Where a third-party component ships with a different set, swap it for the Phosphor equivalent. Below is the working set for the platform's features, with the Phosphor name each one maps to.