[Library] Stats

Catalogue accessStandard

Stat monument

A monumental scale hierarchy: one colossal figure dominates the left flank at display size, paired with an orientation heading and thesis paragraph on the right, anchored by a ruled three-column shelf of subsidiary proof metrics below. 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 monumental scale hierarchy: one colossal figure dominates the left flank at display size, paired with an orientation heading and thesis paragraph on the right, anchored by a ruled three-column shelf of subsidiary proof metrics below.

The signature moment

Monumental scale collision

The section establishes immediate authority through extreme scale contrast. The primary metric is set at massive display scale (clamp(3.5rem, 8.5vw, 6.75rem)) on a 0.85 line height, commanding more than half the upper split. Beside it, the narrative thesis balances the visual weight with an assertive heading and detailed paragraph. Below the divide, a three-column shelf anchors the claim with three concrete secondary operational metrics.

What it inherits from your theme

  • Typeface. No font family is stated anywhere.
  • Palette. Ground and text resolve to base and contrast chains.
  • Spacing. Band padding and block gaps derive from core spacing presets.

What it decides for itself

  • The monumental typographic scale, scaling smoothly from phone to desktop.
  • The 52/48 upper split and three-column lower shelf proportions.
  • The tight negative tracking on all display figures.

What you change first

  1. The monumental metric and unit. Choose your most compelling single number.
  2. The supporting thesis headline and paragraph. State why this figure matters.
  3. The three supporting shelf metrics.
Why this is not the other stats patterns58 words
  • stat-quadrant is a symmetrical 2x2 window with equal visual weight in four panes.
  • stat-row is a single horizontal strip with four numbers of identical scale.
  • stat-stack is a vertical ledger with five rows flush right.
  • stat-monument is an asymmetric hierarchical monument: one marquee figure commands the top, while three secondary metrics substantiate it below.
Mechanics worth knowing85 words
  • The headline figure and unit are locked on the baseline. A flex row with verticalAlignment: bottom and a tight 0.35rem block gap ensures the unit symbol sits flush against the baseline of the giant numeral.
  • The full-width rule is currentColor. The separator uses is-style-wide with currentColor background and color, guaranteeing it resolves across all theme backgrounds without blanking.
  • Headings state their text colour explicitly. Every heading and paragraph states its text colour chain so theme element styles cannot override the intended contrast.
The variations22 words
  • Night monument. The entire section inverts to your contrast ground with base text. The rule and layout remain identical in currentColor.
Contrast34 words

All text and display figures in the base are contrast on base (and inverted in Night monument). Display figures are well above 34px and meet 3:1 criteria; all labels and body copy meet 4.5:1.

Display type30 words

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

  • paragraph at clamp(3.5rem, 8.5vw, 6.75rem)
  • paragraph at clamp(1.25rem, 2.5vw, 2.25rem)
  • paragraph at clamp(2rem, 3.8vw, 3rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns