SEO Analytics: Foundations

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#686D75

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. Previous periods keep the metric color and use fully opaque dashed lines. Small green labels use the darker #0A7C5C token for readable contrast.

chart-1 · Clicks#0A8F68

chart-2 · Impressions#5368B5

chart-3 · CTR#A76608

chart-4 · Position#7661A8

chart-1-label · Green text#0A7C5C

In use

Clicks Impressions CTR Position Previous clicks

04Typography

Inter Variable handles the entire product from weight 400 through 700. Body text is 14px, compact UI is 13px, and 12px is the functional floor 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 · 24 / 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 · 12 / 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 Clicks up 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

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

Static analytical surfaces use a 1px subtle border with no resting shadow. Interactive cards, floating menus, and modals receive measured elevation so their hierarchy is unmistakable.

Static panel at rest. Subtle border, 8px radius, and no shadow.

Static panel: flat at rest

Floating menu: 8px radius with a neutral layered shadow

09Interaction states

Every interactive control needs a visible rest, hover, keyboard-focus, and disabled state. Default actions use a 40px target, compact controls use 36px, and dense segmented controls use 32px.

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 clicks

Metric colors remain stable across toggles, KPIs, charts, and tables. Comparison lines retain their metric color at full opacity and use dashes. 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.

11Access and shell states

Permissions are part of the interface contract. Hidden actions stay absent for roles that cannot use them; the public shared view exposes only Dashboard and GA4 and never exposes CSV.

Role access matrix

Role	View	Export CSV	Edit Settings	Manage shared links	Destructive site actions
Owner / Admin	Yes	Yes	Yes	Yes	Yes
Contributor	Yes	Yes	No	Yes	No
Viewer	Yes	No	No	No	No
Public link	Dashboard and GA4 only	No	No	No	No

Authenticated shell utilities

These existing Laravel utilities retain their current behavior and use the Premium control, menu, empty, unread, and permission-state styling.

Public shared shell

Read-only shared view

No workspace administration, Settings, Optimize, Indexing, Annotations, destructive actions, or CSV controls are rendered.

Application footer

Keep existing destinations and role visibility; this specimen defines only their Premium visual treatment.