JSPM

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

Typography design tokens with built-in accessibility validation

Package Exports

  • fetchtype
  • fetchtype/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fetchtype) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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