SEOquakeSERP overlay / design handoff
Download handoff

SERP overlay design handoff

Compare the three states, then use the Final Design specifications below to implement the changes.

Legacy version

3.13.5
HTMLImport view
Apple
https://www.apple.com › iphone
3.iPhone – Apple

Explore the iPhone lineup. Compare models, discover their features, and find the right iPhone for you.

Original legacy CSS and icons. Same nine parameters enabled, automatic loading; optional extra Semrush panel off. Result number outside the bar.

Final Design

Implementation target
HTMLImport view
Apple
https://www.apple.com › iphone
iPhone – Apple

Explore the iPhone lineup. Compare models, discover their features, and find the right iPhone for you.

#3
Rank:2Traffic:1.62BCosts:$1.35BL:9.43KLD:2.18BLRD:5.08BPIN:0whoissource

Approved target: 12px text, 24px hit areas, hover/focus definitions, and Analyze when space allows.

Current version

Package 4.1.2
HTMLImport view
Apple
https://www.apple.com › iphone
iPhone – Apple

Explore the iPhone lineup. Compare models, discover their features, and find the right iPhone for you.

Supplied 4.1.2 package styling, not a claim about the currently published extension. Same illustrative values.

Implementation handoff

Current → Final Design

Match the Final Design above. These changes apply to the SERP overlay only; the surrounding search result is context.

AreaCurrent · supplied 4.1.2Final Design · target
Typography13px metric and utility text; 14px result number.12px across the strip, including #3. Inter; regular labels and semibold values.
Strip2px vertical / 7px horizontal padding; square corners; 4px top and 6px bottom margin.4px vertical / 7px horizontal padding; 3px radius; no outer margin.
Spacing8px control padding; 6px internal gap; controls touch at their outer boxes.1px vertical / 0 horizontal control padding; 4px internal gap; 9px between flow items.
Targets and wrapping30px-high loaded controls in the supplied specimen; each item wraps independently.Minimum 24px target height. Preserve no-wrap labels/values; PIN, whois, source stay together as one utility group with 10px gaps.
Metric labelsRank, Traffic, Costs, L, LD, LRD, PIN.Rank:, Traffic:, Costs:, L:, LD:, LRD:, PIN:. Keep lowercase whois and source.
IconsSemrush icon on each of six metrics; Pinterest and utility icons.Keep the same icon identities. Six Semrush icons + Pinterest at 16 × 16px; utility icons at 12 × 12px. No extra standalone logo.
Color and hoverGray labels/icons and dark values; controls use a green hover treatment.Use the exact target tokens below. Metric labels stay gray while values turn green. Semrush/Pinterest icons stay gray; utility icon and text turn green. No filled hover background.
PinterestA non-link count in the supplied package preview.A link in the approved target. Preserve the count, including a genuine zero; the sample opens the domain’s Pinterest source page.
DefinitionsNo definition tooltip is included in this loaded-state package specimen.Add the existing Quick View / full-report definitions below on hover and keyboard focus, with Escape dismissal.
AnalyzeNot present in the supplied package strip.Add the conditional purple text link + external-link icon. It never takes space away from the metrics or creates a second row.

Analyze: show only when it fits

Show Analyze only when every visible flow item fits on one row and the flow has enough unused width for the measured CTA plus 16px clearance.

Show = one row AND (flow width − used item widths − gaps ≥ CTA width + 16px)
  • Measure the actual rendered widths after fonts load; this is not a fixed viewport breakpoint.
  • Used width is the sum of visible top-level flow items plus 9px between them. The PIN / whois / source group is one flow item.
  • Recheck on resize, item-size changes, and content changes. A row-height tolerance of 1px is used in this prototype.
  • Position the link absolutely, 7px from the strip’s right edge and vertically centered. Do not reserve width or push metrics onto a new line.
  • When hidden: visibility: hidden, no pointer events, aria-hidden="true", and tabindex="-1". When shown: reverse those states and make it keyboard reachable.
  • Style: 12px Inter / 20px line height / weight 600; #C190FF; 2px vertical and 4px horizontal padding; minimum height 24px; 6px gap to a 12px external-link icon. Underline on hover; no filled button.
  • Open the analyzed domain’s Semrush overview in a new tab with noopener noreferrer. Never hard-code the illustrative Apple destination in production.

Try “Wide · 1100px” to expose the CTA, then narrow the preview. If this page is too narrow to provide spare space, open the Final Design on its own.

Exact visual specifications

Container
100% available width; #F0F1F2 background; 3px corners; padding 4px 7px; no border, shadow, or outer margin. #3 sits outside the wrapping flow with a 7px gap.
Text
Inter with Arial / sans-serif fallback. 12px labels, values, utilities and position. 20px line height on controls; 22px on #3. Labels weight 400; values and #3 weight 600. Tabular, lining numerals.
Control geometry
Metrics and utilities: min-height 24px, padding 1px 0, internal gap 4px, corner radius 3px. Metrics baseline-align text; icons center vertically. Flow gap: 0px row / 9px column. Utility group: no wrapping, 10px gap.
Strip height
Content-driven, not fixed: 32px for one 24px row; 56px for two rows with these sample values. More rows are allowed when needed.
Colors
Values #181E15; labels and Semrush/Pinterest icons #60636B; utilities #5C6269; #3 #696D76; interactive green #11AA88; Analyze purple #C190FF.
Metric interaction
Hover and keyboard focus turn the value green; the label and Semrush/Pinterest icon stay unchanged. No filled background. Keyboard focus outlines the value in 2px green with 2px offset and 1px corner radius.
Utility interaction
Hover and keyboard focus turn both text and icon green. Keyboard focus uses a 2px purple outline with 2px offset. Analyze retains the same #7137AD focus outline; its text and icon use #C190FF.
Transitions
Color / background-color transitions: 120ms. Disable transitions when reduced motion is requested. No entry animation or moving metrics.
Content order
#3 → Rank: → Traffic: → Costs: → L: → LD: → LRD: → PIN: → whois → source. Analyze sits at the trailing edge only when the rule above passes.

The approved green and focus appearance are preserved. This handoff is not an accessibility certification; their contrast was flagged separately and was not changed in this design.

Definitions and tooltip behavior

Reuse this existing Quick View / full-report copy verbatim. The tooltip supplements the short visible label; it does not replace the metric value.

LabelTooltip titleDefinition
Rank:Semrush RankA Semrush visibility ranking for the analyzed domain.
Traffic:SE TrafficEstimated US organic traffic for this domain from Semrush data.
Costs:Traffic CostEstimated paid-search equivalent value of this domain's organic traffic.
L:URL BacklinksLinks from other websites pointing to this URL.
LD:Subdomain BacklinksTotal backlinks pointing to tracked subdomains for the analyzed domain.
LRD:Root Domain BacklinksTotal backlinks pointing to the root domain.
PIN:Pinterest Pin CountEstimated Pinterest pin count for the linked URL.
whoisWhoisOwnership lookup helper for the linked domain.
sourcePage SourceView the page source for the linked URL.
  • Show on pointer hover and keyboard focus. Only one definition is visible at a time.
  • Keep it visible while the pointer is over the trigger or tooltip, or the trigger retains focus. Delay dismissal by 150ms when leaving; Escape closes it immediately.
  • Use role="tooltip" and a unique aria-describedby link from each control. Remove the native title to avoid double tooltips.
  • Keep tooltips outside the strip’s flow. Fixed position; 6px below the trigger, or above when there is insufficient room; clamp to an 8px viewport inset.
  • Tooltip: max-width 280px, limited to viewport width minus 16px; padding 10px 12px; 6px radius; white background; #DADDDE 1px border; #181E15 text; 12px / 18px Inter; title weight 600 and 3px bottom gap; shadow 0 3px 12px #0002.

Implementation boundaries

Keep existing data fetching, settings, loading/error handling, and report routing. Use live values and the correct URL, subdomain, or root-domain scope. The preview does not implement extension runtime behavior.

  • Traffic and Costs use domain-level US organic data; Costs is an estimated paid-search equivalent, not actual ad spend.
  • L uses the result URL; LD uses the relevant subdomain; LRD uses the root domain. The copied LD definition is existing product wording, not a request to aggregate new data.
  • Whois targets the relevant domain. Source targets the result URL; browser support for view-source: navigation varies.
  • Preserve enabled-parameter selection, missing-versus-zero values, and localization. Retest CTA visibility with different values and selected parameters.
  • If a visible Analyze link disappears while focused, restore focus to a nearby visible control in production. This prototype does not implement that focus handoff.
  • Light-mode implementation only. Preview controls, the comparison page, and illustrative values are not extension UI requirements. No dark-mode change is specified.