# Brand guidelines The working reference for how Exatom looks: logo, color, type, and the interface elements built from them. Every value here is the real brand value — copy it from this page, don't approximate. Presentations and social media build on it, on their own pages. ## Logo The mark is a rounded square holding the Exatom glyph, paired with the wordmark. Four lockups cover every background; the icon travels alone where space is tight. ### Variants Pick by background, not by preference. Full color is the default; monochrome exists for print and single-ink contexts. | Item | Value | |---|---| | **Full color** | Primary — light backgrounds | | **All white** | Dark and blue backgrounds | | **All dark** | Monochrome, print, single ink | | **Color icon + white wordmark** | Dark backgrounds that keep the blue accent | | **Icon — full color** | App icon, favicon, avatar | | **Icon — glyph only** | Placed directly on brand color | 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. | Item | Value | |---|---| | **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. 88px on screen · 24mm in print 24px on screen · 8mm in print ## Color Five core colors carry the brand. The extended palette exists for highlights, illustration and campaign work — it supports the core, it never replaces it. ### Core palette Blue, Warm White and Dark are the primary brand colors across every application. Do not substitute unapproved alternatives. | Color | Hex | RGB | Role | |---|---|---|---| | **Exatom White** | `#FFFFFF` | 255 / 255 / 255 | Page background, cards | | **Warm White** | `#F7F4F2` | 247 / 244 / 242 | Section fills, borders | | **Blue Light** | `#E8EEFF` | 232 / 238 / 255 | Tinted panels, labels | | **Blue** | `#2A5AE9` | 042 / 090 / 233 | Primary action, accent | | **Dark** | `#18122D` | 024 / 018 / 045 | Body text, dark surfaces | ### Neutrals A five-step scale from the brand dark. Use it for text hierarchy, dividers and disabled states — not as a second brand color. | Hex | Role | |---|---| | `#18122D` | Primary text | | `#464157` | Secondary text | | `#747181` | Captions, meta | | `#A3A0AB` | Placeholders | | `#D1D0D5` | Input borders | ### 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. | Color | Hex | RGB | Role | |---|---|---|---| | **Mint Light** | `#E5FFF7` | 229 / 255 / 247 | Campaign surfaces, spark backgrounds | | **Mint** | `#3FFFD9` | 063 / 255 / 217 | Accent only — never a surface | | **Teal** | `#023533` | 002 / 053 / 051 | Ink on Mint Light, deep campaign ground | | **Blush** | `#FEEFEF` | 254 / 239 / 239 | Campaign surfaces, softer register | | **Coral** | `#FF5E74` | 255 / 094 / 116 | Errors, and campaign accents | | **Burgundy** | `#440020` | 068 / 000 / 032 | Ink on Blush, deep campaign ground | ### 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. | Item | Value | |---|---| | **Blue** | #E8EEFF → #2A5AE9 | | **Blue → Mint** | #E8EEFF → #E5FFF7 | | **Blush** | #FFFFFF → #FEEFEF | ### 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. `400 tall` · `20px modular margin` · `headline 56px` · `body 14px = 25%` · `pill action` ## Gradients Mesh gradients built the same way as Color's three flat ones — several radial blobs blended over a solid backdrop, plus a grain pass. Four blue, working closest to the core palette; two each for Mint and Coral. | Item | Value | |---|---| | **Oceanic Shimmer** | #123A6B, layered light + grain | | **Bloom Field** | Blue Light → Blue → Dark | | **Depth Pool** | Dark → Blue → Blue Light | | **Morning Blue** | White → Blue Light → Blue | | **Signal Blue** | Blue → Blue Light → Dark | | **Mint Bloom** | Mint Light → Mint → Teal | | **Teal Deep** | Teal → Mint → Mint Light | | **Blush Bloom** | Blush → Coral → Burgundy | | **Burgundy Deep** | Burgundy → Coral → Blush | ## Typography Instrument Sans carries every headline, subhead and button. Inter carries everything you read at length. Two families, no exceptions. ### 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. - Instrument Sans · 600 - Instrument Sans · 500 - Inter · 400 | | | |---|---| | **Maximum weight** | SemiBold (600). Bold and Black are never used, in any family. | | **Titles** | Inter Tight above 18px, or Inter with −4% letter-spacing. Small titles set in Inter — labels, card names, table keys — take −2%. Never looser. | | **Families** | Inter and Instrument Sans only. No system fallbacks on show, no monospace, no third font. | | **Case** | Sentence case. Titles are never set in full caps. | ### Type scale Headlines are 4× the body size with tighter tracking. Subheads and buttons are 2×. As type size increases, tracking tightens. `Headline` · `80pt` · `−4% tracking` · `Instrument Sans SemiBold` `Subhead / Button` · `40pt` · `+0% tracking` · `Instrument Sans SemiBold` `Body` · `20pt` · `−2% tracking` · `Inter Regular` `Small / caption` · `14pt` · `+0% tracking` · `Inter Regular` ### Line-height Larger type takes tighter line-height; smaller type needs more room to read. Headings sit between 110–120%, body copy around 140%. ## Foundations The measurements underneath everything else: how far things sit apart, how sharp their corners are, and where a line is allowed to appear. ### 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. | | | |---|---| | **Buttons & tags** | 999px — Fully pilled — the most recognisable shape in the system | | **Input fields** | 12px — Softer than surfaces so controls read as interactive | | **Cards & surfaces** | 8px — Quiet, close to square; the brand is precise, not bubbly | | **Small elements** | 4px — Chips, code, inline marks | | **Icon badges** | 50% — Only where the shape is the icon itself | ### Borders & elevation Separation comes from hairlines, not shadows. One border colour, one weight, everywhere. | | | |---|---| | **Hairline** | 1px solid #F7F4F2 — the only border in the system, for cards, dividers and section breaks. | | **Input border** | 1px solid #D1D0D5 — the one exception, so a field reads as an editable control. | | **Elevation** | None. No drop shadows anywhere — depth comes from the gradients and from surface colour, not from blur. | | **Focus** | 0 0 0 3px rgba(42, 90, 233, 0.14) with a Blue border — the single ring in the system. | ### Layout | | | |---|---| | **Page width** | 1120px maximum, centred. | | **Section gap** | 96px between sections, 64px between subsections. | | **Card padding** | 24px standard. | | **Application margin** | Longest side ÷ 25, for anything laid out as a format rather than a page. | ## UI elements The building blocks the website is assembled from. Radii, weights and colors here are the defaults — deviate only with reason. ### 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. `999px radius` · `13 / 24px padding` · `small: 9 / 18px at 13px` · `Inter SemiBold 15px` · `−2% tracking` · `1px border` · `no shadow` · `hover: label roll 420ms, colour holds` · `tertiary: underline` 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. ### On dark On Dark #18122D the roles stay the same but the colours invert. Blue is not usable as a fill here: at 2.6:1 against this ground it fails contrast, so the primary action becomes white and Tertiary switches to Blue Light. | | | |---|---| | **Primary** | White fill, Dark text. The only filled action on the surface. | | **Secondary** | Transparent, 1px white at 28%, white text. The border lifts to 50% on hover. | | **Tertiary** | Blue Light #E8EEFF text, no fill. Blue #2A5AE9 is never used for text on Dark. | | **Disabled** | White at 7%, Gray 500 text. | ### Cards & metrics `8px radius` · `17px modular margin` · `Instrument Sans SemiBold 68px` · `label 17px = 25%` · `mark 34px` 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. `999px radius` · `6 / 12px padding` · `Inter 12px SemiBold` · `no border` ## Forms States, field types, a form in full, and the rules we hold ourselves to. 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. `12px radius` · `12 / 16px padding` · `Inter 15px` · `1px #D1D0D5 border` · `focus ring 3px rgba(42,90,233,.14)` ### 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 | Type | Note | |---|---|---| | **Work email** | `text` | Default — placeholder shows the shape, never the label | | **Work email** | `text` | Focus — 3px ring, border to Blue | | **Work email** | `text` | Filled — border darkens to Gray 300 | | **Work email** | `text` | Add the domain ending, like .io or .com | | **VAT number** | `text` | Checked against the VIES register | | **Company — from your email** | `text` | Disabled — prefilled, so do not ask twice | ### 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. | Field | Type | Note | |---|---|---| | **Monthly form volume** | `select` | Chevron is drawn, not native, so it matches the icon set | | **What are you optimising? — pick one** | `radio` | — | | **Integrations** | `checkbox` | — | | **Anything we should know? — optional** | `textarea` | Mark optional fields, never required ones — most fields are required | ### 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. | Field | Type | Note | |---|---|---| | **Email** | `text` | — | | **Mobile** | `text` | So the dealer can confirm the slot | | **Postcode** | `text` | Maastricht, Sint Servaasklooster 14 — found from the postcode, so street and city are never asked. | | **Preferred day** | `radio` | — | ### 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. **Do** - Label above the field, always visible while typing. - Validate when the field is left, not on every keystroke. - Say what to do: “Add the domain ending”, not “Invalid input”. - Derive what you can — address from postcode, company from email domain. - One column. Two columns only for values that belong together, like postcode and number. - Keep the submit button reachable without scrolling past the last field. **Skip** - Placeholder text standing in for the label — it disappears exactly when it is needed. - Asterisks on required fields when nearly everything is required. Mark the optional ones. - Clearing what someone typed because the format was wrong. - Asking twice for something you already have. - A reset button next to submit. - Error summaries at the top with no link down to the field. ## Icons Phosphor Regular, and nothing else. One weight, one grid, drawn on 256 so every glyph lines up at any size. `Phosphor regular` · `256 grid` · `18px in menus` · `26px in cells` · `currentColor` 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. | Use | Phosphor name | |---|---| | Form analytics | `ChartLine` | | Field interactions | `CursorClick` | | Session replay | `PlayCircle` | | Performance alerts | `BellRinging` | | Industry benchmarks | `ChartBar` | | Smart nudges | `ChatTeardropText` | | Autofixes | `MagicWand` | | Eureka AI | `Sparkle` | | CRO Pulse extension | `PuzzlePiece` | | Cookieless & GDPR | `ShieldCheck` | | Integrations | `PlugsConnected` | | Drop-off | `TrendDown` | | Conversion uplift | `TrendUp` | | Checkout | `ShoppingCart` | | Web forms | `Textbox` | | No developer needed | `Lightning` | ## Team The official set of headshots and bios — for LinkedIn, the about page, speaker bios, press. One row per person, one crop, one background. Next to each photo is the person's line drawing, the illustrated version for decks and visuals. ### Line drawings Black line art (SVG) of each team member. Used on the closing slide of every deck (the presenter, dark lines on Blue #2A5AE9) and wherever a photo would be too heavy. Never recoloured apart from Dark or white, never filled in. | Person | File | |---|---| | Stephan van den Bremer | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/stephan.svg | | Michaël Vaes | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/michael.svg | | Filip Lauweres | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/filip.svg | | Bart de Fluiter | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/bart.svg | | Oliver Bath | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/oliver.svg | | Sander Heymans | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/sander.svg | | Marcelo Bem | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/marcelo.svg | | Olger van de Vliet | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/olger.svg | | Matthieu | https://exatom-brand-guidelines.vercel.app/assets/team/drawings/matthieu.svg |