---
version: alpha
name: Plausible Analytics landing-page reference
description: A calm privacy-analytics landing page with purple emphasis, a centered
  dashboard hero, an eight-feature grid, social proof, readable long-form explanation
  and an integrated four-column pricing section.
colors:
  primary: '#5850EC'
  surface: '#FFFFFF'
  secondary: '#F4F5F7'
  on-surface: '#161E2E'
  muted: '#6B7280'
  dark-surface: '#252F3F'
typography:
  headline-display:
    fontFamily: system-ui
    fontSize: 48px
    fontWeight: 800
    lineHeight: 48px
    letterSpacing: -1.2px
  headline-md:
    fontFamily: system-ui
    fontSize: 30px
    fontWeight: 800
    lineHeight: 36px
  headline-mobile:
    fontFamily: system-ui
    fontSize: 30px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: -0.75px
  body-md:
    fontFamily: system-ui
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
---

# Plausible Analytics landing-page reference

## Overview

Observed at https://plausible.io/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A calm privacy-analytics landing page with purple emphasis, a centered dashboard hero, an eight-feature grid, social proof, readable long-form explanation and an integrated four-column pricing section. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Make the dashboard and pricing hierarchy more prominent than decoration.

## Typography

The visible display sample uses system-ui, 48px size, 48px line height and weight 800. Tracking is -1.2px. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Center the headline, explanation and paired actions above a large analytics dashboard. Follow with a four-column feature grid, three large proof metrics, testimonial columns, a narrower editorial explanation, four pricing tiers and a dark grouped footer. Let the reading column be narrower than the product and pricing sections; the hero headline measures 1040px while lead copy measures 768px.

At 390px the header shows a compact menu, the headline is 30px/40px in a measured 326px region, and lead copy has relaxed line wrapping. Primary and secondary actions stack at near-full width. The dashboard scales into a rounded frame rather than overflowing horizontally. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

The main depth cue is the dashboard shadow over a very pale background. Pricing cards have light elevation and borders; the enterprise plan reverses into dark ink. Keep the feature and editorial sections flat.

## Shapes

Use gently rounded white dashboard frames and pricing cards. Controls are compact rectangular buttons with modest rounding. Tiny colored browser dots and purple charts are enough decoration for the product demonstration. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

Highlight a phrase within the headline in purple. Place primary trial and secondary demo actions together. Feature items use small green checks, testimonials use small portraits, and pricing combines a pageview control, billing toggle, plan lists and a reversed enterprise card. These controls were observed visually, not interaction-tested.

## Do's and Don'ts

Make the dashboard and pricing hierarchy more prominent than decoration. Keep long-form text in a comfortable reading width. Do not introduce a complex accent palette or claim the visible pricing controls have been functionally tested.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.