Brand & style guide

DNSai: the DNS intelligence platform

One source of truth for every page, deck and export. The whale, the blue-to-cyan gradient, the record colours, Inter, and a voice that shows the record before the claim.

Mission

Give every team a true picture of what their domains, and the world’s domains, say in DNS: what they run, who handles their email, how secure they are, what changed.

Personality

Precise, calm, technical without being cold. We name the record type, show the grade and the date, and let the data speak.

Design philosophy

Dark by default, light on request. Blue for the brand, cyan for the action of reading, one record colour per record type so a scan reads like a legend.

Brands

DNSai is the platform and the parent. IXM (Intelligence × Machine) is a DNSai brand for account intelligence, with its own signal-bars mark and navy palette. Never mix the two marks on one surface.

Logo system

The whale

The mark is the whale; the wordmark is “DNS” bold and “ai” light, set in Inter. Together they are the horizontal lockup used in the nav.

Primary mark · dark

Primary mark · light

Icon · 128 / 64 / 32 / 16 px

DNSai

Horizontal lockup (nav) · whale 36px + wordmark 22px

Clear space

Keep a margin equal to half the whale’s height on every side.

Minimum size

Whale 16 px. Lockup 120 px wide. Below that, use the whale alone.

Colour rules

The whale keeps its own colours on dark or light. Never recolour, outline, rotate or add effects. Never place the IXM bars next to it.

Full icon set (macOS, iOS, Android, Windows, web favicons): /home/DNSwhale_logo_main_icons/. Web favicons already ship in static/img/.

Colour

Blue to cyan, black surfaces, one colour per record

Tokens live in static/css/theme.css; this page reads them live. Click any swatch to copy its hex.

#26c4ffbrand gradient#0054ff

Brand & functional

Dark surfaces & text

Light mode

DNS record colours

Pair	Dark	Light	Use
Text on background	21.0 : 1	21.0 : 1	Body, headlines
Secondary on background	13.08 : 1	14.74 : 1	Supporting text
Muted on card	5.58 : 1	7.08 : 1	Captions in cards
Brand cyan on background	10.42 : 1	5.32 : 1	Links, eyebrows
Brand cyan on card	7.9 : 1	5.05 : 1	Links in cards
White on brand blue	5.66 : 1	5.66 : 1	Primary buttons

All audited text pairs meet 4.5:1 in both modes.

Typography

Inter, at every size

One family for display and body. Weight and size carry the hierarchy; the wordmark pairs 700 and 300.

H1 · Inter 700 · 36–60px

Every domain, every record, every change.

H2 · Inter 700 · 24–34px

What DNSai sees for a domain

H3 · Inter 600 · 20–24px

Email authentication

Body · Inter 400 · 16–17px / 1.6

DNSai reads the public DNS of millions of domains and turns it into intelligence you can act on.

Numbers · Inter 700 · tabular

2.9M+

Components

Built from the live stylesheet

Buttons

Start free View pricing

Primary is the brand gradient with white text. Outline is cyan on transparent.

Record badges

TXTSPFMXCNAMEDMARCDKIM

Each record type keeps its colour everywhere: scans, diagrams, legends.

Stats

2.9M+domains scanned

50+record types

1.8M+changes recorded

Cards

Standard card

Card surface, hairline border, 12px radius.

Feature card

Used on the landing page; lifts on hover.

Platform tile

Voice & tone

Name the record, show the grade

Technical, not cryptic

“SPF include and MX point at Google; DMARC at reject.” Say what the record is; explain it once.

Evidence first

“A verification TXT record placed by an administrator.” Not “our AI detected”.

State the limit

“A record proves a relationship, not seat count or spend.” Before the reader asks.

Show the record type in its colour
Put the number next to the claim, as a floor (2.9M+)
Write “DNSai”, one word, capital D-N-S
Say “IXM is a DNSai brand” where both appear

Don’t recolour or outline the whale
Don’t put the IXM bars on a DNSai page
Don’t invent colours: use a token
Don’t call a record a customer contract

Implementation

Design tokens

Dark tokens first; body.light-mode swaps them. Source: static/css/theme.css.

:root {
  --brand-cyan: #26c4ff;
  --brand-blue: #0054ff;
  --brand-gradient: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%);
  --brand-gradient-hover: linear-gradient(90deg, #0048d4 0%, #007aff 100%);
  --btn-secondary-gradient: linear-gradient(to bottom, #0054FF, #0447D3);
  --color-success: #00c853;
  --color-warning: #ffab00;
  --color-error: #ff1744;
  --color-info: #40a8ff;
  --data-pink: #FC6FCF;
  --data-steel: #97B8D5;
  --data-gold: #D3D212;
  --data-header: #40a8ff;
  --color-disabled-bg: #5a5a5a;
  --color-disabled-text: #999999;
  --nav-h: 72px;
  --dns-a: #26c4ff;
  --dns-aaaa: #7c3aed;
  --dns-cname: #06b6d4;
  --dns-mx: #10b981;
  --dns-txt: #f59e0b;
  --dns-ns: #3b82f6;
  --dns-soa: #6366f1;
  --dns-srv: #14b8a6;
  --dns-ptr: #f97316;
  --dns-caa: #ef4444;
  --dns-spf: #f59e0b;
  --dns-dmarc: #ec4899;
  --dns-dkim: #22c55e;
  --dns-bimi: #8b5cf6;
  --dns-https: #a855f7;
  --dns-technology: #6366f1;
  --dns-default: #9ca3af;
  --bg-body: #000000;
  --bg-section: #111111;
  --bg-surface: #1a1a1a;
  --bg-card: #222222;
  --bg-footer: #191919;
  --bg-input: #1a1a1a;
  --bg-feature-card: linear-gradient(135deg, #0a2a54 0%, #104a8a 100%);
  --bg-dark-card: linear-gradient(to bottom, #1f1f1f, #191919);
  --bg-primary: var(--bg-body);
  --bg-secondary: var(--bg-surface);
  --bg-hover: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --text-dimmed: #888888;
  --text-placeholder: #666666;
  --border-default: #333333;
  --border-emphasis: #555555;
  --border-input: #333333;
  --border-input-focus: #26c4ff;
  --link-color: #26c4ff;
  --link-hover: #26c4ff;
  --link-content: #40a8ff;
  --text-link: var(--link-color);
  --accent: #26c4ff;
  --glow-primary: #26B6FE;
  --glow-secondary: #0054FF;
  --selected-tab: #26c4ff;
  --toggle-active: #26c4ff;
  --focus-ring: rgba(38, 196, 255, 0.3);
  --card-hover-shadow: 0 4px 15px rgba(0, 84, 255, 0.4);
  --input-focus-shadow: 0 0 0 3px rgba(38, 196, 255, 0.3);
  --btn-hover-shadow: 0 4px 15px rgba(0, 84, 255, 0.4);
  --btn-outline-text: #26c4ff;
  --btn-outline-border: #26c4ff;
  --btn-outline-hover-bg: rgba(38, 196, 255, 0.1);
  --nav-bg-top: rgba(0, 0, 0, 0);
  --nav-bg-scrolled: rgba(0, 0, 0, 0.95);
  --nav-blur-scrolled: blur(10px);
  --nav-shadow-scrolled: 0 2px 12px rgba(0, 0, 0, 0.3);
  --nav-link-color: #ffffff;
  --nav-link-hover: #26c4ff;
  --nav-link-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --nav-underline: #26c4ff;
  --menu-icon-color: #fff;
  --menu-icon-hover: #26c4ff;
  --mode-switch-bg: #666;
  --mode-switch-shadow: rgba(0, 0, 0, 0.5);
  --flyout-bg: #1a1a1a;
  --flyout-border: 1px solid rgba(255, 255, 255, 0.1);
  --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.8);
  --flyout-link-color: #ffffff;
  --flyout-link-hover-bg: rgba(38, 196, 255, 0.12);
  --flyout-link-hover-color: #26c4ff;
  --flyout-bar-color: #26c4ff;
  --flyout-close-color: #999;
  --flyout-close-hover-color: #ffffff;
  --flyout-close-hover-bg: rgba(255, 255, 255, 0.08);
  --flyout-close-border: rgba(255, 255, 255, 0.1);
  --flyout-section-header: #26c4ff;
  --dropdown-bg: linear-gradient(135deg, #191919 0%, #333333 100%);
  --dropdown-border: 1px solid #555555;
  --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --dropdown-header-color: #26c4ff;
  --dropdown-header-border: rgba(38, 196, 255, 0.2);
  --dropdown-link-color: #ffffff;
  --dropdown-link-hover-bg: rgba(38, 196, 255, 0.1);
  --dropdown-link-hover-color: #26c4ff;
  --modal-bg: linear-gradient(to bottom, #191919, #333333);
  --modal-text: #ffffff;
  --error-bg: #2a0f0f;
  --error-border: #602b2b;
  --error-text: #ffd6d6;
  --toast-bg: #0F1926;
  --toast-border: #97B8D5;
  --toast-text: #ffffff;
  --code-color: #26c4ff;
  --code-bg: #1a1a1a;
  --dns-btn-text: #ffffff;
  --dns-btn-border: #ffffff;
  --dns-btn-hover-bg: #ffffff;
  --dns-btn-hover-text: #000000;
  --sticky-hover-bg: #22282b;
  --sticky-selected-bg: #222f34;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --hero-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  --card-shadow: none;
}
body.light-mode {
  --brand-cyan: #00739e;
  --brand-blue: #0054ff;
  --brand-gradient: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%);
  --brand-gradient-hover: linear-gradient(90deg, #0048d4 0%, #007aff 100%);
  --btn-secondary-gradient: linear-gradient(to bottom, #0054FF, #0447D3);
  --color-success: #00c853;
  --color-warning: #ffab00;
  --color-error: #ff1744;
  --color-info: #00739e;
  --data-pink: #FC6FCF;
  --data-steel: #97B8D5;
  --data-gold: #D3D212;
  --data-header: #40a8ff;
  --color-disabled-bg: #5a5a5a;
  --color-disabled-text: #999999;
  --nav-h: 72px;
  --dns-a: #26c4ff;
  --dns-aaaa: #7c3aed;
  --dns-cname: #06b6d4;
  --dns-mx: #10b981;
  --dns-txt: #f59e0b;
  --dns-ns: #3b82f6;
  --dns-soa: #6366f1;
  --dns-srv: #14b8a6;
  --dns-ptr: #f97316;
  --dns-caa: #ef4444;
  --dns-spf: #f59e0b;
  --dns-dmarc: #ec4899;
  --dns-dkim: #22c55e;
  --dns-bimi: #8b5cf6;
  --dns-https: #a855f7;
  --dns-technology: #6366f1;
  --dns-default: #9ca3af;
  --clr-bg-overlay: rgba(8, 34, 67, 0.5);
  --clr-bg-modal-start: #191919;
  --clr-bg-modal-end: #333333;
  --bg-body: #ffffff;
  --bg-section: #f1f1f1;
  --bg-surface: #f9f9f9;
  --bg-card: #f9f9f9;
  --bg-footer: #E6E6E6;
  --bg-input: #ffffff;
  --bg-feature-card: none;
  --bg-dark-card: none;
  --bg-primary: var(--bg-body);
  --bg-secondary: var(--bg-surface);
  --bg-hover: #ececec;
  --text-primary: #000000;
  --text-secondary: #282828;
  --text-muted: #555555;
  --text-dimmed: #666666;
  --text-placeholder: #999999;
  --border-default: #cccccc;
  --border-emphasis: #e5e5e5;
  --border-input: #cccccc;
  --border-input-focus: #0054ff;
  --link-color: #0054ff;
  --link-hover: #0054ff;
  --link-content: #0054ff;
  --text-link: var(--link-color);
  --accent: #0054ff;
  --glow-primary: #0054ff;
  --glow-secondary: #0054ff;
  --selected-tab: #0054ff;
  --toggle-active: #0054ff;
  --focus-ring: rgba(0, 84, 255, 0.2);
  --card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  --input-focus-shadow: 0 0 0 3px rgba(0, 84, 255, 0.2);
  --btn-hover-shadow: 0 4px 15px rgba(0, 84, 255, 0.4);
  --btn-outline-text: #00739e;
  --btn-outline-border: #00739e;
  --btn-outline-hover-bg: rgba(0, 84, 255, 0.1);
  --nav-bg-top: rgba(255, 255, 255, 1);
  --nav-bg-scrolled: rgba(255, 255, 255, 1);
  --nav-blur-scrolled: blur(10px);
  --nav-shadow-scrolled: 0 2px 8px rgba(0, 0, 0, 0.1);
  --nav-link-color: #000000;
  --nav-link-hover: #00739e;
  --nav-link-shadow: none;
  --nav-underline: #0054ff;
  --menu-icon-color: #000;
  --menu-icon-hover: #0054ff;
  --mode-switch-bg: #999;
  --mode-switch-shadow: rgba(0, 0, 0, 0.3);
  --flyout-bg: #ffffff;
  --flyout-border: 1px solid rgba(0, 0, 0, 0.12);
  --flyout-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
  --flyout-link-color: #1a1a1a;
  --flyout-link-hover-bg: rgba(0, 84, 255, 0.08);
  --flyout-link-hover-color: #0054ff;
  --flyout-bar-color: #0054ff;
  --flyout-close-color: #666;
  --flyout-close-hover-color: #1a1a1a;
  --flyout-close-hover-bg: rgba(0, 0, 0, 0.05);
  --flyout-close-border: rgba(0, 0, 0, 0.1);
  --flyout-section-header: #0054ff;
  --dropdown-bg: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  --dropdown-border: 1px solid #dddddd;
  --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  --dropdown-header-color: #0054ff;
  --dropdown-header-border: rgba(0, 84, 255, 0.2);
  --dropdown-link-color: #333333;
  --dropdown-link-hover-bg: rgba(0, 84, 255, 0.1);
  --dropdown-link-hover-color: #0054ff;
  --modal-bg: #474747;
  --modal-text: #ffffff;
  --error-bg: #2a0f0f;
  --error-border: #602b2b;
  --error-text: #ffd6d6;
  --toast-bg: #0F1926;
  --toast-border: #97B8D5;
  --toast-text: #ffffff;
  --code-color: #0054ff;
  --code-bg: #f1f1f1;
  --dns-btn-text: #000000;
  --dns-btn-border: #000000;
  --dns-btn-hover-bg: #000000;
  --dns-btn-hover-text: #ffffff;
  --sticky-hover-bg: #f1f7f9;
  --sticky-selected-bg: #e8f5f9;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --hero-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}