Few / Tufte Design Library · Page 2 of 6
🎨 Foundations
Design tokens that encode every visual decision: color roles, type scale, and spacing grid. All downstream components reference these tokens — change the token, update the system.
Color Tokens — 16 total
Backgrounds
bg/page
#f0eeeb
Warm beige page bg
bg/surface
#ffffff
Cards, panels
bg/header
#1a1917
Fixed header bar
bg/table-head
#e8e5e0
Sticky thead
bg/table-row-alt
#faf9f7
Even row stripe
border/default
#d8d4ce
Borders, grid lines
Text
text/primary
#1a1917
Headings, primary labels
text/secondary
#5a5650
Body, chart labels
text/tertiary
#9a948e
Hints, axis labels
Data Encoding
bar/main
#4a4845
Primary bars, lines, dots
bar/dim
#b0aaa4
Secondary / consumer bars
cobalt/lo
#8099b8
Token input (low sat)
cobalt/hi
#1a4db8
Token output (high sat)
Accents & Badges
accent/warn
#c97b2e
Warning, "Limited" badges
accent/critical
#c0392b
Neg. growth, over-budget
badge/yes
#2a7a4a
Positive capability
Theme Variants
Theme A — Warm Beige (primary)
Warm, editorial. Used in ai-market-report.html.
Best for: analyst briefs, data journalism, print-adjacent reports.
Theme B — Steel Blue (alternate)
Cooler, command-centre feel. For leadership frameworks.
Best for: executive dashboards, ops monitoring.
Typography Scale — 17 Tokens · IBM Plex Sans + IBM Plex Mono
Token → Specimen
type/page-title
IBM Plex Sans · 28px · 700
Foundations
type/kpi-value
IBM Plex Sans · 22px · 700
ChatGPT
type/heading-section
IBM Plex Sans · 16px · 600
Market Scale — Monthly Visits
type/nav-logo
IBM Plex Sans · 15px · 700
type/heading-panel
IBM Plex Sans · 13px · 600
ChatGPT — User Growth
type/subtitle
IBM Plex Sans · 13px · 400
ChatGPT commands 5.8B monthly visits — nearly 8× its nearest rival.
type/kpi-label
IBM Plex Sans · 11px · 400 · 0.1em
Largest Tool by MAU
type/table-header
IBM Plex Sans · 11px · 600 · 0.08em
Tool · Company · Category · MAU · API
type/body
IBM Plex Sans · 13px · 400
Standard table cell text and chart annotation copy.
type/mono-number
IBM Plex Mono · 13px · 400
$3.2B · 388M · 43.9%
type/chart-axis
IBM Plex Mono · 11px · 400
0 · 1B · 2B · 3B · 4B · 5B · 6B
type/kpi-chip-value
IBM Plex Mono · 12px · 500
$4.9B
type/badge
IBM Plex Sans · 10px · 500 · 0.05em
YES LIMITED NO
type/label
IBM Plex Sans · 11px · 600 · 0.08em
Color Tokens — 16 Total
type/annotation
IBM Plex Mono · 10px · 400
② Range-frame Y axis — tick at data min/max only
type/nav
IBM Plex Sans · 13px · 400
About · Foundations · Components · Charts
type/kpi-chip-label
IBM Plex Sans · 8px · 400 · 0.1em
Monthly Visits
Spacing Grid — 8px Base Unit
Token → Pixel → Visual
space/4
4px
space/8
8px
space/12
12px
space/16
16px
space/20
20px
space/24
24px
space/32
32px
space/40
40px
space/64
64px
Layout & Breakpoints
Container
PropertyValue
Max Width1440px
Centeringmargin: 0 auto
Overflowoverflow-x: hidden
Breakpoints — 3 tiers
Tier Range Body Padding Nav Nav Gap
Small < 640px 16px Stacked (logo + links vertical) 12px
Medium 640px – 1023px 24px Inline (wraps if needed) 20px
Large ≥ 1024px 48px Full row 32px
Page-Specific Responsive Behavior
Page Large (≥1024px) Medium (640–1023px) Small (<640px)
About Cover side-by-side, 3-col index Cover stacked, 2-col index Cover compact, 1-col index
Foundations 4-col color grid 3-col grid, type rows unwrap 2-col grid, type rows stack
Components Flex wrap layout 280px min frames, SM → 1 col Full-width cards, compact table
Charts Side-by-side anatomy + do/don't Narrower frames Stacked, SVGs scroll
Anti-Patterns 2×2 pair grid 1-col pairs Pairs + halves stack
Template Dashboard at 1000px max Full-width, SM → 1 col Header wraps, KPIs stack