Simple Analytics — consent-flow explanation section

---
version: alpha
name: Simple Analytics — consent-flow explanation section
colors:
  surface: '#FCFCFC'
  ink: '#2A373A'
  accent: '#FF4F64'
  soft: '#E7F4F4'
  diagram: '#63D8F5'
  primary: '#2A373A'
typography:
  primary:
    fontFamily: SpaceGrotesk
    fontSize: 30px
    fontWeight: 700
    lineHeight: 45px
  body:
    fontFamily: SpaceGrotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
---

## Overview

An isolated comparison section with branching coral/cyan traffic paths, cookie and ad-blocker illustrations, explanatory text and a graph-shaped lower edge.

Source: https://www.simpleanalytics.com/. Captured 2026-10-08T06:08:04.263649+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FCFCFC; ink: #2A373A; accent: #FF4F64; soft: #E7F4F4; diagram: #63D8F5; primary: #2A373A. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses SpaceGrotesk at 30px / 45px, weight 700, with a desktop width of 428.80px. The matching mobile sample uses 30px / 45px across 342.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Place a rounded diagram and its caption in the wider left column, with a heading, two explanatory paragraphs and coral text link in the narrower right column. Diagram labels identify a website, cookie banner, ad-blockers and two analytics destinations. Include the whole section and its jagged graph divider rather than cropping the illustration alone.

Exact source selector: `#where-ga4-loses-visibility`. The desktop screenshot contains only this element; its own mobile element was also captured.

Responsive evidence: The section measures 1440×622.30px on desktop and 390×1031.50px on mobile. At 390px the diagram and caption come first, followed by the heading and explanatory paragraphs in a 342px content column. The 30px heading wraps to two lines; paragraph leading remains spacious.

## Elevation & Depth

Faint pink wash and a fine rounded diagram border give gentle separation. The heavy coral and cyan paths carry the comparison; browser-window illustrations add shallow dimensional cues without a large shadow. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The component root has measured radius 0px and padding 48px 0px 208px; individual wordmark shapes are source artwork. The selected desktop root has radius 0px and padding 48px 0px 208px. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

This is an explanatory source illustration, not measured traffic data. The branching colors distinguish paths; retain text labels so meaning is not conveyed by color alone. The linked explanation, animation states and any diagram interaction were not exercised.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.