JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q59027F
  • License MIT

Typography, motion, and 3D token system. Validate typography, spring physics, and scene materials. Export to CSS/Tailwind/shadcn/W3C.

Package Exports

  • fetchtype

Readme

fetchtype

Typography validation for design systems. Catch readability bugs, enforce WCAG thresholds, and export tokens to CSS, Tailwind, shadcn, and W3C Design Tokens — from one file.

pnpm add -D fetchtype

Quick start

# Generate a starter token file
fetchtype init

# Start from a preset (editorial | dashboard | ecommerce | docs)
fetchtype init --preset dashboard

# Or describe what you're building
fetchtype init --prompt "modern SaaS dashboard with dark mode"

# Validate against 13 rules
fetchtype validate -i fetchtype.tokens.json

# Export to any format
fetchtype build -i fetchtype.tokens.json --format tailwind

What gets checked

13 rules covering accessibility, readability, and structural consistency:

Rule Threshold
Text contrast ≥ 4.5:1 (WCAG AA)
Body line-height ≥ 1.5
Button font-size ≥ 14px
Caption / label font-size ≥ 11px
Prose width ≤ 75ch
Heading size direction h1 → h6 decreasing
Heading line-height < body line-height
Spacing scale Monotonically increasing
Scale divergence Within ±10% of computed scale
Dark mode completeness All themes covered
Font fallback chains Generic fallback present
Font payload ≤ 150 KB estimated
Token references Resolve without cycles

Commands

Command Description
init [output] Write a starter token file. --preset, --prompt, --force
validate -i <path> Validate tokens. --github for PR annotations, --json
build -i <path> Export tokens. --format (css|json|tailwind|shadcn|w3c|all)
import -i <path> Import a W3C Design Tokens file
suggest -c <context> Recommend fonts. Context: display|interface|reading|mono
preview -i <path> Start a live preview server with file watching
mcp Start an MCP server for AI agent integration

Token format

{
  "typography": {
    "heading":  { "lineHeight": 1.1, "fontSize": "3rem" },
    "body":     { "lineHeight": 1.6, "fontSize": "1rem" },
    "button":   { "fontSize": "0.9375rem" },
    "caption":  { "fontSize": "0.8125rem" }
  },
  "color": {
    "light": { "text": "#111827", "background": "#ffffff" },
    "dark":  { "text": "#f9fafb", "background": "#111827" }
  },
  "hierarchy": {
    "scale": "major-third",
    "baseSize": "1rem"
  }
}

12 typography contexts: heading, subheading, body, caption, button, label, input, code, blockquote, chart-label, chart-axis, chart-title. Plus color, spacing, layout, hierarchy, optional themes and modes.

Export formats

fetchtype build -i fetchtype.tokens.json -o dist/tokens --format all
Format Output Description
css tokens.css CSS custom properties with configurable prefix
json tokens.json Fully resolved token values
tailwind tailwind.config.ts theme.extend partial
shadcn shadcn.css HSL variables, shadcn-compatible
w3c tokens.w3c.json W3C Design Tokens Community Group format

CI integration

Add --github to emit inline PR annotations and a step summary:

- name: Validate typography
  run: pnpm exec fetchtype validate -i fetchtype.tokens.json --github

Presets

Preset Tuned for
base General-purpose defaults
editorial Long-form reading — larger body, generous line-height, serif, 65ch prose
dashboard Data-dense — compact body, tighter line-height, monospace, wider content
ecommerce Product and conversion pages
docs Documentation sites

AI agent integration

fetchtype includes an MCP server so AI coding agents can validate and generate typography tokens directly:

fetchtype mcp

Exposes five tools: validate, build, suggest, init, and presets.

License

MIT