Claude Skills · UI Design
Type scale
Create a typographic scale with font pairing, sizes, line heights and responsive rules. Use for typography decisions and design systems.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-type-scaleOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-type-scale.
What is inside
---
name: uxm-type-scale
description: Create a typographic scale with font pairing, sizes, line heights and responsive rules. Use for typography decisions and design systems.
---
# Type scale
1. Ask the tone of the product and the platforms.
2. Recommend 1-2 typefaces with fallbacks, and why they fit (readability, language support, licence).
3. Define a modular scale (e.g. 1.2 or 1.25 ratio) for: caption, body-sm, body, lead, h6-h1, display.
4. For each: size, line height, weight, letter spacing, max line length (45-75 characters for body).
5. Provide responsive behaviour using clamp() and mobile minimums (16px body).
6. Output CSS variables and a sample hierarchy preview in markdown.More UI Design skills
- Design tokens · Define design tokens (colour, type, spacing, radius, shadow, motion) and output them as JSON and CSS variables.
- Colour palette · Generate an accessible colour palette with scales, semantic colours and contrast results.
- Component spec · Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility.
- Dark mode · Plan and review a dark mode theme: surfaces, elevation, colour mapping, contrast and images.