---
version: alpha
name: Simple Analytics — self-serve and enterprise pricing page
colors:
  surface: '#FCFCFC'
  ink: '#2A373A'
  accent: '#FF4F64'
  soft: '#E7F4F4'
  enterprise: '#02A602'
  enterpriseSurface: '#F0FDF4'
  primary: '#2A373A'
typography:
  primary:
    fontFamily: SpaceGrotesk
    fontSize: 60px
    fontWeight: 500
    lineHeight: 60px
  body:
    fontFamily: SpaceGrotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  control:
    fontFamily: SpaceGrotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
---

## Overview

A full pricing page contrasting a compact self-serve calculator with a larger green enterprise offer, a free-plan strip, customer logos, closed icon-led FAQs and a coral final action.

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

## Colors

Observed palette roles: surface: #FCFCFC; ink: #2A373A; accent: #FF4F64; soft: #E7F4F4; enterprise: #02A602; enterpriseSurface: #F0FDF4; 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 60px / 60px, weight 500, with a desktop width of 1440.00px. The matching mobile sample uses 36px / 40px across 390.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Center the title and a one-line setup question. The main desktop row gives the narrower left column to self-serve: monthly/annual selector, price, pageview slider, benefit list and free-start action. A small free hobby plan sits below. The larger right panel uses a pale green diagram background, four benefit tiles and a green demo action. Continue with logos, a show-features control, fifteen collapsed FAQ rows and a compact footer.

Full desktop page at 1440px width, document height 3205px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: The 60px pricing title becomes 36px at 390px. Unlike desktop, the green enterprise panel appears first in the mobile opening, with its benefit tiles stacked vertically. The self-serve calculator and lower FAQs were not visually reviewed in the mobile opening.

## Elevation & Depth

Use fine blue-gray outlines for self-serve and pale green outlines for enterprise. The green offer has subtle line-art decoration and inset white benefit tiles; the footer returns to quieter neutral surfaces. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 8px corner radius and 8px 12px padding. These values belong to that control, not every surface. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

The captured calculator shows its initial monthly state. Slider movement, annual pricing, expanded features and FAQ disclosures were not tested. Treat displayed currency and prices as source values at capture time, not a universal price promise.

## 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.