SEO Analytics · Premium V2

Foundations

The reference sheet for the premium SEO Analytics product system: Inter typography, neutral surfaces, near-black ink, restrained emerald accents, and subtle elevation. Everything on this page is built from the shared tokens in premium.css.

This page is the system reference sheet, not an application screen. It deliberately omits the sidebar and topbar shell that every real screen carries.

01Brand

The application has its own quiet product identity. Search Engine Land remains the workspace context, while near-black and emerald provide a focused, premium interface foundation.

#18181B
--sel-text-primary · near-black Primary text, the compact product mark, and high-emphasis controls. The application shell itself stays light.
#0A7C5C
--sel-accent · emerald Primary actions, active tabs, positive states, and selected data. It is rationed so hierarchy stays calm.
Accent discipline
Use emerald for the primary action and white for its label. Dense views should not contain competing green calls to action.

02Color

Neutral surfaces carry most of the interface. Emerald, red, amber, and the chart palette are reserved for meaning rather than decoration.

Anchor and neutrals
near-black · primary text#18181B
ink raised#27272A
gray-500 · secondary text#5F636B
gray-450 · tertiary text#7B8089
gray-400 · decorative#9A9EA6
gray-300 · border#D9DCE1
gray-200 · subtle border#E8EAED
gray-100 · raised surface#F1F3F5
gray-50 · canvas#F7F8FA
accent wash#EAF6F1
white · bg surface#FFFFFF
Primary and secondary text use the darker neutral tokens. Lighter grays are reserved for tertiary labels, borders, chart grids, and decoration. Action and status
action green · fill only#0A7C5C
action green · hover#086B50
positive · delta text#087A54
positive wash#EAF6F1
negative · delta text#C8322F
negative wash#FBEAE9
warning · text#8A5300
warning wash#FDF1DF
Accent fills signal actions; darker status colors carry readable text. The distinction prevents green actions and positive performance from competing visually. Dark contrast specimen
Primary on dark white on near-black
Secondary text on dark white 82%
Muted labels on dark white 60%
panel fill · white 16%
chip fill · white 10%
Emerald accent on dark supporting accent only

03Chart palette

Four ordered series map to the core metrics, with a neutral gray for comparison periods. These colors are reserved for data graphics and metric indicators.

chart-1 · Clicks#0A8F68
chart-2 · Impressions#5368B5
chart-3 · CTR#A76608
chart-4 · Position#7661A8
compare · Previous period#777B84
In use
Clicks Impressions CTR Position Previous period

04Typography

Inter handles the entire product. Body text is 14px, compact UI is 13px, and 12px is reserved for metadata and table labels. Numeric values use tabular figures.

215.4K Display / KPI value · Inter · 30 / 650 · tracking 0

searchengineland.com

Page title · Inter · 26 / 650 · tracking 0

Search performance

Panel title · Inter · 15 / 650 · tracking 0
Clicks are up 12.4% versus the previous 28 days, driven by the AI Overviews cluster. Body · Inter · 14 / 400 · tracking 0
Compare: Previous period Label · Inter · 13 / 500 · tracking 0
Search Console synced 12 minutes ago · GA4 linked Micro · Inter · 12 / 400 · tracking 0
Topic cluster Table header · Inter · 11 / 600 · sentence case

05Spacing

A 4px base scale supports compact product density. Most component padding lands between 12px and 20px; page and grid spacing runs from 18px to 28px.

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

Small controls use 6px, cards and menus use 8px, and pills use a fully rounded radius. The result feels refined without turning every surface into a bubble.

radius-sm · 6px · inputs and compact controls
radius-md · 8px · cards, buttons, and menus
radius-chip · 8px · filter chips and tags
radius-pill · 999px · status pills and meters

07Components

Every component in the system, live. Borders, subtle surface shifts, and restrained shadows create hierarchy without visual clutter.

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 use a quiet neutral fill and clear border. 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
Sentence-case micro label, 30px Inter value, compact delta, and comparison note.
Delta pills
12.4% 3.2%
Deep green #087A54 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, 6px radius. No shimmer animation in mockups.

Table

QueryClicksImpressionsCTRPosition
ai overviews
12.5K2.1M0.6%6.4
google algorithm update
9.2K1.8M0.5%8.2
what is seo
6.8K3.4M0.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 use a 1px subtle border and a barely visible resting shadow. Floating menus and modals receive stronger elevation so their hierarchy is unmistakable.

Card at rest. Subtle border, 8px radius, and a low-contrast two-layer shadow.
Rest: subtly elevated
Floating menu: 8px radius with a neutral layered shadow

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 #086B50. Keyboard focus uses a 2px emerald 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.