Fetchtype

Typography Validation for Design Systems

Typography that
ships correct

One JSON file describes your type system, motion tokens, and 3D scenes. 28 rules validate it. One command exports to Tailwind, shadcn, CSS, or W3C Design Tokens. Works from the CLI, in CI, or through 12 MCP tools for AI agents.

$npx fetchtype init
Browse Registry →

1,929

Fonts in Registry

28

Validation Rules

12

MCP Tools

11

Presets

01 — Verify

Validate typography tokens

28 rules covering WCAG contrast ratios, line-height floors, heading hierarchy, spacing monotonicity, and dark-mode completeness. Block bad tokens in CI before they ship.

$ fetchtype validate -i tokens.json
✓ contrast-ratio          4.87:1 (AA pass)
✓ body-line-height        1.6 (≥ 1.4)
✓ heading-hierarchy       h1 > h2 > h3 > h4
✓ spacing-monotonic       xs < sm < md < lg
⚠ caption-min-size        0.75rem (suggest ≥ 0.8125rem)
12 passed · 1 warning · 0 errors

02 — Resolve

Font intelligence at your fingertips

1,929 fonts with metrics, context scores, and pairing recommendations. Generate platform-aware fallback CSS for 5 rendering targets with a single command.

$ fetchtype resolve inter --css
Inter (sans-serif) — Variable
9 weights · 7 subsets · 31.3 KB
Context: interface (95%) · reading (75%)
Fallback CSS generated for 5 targets:
✓ apple     → SF Pro (size-adjust: 100.4%)
✓ windows  → Segoe UI (size-adjust: 100.7%)
✓ android  → Roboto (size-adjust: 100.2%)
✓ linux    → Noto Sans (size-adjust: 99.8%)
✓ universal→ Arial (size-adjust: 101.1%)

03 — Deploy

Export to any stack

One token file, every format. CSS custom properties, Tailwind config, shadcn theme, and W3C Design Tokens — generated in a single build step.

$ fetchtype build -i tokens.json -o dist/
→ dist/tokens.css         2.1 KB
→ dist/tokens.json        1.8 KB
→ dist/tailwind.config.ts  3.2 KB
→ dist/tokens.w3c.json    2.4 KB
4 files written

04 — Animate

Motion tokens, not motion code

Define durations, easings, springs, and 3D scene materials as tokens. Validate spring physics, duration scales, and material ranges. Export as CSS custom properties.

$ fetchtype validate -i tokens.json
✓ duration-scale          monotonic (100ms..1s)
✓ spring-damping          snappy: 30 (positive)
✓ easing-bezier           5 valid curves
✓ material-roughness      0.35 (0-1 range)
✓ timeline-fps            30 (24-120 range)
5 motion rules passed

Agent-Native

Built for AI agents,
not just humans

12 MCP tools. Works with Claude, Cursor, Windsurf, Cline, and any MCP-compatible client. Add fetchtype to your agent's context and it can validate, resolve, and export typography without leaving the conversation.

validate_tokens resolve_font suggest_fonts pair_fonts get_fallback_css list_presets get_preset build_tokens search_registry audit_codebase prepare_fonts get_systems

Add to your MCP config 

{
  "mcpServers": {
    "fetchtype": {
      "command": "npx",
      "args": ["fetchtype", "mcp"]
    }
  }
}

Compatible with Claude Desktop · Cursor · Windsurf · Cline · Continue

Motion & Scenes

Springs, easings,
and 3D materials
as tokens

Define your motion personality and 3D scene parameters alongside typography. Framework-agnostic values that map to Framer Motion, Three.js, anime.js, or CSS transitions.

01

Duration scales, easing curves, and spring physics configs

02

Timeline compositions with frame-based sequences

03

Scroll/mouse-driven interpolation ranges

04

PBR materials, camera presets, and lighting rigs

Motion tokens in your token file 

"motion": {
  "duration": {
    "fast": "200ms",
    "normal": "300ms"
  },
  "spring": {
    "snappy": {
      "stiffness": 400,
      "damping": 30,
      "mass": 1
    }
  },
  "easing": {
    "enter": "cubic-bezier(0, 0, 0.2, 1)"
  }
},
"scenes": {
  "materials": {
    "glass": {
      "type": "physical",
      "color": "#ffffff",
      "roughness": 0.05,
      "transmission": 0.95
    }
  }
}

CSS output 

:root {
  --ft-motion-duration-fast: 200ms;
  --ft-motion-duration-normal: 300ms;
  --ft-motion-spring-snappy-stiffness: 400;
  --ft-motion-spring-snappy-damping: 30;
  --ft-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --ft-scene-material-glass-color: #ffffff;
  --ft-scene-material-glass-roughness: 0.05;
  --ft-scene-material-glass-transmission: 0.95;
}

Get Started

Three commands to
validated typography

Step 1 — Init

$ npx fetchtype init

Scaffold a fetchtype.tokens.json from a preset, or bring your own token file.

Step 2 — Validate

$ npx fetchtype validate -i fetchtype.tokens.json

Run all 28 rules. Exit 1 on errors — safe to gate in CI.

Step 3 — Build

$ npx fetchtype build -i fetchtype.tokens.json -o dist/

Emit CSS, Tailwind, shadcn, and W3C token files in one pass.

100 presets included

base

Inter

editorial

Georgia

dashboard

Inter

ecommerce

DM Sans

docs

Source Serif 4

interactive

Space Grotesk

fluent

Segoe UI Variable

material

Roboto

carbon

IBM Plex Sans

spectrum

Adobe Clean

radix

Inter

Full API reference, MCP tool documentation, and integration guides live on fetchtype.dev.

Read the Docs → GitHub →