typographic-hierarchy
Typographic Hierarchy Skill
This skill establishes clear, intentional typographic hierarchy — using scale, weight, spacing, color contrast, and rhythm to guide the reader's eye and communicate structure at a glance.
Core Concepts
Typographic hierarchy works across six levers. You rarely need all six — pick the fewest levers that achieve the contrast needed:
| Lever | Effect |
|---|---|
| Size | The primary signal. Double the size = double the dominance. |
| Weight | Bold reads first. 700+ for dominant labels, 300–400 for supporting copy. |
| Color / Opacity | Muted gray for secondary text. High-contrast black/white for focal points. |
| Letter-spacing | Tight for large display text. Wide (0.05–0.2em) for ALL-CAPS labels. |
| Line-height | Looser (1.6–1.8) for body. Tighter (1.0–1.2) for large headings. |
| Space (margin/padding) | Space above a heading = visual importance. Use generously. |
More from blunotech-dev/agents
anti-purple-ui
Enforce a strict monochrome UI with a single high-contrast accent color, removing generic tech gradients and “AI-style” palettes. Use when the user wants minimal, anti-AI, or non-generic aesthetics, or says the UI looks too techy or generic.
9harmonize-whitespace
Align all spacing (padding, margins, gaps) to a consistent 4pt/8pt grid. Use when spacing feels off, inconsistent, cramped, or unbalanced, or when the user asks for a spacing scale or alignment fix.
9micro-interaction-adder
Add polished CSS micro-interactions like hover effects, transitions, and feedback states to improve UI feel. Use when the user asks for animations, better UX, or when the interface feels static, plain, or unresponsive.
4consistent-border-radius
Normalizes rounded corners across a file so buttons, inputs, cards, modals, badges, and all UI elements share the exact same curvature. Use this skill whenever the user mentions inconsistent border radii, wants to unify rounded corners, asks to make UI elements look more cohesive, or says things like "make the corners match", "fix the rounding", "unify border radius", "standardize my rounded corners", or "buttons and cards don't match". Also trigger when the user pastes a CSS/HTML/JSX/TSX file and asks for a design consistency pass, border radius is one of the first things to normalize.
4component-split
Analyze a component and determine when and how to split it based on size, responsibility, and reuse signals, producing a refactored structure with clear boundaries. Use when users share large, mixed-concern, or hard-to-test components, or ask about splitting, refactoring, or improving component architecture.
3any-type-elimination
Find and replace `any` types in TypeScript with precise types, generics, or `unknown` plus narrowing. Use when improving type safety, fixing implicit `any`, removing `any`, or migrating code to strict TypeScript.
3