claude-copilot: Skill for Claude Code

.claude/skills/design/typography-pairings/SKILL.md

typography-pairings is a skill for Claude Code from Everyone-Needs-A-Copilot/claude-copilot. It costs 98 tokens per session (2,108 once invoked), scanned A, original, MIT.

A reference for choosing font combinations, text-size scales, spacing, and line heights for brands and digital products. It also lists combinations and design patterns to avoid.

In plain words
What is it for?
Use it to select heading and body fonts, create responsive CSS text sizes with clamp(), and set weights and line heights for different kinds of content.
Why use it?
It reduces guesswork when building a readable, distinctive type system instead of defaulting to familiar fonts or inconsistent text sizes.

Skill for Claude Code

Written for Claude Code: when-to-use in frontmatter.

This is Everyone-Needs-A-Copilot/claude-copilot's own configuration. It tells Claude Code how to work on claude-copilot itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything claude-copilot configures →

Part of the claude-copilot plugin — 72 skills, 17 commands, 16 agents, 6 hooks shipped together

Reuse

Borrowing it

Nothing to install: this file belongs to Everyone-Needs-A-Copilot/claude-copilot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/Everyone-Needs-A-Copilot/claude-copilot/main/.claude/skills/design/typography-pairings/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/Everyone-Needs-A-Copilot/claude-copilot

Made for: Claude Code.

Or install claude-copilot, the plugin that ships this one along with the rest of its 72 skills, 17 commands, 16 agents, 6 hooks.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for typography-pairings

README.md
[![agentmods](https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings/github.svg)](https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings)
Your own site
<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for typography-pairings

Your own site · 80×15
<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/typography-pairings.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 98 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,108 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.1 $0.00098 $0.02108
Opus 5 $0.00049 $0.01054
Sonnet 5 $0.00020 $0.00422
Haiku 4.5 $0.00010 $0.00211

Measured 4d ago against content hash b86402e4824e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

typography-pairings 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 4d 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.

.claude/skills/design/typography-pairings/SKILL.md · 187 lines

How it starts

The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Typography Pairings

Curated font pairings organized by character and context, with computed type scales and fluid typography formulas.

Purpose

  • Provide distinctive, intentional typography choices
  • Map pairings to personality and use case
  • Include ready-to-use type scale systems
  • Ban overused AI-default font combinations

Curated Pairings

Serif + Sans-Serif (Classic Contrast)

Character Heading Body Best For
Editorial Authority Playfair Display Source Serif Pro Publishing, luxury, longform
Modern Heritage Cormorant Garamond Lato Fashion, hospitality, cultural
Warm Storytelling Lora Merriweather Sans Blogs, memoir, narrative
Academic Gravitas Libre Baskerville Source Sans 3 Education, research, institutional
Art Magazine DM Serif Display DM Sans Gallery, creative, editorial
Classic Refinement Crimson Pro Cabin Law, finance, traditional
Elegant Contrast Spectral Work Sans Architecture, design, portfolio

Sans-Serif + Sans-Serif (Contemporary)

Character Heading Body Best For
Tech Confidence Sora Plus Jakarta Sans SaaS, enterprise, dashboards
Geometric Precision Outfit Albert Sans Fintech, data, analytics
Friendly Professional Lexend Nunito Sans HR tech, onboarding, education
Bold Startup Clash Display General Sans Landing pages, marketing, brand
Clean Authority Manrope Figtree Enterprise, B2B, productivity
Soft Modern Urbanist Atkinson Hyperlegible Accessibility-first, healthcare
Nordic Minimal Red Hat Display Red Hat Text Design tools, minimal UI
Sharp & Direct Space Grotesk Geist Developer tools, technical docs
Warm Geometric Gilda Display Jost Hospitality, events, lifestyle
Human Tech Bricolage Grotesque Instrument Sans Community, social, collaboration

Monospace + Sans-Serif (Technical)

Read the full file on GitHub · 187 lines

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. 4d ago First seen · 187 lines · 98 tokens per session scan A b86402e4824e

Subscribe to this mod's changes

typography-pairings is a skill published in the GitHub repository Everyone-Needs-A-Copilot/claude-copilot (13 stars, last pushed today), licensed MIT. It adds 98 tokens to every session and 2,108 once invoked, about $0.0005 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-09-04.

Related

Other skills, from other repositories

ui-animation

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, and curve fitting from recordings. Use when asked to "add animation", "match this easing", "reverse engineer this motion", or find animation opportunities. For action semantics use product-design; for visual layout use ui-design.

mblode/agent-skills · 65 tokens

ui-design

Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use…

mblode/agent-skills · 80 tokens

typography-audit

Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.

mblode/agent-skills · 68 tokens

design-conventions

Scan the current TS/React project's existing UI layer and write .claude/design-conventions.md — a project-specific visual design convention file that rules/typescript.md loads before UI work. Use when starting UI work in an existing project, when design conventions have drifted, or when --refresh is passed to merge in…

addit-digital/addit-harness · 70 tokens

ui-reviewer

UI/UX review — accessibility, semantic HTML, z-index, animations, responsive, design tokens.

RaNDoM6913/claude-code-superkit · 23 tokens

onyx-ui-standard

ONYX Liquid Glass design system — colors, glassmorphism, z-index layers, layout standards.

RaNDoM6913/claude-code-superkit · 24 tokens