Design System v1.0
AIAD Intelligence · aiadintelligence.com
Design System
v1.0
The visual language for AIAD Intelligence. Editorial confidence. Black on white. One signal colour. Nothing that looks like any other AI product. Every token, component, and rule documented below.
Colour Tokens

Six values. Maximum contrast everywhere. One signal colour used only when something genuinely demands attention. No decorative colour. No gradients.

111111
Black
--black
All primary text, borders, headers, buttons
ffffff
White
--white
All backgrounds, component backgrounds
f7f7f7
Off White
--off
Section headers, active rows, form backgrounds
dddddd
Rule
--rule
All dividers, borders, column rules
555555
Mid
--mid
Secondary text, annotations, completed steps
888888
Light
--light
Labels, metadata, inactive navigation
c0000a
Signal
--signal
Fast track urgency, Do Not Repeat, mandate em ONLY
fff4f4
Signal Bg
--signal-bg
Signal badge backgrounds ONLY
Chart Palette — Greyscale

Ten steps from black to light grey. Use for secondary series, axes, gridlines, and any chart element that should not compete with colour data.

111111
Grey 01
--chart-grey-01
Darkest — primary axis, labels
2a2a2a
Grey 02
--chart-grey-02
Secondary axis
3d3d3d
Grey 03
--chart-grey-03
Heavy gridlines
515151
Grey 04
--chart-grey-04
Data series (dark)
666666
Grey 05
--chart-grey-05
Data series (mid-dark)
7a7a7a
Grey 06
--chart-grey-06
Data series (mid)
8f8f8f
Grey 07
--chart-grey-07
Muted series, backgrounds
a3a3a3
Grey 08
--chart-grey-08
Light series, watermarks
b8b8b8
Grey 09
--chart-grey-09
Gridlines, reference lines
cccccc
Grey 10
--chart-grey-10
Lightest — subtle fills
Chart Palette — Colour

Twenty warm editorial hues anchored by Signal Red. Burnt earth tones, muted naturals, and dark neutrals. No neon. No blue. No purple. Every colour works on white.

c0000a
Signal Red
--chart-color-01
Hero highlight, primary series
8b2500
Burnt Sienna
--chart-color-02
Secondary emphasis
a0522d
Sienna
--chart-color-03
Warm accent
b5651d
Clay
--chart-color-04
Tertiary series
c8860e
Ochre
--chart-color-05
Warm mid-tone
d4a017
Dark Gold
--chart-color-06
Highlight accent
8b7355
Warm Khaki
--chart-color-07
Neutral warm
6b5b3e
Dark Tan
--chart-color-08
Earth tone
5c4033
Dark Brown
--chart-color-09
Deep warm
704241
Rosewood
--chart-color-10
Muted red-brown
8b4553
Muted Berry
--chart-color-11
Cool accent
6e3b4a
Dark Plum
--chart-color-12
Deep cool
5b3a29
Espresso
--chart-color-13
Darkest warm
4a5043
Olive Drab
--chart-color-14
Muted green-grey
5e6b56
Sage
--chart-color-15
Natural green
6b7c6e
Eucalyptus
--chart-color-16
Cool natural
4f5d5e
Slate
--chart-color-17
Cool neutral
5a6a6e
Dark Slate
--chart-color-18
Steel tone
3e4c52
Charcoal Teal
--chart-color-19
Deep cool neutral
2c3539
Gunmetal
--chart-color-20
Darkest cool
Typography

Two typefaces, each with a specific job. Playfair Display for everything that carries weight. IBM Plex Sans for all interface chrome, labels, and data values.

Sell 3,000 units
for under £3.
Mandate Goal
Playfair Display 800 · 48px / 1.05 · em italic → var(--signal)
1.61
2.0
Key Statistics
Playfair Display 800 · 38px · Live → italic · Target → var(--mid)
Purple lip trend accelerating
Sell 3,000 Luxe Collection units for under £3 each
Signal & Mandate Headlines
Playfair Display 700 · Signal: 17px · Mandate: 15px
Increase Luxe Violet Lip bid by 18%. Shift £620 from awareness to conversion.
Recommendation Action
Playfair Display 700 · 19px / 1.35 · Plain — no italic
“Pre-peak bid amplification during competitor dark period. Pattern confirmed 5 of 5.”
Log Annotation
Playfair Display 400 italic · 12px · var(--chart-grey-03) · in quotes
Signal Feed
Google Trends
Fast Track
UI Labels (Sans)
IBM Plex Sans 600–700 · 9–11px · ALL CAPS · tracking 0.12–0.22em
0.87
CPA £4.80 → £3.90 · ROAS +0.3
9.4 / 10
Data Values (Sans)
IBM Plex Sans 500–600 · Confidence: 13px · Deltas: 11px
Spacing Scale

Ten steps. Always use a token — never a raw pixel value.

--s1
4px
Icon gaps, tight label spacing
--s2
8px
Component internal gap
--s3
12px
Button padding, chip gaps
--s4
16px
Card padding, list items
--s5
20px
Column padding, section gaps
--s6
24px
Horizontal page padding
--s7
32px
Section breaks
--s8
40px
Centre column padding
--s9
48px
Hero mandate top padding
--s10
64px
Page-level vertical rhythm
Signal Row

Elevated signals use Playfair bold. Dismissed noise uses struck-through italic sans. The contrast communicates the system's intelligence.

Signal Feed
Google Trends0.87
Purple lip trend accelerating
Fast Track · Peak T−4 days
Pulse Engine0.79
Competitor A spend down 34%
Mid Track · 3 days sustained
Reddit
General beauty discourse
Dismissed · below threshold
Stat Block

Numbers given the weight of headlines. Live values in italic. Targets in mid grey. Readable at arm's length.

1.61
Return now
2.0
Mandate
£2.48
Avg CPA
1,847
Units sold
Recommendation Card

The most important component. Black header communicates authority. The action reads like a decision, not a suggestion.

Proposed action · within band · no sign-off requiredConfidence 0.91
Increase Luxe Violet Lip bid by 18%. Shift £620 from awareness to conversion. Pause creative cr3 — frequency threshold reached.
Bid adjustment
+18%
Budget shift
£620
Est. CPA impact
−£0.80
Log Entry

Three verdict states. REPEAT in black. ADAPT in mid grey. DO NOT REPEAT in signal red. Annotations read like editorial commentary.

Optimisation Log
Repeat9.4
Bid +18% · Luxe Violet Lip · Amazon DSP
CPA £4.80 → £3.90 · ROAS +0.3 · mandate +0.29
Pre-peak bid amplification during competitor dark period. Pattern confirmed 5 of 5.
Adapt5.2
Creative pause cr3 · frequency 3×
CTR +0.4% · mixed CPA result · testing cr5
Frequency threshold effective on video. Static shows different saturation curve.
Do not repeat1.9
Broad audience expansion mid-peak
ROAS −0.6 · CPA +£1.20 · reversed immediately
Expanding during peak dilutes high-intent signal. Hard constraint applied.
Buttons

Always square corners. Always uppercase with generous letter spacing. No border-radius anywhere.

Badges

Used for status and track labels. Always outlined, never filled except for black variant. Square corners.

ActiveStagedCompleteDo Not Repeat
Editorial Rules

The decisions not covered by tokens. These govern the judgement calls that determine whether a screen feels like AIAD or like everything else.

Do
Use Playfair for all data that carries meaning
Set mandate goals like magazine headlines
Show dismissed noise as struck-through text
Use 2px or 3px black borders for hierarchy
Let numbers be large — readable from across a desk
Write annotations in italic serif — editorial commentary
Do Not
Use colour to decorate — only to communicate
Round any corners — no border-radius anywhere
Use gradients, shadows, glows, or atmospheric effects
Use purple, blue, or green as UI colours
Wrap data in coloured metric cards
Use Inter, Roboto, or system fonts