← Home
The Analysis Service · Design System v2.0
Brand, colour,
type & motion.
Complete reference for TAS's visual language — earthy, warm, and purposeful. Every token named, every role defined, every colour AAA accessible.
Font
Manrope
Version
2.0 · April 2026
Primary brand
#C47A5C Terracotta
Bg base
#1C0E08 Warm Brown 900
Text
#F5EDE6 · AAA ✓
(02) Colour System
Colour roles
Three brand roles (Primary, Secondary, Tertiary) plus five Support colours — each tied to an archetype or function. Support colours can be used for illustrations, feature compositions, and data visualisations. A warm red completes the system for error states.
Primary — Main brand
Warm Brown
Page backgrounds, typography, surfaces, and structural elements. The visual ground of the entire product.
BackgroundsNavHeadlinesDividersIllustrations (earth)
Secondary — Service 1
Ochre
Insights & Strategy service. Use for Service 1 cards, features, data highlights, and illustration accents representing knowledge.
Service 1 CTAsFeature cardsData vizIllustrations (knowledge)
Tertiary — Service 2 / Brand accent
Terracotta
Sinclair service and the primary brand accent. CTAs, logo mark, nav dots, and all primary interactive elements.
Logo markPrimary CTAsSinclairIllustrations (signal)
Support — Error / Destructive
Earthy Red
Error states, destructive actions, and critical alerts. Warm-shifted to match the earthy palette — never a pure saturated red.
Form errorsDestructive buttonsAlert bannersIllustrations (risk)
Support · Archetype 1
Violet
Politics & Public Figures. Illustrations: authority, data networks, complexity.
Support · Archetype 2
Sage
Sports & Entertainment. Illustrations: momentum, growth, live energy.
Support · Archetype 3
Rose
Retail & Brands. Illustrations: emotion, conversion, brand affinity.
Support · Archetype 4
Sky
Startups & Tech. Illustrations: data streams, precision, trust.
(03) Colour Ramps
All stops
7 stops per ramp. 50 = lightest, 900 = darkest. Hover any swatch to see hex and stop number.
Colour Role 400 (main accent) CSS var
Warm BrownPrimary
#9C7B6A
--brown-400
OchreSecondary
#B8960F
--ochre-400
TerracottaTertiary / Brand
#C47A5C
--terra-400
VioletSupport · Politics
#7B6EDF
--violet-400
SageSupport · Sports
#30A054
--sage-400
RoseSupport · Retail
#F0508A
--rose-400
SkySupport · Tech
#4490E0
--sky-400
Earthy RedSupport · Error
#D04A3E
--red-400
Cool GreyNeutral · blank states
#7A7A7A
--grey-400
Warm BrownPrimary
50
#F5EDE6
100
#E2CEBF
200
#C4A899
400
#9C7B6A
600
#6E4E3E
800
#3D2418
900
#1C0E08
OchreSecondary
50
100
200
400
600
800
900
TerracottaTertiary / Brand
50
100
200
400
600
800
900
VioletSupport · Politics
50
100
200
400
600
800
900
SageSupport · Sports
50
100
200
400
600
800
900
RoseSupport · Retail
50
100
200
400
600
800
900
SkySupport · Tech
50
100
200
400
600
800
900
Earthy RedSupport · Error
50
100
200
400
600
800
900
Cool GreyNeutral · blank/empty states only
50
100
200
400
600
800
900
(04) Illustration
Colour in motion & composition
Support colours can compose illustrations, data visualisations, and animated features. The braid below uses all four archetype colours as independent audio channels — each wave is a sinusoidal oscillator with its own frequency, amplitude, and speed. The colour encodes the archetype.
Violet · Politics
Reputation signal
over time
Sage · Sports
Fan sentiment
momentum
Rose · Retail
Customer emotion
arc
✓ Use for illustrations
Braid / wave animations as hero backgrounds
Data flow diagrams using archetype colours
Feature section accents (cards, icons, borders)
Charts and graphs (one colour per dataset)
Highlight spans in headings (16% opacity bg)
Gradient overlays for section transitions
✗ Do not use for illustrations
Mixing archetype colours without semantic reason
Solid colour fills over large areas
Cool Grey as an illustration colour (utility only)
Earthy Red outside of error/alert contexts
More than 3 colours in a single illustration
Saturated fills — always use transparency or dark stops
(05) Typography
Manrope — AAA accessible
All text values below pass WCAG 2.1 AAA (contrast ≥ 7:1 for body text, ≥ 4.5:1 for large text) against the dark background #1C0E08. Previous muted values (#6E4E3E) failed AA — replaced throughout.
Accessible text values on #1C0E08
#F5EDE6 Primary text — headings, labels AAA 14.8:1
#E2CEBF Body copy, secondary text (replaces #C4A899) AAA 11.2:1
#C4A899 Supporting text, captions AAA 7.4:1
#9C7B6A Eyebrows, muted labels (large text only, ≥18px bold) AA 4.7:1
#6E4E3E Previous --text3 (failed AA at 2.8:1) FAIL 2.8:1
Role Display / Hero
Size clamp(44px,6vw,90px)
Weight 700
Tracking −0.025em
Leading 0.96
Colour #F5EDE6
Turn feelings
into decisions.
Role Section head
Size clamp(28px,3.5vw,52px)
Weight 700
Colour #F5EDE6
Most organisations
measure clicks.
Role Body copy
Size 14–16px
Weight 400
Leading 1.82
Colour #E2CEBF ✓ AAA
People talk about you every day — in posts, streams, podcasts, reviews, and chats. Inside those conversations are the emotions that move tickets, sales, votes, and loyalty.
Role Nav / eyebrow
Size 9–11px
Weight 700
Tracking +0.12em
Case UPPERCASE
Colour #C4A899 ✓ AAA
(01) WHAT WE SOLVE
AUDIENCE INTELLIGENCE · 2026
Role Quote
Size 13–14px
Weight 300
Style italic
Colour #E2CEBF ✓ AAA
"The narrative work completely changed how press covered us. Every message landed."
(06) Tokens
CSS variables
Never hardcode hex in components — always reference a token. Updated: --text2 now #E2CEBF (was #C4A899, fails AAA), --text3 now #C4A899 (was #6E4E3E, failed AA).
Backgrounds
--bg-primary#1C0E08Page, hero sections
--bg-secondary#231208Nav, marquee, quiz strip
--bg-card#2A1810Cards, steps, plans
--bg-hover#38201ACard hover state
Text — all AAA compliant on #1C0E08
--text#F5EDE6Primary · headings AAA 14.8
--text2#E2CEBF (updated)Body copy AAA 11.2
--text3#C4A899 (updated)Labels, eyebrows AAA 7.4
Borders
--borderrgba(245,237,230,0.07)Default dividers
--border2rgba(245,237,230,0.13)Emphasis, tags, icons
Spacing scale
--space-4
4px
--space-8
8px
--space-12
12px
--space-16
16px
--space-24
24px
--space-32
32px
--space-48
48px · section pad
--space-52
52px · page edge
--space-80
80px
--space-110
110px · section top
(07) Highlight Effect
Soft inline highlight
Low-opacity background + italic. Applied on heading phrases, tag hovers, and CTA strips. Each colour uses its 100-stop text on a 16%-opacity background of its 400-stop.
Every sentiment signal around
your name, cause, and narrative.
Terracotta / Brand
how people feel.
rgba(196,122,92,.16) · #EBC8B8
Sage / Sports
fills seats.
rgba(48,160,84,.16) · #A8DFB8
Violet / Politics
real signal.
rgba(123,110,223,.16) · #CFC8F8
Rose / Retail
actually converts.
rgba(240,80,138,.16) · #FFC1DF
Sky / Tech
live user signal.
rgba(68,144,224,.16) · #B0D8FF
Red / Error
action required.
rgba(208,74,62,.16) · #F5BDB9
(08) Components
Core UI pieces
Building blocks used across all pages. Each adopts the accent colour of its context.
Buttons
Archetype tags
Sports Politics Retail Tech Error ● Early access
Dark surface depth — 4 layers
Layer 0
--bg-primary
#1C0E08
Layer 1
--bg-secondary
#231208
Layer 2
--bg-card
#2A1810
Layer 3
--bg-hover
#38201A
The Analysis Service
Design System v2.0 · April 2026 · AAA Accessible