skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

type-scale

Generate CSS, Tailwind, or JSON typography scales with modular ratios and auto-calculated line heights.

38|3|Updated Dec 29, 2025
Search Tags:#typography#tailwind#generate#css-variables#type-scale#json-tokens
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill type-scale
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: type-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/type-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill type-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of consistent typography scales across design systems, eliminating manual calculations and guesswork for font sizes and line heights.

Core Features & Use Cases

  • Generate CSS, Tailwind, or JSON typography scales using modular ratios.
  • Auto-calculate line heights based on font sizes for improved readability.
  • Use for base-to-heading hierarchies (h1-h6) and responsive typography.

Quick Start

Use the type-scale skill to generate a scale with base 16px, ratio 1.25, 6 steps up, and 2 steps down, outputting CSS custom properties.

Frequently Asked Questions about type-scale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a typography scale with modular ratios for CSS variables?▼

Generate a typography scale by providing a base font size, a modular ratio, and the number of steps up and down. The scale outputs CSS custom properties with auto-calculated line heights for consistent typographic hierarchy.

Can I use a modular type scale to set up heading hierarchies in Tailwind?▼

Yes, a modular type scale supports setting up base-to-heading hierarchies like h1 to h6. It outputs Tailwind configuration directly, applying auto-calculated line heights to font sizes for responsive typography systems.

What is a modular ratio in typography and when do I need it for design tokens?▼

A modular ratio is a multiplier used to proportionally scale font sizes up and down from a base size. You need it when generating JSON typography tokens to create mathematically harmonious heading hierarchies without manual calculations.

Does this typography generator output JSON tokens for design systems?▼

Yes, the typography generator outputs JSON tokens alongside CSS and Tailwind formats. It auto-calculates line heights based on font sizes, providing structured JSON data for integrating harmonious type scales into design systems.

How do I calculate line heights automatically when generating font-size tokens?▼

Calculate line heights automatically by generating a typography scale with a specified base size and modular ratio. The system computes appropriate line heights for each font size step, eliminating manual readability adjustments across your hierarchy.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
paulinghampaulingham
1

design-system-init

Generate design tokens, CSS custom properties, and Tailwind config extensions from a brand brief.

Community
Advanced
pascallammerspascallammers
1

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
dembrandtdembrandt
33

modular-scale-typography

Generate modular typography scales from a base font size and ratio.

Official
Intermediate