[Library] Stats

Catalogue accessStandard

Stat comparison

A side-by-side comparative delta matrix: two balanced 1px currentColor panels contrast industry standard baseline metrics directly against platform outcomes across setup time, availability, and response latency. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A side-by-side comparative delta matrix: two balanced 1px currentColor panels contrast industry standard baseline metrics directly against platform outcomes across setup time, availability, and response latency.

The signature moment

Direct benchmark delta

The section creates an immediate visual dialogue between legacy expectations and modern platform velocity. Two balanced 50/50 panels sit side-by-side inside clean 1px currentColor frames. Each panel aligns three corresponding metrics across matching hairlines, making the performance delta unmistakable.

What it inherits from your theme

  • Typeface. No font family is stated anywhere.
  • Palette. Ground and text resolve to base and contrast chains.
  • Spacing scale. Margin and padding presets derive from core tokens.

What it decides for itself

  • The two-column 50/50 delta layout.
  • The internal metric spacing and hairline dividers.
  • The display typographic ramp.

What you change first

  1. The paired comparative metrics (Industry Standard vs Platform).
  2. The section heading and methodology note.
Why this is not the other stats patterns43 words
  • stat-quadrant is a 2x2 grid of standalone findings.
  • stat-split pits editorial storytelling against a single data stack.
  • stat-pillars arranges three positive case findings in isolation.
  • stat-comparison is a two-column paired comparative delta matrix explicitly benchmarking legacy vs improved outcomes.
Mechanics worth knowing58 words
  • Matching internal hairline dividers. Each metric pair is separated by a border-top: 1px solid currentColor with matching top padding, ensuring both columns align rhythmically across the fold.
  • Both panels carry 1px currentColor borders. Ensuring clean separation without heavy background fills.
  • Explicit colour on all text elements. Theme link and heading styles cannot override text legibility.
The variations18 words
  • Night comparison. The entire section inverts to your contrast ground with base text and currentColor panel borders.
Contrast27 words

All text and figures are contrast on base (or base on contrast in Night comparison). Display figures meet 3:1 criteria; all labels and body copy meet 4.5:1.

Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(2.25rem, 4.5vw, 3.25rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns