Adthena Design System

Colors

Primary — Variable Collection

primary.main#0c8dea

primary.medium#3079bd

primary.bright#5bb3f9

primary.pageBg#e5eef5

Primary Fill Styles (Component-Level)

fill.main#1565c0

fill.dark#063059

fill.light#5e92f3

fill.contrast#ffffff

States

selectedSoft#eaf4ff

containedHover#0f4786

outlinedHoverBg#f7f9fc

restingBorderrgba(21,101,192,.5)

Text

text.primaryrgba(0,0,0,.87)

text.secondaryrgba(0,0,0,.6)

text.disabledrgba(0,0,0,.38)

text.primaryVar#181818

text.secondaryVar#858585

text.disabledVar#d3d3d3

Alerts — Semantic

warning.main#ef6c00

warning.bg#fdf0e5

error.main#c62828

error.bg#f9e9e9

Backgrounds & Surfaces

bg.page#e5eef5

bg.paper#ffffff

bg.default#fafafa

Action States

activergba(0,0,0,.54)

hoverrgba(0,0,0,.04)

selectedrgba(0,0,0,.08)

disabledrgba(0,0,0,.26)

disabledBgrgba(0,0,0,.12)

Chart Series — Polychromatic (Index Order)

01 purple#b3a2e7

02 blue#64abfb

03 magenta#d47dd4

04 crimson#e86492

05 green#8ac8b1

06 teal#53bdc5

07 orange#ff7a1a

08 red#de5a5a

09 navy#435a97

10 brown#814e2c

11 olive#c8d09c

12 lime#95b536

neutral#d3dbe6

Monochromatic Palettes — 12 families × 10 steps · Source: ATHENA_DS · Token: palette.{family}.{step}

Purple

900

800

700

600

500

400

300

200

100

Blue

900

800

700

600

500

400

300

200

100

Magenta

900

800

700

600

500

400

300

200

100

Crimson

900

800

700

600

500

400

300

200

100

Lime

900

800

700

600

500

400

300

200

100

Teal

900

800

700

600

500

400

300

200

100

Orange

900

800

700

600

500

400

300

200

100

Red

900

800

700

600

500

400

300

200

100

Navy

900

800

700

600

500

400

300

200

100

Brown

900

800

700

600

500

400

300

200

100

Green

900

800

700

600

500

400

300

200

100

Olive

900

800

700

600

500

400

300

200

100

Neutral

900

800

700

600

500

400

300

200

100

Grey Scale — Extended (custom half-steps 350, 450, 550, 650, 750, 850, 950)

100

200

300

350

400

450

500

550

600

650

700

750

800

850

900

950

Typography

Base — Open Sans

Aa Bb Cc 123 !?

Light 300 Regular 400 SemiBold 600 Bold 700

'Open Sans', Helvetica, sans-serif

Heading Scale

HXXL

96px · SemiBold · lh 112%

Display XXL

HXL

60px · SemiBold · lh 120%

Display XL

48px · SemiBold · lh 116%

Heading Large

34px · SemiBold · lh 123%

Heading Medium

24px · SemiBold · lh 133%

Heading Small

HXS

20px · SemiBold · lh 120%

Heading XS

Body & UI Scale

Body 16

16px · Regular · lh 150%

Standard body copy at 16px.

Body 16 Bold

16px · SemiBold · lh 150%

Semibold body — labels and emphasis.

Body 14

14px · Regular · lh 143%

Body at 14px — data tables and cards.

Body 14 Bold

14px · SemiBold · lh 143%

Column headers, callout text.

Subtitle 16

16px · Regular · lh 175%

Subtitle — section descriptions.

Subtitle 14

14px · Regular · lh 157%

Subtitle — chart captions.

Caption

12px · Regular · lh 13px

Supporting caption or metadata text.

Overline

12px · Regular · lh 266%

Overline — Uppercase Label

Component Styles

Button Lg

15px · SemiBold · lh 26px

Button Large

Button Md

14px · SemiBold · lh 24px

Button Medium

Button Sm

13px · SemiBold · lh 22px

button small

Input Text

14px · Regular · lh 24px

Input field value text

Table Header

14px · SemiBold · lh 24px

Column Header

Chip

12px · SemiBold · lh 12px

Chip Label

Badge Label

12px · SemiBold · lh 20px

99+

Tooltip

10px · Regular · lh 14px

Tooltip content text

Spacing — Tailwind-aligned (1 unit = 4px)

Numeric Scale

0px

0.5

2px

4px

1.5

6px

8px

2.5

10px

12px

16px

20px

24px

28px

32px

36px

40px

48px

56px

64px

80px

Semantic Aliases

Token Value Description pagePadding 24px Page outer padding cardGap 16px Gap between cards cardPadding 24px Card inner padding cardPaddingCompact 16px KPI card padding appBarHeight 50px Global app bar height sidebarWidth 254px Navigation sidebar width contentLeftOffset 278px Sidebar + 24px gap contentMax 1200px Content column max-width

Border Radius

none0px

sm4px

md6pxtooltip

lg8pxnav card

xl12pxALL cards ← universal

full200pxpills, chips

circle50%avatars

Rule: All cards, callout boxes, insight panels → xl (12px) without exception. Filter pills and chips → full (200px). Avatars and icon circles → circle (50%).

Shadows — Elevation Effect Styles

none

No shadow

none

outlined

Elevation/Outlined — card borders

0 0 0 1px rgba(229,232,237,1)

card

Elevation — standard card

0 0 16px rgba(23,42,68,0.2)

modal

Elevation/Modals

0 0 16px rgba(26,32,54,0.2)

heroCard

Hero Card Elevation

0 4px 14px rgba(9,58,107,0.2)

Rule: Standard cards → none. Modal overlays → modal. Hero KPI cards → none. Background blur uses backdrop-filter: blur(10px) — not a box-shadow.

Breakpoints

sm640px

md768px

lg1024px

xl1280px

2xl1536px

Icons

All icons come from the Icon/ namespace in the design system. Three weights are available for most icons: Filled, Outline, and Light. All icons are rendered at 20 × 20 px unless otherwise noted.

20 × 20 px Filled · Outline · Light Figma node 31595:15275

Navigation Icons

20 × 20 px NavIcon/ namespace Figma node 58-4494

Brand Activator

Smart Monitor

Data Mgmt

Competitors

Search Terms

Adverts

Brand Protect

Lab

My Analytics

Support

Bell

AI Search

Usage on dark backgrounds

On the App Bar (#063059), icons appear white — no colour changes needed; use any icon as-is on the dark surface.

Logos

Brand and partner logos used across the Adthena product. AI platform logos are available in two formats: 16px inline (for use inside UI elements) and 32px Round (circular badge).

Figma node 26:1243 16px · 32px Round

Adthena

121 × 26px · White · On dark

On fill/main (#1565c0)

125 × 36px · Dark · On white

125 × 36px · #063059 · On white

Favicon · ICO

27 × 27px · White · On dark

27 × 27px · Dark · On light

AI Platform Logos

Platform	16px — Inline	32px — Round
ChatGPT	16 × 16	32 × 32 · r16
Perplexity	16 × 16	32 × 32 · r16
Google	16 × 16	32 × 32 · r16

Usage guidelines

Format	Size	Use when
Inline	16 × 16 px	Inside Sub Tab items, table cells, compact labels — sits inline with 12–14px text
Round badge	32 × 32 px · r16	Avatar-style slots, profile rows, pill containers
Arlo mascot	27 × 24 px	App Bar Arlo section, notification panel footer, empty states

Prop	Type	Default	Description
domain	`string`	`"Domain / Location"`	Label in the domain selector button.
notificationCount	`number`	`0`	Badge count on bell. 0 hides the badge entirely.
onNotificationsOpen	`() => void`	—	Callback fired when bell is clicked.
onMenuToggle	`() => void`	—	Callback fired when hamburger is clicked.
arloLabel	`string`	`"Ask Arlo"`	Label beside the Arlo mascot.
className	`string`	—	Optional extra class for layout overrides.

Token	Value	Usage
neutral/25	#eaeff5	Hover background · Badge background
neutral/300	#7387a9	Active background
neutral/400	#6477a2	Default text · Badge text · Highlighted border
white	#ffffff	Active text · Highlighted background
borderRadius.full	200px	Pill shape
—	24px	Fixed height
—	12px · SemiBold	Label typography
—	10px · SemiBold	Badge count typography

Prop	Type	Default	Description
label	string	"SubTab"	Tab label text
active	boolean	false	Selected state — dark fill, white text
highlighted	boolean	false	Outlined state — white bg with border (mutually exclusive with active)
icon	ReactNode	—	Optional 16×16 icon prepended to the label
count	number	—	Optional badge number shown after the label
onClick	() => void	—	Click handler
className	string	—	Extra class for layout overrides

Property	Value
Height	24px (fixed)
Padding	0 12px
Border-radius	200px
Gap (icon / badge)	4px
Label font	12px · SemiBold 600 · Open Sans
Badge font	10px · SemiBold 600 · line-height 9px
Badge padding	1px 5px
Icon size	16 × 16px
Transition	background 150ms, color 150ms
Figma node	26:1166 (Claude-DS)

Token	Value	Usage
white	#ffffff	Default background
core/primary/light	#e8f2fc	Hover background
core/states/selected-bright	#64abfb	Active background
text/secondary	#858585	Default text
core/primary/medium	#3079bd	Hover text
core/states/disabled	#bacfe2	Disabled text
neutral/neutral-25	#eaeff5	Counter badge background (default)
neutral/neutral-400	#6477a2	Counter badge text
borderRadius.full	200px	Pill shape
—	30px	Fixed height
—	0 16px	Horizontal padding
—	14px · SemiBold · capitalize	Label typography
—	11px · SemiBold	Counter typography (default)
—	10px · SemiBold	Counter typography (active)
—	16 × 16px	Icon size

Element	Size	Weight	Color
Domain / Location	13px	SemiBold 600	#ffffff
Ask Arlo label	14px	SemiBold 600	#ffffff
Panel tab labels	13px	SemiBold 600	#858585 / #fff active
Insight card title	16px	SemiBold 600	#454545
Insight card body	14px	Regular 400	#181818
Action button	14px	SemiBold 600	#3079bd
Tab counter badge	10px	SemiBold 600	#6477a2

Prop	Type	Default	Description
label	string	—	Tab label text, rendered in capitalize
active	boolean	false	Selected state — bright blue fill, white text, white counter bg
disabled	boolean	false	Disabled state — greyed text, no interactions
icon	ReactNode / SVG	—	Optional 16×16 icon prepended to the label; colour must match state
counter	number	—	Optional count badge appended after label; bg flips to white when active
onClick	() => void	—	Click handler; no-op when disabled

Class	Description
.tab-item	Base pill — default state, white bg, grey text
.tab-item--active	Selected state — bright blue bg, white text
.tab-item--disabled	Disabled state — greyed text, pointer-events none
.tab-item__icon	16×16 icon wrapper — flex centred, flex-shrink 0
.tab-item__counter	Count badge — pill shape, auto bg flip on active parent

Prop	Type	Default	Description
property1	`"up" \| "down" \| "flat" \| "label only"`	`"up"`	Controls the trend direction, sparkline colour, delta sign, and layout.
label	`string`	`"Keywords Submitted"`	Uppercase metric label in the card header.
value	`string \| number`	`31`	Primary numeric or text value. Uses 44 px Light for numbers, 22 px Regular for "label only".
delta	`string`	`"+3" / "-3" / "-" / "+3%"`	Change indicator. Colour is driven by `property1`: green (up), red (down), neutral-400 (flat/label).
subtitle	`string`	`"Subtitle"`	Secondary descriptor below the metric row. 12 px Light, neutral-800.
showInfo	`boolean`	`true`	Shows the ⓘ icon in the header. Attach a tooltip or popover to it.
className	`string`	—	Optional override class for width / layout overrides in a grid.

Element	Size	Weight	Line Height	Color
Header label	12px	SemiBold 600	14px	#485982 (neutral/600)
Value (numeric)	44px	Light 300	44px	#3589e9 (blue/400)
Value (label only)	22px	Regular 400	24px	#3589e9 (blue/400)
Delta	16px	Regular 400	14px	Variant-driven
Subtitle	12px	Regular 400	12px	#27365b (neutral/800)

Property	Value
Width	227px (default)
Body padding	24px
Border-radius	12px (radius.xl)
Background	#ffffff
Shadow	drop-shadow(0 0 16px rgba(23,42,68,0.2))
Font	13px · Regular 400 · Open Sans
Line-height	15px
Text colour	#212121
Arrow size	78 × 10px (centred within body width)
Figma node	28:435 (Claude-DS)

Prop	Type	Default	Notes
text	string	—	Tooltip body content
placement	"top" \| "bottom"	"top"	Arrow direction (bottom = above trigger, top = below)
maxWidth	number	227	Body max-width in px
visible	boolean	false	Controlled visibility
className	string	—	Layout override

Token	Value	Usage
white	#ffffff	Card background
borderRadius.xl	12px	Card corner radius
—	16px	Card inner padding
—	16px	Gap between rows
core/states/selected-bright	#64abfb	Default avatar background (AI/ChatGPT features)
—	40×40px	Avatar circle size
—	16px	Title font size
—	#000000	Title colour
—	12px	Subtitle font size
grey/grey-800	#424242	Subtitle colour
core/secondary/card-grey	#fafafa	Date picker bg · Tab rail bg · Filter bar bg
other/divider	rgba(0,0,0,0.12)	Date picker border
borderRadius.lg	8px	Date picker corner radius
—	200px wide, 40px tall	Date picker dimensions
—	42px	Tab rail height
—	40px border-radius	Tab rail pill shape
—	6px 12px 6px 6px	Tab rail padding
core/primary/medium	#2f78bd	Filter button label colour
borderRadius.xl	12px	Filter bar corner radius
—	8px	Filter bar inner padding

Class	Description
.service-bar	Root card — white, rounded-xl, 16px padding, flex column
.service-bar__header	Row 1 — flex row, 8px gap, align-center
.service-bar__avatar	40px circle icon container — default bg #64abfb
.service-bar__text	Title + subtitle column, flex-1
.service-bar__title	16px semibold black title
.service-bar__subtitle	12px regular #424242, truncated single line
.service-bar__actions	Right-aligned action group (date + info)
.service-bar__date	200×40px date picker — #fafafa bg, border, rounded-lg
.service-bar__date-label	Date label text inside picker
.service-bar__info-btn	36px icon button — transparent, hover #eaeff5
.service-bar__tabs	Row 2 tab rail — #fafafa bg, 42px height, pill (40px radius)
.service-bar__filters	Row 3 filter bar — #fafafa bg, rounded-xl, 8px padding
.service-bar__filter-row	Flex row of filter buttons + spacer
.service-bar__filter-btn	Filter dropdown button — 30px, #2f78bd text, hover #e8f2fc
.service-bar__filter-spacer	flex:1 — pushes right-aligned filters to the end

Element	Notes
Avatar bg colour	Override via `style="background:#your-color"` on .service-bar__avatar — use #64abfb for AI/ChatGPT, #052f59 for core nav features
Date label format	"19 Aug 2025 – 28 Aug 2025" or "Last 30 Days"
Tab items	Use .tab-item and .tab-item--active inside .service-bar__tabs
Tab counter	Add .tab-item__counter inside .tab-item (reuses Tab Item component)
Filter alignment	Place .service-bar__filter-spacer between left and right filter groups to push right filters to end
Omitting rows	Row 2 (tabs) or Row 3 (filters) can be omitted for simpler pages — Row 1 is always required
Subtitle truncation	Subtitle always stays on one line — overflow hidden with ellipsis

Class	Description
.btn	Base element — always required
.btn--primary	Filled blue — primary CTA
.btn--secondary	Light blue fill — secondary action
.btn--plain	Transparent — inline text action
.btn--outlined	White fill + blue stroke border
.btn--plain-dark	Transparent — muted navy text, light surfaces
.btn--plain-white	Transparent — white text, on dark surfaces
.btn--red	Red fill — destructive/critical action
.btn--green	Green fill — confirmatory/positive action
.btn--sm	Small size modifier — 30px height
.btn--accent	Accent size modifier — 36px height (Red/Green)
.btn--icon-only	Square icon-only — transparent
.btn--icon-primary	Square icon-only — primary fill
.btn--icon-secondary	Square icon-only — secondary fill
.btn--icon-outlined	Square icon-only — outlined
.btn--disabled	Disabled state (also use disabled attr)
.btn__icon	16 × 16 icon wrapper (child element)

Example	Code
Primary	`<button class="btn btn--primary">Save</button>`
Primary + icon	`<button class="btn btn--primary"><span class="btn__icon">…svg…</span> Save</button>`
Secondary small	`<button class="btn btn--secondary btn--sm">Cancel</button>`
Plain	`<button class="btn btn--plain">View all</button>`
Outlined	`<button class="btn btn--outlined">Export</button>`
Red accent	`<button class="btn btn--red btn--accent">Delete</button>`
Green accent	`<button class="btn btn--green btn--accent">Confirm</button>`
Icon-only primary	`<button class="btn btn--icon-primary"><span class="btn__icon">…svg…</span></button>`
Disabled	`<button class="btn btn--primary btn--disabled" disabled>Save</button>`
Plain white (dark)	`<button class="btn btn--plain-white">Learn more</button>`

Token	Value	Usage
Container bg (default)	`#ffffff`	.db background
Container bg (hover)	`#eaf4ff`	.db:hover background
Container radius	`12px`	.db border-radius
Container height	`96px`	.db height
Container padding	`0 24px`	.db padding
Hover shadow	`none`	No elevation on hover
Color bar width	`20px`	.db__bar
Color bar bg	`#b1d1f6`	.db__bar background (blue/100)
Color bar radius	`200px`	.db__bar (fully rounded pill)
Color bar icon size	`20 × 20px`	Dashboard icon inside .db__bar
Color bar icon colour	`#ffffff`	.db__bar color (stroke via currentColor)
Inner gap	`8px`	.db__inner gap
Body gap	`6px`	.db__body gap (between title and subtitle)
Title size	`16px`	.db__title
Title weight	`600`	.db__title
Title colour	`rgba(0,0,0,0.87)`	.db__title
Title line-height	`22px`	.db__title — allows descenders (g, y, p, q)
Subtitle size	`13px`	.db__subtitle
Subtitle colour	`#6b6b6b`	.db__subtitle
Subtitle line-height	`20px`	.db__subtitle — multi-line wraps naturally
Chip bg	`#e7ecf4`	.db__chip background
Chip height	`20px`	.db__chip
Chip radius	`16px`	.db__chip
Chip text size	`12px`	.db__chip
Chip text colour	`#576993`	.db__chip (neutral/500)
Actions gap	`8px`	.db__actions gap
Actions left padding	`12px`	.db__actions padding-left
Kebab size	`30 × 30px`	.db__kebab
Kebab radius	`6px`	.db__kebab
Kebab icon colour	`#6b6b6b`	.db__kebab default
Kebab hover bg	`rgba(0,0,0,0.06)`	.db__kebab:hover
Arrow ring size	`32 × 32px`	.db__arrow-ring
Arrow ring bg	`#d1e4fa`	.db__arrow-ring (outer ring)
Arrow ring padding	`2px`	.db__arrow-ring inner gap
Arrow inner bg	`#a1b6d8`	.db__arrow (default)
Arrow hover bg	`#27365b`	.db__arrow-ring:hover .db__arrow
Arrow icon colour	`#ffffff`	.db__arrow SVG

Class	Element	Notes
`.db`	Root container	Full-width flex row, 96px height, 24px h-padding, radius 12px. Hover: bg `#eaf4ff` + elevation shadow
`.db__inner`	Inner flex row	Full width, gap 8px, items-center
`.db__bar`	Colour pill with icon	20px wide, full height, pill-shaped (#b1d1f6), dashboard icon (white) centered
`.db__body`	Title + subtitle column	flex:1, min-width:0 to allow truncation
`.db__title`	Dashboard name	16px semibold, truncates with ellipsis
`.db__subtitle`	Description text	13px regular, truncates with ellipsis
`.db__chip`	Status chip	20px pill, bg `#e7ecf4`, 12px semibold `#576993`
`.db__actions`	Right-side button row	gap 8px, padding-left 12px
`.db__kebab`	Three-dot menu button	30×30px, radius 6px, hover bg rgba(0,0,0,0.06)
`.db__arrow-ring`	Outer ring wrapper	32×32, bg `#d1e4fa`, 2px padding
`.db__arrow`	Arrow button inner circle	bg `#27365b`, white arrow SVG, hover darkens

Token	Value	Usage
core/primary/main	#0c8dea	Primary bg · Icon-Primary bg
core/primary/bright	#5bb3f9	Primary pressed · Plain pressed bg
core/primary/medium	#3079bd	Secondary/Plain/Outlined text
core/primary/semi-light-blue	#dbe9f6	Secondary bg · Icon-Secondary bg · border stroke
core/primary/light / core/states/hover	#e8f2fc	Hover bg (Plain, Secondary, Outlined)
core/states/selected	#d6e8ff	Secondary/Outlined pressed bg
core/states/disabled	#bacfe2	Disabled text colour
neutral/neutral-600	#485982	Plain Dark text
—	#ea5160	Red bg
—	#49b170	Green bg
borderRadius.md	6px	All button shapes
—	40px	Regular height
—	30px	Small height (btn--sm)
—	36px	Accent height — Red/Green (btn--accent)
—	0 12px	Horizontal padding
—	14px · SemiBold · 20px line-height	Label typography
—	16 × 16px	Icon size
—	4px	Gap between icon and label

Token	Value	Usage
Card bg	#ffffff	Outer card background
Card radius	12px	Outer card border-radius
Card padding	24px	All sides of the white card
Header bottom gap	20px	Space between .wh and chart
Roundel bg	#93a1b6	.wh__thumb background
Title	16px / 600 / rgba(0,0,0,0.87)	.wh__title
Subtitle	13px / 400 / #6b6b6b	.wh__subtitle
Above AIO	#8ac8b1	Stacked band — top
Inside AIO	#b3a2e7	Stacked band — mid
Below AIO	#e86492	Stacked band — bottom
No Ads	#E4E8F2	Stacked band — top cap
Grid lines	#dce3ef	Horizontal axis lines
Legend text	#38476a / 13px / 300	.stacked-timeline__legend-item
Legend gap	12px top / 20px between items	.stacked-timeline__legend

Class	Description
`.wh`	Widget Header root — flex row, padding-bottom 20px when used inside .dw-card
`.wh__thumb`	32×32px roundel — #93a1b6 background, white icon
`.wh__body`	Flex column — title + subtitle
`.wh__title`	16px semibold heading, truncates with ellipsis
`.wh__subtitle`	13px regular secondary text — omit element if not needed
`.wh__actions`	Right-side icon button group
`.stacked-timeline`	Chart root — display:block; width:100%
`.stacked-timeline__svg`	SVG element — width:100%; scales via viewBox
`.stacked-timeline__legend`	Centred flex row of legend items, margin-top:12px
`.stacked-timeline__legend-item`	Colour dot + label — 13px, #38476a

Class	Description
.mclc	Root — white bg, rounded-xl, pb-24px
.mclc__body	Inner column — flex col, gap 16px, px-24px, pt-16px
.mclc__row	Single metric row — flex row, 93px height, gap 10px
.mclc__kpi	Left KPI tile — 148×68px, rounded-xl, px-24px. Set `color` inline to theme the tile.
.mclc__kpi-inner	Centred flex column — gap 0
.mclc__kpi-label	Series name — 12px regular, inherits colour
.mclc__kpi-value	Current total — 40px light (300), letter-spacing -2px
.mclc__kpi-delta	Change badge — 11px, letter-spacing -0.22px
.mclc__kpi-delta--up	Positive delta — green #40af46
.mclc__kpi-delta--down	Negative delta — red #de5a5a
.mclc__chart	Right chart area — flex-1, 93px height, gap 8px
.mclc__y-labels	Y-axis column — Condensed 13px #858585, justify-between, pb-16px
.mclc__canvas-wrap	Relative container — holds bands + SVG, flex-1
.mclc__bands	Ghost band wrapper — absolute inset-0, flex, 10% opacity
.mclc__band	Single ghost column — 32px wide, #d9d9d9
.mclc__svg	Chart SVG — absolute, top-20px, viewBox 0 0 100 100, preserveAspectRatio none

Token	Value	Usage
white	#ffffff	Component background
borderRadius.xl	12px	Root + KPI tile radius
—	93px	Row height
—	148 × 68px	KPI tile size
—	40px / 300	KPI value — font-size / font-weight (light)
—	-2px	KPI value letter-spacing
—	12px	KPI label font-size
—	11px / -0.22px	Delta badge font-size / letter-spacing
green/400	#40af46	Positive delta colour
red/400	#de5a5a	Negative delta colour
purple	#6848c6	Series colour — Mentions / AI topics
blue	#3785dd	Series colour — Citations
teal	#36AEBA	Series colour — Links
text/secondary	#858585	Y-axis label colour
—	#d9d9d9 @ 10%	Ghost band fill
—	32px	Ghost band width
—	40px	Ghost band h-padding
—	20px	SVG top offset (clears Y max label)
—	16px	Body padding-top · Row gap
—	24px	Body padding-horizontal · Component pb
—	10px	Gap between KPI tile and chart

Class	Description
.ibc	Root container — flex col, gap 16px, full width
.ibc__rows	Wrapper for multiple `.ibc__row` elements — flex col, gap 12px. Use inside `.ibc` to group rows before the legend.
.ibc__row	Single entity row — flex col, 8px padding, 4px radius, hover bg #f5f8ff. Must be `position:relative` (set by default). Use `padding:0` override when inside a container that already provides spacing.
.ibc__label	Row label row — flex, gap 4px, aligned center
.ibc__label-icon	Optional 14×14px favicon left of label text — use a Google favicon `<img>` for brand rows; set `border-radius:2px; overflow:hidden` on the span
.ibc__label-text	Open Sans Condensed 13px #424242, truncated
.ibc__bars	Bar strip — flex row, 28px height, pill-left/square-right, overflow hidden
.ibc__bar	Single segment — set `flex: [pct]` inline + `background` colour. Last child gets right pill radius.
.ibc__legend	Legend row — flex wrap, gap 16px, horizontally centered
.ibc__legend-item	Dot + label pair — flex, gap 4px
.ibc__legend-dot	9px circle — set `background` colour inline
.ibc__legend-label	Open Sans Condensed 13px #181818
.ibc__tooltip	Hover tooltip — absolute, bottom: 100%+6px. Positioned via JS `left`. Hidden by default, shown by `.ibc__row:hover`.
.ibc__tooltip-title	Tooltip header — 12px Condensed, white, letter-spacing 0.5px
.ibc__tooltip-row	Dot + value line inside tooltip
.ibc__tooltip-dot	9px coloured dot inside tooltip
.ibc__tooltip-val	13px Condensed white value text
.ibc__tooltip-divider	1px white/20% horizontal rule
.ibc__tooltip-btn	"View Samples" ghost button — 14px semibold #ededed, 30px height
.ibc__tooltip-arrow	Downward pointing arrow caret below tooltip box

Token	Value	Usage
teal/teal-200	#79cbd2	Recommendations segment
blue/300	#559cec	Comparative segment
crimson/300	#e86492	Cautionary segment
magenta/300	#d47dd4	Commercial segment
purple/200	#b3a2e7	Informational segment
grey/grey-800	#424242	Label text colour
text/primary	#181818	Legend label colour
—	#f5f8ff	Row hover background
—	rgba(0,0,0,0.8)	Tooltip background
—	28px	Bar strip height
—	2px	Gap between bar segments
—	200px radius	Bar strip left + right pill ends
—	8px	Row padding
—	9px	Legend dot diameter
—	16px	Row gap · Legend item gap
—	13px / Condensed	All label + legend + bar text
borderRadius.sm	4px	Row border-radius · Tooltip radius

Class	Description
.gbc	Root container — flex col, gap 16px, full width
.gbc__row	Single bar row — flex row, aligned center, gap 8px, `position:relative`. Hover raises z-index for tooltip layering.
.gbc__label	Left label — 108px wide, right-aligned, Open Sans 12px #212121, `white-space:nowrap` prevents wrapping on long labels. Override inline (`style="width:88px"`) for short-label sets (e.g. Favourable / Neutral / Unfavourable) to avoid leaving whitespace that makes bars appear right-biased.
.gbc__track	Bar area — flex-1, 23px height, flex row (holds fill + optional outside label)
.gbc__fill	Gradient bar pill — set `width` + `background` inline. Pill shape via border-radius 200px. Min-width 6px ensures visibility at very small percentages.
.gbc__val	Inside percentage label — 12px semibold white. Place inside .gbc__fill when bar is wide enough (≥ ~15%).
.gbc__val-outside	Outside percentage label — 12px regular #485982. Place as flex sibling after .gbc__fill when bar is too narrow.
.gbc__tooltip	Hover tooltip — absolute, left 99px (bar start), vertically centered. bg #38476a, 170px wide. Shown by `.gbc__row:hover`.
.gbc__tooltip-text	Tooltip body copy — 10px regular white, line-height 12px

Token	Value	Usage
text/primary	#212121	Row label colour
kpi/neutral600	#485982	Outside value label colour
neutral/neutral-700	#38476a	Tooltip background
common/white	#ffffff	Inside value label · tooltip text
—	91px	Label column width
—	8px	Gap between label and bar track
—	23px	Bar height
—	200px radius	Bar pill shape
—	16px	Gap between rows
—	12px / 400	Label + outside val font-size / weight
—	12px / 600	Inside val font-size / weight
—	10px / 400	Tooltip text font-size / weight
borderRadius.sm	4px	Tooltip border-radius
—	170px	Tooltip width
—	12px	Tooltip padding
—	#bdd6f5 → #2f78bd	Blue gradient (primary)
—	#d2e697 → #99b83f	Green gradient (favourable)
—	#e7ecf4 → #607199	Blue-grey gradient (neutral)
—	#ffe0e4 → #e13b53	Red gradient (unfavourable)
—	#d8d0f5 → #6848c6	Purple gradient
—	#fde8c8 → #e06500	Orange gradient

Property	Value
Container	248 × 248px
Ring radius (r)	94px (centre of stroke)
Ring stroke-width	22px
Outer radius	105px · Inner radius 83px
Circumference	≈ 590.6px
Gap between segments	3px (subtract from segment arc length)
Centre value	40px Light (#27365b)
Centre unit (%)	20px Light (#27365b), baseline-aligned, pb 5px
Centre subtitle	12px Regular #485982, condensed tracking

Colors

Typography

Spacing — Tailwind-aligned (1 unit = 4px)

Border Radius

Shadows — Elevation Effect Styles

Breakpoints

Icons

Usage on dark backgrounds

Logos

App Bar

Sub Tab

Tab Item

KPI Card

Tooltip Info

Service Bar

Button

Card Header

Widget Header

Dashboard Widget

Dashboard Banner

Multi-Chart Lines

Segmented Bars Chart

Gradient Bar Chart

Donut Chart

Chart Legend Item

Dotted Timeline Chart

ChartSet Donut+Lines

Stacked Lines Chart

Timeline Chart

Table Chart Template

Avg. Position

Vertical Bars Chart

Horizontal Bars Chart

Multi-Series Horizontal Bars Chart

Vertical Stacked Bars Chart

Insight Banner

Action Banner

Chip

AIO Mentions Sample

Checkbox

Radio Button

Toggle

Component Development Workflow with Figma MCP

Main Nav

Class	Description
.donut-chart	Root — 248×248px, position:relative
.donut-chart__svg	Full-size SVG canvas (100%×100%)
.donut-chart__label	Absolute centre overlay — flex col, items-center
.donut-chart__value-row	Flex row aligning number + unit at baseline
.donut-chart__value	Large number — 40px, weight 300, #27365b
.donut-chart__unit	Unit suffix — 20px, weight 300, baseline-padded
.donut-chart__subtitle	Descriptor below value — 12px, #485982

Class	Description
.chart-legend-item	Root — inline-flex, gap 2px, align-items center, py 4px
.chart-legend-item__favicon	Optional brand favicon — 14×14px, border-radius 2px
.chart-legend-item__dot	Colour indicator — 9×9px circle. Set `background` inline to the chart series colour.
.chart-legend-item__label	Text label — 13px Regular #38476a, pb 2px baseline nudge. Format: "domain / value"

Property	Value
viewBox	0 0 740 215
Plot area x	48 → 710 (width 662)
Plot area y	18 (top / 100%) → 188 (bottom / 0%), height 170
Y formula	y = 188 − (value% / maxValue%) × 170
X spacing	Evenly distribute N points across 48→710
Gridlines	stroke #dce3ef, width 1 — at 0%, 33%, 66%, 100% of range
Axis label font	13px condensed rgba(0,0,0,0.6) · Y: top value + 0% only · X: first + last date only · font-size adjusted by JS to compensate SVG scale
X-axis date format	'D Mon, YYYY' — e.g. 1 Dec, 2025
Line stroke-width	2.5px · stroke-linecap/linejoin: round
Data-point dot	r 5.5, fill = series colour, stroke white 2px
Your-brand line	Same as above + stroke-dasharray="6,4"
Your-brand area	<polygon> same points + bottom corners, fill-opacity 0.15
Background rect	fill #f7f9fd — entire plot area

Class	Description
.simple-timeline	Root wrapper — display:block, width:100%
.simple-timeline__svg	SVG element — width:100%, height:auto (scales proportionally with viewBox — standalone use only)
.chartset-timeline__svg	SVG element inside ChartSet — width:100%, height:100%, no viewBox. JS-rendered via renderTimeline() + ResizeObserver. See chartset-donut-lines component.

Class	Description
.stacked-timeline	Root wrapper — display:block; width:100%; position:relative
.stacked-timeline__svg	SVG element — width:100%; height:auto. Uses viewBox for standalone scaling.
.stacked-timeline__legend	Centred flex row below the SVG — gap:20px; flex-wrap:wrap
.stacked-timeline__legend-item	Inline-flex row — 8px colour dot + label: Open Sans 300, 13px, #38476a
.stacked-timeline__tooltip	Fixed-position dark tooltip — background rgba(0,0,0,0.82); border-radius:6px; padding:8px 12px; pointer-events:none; z-index:9999

Element	Class / Role	Notes
`.timeline-chart`	Root container	Block, 100% width
`.timeline-chart__svg`	SVG chart area	viewBox 0 0 740 230 · plot x:36→728, y:18→200
`<g>` lines	JS-rendered series paths	One `<path>` per visible series, smooth cubic bezier
`tc-indicator`	Vertical hover line	Dashed, shown on mousemove over hit rect
`tc-hit`	Invisible interaction rect	Captures all mouse events over the plot area
`.timeline-chart__tooltip`	Fixed floating tooltip	position:fixed, sorted by value descending
`.timeline-chart__legend`	Legend row	Uses `.chart-legend-item` + `.csd-series--off` for toggle state

Class	Role	Notes
`.tct`	Root container	Full width, uses `font-family:var(--font-base)`
`.tct__header`	Column header row	`display:grid`, columns mirror row grid
`.tct__col-label`	Column label	11px semibold uppercase #6477a2. Add `--above`/`--inside`/`--below` for band colours
`.tct__col-label--sortable`	Clickable sort header	Shows sort icon (↕/↓/↑). Active column gets full opacity icon
`.tct__row`	Data row	Same grid as header. Bottom border except last row
`.tct__competitor`	Competitor cell	Favicon (16×16) + domain label
`.tct__mix`	Position mix grid	`grid-template-columns:1fr 68px 68px 68px;gap:16px`
`.tct__mix-bar`	Stacked bar	8px height, pill radius. Hover triggers tooltip
`.tct__mix-segment`	One band segment	Fill: #8ac8b1 Above · #b3a2e7 Inside · #e86492 Below
`.tct__impr`	Impressions cell	`grid-template-columns:1fr 44px;padding-left:20px`
`.tct__impr-bar`	Proportional bar	6px height, #64abfb. Width = value/max × 100%

Class	Description
.citations-pos	Root container — flex column
.citations-pos__body	Row list — padding 16px 32px 24px, gap 16px between rows
.citations-pos__row	Single rank row — flex, gap 4px, align center
.citations-pos__pos-chip	Position number chip — 26px height, 16px radius, 10px h-padding
.citations-pos__pos-chip--default	bg #e7ecf4, text #576993
.citations-pos__pos-chip--active	bg #496f97, white text — used for your brand row
.citations-pos__fabs	24×24px favicon container
.citations-pos__domain-chip	Domain name chip — flex:1, same height/radius as pos-chip
.citations-pos__domain-chip--default	bg #e7ecf4, text #576993
.citations-pos__domain-chip--active	bg #496f97, white text
.citations-pos__delta	Change indicator — 12px, 28px wide, right-aligned
.citations-pos__delta--pos	Positive change — #60ad5e green
.citations-pos__delta--neg	Negative change — #de5a5a red

Class	Description
`.vbar`	Root container — `position:relative; width:100%`
`.vbar__svg`	SVG element — `width:100%; height:auto` (scales with viewBox)
`.vbar__bar`	Bar path — `cursor:pointer`, fades to 72% opacity on hover

Property	Value
viewBox	0 0 740 260
Plot left	x = 52 (leaves 48px for Y labels)
Plot right	x = 720
Plot top (max value)	y = 24
Baseline (0)	y = 220
Y range	196px
X labels	y = 240
Bar corner radius	r = 4 (single) / r = 3 (grouped)
Single bar width	72px · 6 bars · 111px slot
Grouped bar width	20px · gap 4px · group 68px · centred in 111px slot
Bar top formula	y = 220 − (value / maxValue) × 196