---
title: "Pirsch Analytics design system"
variant: extended
source: https://pirsch.io/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/pirsch-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Pirsch Analytics · Design System

> Quiet, spacious analytics with a confident mint signal.

**Theme:** light · **Industry:** saas · **Source:** https://pirsch.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Pirsch presents privacy-friendly analytics through a bright, spacious page built around clear typography and warm product cards. A restrained palette keeps attention on dashboard previews, customer proof, and mint-green trial actions.

## North star

Keep the canvas bright and spacious, using warm product panels and mint only to guide attention toward meaningful actions.

## Overview

The page uses pure white as its dominant canvas, with warm off-white panels separating product stories and testimonial cards from the surrounding space. Black headings and controls establish sharp contrast, while muted gray supports explanatory copy without competing with the message. Mint green marks the main trial actions and selected dashboard details; soft yellow appears sparingly in a secondary CTA and small product-interface highlights. DM Sans supplies a modern, humanist sans-serif voice: headings are medium weight, large, and centered in major feature sections, while body text remains calm and readable. A centered hero gives way to repeated feature modules, card grids, and broad vertical pauses. Product imagery is primarily interface content, framed inside warm, generously rounded panels rather than treated as decorative photography. The overall effect is orderly and approachable, with color and spacing guiding the eye instead of heavy borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#707070` | `--color-soft-graphite` | neutral | Muted body copy, captions, and footer text; keeps supporting information quieter than the black headings. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and open space surrounding the hero, feature sections, CTA, and footer. |
| Warm Parchment | `#f8f5ed` | `--color-warm-parchment` | surface | Warm backgrounds for feature cards, testimonial cards, and dashboard-preview surfaces. |
| Fresh Mint | `#6ece9d` | `--color-fresh-mint` | accent | Primary free-trial buttons and selected dashboard details; the main action accent. |
| Pure Ink | `#000000` | `--color-pure-ink` | brand | Headings, navigation, body emphasis, links, and button labels for crisp contrast. |
| Soft Marigold | `#ffda6e` | `--color-soft-marigold` | accent | Secondary trial action and occasional interface highlights; use as a supporting accent, not a dominant field. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f5ed` (Warm Parchment) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#707070` (Soft Graphite) · `--color-accent` → `#6ece9d` (Fresh Mint) · `--color-accent-2` → `#ffda6e` (Soft Marigold) · `--color-on-accent` → `#000000` (Pure Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f5ed` | 19.28:1 | AAA |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#707070` | `#f8f5ed` | 4.55:1 | AA |
| `#6ece9d` | `#ffffff` | 1.91:1 | fail |
| `#6ece9d` | `#f8f5ed` | 1.76:1 | fail |

### Gradients

- `-webkit-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 500 | All measured text: display headings, navigation, body copy, links, buttons, and small section labels. | Manrope |

- **DM Sans:** Use medium weight for headings and actions, regular for body; display headings use subtly tight tracking, and eyebrow labels are uppercase with wide tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 500 | 1.25 | -0.021em | — | DM Sans | Oversized hero or major campaign headline. |
| h1 | 64px | 500 | 1.25 | -0.016em | — | DM Sans | Primary hero heading. |
| h2 | 36px | 500 | 1.5 | 0 | — | DM Sans | Centered feature-section headings and CTA title. |
| h3 | 28px | 500 | 1.25 | 0 | — | DM Sans | Card titles and secondary feature headings. |
| h4 | 24px | 500 | 1.25 | 0 | — | DM Sans | Smaller subfeature titles and footer group headings. |
| body | 18px | 400 | 1.5 | 0 | — | DM Sans | Main explanatory paragraphs and feature descriptions. |
| caption | 16px | 400 | 1.5 | 0 | — | DM Sans | Supporting labels, small notes, and footer details. |
| button | 18px | 500 | 1.5 | 0 | — | DM Sans | Primary and secondary call-to-action labels. |
| nav | 16px | 500 | 1.5 | 0 | — | DM Sans | Header navigation and brand navigation text. |
| link | 18px | 500 | 1.5 | 0 | — | DM Sans | Text links and emphasized secondary actions. |
| eyebrow | 14px | 500 | 1.5 | 0.286em | uppercase | DM Sans | Uppercase numbered labels above feature sections. |

OpenType features in use: `"ss03", "ss04"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 24, 32, 48, 192 px.
- Section rhythm 192px · element gap 32px · card padding 48px · max content width 1200px.

Use a centered page frame with a measured maximum width of 1200px and a spacious, low-density rhythm. The hero is centered with a two-column product presentation below; subsequent sections alternate between centered headings, multi-column card grids, and broad feature panels. The measured section gap is 192px, with 32px element gaps and 48px card padding. Align most content centrally, reserving left alignment for card copy and footer navigation. Let white space clearly separate feature chapters.

## Shape & elevation

- Radius: button `6px` · input `6px` · card `24px` · media `50%` · link `12px` · xs `6px` · sm `12px` · md `24px` · pill `9999px`
- Shadow `hairline` (other): `rgb(110, 206, 157) 0px 0px 0px 2.2093px`
- Motion: standard transition `0.1s ease` on interactive elements.

The visual system is mostly flat: warm card fills separate content from the white canvas, while strong outlines and deep shadows are absent. Rounded card corners provide the main sense of containment. Keep layering limited to dashboard screenshots within panels and subtle interface highlights; do not add heavy shadows or decorative borders.

## Imagery

Use product-interface previews as the main visual material: dashboard charts, filters, tables, and analytics panels shown inside warm, softly rounded frames. Small customer portraits appear in trust and testimonial areas; logos form a restrained customer strip. Supporting illustrations are simple, diagrammatic interface details rather than realistic 3D or cinematic imagery. Keep screenshots legible and avoid letting mockup colors redefine the site palette.

## Components

### Header navigation

Compact horizontal brand and link row on white, with black text and a mint free-trial button.

### Hero actions

Centered mint primary trial CTA beside a pale neutral demo link, followed by customer portraits and a muted trust note.

### Dashboard preview

Large analytics interface preview inside a warm #f8f5ed panel, showing navigation, metrics, charts, and tables.

### Feature cards

Warm off-white cards with rounded 24px corners, generous measured 48px padding, black titles, and muted explanatory copy.

### Numbered section label

Small uppercase, widely tracked eyebrow above centered feature-section headings.

### Testimonial grid

Repeated warm-background review cards with small customer portraits, names, affiliations, and compact muted copy.

### Trial CTA

Centered closing prompt with brand mark, concise supporting copy, and a mint or soft-yellow rounded trial button.

### Measured component styles

- **Primary button** (“Start Your Free Trial”): background #6ece9d · text #000000 · radius 12px · padding 0px 24px · 500 18px DM Sans
- **Secondary button** (“Start 30-day Free Trial”): background #ffda6e · text #000000 · radius 12px · padding 0px 24px · 500 18px DM Sans
- **Link** (“View Live Demo”): transparent background · text #000000 · radius 12px · padding 0px 24px · 500 18px DM Sans
- **Input** (“English Deutsch Español Français Nederla”): transparent background · text #000000 · radius 6px · padding 10px 24px 10px 12px · 500 16px DM Sans
- **Card** (“Integrates With Your Stack Pirsch offers”): background #f8f5ed · text #000000 · radius 24px · padding 48px · 400 16px DM Sans
- **Navigation item** (“Pirsch”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px DM Sans

## Do

- Use white as the dominant page canvas.
- Place feature and review content on warm off-white panels.
- Reserve mint green for the primary action and selected product details.
- Set major feature headings centrally with ample surrounding space.
- Use DM Sans with medium-weight headings and regular body copy.
- Show analytics as product-interface previews, not generic decoration.

## Don't

- Do not introduce colors beyond the measured palette.
- Do not fill large areas with mint or soft yellow.
- Do not add heavy shadows, thick borders, or dense framing.
- Do not crowd feature sections together.
- Do not use loud gradients or oversized decorative illustrations.
- Do not let mockup colors replace the page's white-and-warm palette.

## Agent prompt

Build a new SaaS page in Pirsch Analytics' spacious, privacy-focused visual style. Use Gallery White (#ffffff) as the main canvas, Pure Ink (#000000) for headings and controls, and Soft Graphite (#707070) for supporting copy. Place product information in Warm Parchment (#f8f5ed) rounded cards; use Fresh Mint (#6ece9d) sparingly for primary actions and Soft Marigold (#ffda6e) only for a secondary emphasis. Set all text in DM Sans or a close substitute, with medium-weight headings, regular body copy, and uppercase tracked section labels. Center the hero and section titles, then organize content into generous feature grids and interface-preview panels. Favor analytics UI, charts, and compact customer proof over decorative imagery. Keep the page flat, legible, and open, with restrained borders and no heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above paired actions, trust proof, and a wide dashboard preview. | Primary trial action, Live demo link, Customer trust cue | Large black headline, Mint CTA, Dashboard mockup |
| 2 | logo-cloud | A compact, centered row of customer logos following the product preview. | Social proof | Monochrome logos, Open white background |
| 3 | feature-grid | Centered section heading above an asymmetric grid of warm product and privacy cards. | Feature overview, Integration reassurance | Numbered eyebrow, Rounded warm cards, Small product marks |
| 4 | feature-grid | Centered title and copy above two side-by-side cards with analytics examples. | Capability explanation, Visual filtering preview | Warm card fills, Data labels, Mint filter detail |
| 5 | feature-grid | Centered section introduction followed by a three-column grid of feature cards. | Progressive feature discovery, Use-case explanations | Warm rounded panels, Small diagrams, Interface snippets |
| 6 | feature-grid | Centered heading above a wide lead card and two smaller supporting cards. | Team management, Automated reporting, Dashboard sharing | Warm feature panels, Yellow action highlight, Illustrated team flow |
| 7 | feature-grid | Centered introduction above a two-column arrangement of text cards and dashboard previews. | Customization choices, White-label use case | Warm card backing, Dark dashboard previews, Rounded media |
| 8 | testimonials | Centered heading and intro above a three-column grid of repeated review cards. | Customer validation, Named testimonials | Portrait thumbnails, Warm review cards, Muted review text |
| 9 | cta | Centered brand mark, headline, short explanatory copy, and a single mint action. | Trial conversion, No-card reassurance | Isolated brand mark, Mint button, Large white margins |
| 10 | footer | Three-column footer with brand and language control on the left and grouped link lists on the right. | Language selection, Grouped navigation | Black section labels, Muted links, White canvas |

## Source CSS custom properties (selected)

```css
--border-radius-large: 24px;
--border-radius-medium: 12px;
--border-radius-small: 6px;
--color-primary: #000;
--color-secondary: #707070;
--color-background-primary: #fff;
--color-background-primary-glass: rgba(255,255,255,.4);
--color-background-secondary: #f8f5ed;
--color-background-elevation: rgba(0,0,0,.04);
--color-gradient-bottom: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/pirsch-io