080102 design typography
Multi-domain agent skills collection for AI coding agents (Claude, Cursor, Copilot, OpenCode, and more). Covers programming, biology, cooking, and future domains. Installable via npx skills add.
npx -y skills add natuleadan/skills --skill 080102-design-typographyAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Typography and layout: font selection, modular type scales, spacing systems, grid theory, and visual hierarchy for brand and product UI.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.1 KB, as published. Nobody here has run it
Typography, Spacing & Layout
Typography, spacing, and layout decisions for brand and product interfaces. Covers font selection, type scale engineering, spacing systems, grid theory, and visual hierarchy.
References
| Topic | File |
|---|---|
| Font selection procedure, reflex-reject list (22 fonts), pairing strategies, aesthetic lane rejection | references/font-selection.md |
Modular type scale, fluid clamp() formulas, fixed rem scale, weight hierarchy, line-height | references/type-scale.md |
| 4/8pt spacing system, semantic tokens, density guidelines, rhythm through contrast | references/spacing-systems.md |
| Grid theory, responsive breakpoints, squint test, card heuristics, container strategies | references/grid-layout.md |
Core Rules
- Font selection procedure: (1) Write 3 concrete brand-voice words, (2) List 3 reflex fonts — reject them, (3) Browse real catalog with the 3 words, (4) Cross-check final vs reflex.
- Reflex-reject fonts: Fraunces, Newsreader, Lora, Crimson, Playfair Display, Cormorant, Syne, IBM Plex*, Space*, Inter, DM Sans, Outfit, Plus Jakarta Sans, Instrument*. Training-data defaults — look further.
- Type scale: ≥1.25 ratio between steps. Brand uses fluid
clamp(). Product uses fixed rem (1.125-1.2 ratio). - Line length: 35-60ch mobile, 60-75ch desktop.
- Font pairing: One committed family > timid two-family pair.
- Spacing: 4/8pt system. Vary spacing for rhythm — same padding everywhere is monotony.
- Layout: Cards are the lazy answer. Nested cards are always wrong. Don't wrap everything in a container.
When to Use
- Selecting fonts for a new project
- Building a type scale
- Defining spacing tokens
- Designing responsive layouts
- Reviewing hierarchy and rhythm