Few / Tufte Design Library · Page 3 of 6
🧩 Components
Atoms and molecules. Every component is a composition of tokens from the Foundations page — color, type, and spacing — with no hard-coded values.
Atoms
Badge — 6 variants
YES badge/yes
LIMITED badge/warn
NO badge/no
V.HIGH badge/vh
HIGH badge/hi
MED badge/med
font: 10px / 500 / 0.05em tracking
border: 1px solid currentColor
padding: 1px 5px
KPI Chip — header bar
10 Toolstracked
7.5BMonthly Visits
$4.9BEst. Revenue
height: 44px fixed header container
value: type/kpi-chip-value · mono 12px / 500 / white
label: type/kpi-chip-label · sans 8px / 400 / 0.1em / 55% white
border: 1px rgba(255,255,255,0.2)
KPI Card — body hero row
Largest Tool by MAU
ChatGPT
388M monthly active users
Fastest Growing
Claude
+18.6% month-over-month
Revenue Leader
ChatGPT
$3.2B estimated annual
label: sans 11px / 400 / text-3 / 0.1em / uppercase
value: sans 22px / 700 / text-1
sub: mono 13px / 400 / text-2
bg: surface / border: 1px border/default / padding: 16px 20px
Molecules
Section Header

Market Scale — Monthly Visits

ChatGPT commands 5.8B monthly visits — nearly 8× its nearest rival. Most tools cluster below 150M.
top border: 1px border/default
h2: sans 16px / 600 / text-1
.subtitle: sans 13px / 400 / text-3 / lh 1.4
Dashboard Header (full width)

Global AI Tools Market Report · 2025

10 Toolstracked
7.5BMonthly Visits
$4.9BEst. Revenue
height: 44px / position: fixed / bg: bg/header
title: sans 13px / 600 / white / 0.03em
kpi chips: flex row / gap: 8px
Table — Full Capability Matrix
Table Molecule — sticky thead, alternating rows, badge cells, sparkline cells, mono numerics
Tool Company Category Market Share API Free Tier Enterprise Trend
ChatGPT OpenAI AI Assistant 69.0% YES YES V.HIGH
Gemini Google AI Assistant 8.5% YES YES HIGH
DeepSeek DeepSeek AI AI Assistant 4.0% YES YES MED
Claude Anthropic AI Assistant 2.0% YES YES HIGH
Perplexity Perplexity AI AI Search 2.0% YES YES MED
thead: bg/table-head / 11px / 600 / 0.08em / uppercase / sticky top:0
even rows: bg/table-row-alt
.tool-name: 500 / text-1 · .num: mono 13px / right-aligned
sparkline: 60×16px SVG / polyline only / no dots / stroke: bar/main 1.5px
Small Multiple Panel — 2-col grid variant
sm-panel · shared Y scale · 2×2 grid

ChatGPT

388M 2023 2024 2025

Claude

20M 2023 2024 2025

Gemini

47.6M 2023 2024 2025

DeepSeek

49.5M 2023 2024 2025
grid-gap: 1px / background: border/default (creates hairline between panels)
panel: bg/surface / padding: 12px 16px 8px
shared log Y-scale across all panels — critical for accurate comparison
line only: no dots, no fill — polyline stroke: bar/main 2px