Plausible Analytics

Overview

Plausible presents itself as a calm, trustworthy counterweight to surveillance-heavy analytics. The aesthetic movement is best described as Quiet Data Minimalism: a near-white #f9fafb canvas, generous whitespace, and a dashboard-first hero that shows the product rather than decorating it. The emotional response is reassurance and clarity: the interface should feel like a simple, honest ledger, not a noisy control room.

The voice is plain, confident and slightly playful (note the EU flag and heart emoji in copy), with short declarative sentences and frequent privacy-first claims such as 'No cookies, just insights.' Headlines are direct and benefit-led. Example sentence: "No cookies, just insights. Your visitors stay anonymous and your page stays fast."

Colors

Primary (#5850EC) is the signature indigo and is used exclusively for calls to action, the highlighted phrase in headlines ('Google Analytics alternative' rendered in rgb(88,80,236)), active states and key links. Hover deepens the CTA toward #5F48FF via the primary-container token. Secondary (#374151) carries body-adjacent emphasis and secondary UI chrome, while tertiary (#204A87) is reserved for code and syntax accents. Never use the primary indigo for body copy.

The surface stack is intentionally shallow: page background #F9FAFB (surface), cards and inputs at #FFFFFF (surface-container-lowest), and hover or subtle panels at #F4F5F7 and #E5E7EB. Headings use #161E2E (rendered as rgb(22,30,46)) for maximum contrast, while body text uses #252F3F. Muted labels and placeholders use #6B7280 a

Typography

The type system relies on the platform stack (system-ui, -apple-system, Segoe UI, Roboto) for fast rendering and native feel. Display headlines run at 48px weight 800 with a tight -1.2px letter-spacing and a 48px line-height, producing a dense, confident block. Section headings drop to 30px weight 800 with 36px line-height, while body copy sits at 16px weight 400 on a 24px line-height. Weight does most of the hierarchy work; size contrast is moderate. Apply -webkit-font-smoothing: antialiased to all text, and use Menlo for inline code and pre blocks at 0.875em. Small uppercase labels, such as dashboard stat headers, should use 12px weight 600 with 0.05em tracking.

Layout

The grid is fluid up to fixed breakpoints: the .container class widens from 640px to 768px, 1024px, and finally a 1280px maximum (70rem at xl). Gutters are 16px (1rem side padding). Vertical rhythm is generous: hero sections separate using spacing 2xl (32px) between blocks and larger 96px-plus breathing room between marketing sections. Content inside the hero is centered with a max-width near 640px for copy. Use the md (16px) step for inner card padding and xl (24px) for section content, and reserve the container-max of 1280px for dashboard screenshots and feature grids.

Elevation & Depth

Depth is conveyed mostly through flat surfaces with hairline separation. Level 1 (resting cards) uses box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06) with a 1px border at #D2D6DC. Level 2 (hover and dropdown menus) uses 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06). The dashboard preview sits on a soft shadow of similar weight with a window chrome bar at the top. Dropdown panels are animated with a 200ms ease-out enter and 150ms ease-in leave, translating 4px vertically and fading opacity from 0 to 1.

Shapes

The shape philosophy is Soft-Technical: moderately rounded corners that read as precise rather than playful. Primary and secondary buttons use 6px (rounded.lg). Cards and dashboard panels use 8px (rounded.xl) on the outer frame. Inputs and dropdown rows use 4px (rounded.DEFAULT and md). Badges, avatars and the status dot use full 9999px pills and circles. Keeping radii between 3px and 8px preserves a crisp, engineered feel.

Components

Action Elements The primary button is a solid #5850EC fill with white 18px weight 500 text, 16px 40px padding and 48px height, rounded 6px. On hover it transitions to #5F48FF over 150ms cubic-bezier(0.4,0,0.2,1). The secondary button is a white #FFFFFF surface with indigo text and a 1px #D2D6DC edge; hover shifts it to #E5E7EB. The nav CTA shrinks to 8px 20px padding and 16px weight 500.

Containers & Surfaces Cards use #FFFFFF on the #F9FAFB canvas with a 1px border of #D2D6DC, 6px-8px radii, and the Level 1 shadow. Hover elevates to Level 2 and nudges the background to #F9FAFB over 150ms. Dashboard previews sit inside a 1px-bordered window with three 10px traffic-light dots (#FF5F57, #FEBC2E, #28C840) on a top bar.

Inputs & Interaction Inputs take a 1px #D2D6DC border, 4px r

Do's and Don'ts

**Do**

• Do reserve #5850EC exclusively for CTAs, key links and active states so the accent keeps its signalling power.
• Do pair 48px weight 800 display headings with 16px body copy to keep the hierarchy weight-driven and dense.
• Do use 1px #D2D6DC borders and the soft two-layer shadow instead of heavy drop shadows on cards.
• Do keep button heights at 48px (primary) and 42px (nav) with 6px radii for a consistent action rhythm.

**Don't**

• Don't use the indigo for body text, icons decorative only, or backgrounds behind long copy.
• Don't round primary buttons beyond 8px; the pill shape is reserved for badges and status dots.
• Don't introduce gradients or glassmorphism; the brand relies on flat #F9FAFB and #FFFFFF surfaces.
• Don't use heavier shadows than the 0 4px 6px -1px rgba(0,0,0,0.1) elevation tier on resting elements.