SEO Analytics: Foundations (SEL Design System)

01Brand

A two-color identity lifted from SEL's tool banners: one dark anchor, one action green. Green is a fill, never an ink.

#27233F

--sel-bg-sidebar · --sel-text-primary (anchor) The brand's "black". Sidebar, dark surfaces, headings, selected states, primary text.

#00C98D

--sel-accent (action) Primary CTA fill only. Rationed: one green action per view. Never a text or link color on light surfaces.

The one rule that is never broken

Navy label on green: 6.96:1, passes AA. White on green is 2.16:1 and fails. SEL ships white-on-green; this system does not.

02Color

Anchor and neutrals come from the SEL source system. Status and chart colors are approved SEO Analytics additions for product semantics, and the on-dark alpha ladder handles everything that sits on navy.

Anchor and neutrals

navy (anchor)#27233F

navy-tint#33304D

black#433E4B

gray-500 · text secondary#646169

gray-450 · text tertiary#736F7E

gray-400 · decorative only#9B9B9B

gray-300 · border#D8D8D8

gray-200 · border subtle#E2E4E9

gray-100 · bg raised#EFF1F4

gray-50 · bg base#F6F7F9

tan · warm support#F9F5ED

white · bg surface#FFFFFF

Contrast: gray-450 on white is 4.88:1 (AA text). Gray-400 on white is 2.78:1, so it never carries text on light surfaces, only decorative strokes. Action and status

action green · fill only#00C98D

action green · hover#00AE7A

positive · delta text#0B7F66

positive wash#EDF7F3

negative · delta text#C8322F

negative wash#FBEAE9

warning · text#8A5300

warning wash#FDF1DF

Contrast: positive #0B7F66 is 4.53:1 on its wash and 4.95:1 on white. Negative #C8322F is 4.57:1 on its wash and 5.31:1 on white. Warning #8A5300 is 5.67:1 on its wash and 6.33:1 on white. All pass AA for normal text. Action green resolves the green-means-growth collision: green fill means "act", deep green text means "went up". On-dark alpha ladder

Primary on dark #FFFFFF · 15.02:1

Secondary text on dark white 82%

Muted labels on dark white 60%

panel fill · white 16%

chip fill · white 10%

Green as accent text #00C98D on navy · 6.96:1

03Chart palette

Approved SEO Analytics additions: four ordered series, one per metric, plus a gray for the comparison period. These colors are product-specific, not extracted from the sampled SEL pages. Graphic use only.

chart-1 · Clicks#00A878

chart-2 · Impressions#4A5CA8

chart-3 · CTR#B26A00

chart-4 · Position#7E5AA6

compare · Previous period#73737D

In use

Clicks Impressions CTR Position Previous period

04Typography

Two families, split by job: Roboto Condensed for display, headings, and KPI values, Roboto for everything else. Body is 14px, compact UI is 13px, and the floor is 12px. Numbers are always tabular.

215.4K Display / KPI value · Roboto Condensed · 32 / 700 · tracking 0

searchengineland.com

Page title · Roboto Condensed · 26 / 700 · tracking 0

Search performance

Panel title · Roboto Condensed · 16 / 600 · tracking 0

Clicks are up 12.4% versus the previous 28 days, driven by the AI Overviews cluster. Body · Roboto · 14 / 400 · tracking 0

Compare: Previous period Label · Roboto · 13 / 500 · tracking 0

Search Console synced 12 minutes ago · GA4 linked Micro · Roboto · 12 / 400 · tracking 0

Topic Cluster Table header · Roboto · 12 / 700 · uppercase · tracking 0

05Spacing

A 4px base scale. 16 is the base padding, 20 the grid gutter, both inherited from SEL. Bars below are actual size.

space-1 · 4px

space-2 · 8px

space-3 · 12px

space-4 · 16px

space-5 · 20px

space-6 · 24px

space-8 · 32px

space-10 · 40px

06Radius

4px almost everywhere, matching SEL's token. 6px for segmented controls and menus, 20px for chips, 30px for pills and meters.

radius-sm · 4px · cards, buttons, inputs

radius-md · 6px · segmented controls, menus

radius-chip · 20px · filter chips

radius-pill · 30px · pills, meters

07Components

Every component in the system, live. All of them are flat at rest and built from the tokens above.

Buttons

Default for tools, primary for the one main action, quiet for tertiary links inside panels.

Chips

Non-branded Growing Query contains “ai” ×

Active chips fill with anchor navy. Removable chips carry a trailing times glyph.

Metric toggles

Each toggle's dot matches its chart series color.

Segmented control

Raised gray track, white active segment. Lives in panel headers.

KPI card

Clicks 215.4K

12.4% vs 191.6K

Uppercase micro label, condensed 32px value, delta plus comparison note.

Delta pills

12.4% 3.2%

Deep green #0B7F66 for up, red #C8322F for down, each on its wash. For position, down is good: the arrow flips but the colors keep their meaning.

Status pills

Indexed Crawled, not indexed Excluded

One shared .pill base, pill radius, status text on its matching wash. Variants: .pill-pos, .pill-warn, .pill-neg here, plus .pill-neutral and .pill-info for neutral and informational states. Used in the Indexing tab.

Loading skeleton

12px bars in raised gray, varying widths, 4px radius. No shimmer animation in mockups.

Table

Query	Clicks	Impressions	CTR	Position
ai overviews	12.5K	2.1M	0.6%	6.4
google algorithm update	9.2K	1.8M	0.5%	8.2
what is seo	6.8K	3.4M	0.2%	12.7

3 of 1,240 queries

Empty state

No annotations yet Add a note to mark algorithm updates, site changes, or campaigns on the performance chart.

08Elevation

Cards are flat at rest: a 1px subtle border, no shadow, exactly like SEL's rendered pages. The single elevated surface in the system is the floating menu.

Card at rest. Border var(--sel-border-subtle), radius 4px, no shadow.

Rest: flat

Floating menu: 6px radius, shadow 0 8px 24px rgba(39,35,63,0.16)

09Interaction states

Every interactive control needs a visible rest, hover, keyboard-focus, and disabled state. Compact icon controls use a 32px target; toolbar controls use 36px.

Primary action

Hover uses #00AE7A. Keyboard focus uses a 2px navy outline with a 2px offset.

Secondary action

Secondary actions stay neutral and never compete with the single green primary action.

Data semantics

Clicks Impressions CTR Position Previous period

Metric colors remain stable across toggles, KPIs, charts, and tables. Status colors describe outcomes; action green describes what the user can do.

10Data formatting

Summary surfaces optimize for scanning; diagnostic and export surfaces preserve exact values. One formatter governs the same metric in KPIs, charts, compact tables, site cards, and annotations.

Compact counts

48.2K 24.8M 545

Use uppercase K, M, and B. Values below 1,000 remain exact; larger values use one decimal at most and remove a trailing .0.

Percentages

0.5% 62.4% <0.1%

Display one decimal. A nonzero value that would round to zero is shown as <0.1%, never 0.0%.

Comparison semantics

Clicks ↑12.4% Impressions ↓5.6% CTR ↑20% Position ↓1.3

Clicks, impressions, and CTR use relative percentage change calculated from unrounded values. Position uses absolute change; a lower position is green and a higher position is red. Comparison deltas and previous-period trend lines appear only when comparison is enabled.

Precision boundary Keep exact values in expanded detail views, CSV exports, Indexing diagnostics, IDs, credits, and configuration counts. Compact formatting belongs to summary and scanning contexts only.