[Library] Stats

Catalogue accessStandard

Stat matrix

An asymmetric bento matrix: one expansive double-height marquee cell on the left detailing a primary productivity metric, flanked by two stacked secondary stat cells on the right, all framed in 1px currentColor borders. 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

An asymmetric bento matrix: one expansive double-height marquee cell on the left detailing a primary productivity metric, flanked by two stacked secondary stat cells on the right, all framed in 1px currentColor borders.

The signature moment

Asymmetric bento balance

The layout provides rhythm and visual hierarchy through unequal area distribution. The primary marquee cell occupies 58% of the width, pairing a massive percentage numeral with a subhead and explanatory narrative. The remaining 42% is divided vertically into two secondary metric blocks, giving each finding its exact proportionate weight.

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 asymmetric 58/42 bento grid proportions.
  • The internal card padding and vertical typography hierarchy.
  • The display typographic ramp.

What you change first

  1. The marquee metric, subhead, and context paragraph.
  2. The two stacked secondary metrics and labels.
  3. The methodology footnote.
Why this is not the other stats patterns45 words
  • stat-quadrant is a symmetrical 2x2 grid with four equal quadrants.
  • stat-pillars uses three identical vertical columns.
  • stat-split pits narrative copy against a multi-row data ledger.
  • stat-matrix is an asymmetric bento grid with one double-height primary card and two stacked secondary cards.
Mechanics worth knowing47 words
  • Contiguous 1px currentColor borders. Each card is independently outlined in currentColor with matching internal padding.
  • Vertical gap between stacked cards. Managed via margin-top on the lower card, matching the section column gap.
  • Constrained footnote. Keeps the research source citation cleanly formatted below the matrix.
The variations35 words
  • Night matrix. The entire section inverts to your contrast ground with base text and currentColor card borders.
  • Matrix reversed. Mirrors the columns: two stacked cards on the left, marquee card on the right.
Contrast27 words

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

Display type24 words

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

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

Continue exploring

Next in Stats

Explore all 10 Stats patterns