Ads Intelligence — Design System

Color Tokens

35+ CSS custom properties for Ads Intelligence dashboards, campaign analytics, creative intelligence, and product UI.

Accents

#5667EA

Azul Royal

--color-accent-blue

Primary actions, metrics, Meta Ads

#B8E62E

Lima Vibrante

--color-accent-lime

CTA, progress, Google Ads

#8F4BE8

Roxo Eletrico

--color-accent-purple

Creatives, secondary charts, TikTok

#38A9D4

Ciano Claro

--color-accent-cyan

Links, badges, info chips

Content

#141418

Content Primary

--color-content-primary

Light: #141418Dark: #e8eaed

Headings, body text

#6B7280

Content Secondary

--color-content-secondary

Light: #6B7280Dark: #d1d5db

Labels, captions, secondary text (AA compliant)

#8F96A3

Content Tertiary

--color-content-tertiary

Light: #8F96A3Dark: #9ca3af

Muted/decorative text only (AA Large)

#5667EA

Content Link

--color-content-link

Light: #5667EADark: #818cf8

Links and link icons

Interactive

#5667EA

Interactive Primary

--color-interactive-primary

Light: #5667EADark: #818cf8

Buttons, focus rings, active items

#B8E62E

Interactive Accent

--color-interactive-accent

Light: #B8E62EDark: #B8E62E

High-energy CTA, progress fills

#D8D8DC

Interactive Secondary

--color-interactive-secondary

Light: #D8D8DCDark: #4b5563

Input borders, dividers

#2E4006

Interactive Control

--color-interactive-control

Light: #2E4006Dark: #2E4006

Text/icons ON Lima accent

Background

#F4F4F5

Background Screen

--color-background-screen

Light: #F4F4F5Dark: #0f1117

Page background

#FFFFFF

Background Elevated

--color-background-elevated

Light: #FFFDark: #1a1d27

Cards, modals, elevated surfaces

#ECECEE

Background Neutral

--color-background-neutral

Light: #ECECEEDark: rgba(255,255,255,.08)

Panels, table headers, inner areas

Support

#E9D9F9

Lavanda Suave

--color-support-lavender

Purple badge/chip backgrounds

#D9EEF7

Azul Gelo

--color-support-ice-blue

Info badge/link backgrounds

#F0FAD4

Lima BG

--color-support-lime-bg

Lima badge/chip backgrounds

#EEF0FD

Blue Light

--color-accent-blue-light

Blue badge/hover backgrounds

Sentiment / Feedback

#C62828

Sentiment Negative

--color-sentiment-negative

Light: #C62828Dark: #fca5a5

Errors, destructive actions

#2E7D32

Sentiment Positive

--color-sentiment-positive

Light: #2E7D32Dark: #86efac

Success, positive alerts

#F9A825

Sentiment Warning

--color-sentiment-warning

Light: #F9A825Dark: #fde68a

Warnings. Use #7B6813 for text on warning bg

#2563EB

Feedback Info

--color-feedback-info

Informational messages

Typography

Inter for product UI. Display styles for marketing headlines and dashboards.

Display Styles

Display Large

96px / Bold / 85% line-height / 2% tracking

Display Medium

64px / Bold / 85% line-height / 1.5% tracking

Display Small

40px / Bold / 85% line-height / 1.5% tracking

Product Styles (Inter)

Title Screen

30px / Semi Bold / 34px line-height / -2.5%

Title Section

26px / Semi Bold / 32px / -1.5%

Title Subsection

22px / Semi Bold / 28px / -1.5%

Title Body

18px / Semi Bold / 24px / -1%

Body Large — Analyze campaign performance across paid channels with real-time intelligence.

16px / Regular / 24px / -0.5%

Body Default — Creative fatigue detected on 3 campaigns. Review recommended actions below.

14px / Regular / 22px / 1%

Link Large Link Default

Links: Semi Bold + Underline

Spacing Scale

18 base values from 4px to 128px. 8px grid base.

--space-4

--space-8

--space-12

--space-16

--space-24

--space-32

--space-40

--space-48

--space-56

--space-64

--space-72

--space-80

--space-88

--space-96

--space-104

--space-112

--space-120

--space-128

Padding Tokens

8px

16px

24px

32px

Radius Tokens

Adaptive per platform. Mobile radius values must be applied via breakpoint.

Desktop

16pxsmall

20pxmedium

30pxlarge

40pxx-large

60px2x-large

Mobile

10pxsmall

16pxmedium

24pxlarge

32pxx-large

48px2x-large

Buttons

Primary uses --color-interactive-accent bg + --color-interactive-control text. Height: 48px (large). Focus: 2px outline, 2px offset.

Priorities

Sizes

States

Focus Ring Spec

2px / 2px offset / interactive-primary

2px / 2px offset / sentiment-negative

Inputs

Border: --color-interactive-secondary. Focus: 3px solid --color-interactive-primary. Error: --color-sentiment-negative. Use label + description, never placeholder alone.

Campaign name

Identifies this campaign in reports

Default state

Campaign name (focused)

Identifies this campaign in reports

Focus: 3px solid interactive-primary

Minimum ROAS

Threshold for performance alerts

ROAS must be a positive number

Date range

Analysis period

Disabled state

Metric Input

Budget threshold

USD ▾

Search Input

Cards

Small (88-300px), Large (300px+). Uses radius-medium and official spacing.

Creative Preview

Campaign Health

Health score: 87 — Strong

Channel Performance Chart

Channel Performance

Compare impressions, clicks, and ROAS across Meta, Google, and TikTok for the selected period.

Insight Preview

Insight Card

Click to view recommendation

Sync Status

Last synced 2 min ago — All channels connected

List Items

7 variants documented. Navigation, Switch, Checkbox, Radio, No Action.

Navigation

M

Meta Ads

3 active campaigns

›

G

Google Ads

5 active campaigns

›

+

Connect new channel

›

Switch

Campaign alerts

Notify when health score drops

Weekly digest

Receive performance summary

Checkbox [NEEDS_VALIDATION]

✓

Include paused campaigns

Show competitor data

Specs behind Neptune auth

Radio [NEEDS_VALIDATION]

All channels

Meta Ads only

Specs behind Neptune auth

No Action

✓

Analysis complete

127 campaigns across 4 channels

Feedback Components

Action prompts, snackbars, progress, spinners, and state screens.

Action Prompts

Data sync failed

We couldn't connect to the Meta Ads API. Please check your ad account permissions and try again.

Creative fatigue detected

3 creatives in "Summer Sale 2026" show declining CTR over the last 14 days. Consider refreshing ad content.

Campaign analysis complete

All 127 campaigns have been analyzed. 5 new insights and 2 recommendations are available.

Snackbar

Report exported successfullyUndo

Something went wrong. Try again.

Progress

Step 1 of 4 — Selecting channels

Step 3 of 4 — Review

Complete

Spinner

Analyzing campaign data...

State Screens

📋

No campaigns detected

Connect an ad account to start analyzing your campaigns and creatives.

!

Something went wrong

We're having trouble loading this page. Please check your connection and try again.

✓

Analysis complete!

All campaigns have been analyzed. 5 new insights are available for review.

Overlays

Modal desktop: 540px width, max-height 800px, 80px safe zone. Bottom sheet: mobile full width.

Modal

Max: 540px x 800px | Safe zone: 80px from viewport edges

Bottom Sheet

Select channel

M

Meta Ads

G

Google Ads

T

TikTok Ads

Mobile: full width, swipeable. Desktop: converts to centered dialog.

Popover

Navigation Components

Tabs, chips, and segmented controls.

Tabs

Overview Campaigns Creatives Insights

Chips

All Channels Meta Ads Google Ads TikTok Ads LinkedIn Ads

Segmented Control

7 days 14 days 30 days 90 days

Badges ads_intelligence_extension

Status indicators, counts, and labels. Used for campaign states, health scores, and data quality indicators.

Variants

Active New Warning Critical Info Success Neutral Creative

Sizes

Small Default Large

With Count

3 12 new 5 clusters

Ads Intelligence Usage

Campaign states: active (green), paused (yellow), stopped (red), draft (neutral)
Health scores: strong (green), healthy (blue), watch (yellow), weak (orange), poor (red)
Data sources: Meta (blue), Google (lime), TikTok (purple), LinkedIn (cyan)

Avatar benchmark_inspired

User and entity representation. Used for team members, advertisers, and organization branding.

Variants

RS

JD

Sizes

S

M

L

XL

Group

A

B

C

+3

Tooltip benchmark_inspired

Contextual help on hover or focus. Used for metric explanations, truncated text, and icon-only buttons.

Placements

Tooltip top

Tooltip bottom

Tokens

      background: var(--color-dark) → #141418

      color: var(--color-contrast) → #FFFFFF

      border-radius: 6px

      padding: 6px 12px

      font-size: 12px

      max-width: 280px

      z-index: 1000

Table ads_intelligence_extension

Data tables for campaign lists, ad libraries, metric comparisons, and audit logs.

Default Table

Campaign	Platform	Impressions	Health	Status
Summer Sale 2026	Meta	1,234,567	Strong	Active
Brand Awareness Q2	Google	987,654	Watch	Active
App Install Wave 3	TikTok	456,789	Poor	Paused

States

Default: Striped rows with hover highlight
Loading: Skeleton rows (see Skeleton component)
Empty: Empty state illustration + CTA
Error: Error banner above table with retry
Sortable: Column header with sort icon, active column highlighted

Breadcrumb benchmark_inspired

Hierarchical navigation path. Used in campaign detail, creative analysis, and settings pages.

Dashboard / Campaigns / Summer Sale 2026

Pagination benchmark_inspired

Navigate through large data sets. Used in ad library, alert lists, and audit logs.

…

Showing 1–20 of 234 results

Skeleton benchmark_inspired

Loading placeholders. Used while fetching campaign data, cluster analysis, and creative thumbnails.

Card Skeleton

Text Skeleton

Empty State ads_intelligence_extension

Shown when no data exists. Every data-driven screen must have an empty state.

📋

No campaigns found

We haven't detected any active campaigns for this advertiser yet. New data arrives daily.

🔍

No results

Your search didn't match any ads. Try adjusting your filters or search terms.

Alert / Banner benchmark_inspired

Contextual messages at page or section level. Used for system notices, data freshness, and action results.

Data refreshed successfully

All campaign metrics are current as of 2 minutes ago.

Data may be stale

Last sync was 6 hours ago. Some metrics may be outdated.

Connection error

Unable to reach the data source. Please try again in a few minutes.

Pro tip

Enable Smart Alerts to get notified when campaign health changes.

Dropdown Menu benchmark_inspired

Contextual menu triggered by button click. Used for bulk actions, export options, and settings menus.

Actions

Export as CSV

Export as PDF

Delete selected

Dialog benchmark_inspired

Confirmation dialogs for destructive actions. Requires explicit user decision before proceeding.

Accordion benchmark_inspired

Collapsible content sections. Used for FAQ, filter groups, and detailed metric breakdowns.

Campaign Performance ▼

Detailed breakdown of impressions, clicks, and conversions across all platforms for this campaign cluster.

Creative Analysis ▶

Health Score Factors ▶

Divider benchmark_inspired

Visual separator between content sections.

Variants

Full width

With label

or

Inset

Metric Card ads_intelligence_extension

KPI display card for dashboards. Shows value, trend, and optional sparkline.

Active Campaigns

127

↑ 12% vs last month

Total Ad Spend

$2.4M

↓ 3% vs last month

Health Score

87

Strong — no action needed

Creative Clusters

31

Across 4 advertisers

Product Patterns

Common product flow patterns using Ads Intelligence components and tokens.

Campaign Summary

Impressions1,234,567

Clicks45,890

CTR3.72%

ROAS4.2x

Channel Comparison

Channel A

Meta ▾

vs

Channel B

Google ▾

Meta leads by 34% in ad spend · Last 14 days

Form Validation

Email address Please enter a valid email address

Password Password must be at least 8 characters

Empty State

📋

No campaigns detected

Connect an ad account to start analysis.

Success Screen

✓

Report generated!

127 campaigns analyzed across 4 channels

Download ready · PDF · 2.4 MB

Error Screen

!

Data sync failed

Unable to connect to the ad platform API. Please check your credentials and try again.

Progress Screen

Processing campaign data...

Generating creative intelligence

This usually takes less than a minute.

Dashboard Layout ads_intelligence_extension

Standard layout pattern for data-heavy pages in Ads Intelligence.

Structure

☰ Page Header — Title + Breadcrumb + Actions

KPI 1

KPI 2

KPI 3

KPI 4

Filter Bar — Platform · Date Range · Status · Search

Main Content Area
(Table / Grid / Charts)

Sidebar Panel
(Details / Actions)

Form Layout benchmark_inspired

Standard form patterns for settings, onboarding, and configuration pages.

Rules

Max width: 560px for single-column forms
Section spacing: var(--space-32) between groups
Field spacing: var(--space-16) between fields
Labels: Always above input, never floating
Errors: Inline below field, use --color-sentiment-negative
Submit: Full-width primary button at bottom

Filter Pattern ads_intelligence_extension

Data filtering for campaign lists, creative libraries, and alert feeds.

All Platforms Meta Google TikTok

Loading Strategy ads_intelligence_extension

Progressive data loading patterns used across the platform.

Strategy

1. Shell first: Render sidebar + header + skeleton immediately
2. KPIs second: Load summary metrics (fast endpoint)
3. Main data third: Load table/grid data (may be slower)
4. Charts last: Load visualization data progressively
5. Error recovery: Retry button per section, never full-page error

Dark Mode Preview

All components using dark mode token values.

Components in Dark Mode

Buttons

Input

Campaign name

Card

Image

Dark Card

Card in dark mode with elevated background.

Snackbar

Campaign analysis complete View

Action Prompt

All channels synced

Campaign data is current across all connected ad platforms.

AI Agent Rules

Non-negotiable rules for any AI agent generating UI for Ads Intelligence.

⚠ Use only documented tokens. Never hardcode colors or spacing.

⚠ Use only documented components. Never invent new ones.

🎨 Never invent colors. Only use the 22 official CSS custom properties.

📏 Never invent spacing. Only use size-4 through size-128.

⏳ Always include loading, error, and empty states for every screen.

♿ Always include accessibility: ARIA, keyboard nav, focus rings, contrast.

❓ Mark unknowns as validation_needed. Never guess token values.

Mandatory Output Format (JSON)

{
  "screen_name": "",
  "components_used": [],
  "tokens_used": [],
  "patterns_used": [],
  "states_covered": [],
  "accessibility_notes": [],
  "validation_needed": []
}

Component Selection Logic

Need	Use	Never Use
Primary action	Button Primary	Link styled as button
Cancel/dismiss	Button Secondary or Tertiary	Red button (unless destructive)
Destructive action	Button Negative	Primary button
Navigate	List Item Navigation	Custom link row
Toggle setting	List Item Switch	Checkbox for on/off
Brief feedback	Snackbar	Alert/Modal
Blocking prompt	Action Prompt or Modal	Snackbar
Metric/budget entry	Metric Input	Plain text input

Benchmark & Gap Analysis

Component coverage compared to enterprise design systems. Updated 2026-05-14.

Benchmark Sources

Source	Focus	Components Found
Adobe Spectrum	Enterprise UI, accessibility, design tokens	48 components
Lemon Squeezy Wedges	Modern primitives, composable components	28 components
Morningstar Design System	Financial data UI, product components	41 components

Our Coverage Summary

Category	Total Components	Coverage
Foundations (Color, Typography, Spacing, Radius)	4	Complete
Form Controls (Button, Input, Checkbox, Radio, Switch, Select)	6	Complete
Data Display (Card, Table, Badge, Avatar, Metric Card)	5	Complete
Feedback (Alert, Snackbar, Progress, Spinner, Empty State, Skeleton)	6	Complete
Overlay (Modal, Dialog, Bottom Sheet, Popover, Tooltip, Dropdown)	6	Complete
Navigation (Tabs, Chips, Segmented Control, Breadcrumb, Pagination)	5	Complete
Layout (Accordion, Divider, Dashboard Layout)	3	Complete
Patterns (7 product patterns + 4 layout patterns)	11	Complete

Component Gap Matrix

Comparison of our coverage vs external benchmarks. ✓ = present, – = absent.

Component	Ads Intelligence DS	Spectrum	Wedges	Morningstar	Priority
Button	✓	✓	✓	✓	—
Input / Text Field	✓	✓	✓	✓	—
Card	✓	✓	–	✓	—
Badge	✓	✓	✓	✓	—
Avatar	✓	✓	✓	–	—
Tooltip	✓	✓	✓	✓	—
Table	✓	✓	–	✓	—
Breadcrumb	✓	✓	–	✓	—
Pagination	✓	✓	–	✓	—
Skeleton	✓	✓	✓	–	—
Empty State	✓	✓	–	–	—
Alert / Banner	✓	✓	✓	✓	—
Dropdown Menu	✓	✓	✓	✓	—
Dialog	✓	✓	✓	✓	—
Accordion	✓	✓	✓	✓	—
Divider	✓	✓	–	✓	—
Metric Card	✓	–	–	–	—
Tabs	✓	✓	✓	✓	—
Modal	✓	✓	✓	✓	—
Progress Bar	✓	✓	✓	✓	—
Spinner	✓	✓	✓	✓	—
Switch / Toggle	✓	✓	✓	✓	—
Checkbox	✓	✓	✓	✓	—
Radio	✓	✓	✓	✓	—
Slider / Range	–	✓	✓	✓	P2
Date Picker	–	✓	–	✓	P2
Color Picker	–	✓	–	–	P3
Tree View	–	✓	–	–	P3
Tag / Tag Group	–	✓	✓	✓	P2
ComboBox	–	✓	–	✓	P2
Toast	–	✓	✓	✓	P2
Link	✓ (CSS only)	✓	✓	✓	P3

Methodology

Components were identified by crawling public documentation pages of each design system. No proprietary content was copied. All implementations in the Ads Intelligence Design System use our own tokens, identity, and documentation format. External systems served only as functional coverage benchmarks.

Backlog (P2/P3)

Component	Priority	Reason
Slider / Range	P2	Useful for budget filters and date ranges
Date Picker	P2	Period selection in reports
Tag / Tag Group	P2	Campaign labels and keyword tags
ComboBox	P2	Advertiser search with autocomplete
Toast	P2	Non-blocking success/error notifications
Color Picker	P3	Custom branding settings
Tree View	P3	Campaign hierarchy navigation
Link (standalone)	P3	Already supported via CSS classes

Pending Items

Items requiring validation, export, or access before full completion.

Item	Impact	Priority	How to Resolve
Checkbox / Radio / Switch [NEEDS_VALIDATION]	Component stubs only; detailed specs behind Neptune auth	P0	Request Neptune Web access, extract full component specs
Dropdown / Select [NEEDS_VALIDATION]	No detailed spec available in public docs	P0	Request Neptune Web access
Motion timing values [NEEDS_VALIDATION]	No ms durations or cubic-bezier curves in source docs	P1	Export from Figma motion specs or Neptune Web
Elevation / shadow tokens [NEEDS_VALIDATION]	Box-shadow values are estimated, not confirmed	P1	Export from Figma or inspect Neptune Web
Illustration guidelines	Page locked in source documentation	P1	Request access from Brand team
Neptune Web component props / TypeScript	Engineering cannot implement without prop tables	P0	Validate Neptune Web / Storybook access (GitHub auth)
Brand Strategy page	Locked / confidential in source docs	P1	Request access from Brand team
Promo Assets page	Marketing patterns incomplete without this	P2	Request access from Marketing team
Custom display font [NEEDS_VALIDATION]	Display typography uses Inter as default	P3	Evaluate custom brand font if needed

Ads Intelligence Design System

Color Tokens

Accents

Content

Interactive

Background

Support

Sentiment / Feedback

Typography

Display Styles

Product Styles (Inter)

Spacing Scale

Padding Tokens

Radius Tokens

Desktop

Mobile

Buttons

Priorities

Sizes

States

Focus Ring Spec

Inputs

Metric Input

Search Input

Cards

List Items

Navigation

Switch

Checkbox [NEEDS_VALIDATION]

Radio [NEEDS_VALIDATION]

No Action

Feedback Components

Action Prompts

Snackbar

Progress

Spinner

State Screens

Overlays

Modal

Confirm campaign reprocessing

Bottom Sheet

Popover

Navigation Components

Tabs

Chips

Segmented Control

Badges ads_intelligence_extension

Variants

Sizes

With Count

Ads Intelligence Usage

Avatar benchmark_inspired

Variants

Sizes

Group

Tooltip benchmark_inspired

Placements

Tokens

Table ads_intelligence_extension

Default Table

States

Breadcrumb benchmark_inspired

Pagination benchmark_inspired

Skeleton benchmark_inspired

Card Skeleton

Text Skeleton

Empty State ads_intelligence_extension

Alert / Banner benchmark_inspired

Dropdown Menu benchmark_inspired

Dialog benchmark_inspired

Delete Campaign Group?

Accordion benchmark_inspired

Divider benchmark_inspired

Variants

Metric Card ads_intelligence_extension

Product Patterns

Dashboard Layout ads_intelligence_extension

Structure

Form Layout benchmark_inspired

Rules