typeset

A typography review command for improving a user interface’s fonts, text sizes, spacing, line height, and weight hierarchy. It applies a consistent scale and checks details such as heading capitalization and letter spacing.

In plain words
What is it for?
Use it to choose or review fonts, set text sizes and line heights, adjust tracking, limit font weights, and refine headings, labels, buttons, and body text.
Why use it?
It addresses interfaces where text feels generic, sizes are inconsistent, or headings and body copy do not have a clear visual hierarchy.

Command

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add commands/educlopez/ui-craft/typeset
Clone the repo
git clone --depth 1 https://github.com/educlopez/ui-craft
Per session 62 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,061 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00062 $0.01061
Opus 5 $0.00031 $0.00531
Sonnet 5 $0.00012 $0.00212
Haiku 4.5 $0.00006 $0.00106

Measured 2d ago against content hash c2bcfb747a20, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

typeset scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

cli/assets/claude/commands/typeset.md · 58 lines

What it actually says

Typeset the UI at $ARGUMENTS. Load the ui-craft skill and read references/typography.md.

Note: typeset is knob-agnostic — typography rules (no ALL CAPS on headings, tracking-tight ≥24px, one body font, etc.) are not tunable.

Apply, in order:

  1. Font inventory — what's loaded? If Inter is the default choice with no reason, ask before accepting it (Inter is the #1 AI-tell). Good alternatives: Geist, DM Sans, Plus Jakarta Sans, system stack. One body font, optionally one display font. Never three.

  2. Scale — is there a scale or are sizes ad hoc? Anchor to a modular scale (1.125 / 1.2 / 1.25). Sizes: 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 / 72. No 13px / 15px / 17px one-offs unless optical.

  3. Tracking (letter-spacing):

    • ≥ 24px → tracking-tight (-0.02em) or tighter for 40px+
    • 14-20px body → default
    • 11-13px category labels → tracking-wide (+0.06em) + uppercase IS allowed here (the one exception)
    • Never ALL CAPS on headings, nav, buttons, tables
  4. Leading (line-height):

    • Headings: 1.05-1.15
    • Body: 1.5-1.65
    • UI (buttons, labels): 1.2-1.3
  5. Weight hierarchy — pick 2-3 weights max. Common: 400 body, 500 UI/labels, 600-700 headings. Never load 9 weights "just in case".

  6. Micro-typography (the compound details):

    • tabular-nums on every number you align (tables, stats, timestamps, prices)
    • text-wrap: balance on headlines, text-wrap: pretty on body
    • Curly quotes (' / "), em dashes (), en dashes (), no double hyphens
    •   in brand names, between number + unit, and before final short words in headlines
    • Real apostrophes in contractions
    • font-feature-settings or font-variant-* for opt-in features (ligatures, ss01, fractions)
    • Straight prime marks (, ) for units, not quotes
  7. Hierarchy check — can you tell primary / secondary / tertiary at a glance? If every line has the same weight or size, collapse or amplify.

Amplifying hierarchy

If the UI is technically correct but forgettable, use typography as the weapon. Pick ONE element to carry signature (never two); boldness is typography, not color or decoration:

  1. Hero headline — push size to 80-120px, weight to 700-800, tracking to -0.04em. Tight leading (0.95-1.0).
  2. Hierarchy jump — widen the gap between H1 and body. If H1 is 32px and body is 16px, the UI is whispering; if H1 is 48px+, the ratio reads. Compress or expand the range deliberately.
  3. Micro-motif — one custom detail that repeats: a hand-drawn underline, numeric counters (01, 02), an asymmetric supporting element, a distinctive list marker.

Knob gating for amplification (CRAFT_LEVEL):

  • ≤ 4 — skip. Boldness is a craft layer, not a baseline.
  • 5-7 — apply the type amplification only. No signature motif unless asked.
  • 8+ — type amplification + one signature detail (chosen at /craft first pass per references/craft-intent.md; /polish and /bolder strengthen it — never stack a second).

Pre-check: if an accent is already overused or hierarchy is already loud, you don't have a tameness problem — you have a noise problem. Route to /distill (cut) or /colorize (reduce accents) instead.

Output: edit code directly. Print the Review Format table. Call out the single highest-impact change (usually: "font choice" or "tracking-tight on hero").

Next step: /polish — micro-details land best right after the type system is set (rung 1).

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 58 lines · 62 tokens per session scan A c2bcfb747a20

Subscribe to this mod's changes

typeset is a command published in the GitHub repository educlopez/ui-craft (298 stars, last pushed 13d ago), licensed MIT. It adds 62 tokens to every session and 1,061 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other commands, from other repositories

hatch3r-design-system-create

Create a project design system from brand assets or an elicitation dialog — DTCG 2025.10 token emission, 3-tier taxonomy (primitive → semantic → component), OKLCH ramps, dual output design.md + design-tokens.json, gated on WCAG 2.2 AA contrast, 100% theme parity, and 0 dangling aliases.

hatch3r/hatch3r · 74 tokens

design-context-extract

Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…

yonatangross/orchestkit · 84 tokens

design-system

Generate design tokens, theme configuration, or extract a design system from existing code or Figma files.

Adityaraj0421/naksha-studio · 20 tokens

figma-sync

Detect drift between Figma designs and code implementation — compare tokens, spacing, colors, typography, and component structure.

Adityaraj0421/naksha-studio · 23 tokens

live-canvas

Conduct design interviews, generate UI variations, and collect live click-to-annotate feedback that streams into the session so edits land without leaving the browser. Use when the user wants rapid iterative UI refinement, not just batched feedback.

hamr0/liteagents · 50 tokens

ux-motion

Animation and motion rubric. Checks timing, easing, meaning, reduced-motion compliance, and performance for every animation on a surface. Triggers on "motion check", "are the animations good", or "fix the motion". Use when auditing motion or animations, checking durations / easing / reduced-motion / performance, is…

Laith0003/ux-skill · 104 tokens