Mission
Give every sales team a true picture of the accounts they sell to: what they run, who they trust, what changed. Better targeting, better finding, more opportunities.
Brand & style guide
Intelligence × Machine
The visual identity system for IXM: the signal mark, colour, type, components and voice. One source of truth for every page, deck and export.
01 · Brand overview
The intelligence multiplier
The name and the mark
Intelligence × Machine: human judgement multiplied by a machine that reads public signals at scale. The mark is seven bars, one signal: what every company publishes when it adopts a vendor, read at scale.
Personality
Precise, calm, numerate. Cyber-modern without the noise. We show the number and the signal behind it, then get out of the way.
Design philosophy
Light blue fading to navy, dark by default. One accent family, cyan to blue. One action fill. Orange only as a small light. Data first; motion only where it explains something.
Verified, not inferredCompany-level onlyTransparent confidenceBuilt for the GTM stack
02 · Logo system
The signal mark
Seven vertical bars, symmetric, rising to the centre. Every bar carries the same gradient: signal cyan at the top to electric blue at the base.
Clear space
Keep a margin equal to the height of the shortest bar on every side. Nothing else sits inside it.
Minimum size
Bars icon 16 px. Short lockup 96 px wide. Full lockup 200 px wide. Below that, use the icon alone.
Colour rules
Gradient bars on navy or white only. Mono versions in black or white. Never recolour the gradient, stretch the bars, or place them on a mid-blue.
Download the logo files
- Horizontal: horizontal-domain_black-text · horizontal-domain_white-text · horizontal-full_black-text · horizontal-full_white-text · horizontal-short-tagline_black-text · horizontal-short-tagline_white-text · horizontal-short_black-text · horizontal-short_white-text
- Stacked: stacked-domain_black-text · stacked-domain_white-text · stacked-full_black-text · stacked-full_white-text · stacked-short-tagline_black-text · stacked-short-tagline_white-text · stacked-short_black-text · stacked-short_white-text
- Wordmark: wordmark-domain_black-text · wordmark-domain_white-text · wordmark-full_black-text · wordmark-full_white-text · wordmark-short_black-text · wordmark-short_white-text
- Icon: icon_bars · icon_bars_1024 · icon_bars_256 · icon_bars_512 · icon_mono-black · icon_mono-black_1024 · icon_mono-black_256 · icon_mono-black_512 · icon_mono-white · icon_mono-white_1024 · icon_mono-white_256 · icon_mono-white_512 · icon_tile-dark · icon_tile-dark_1024 · icon_tile-dark_256 · icon_tile-dark_512
- Mono: mono-horizontal-full_black · mono-horizontal-full_white · mono-horizontal-short_black · mono-horizontal-short_white · mono-stacked-short_black · mono-stacked-short_white
- Social: avatar-dark-1024 · avatar-dark-short-1024
- Everything: new_ixm_logos.zip
Wordmark: always “IXM” in three capitals; long form “Intelligence × Machine” on first mention and in the primary lockup.
03 · Colour palette
Navy, cyan and one orange light
Taken from the mark and built on Radix Colors: blue-dark surfaces under a light-blue to navy gradient, slate text, sky and cyan accents, a cyan to blue action fill, and orange kept for one small highlight per screen. Click any swatch to copy its hex.
Why navy
The mark lives on a near-black navy tile. Navy reads as depth and trust, and every vendor logo keeps its own colour against it.
Why cyan to blue
The bars run cyan to electric blue: energy at the top, reliability at the base. Text uses the guaranteed-contrast steps; the raw signal colours are for glows and gradients.
Why one orange light
Tests show contrast and isolation move conversion more than hue. Orange is the complement of blue, so one small light draws the eye without competing with the action button.
Surfaces · blue-dark scale
Text & accent · slate, sky, cyan, blue
Signal & action
Highlight & functional
Light mode
| Pair | Dark | Light | Use |
|---|---|---|---|
| Ink on background | 15.79 : 1 | 16.39 : 1 | Body, headlines |
| Muted on background | 8.8 : 1 | 5.94 : 1 | Secondary text |
| Muted on the top stop | 5.08 : 1 | : 1 | Nav links over the gradient |
| Muted on surface 2 | 7.14 : 1 | 5.3 : 1 | Text in tinted cards |
| Accent on background | 9.77 : 1 | 5.26 : 1 | Links, stats |
| Accent on surface 2 | 7.92 : 1 | 4.69 : 1 | Links in cards |
| Button text on the cyan end | 14.81 : 1 | 14.81 : 1 | Primary buttons |
| Button text on the blue end | 6.43 : 1 | 6.43 : 1 | Primary buttons |
| Success on background | 9.78 : 1 | 5.09 : 1 | Verified grade |
| Warning on background | 11.97 : 1 | 5.13 : 1 | Inferred grade |
| Danger on background | 8.7 : 1 | 5.21 : 1 | Errors |
Every pair is checked in the build; nothing below 4.5:1 ships. Text is audited on the background, both surfaces and the top stop of the gradient, in both modes.
04 · Modes
Dark by default
Depth in the dark.
Every IXM page opens on light blue fading to navy. Cyan reads as signal; logos keep their own tiles; the footer is always navy.
Clarity in the light.
Use the toggle in the nav. Same tokens, light scales: pale blue fading to white, deeper sky for links, the same cyan to blue button. Every pair re-checked.
05 · Typography
Montserrat and Inter
Montserrat for display, the same face as the wordmark. Inter for everything you read. Both self-hosted, variable weight.
Know what software your customers run.
Six things you learn about every account
Who handles their email
IXM reads the public signals of millions of companies and turns them into account intelligence you can act on.
Intelligence × Machine
2.9M+
Pairing rule: one Montserrat weight per level, never lighter than 700 for headings. Inter never appears above 24px.
06 · Spacing & layout
A 4-point scale, 1200px max
--s-1 · 4px--s-2 · 8px--s-3 · 12px--s-4 · 16px--s-5 · 24px--s-6 · 32px--s-7 · 48px--s-8 · 64px--s-9 · 96pxRadius 12px (8px small, pill 999px). Section rhythm --section-y 64–128px. Grid gutters scale with the viewport. Content never exceeds 1200px; reading columns 560–680px.
07 · Components
Built from the live stylesheet
Buttons
Primary is the cyan to blue fill with dark text. Orange never appears on a button. Three labels only: Start free, Buy a vendor list, Talk to us.
Badges · confidence grades
VerifiedStrongInferredNeutral
Stats
2.9M+companies verified
1,000sof vendors
5.4platforms per company
Cards
Standard card
Surface, hairline border, 12px radius.
Featured card
Gradient rule on top for the one thing that matters.
Layer card
1,000s of vendors
Icon, number, one sentence.
Platform tile
Highlight
Most popularActive nav item
The orange light: a flag, a live dot, an active underline. Never more than one per screen.
Form
08 · Imagery
Logos, signal, data
Vendor logos
Real logos, full-bleed in rounded tiles, always attributed to Logo.dev. Identification, never endorsement.
The signal hero
The home hero draws the seven bars live: a signal pulse bouncing left to right over a deep navy backdrop. One still frame on touch and with reduced motion.
No stock photography
Show the data instead: a row, a count, a grade. If an image cannot be made from the graph, it is not needed.
09 · Motion
Settle, never bounce
Reveal on scroll (600ms, ease-out), counters that settle, tiles that lift 3px on hover. A signal pulse bounces left to right across the seven bars about every 6 seconds, lifting each bar a little as it passes, with gentle breathing underneath; no halo, no outline. Respect reduced-motion everywhere.
10 · Voice & tone
Concise, numerate, plain
Confident, not loud
“80,955 verified companies run Anthropic.” No exclamation marks, no hype words.
Say what the evidence is
“A verification signal the company published itself.” Not “our proprietary AI engine”.
State the limit first
“A floor, not a market total.” Every count is what we have verified, and the graph grows daily. Say so before the buyer asks.
Headlines ≤ 10 words. Sub-lines ≤ 22. Second person, present tense. Buyer nouns: accounts, prospects, CRM, list, territory. Totals are always “millions of companies” or a rounded-down floor with a plus (2.9M+); never an exact count that dates.
11 · Do & don’t
Keep it sharp
- Cyan and blue for accents, one orange light per screen
- Use the full “Intelligence x Machine” lockup wherever it fits
- Put the number next to the claim, as a verified floor
- Show real logos in their own tiles
- Write “IXM”, three capitals
- Say “a DNSai brand” in the footer
- Don’t use the old infinity mark anywhere
- Don’t stretch, recolour, outline or rotate the bars
- Don’t place the bars on a mid-blue
- Don’t put orange on a button
- Don’t explain the method: say “signals”, never DNS, record types or tooling
- Don’t publish the catalogue size (say thousands of vendors) or an exact company total (say millions, or 2.9M+)
- Don’t say “X companies use”: say “X verified companies run”
- Don’t invent colours: pick a Radix step
12 · Implementation
Design tokens
Dark tokens first; html[data-theme="light"] swaps them. Source scales: Radix blue, sky, cyan, slate, orange, green, amber, red, plus the eight measured stops of the mark.
:root {
--bg: #0d1520;
--surface: #111927;
--surface2: #0d2847;
--surface3: #003362;
--border: #104d87;
--border-strong: #205d9e;
--bg-top: #004074;
--ink: #edeef0;
--muted: #b0b4ba;
--accent: #75c7f0;
--accent-strong: #b6ecf7;
--accent-solid: #0090ff;
--accent-solid-hover: #3b9eff;
--accent-bg: #0d2847;
--accent-border: #205d9e;
--cta: #0090ff;
--cta-hover: #0066e0;
--cta-text: #000000;
--cta-text-hover: #ffffff;
--highlight: #f76b15;
--success: #3dd68c;
--success-bg: #132d21;
--warning: #ffca16;
--warning-bg: #302008;
--danger: #ff9592;
--danger-bg: #3b1219;
--brand-cyan: #0CEFFF;
--brand-blue: #1144FF;
--gradient: linear-gradient(135deg, #48FAFF 0%, #0CEFFF 40%, #0090FF 100%);
--gradient-spectrum: linear-gradient(135deg, #0CEFFF 0%, #0090FF 100%);
--gradient-hot: linear-gradient(135deg, #B6ECF7 0%, #48FAFF 35%, #0CEFFF 70%, #03B5FF 100%);
--bars: linear-gradient(180deg, #48FAFF 0%, #0CEFFF 10%, #07CCFF 40%, #03B5FF 50%, #0099FF 60%, #0075FF 70%, #004FFF 80%, #1144FF 100%);
--btn-gradient: linear-gradient(135deg, #0CEFFF 0%, #0090FF 100%);
--btn-gradient-hover: linear-gradient(135deg, #0066E0 0%, #1144FF 100%);
--bg-gradient: linear-gradient(180deg, #004074 0px, #0d1520 820px);
--hero-glow: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(12,239,255,.22) 0%, rgba(12,239,255,0) 70%);
}
html[data-theme="light"] {
--bg: #FFFFFF;
--surface: #f4faff;
--surface2: #e6f4fe;
--surface3: #d5efff;
--border: #acd8fc;
--border-strong: #8ec8f6;
--bg-top: #e6f4fe;
--ink: #1c2024;
--muted: #60646c;
--accent: #00749e;
--accent-strong: #1d3e56;
--accent-solid: #0090ff;
--accent-solid-hover: #0588f0;
--accent-bg: #e6f4fe;
--accent-border: #8ec8f6;
--cta: #0090ff;
--cta-hover: #0066e0;
--cta-text: #000000;
--cta-text-hover: #ffffff;
--highlight: #ef5f00;
--success: #207d55;
--success-bg: #e6f6eb;
--warning: #a05e04;
--warning-bg: #fff7c2;
--danger: #ce2c31;
--danger-bg: #feebec;
--brand-cyan: #0CEFFF;
--brand-blue: #1144FF;
--gradient: linear-gradient(135deg, #0588F0 0%, #0075FF 50%, #1144FF 100%);
--gradient-spectrum: linear-gradient(135deg, #0090FF 0%, #1144FF 100%);
--gradient-hot: linear-gradient(135deg, #00749E 0%, #0075FF 55%, #1144FF 100%);
--bars: linear-gradient(180deg, #48FAFF 0%, #0CEFFF 10%, #07CCFF 40%, #03B5FF 50%, #0099FF 60%, #0075FF 70%, #004FFF 80%, #1144FF 100%);
--btn-gradient: linear-gradient(135deg, #0CEFFF 0%, #0090FF 100%);
--btn-gradient-hover: linear-gradient(135deg, #0066E0 0%, #1144FF 100%);
--bg-gradient: linear-gradient(180deg, #e6f4fe 0px, #FFFFFF 820px);
--hero-glow: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(0,144,255,.16) 0%, rgba(0,144,255,0) 70%);
}