skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

modular-scale-typography

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

Updated May 24, 2026
Search Tags:#typography#responsive#tokens#design-tokens#typographic-hierarchy#modular-scale#font-sizes
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill modular-scale-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modular-scale-typography
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/modular-scale-typography
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill modular-scale-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography often lacks cohesion when font sizes are chosen arbitrarily, leading to weak hierarchy and visual noise across interfaces.

Core Features & Use Cases

  • Base + Ratio defines a single base font size and a scalable ratio to generate all type steps.
  • Design Tokens outputs CSS variables and tokens ready for Tailwind/Design Systems; supports responsive adjustments.
  • Guidance & Reviews provides a clear typographic hierarchy and practical checklists for consistency.

Quick Start

Define a base font size and ratio to establish a cohesive typographic scale for your design system.

Frequently Asked Questions about modular-scale-typography

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

FAQPage Schema
How do I create a cohesive typographic system using a modular scale?▼

Define a single base font size and a scalable ratio to generate all type steps for your design system. This approach eliminates arbitrary font sizes, ensuring consistent typographic hierarchy across web and app interfaces.

How do I generate responsive design tokens for font sizes?▼

Generate design tokens by applying a scalable ratio to a base font size, outputting CSS variables such as --text-base and --text-xl. These tokens support responsive adjustments and integrate directly into design systems.

Can I use these typography tokens with Tailwind and design systems?▼

Yes, the generated CSS variables and design tokens are ready for Tailwind and design systems. You can apply these tokens directly to drive consistent typography across web UI, apps, and marketing pages.

What is the best way to fix inconsistent typography hierarchy in web UI?▼

Fix inconsistent typography by applying a modular scale to font sizes, replacing arbitrary choices with mathematically related steps. This generates design tokens and documentation that ensure visual cohesion across interfaces.

Why does my typography lack cohesion across different app interfaces?▼

Typography lacks cohesion when font sizes are chosen arbitrarily, creating visual noise. Applying a modular scale with a defined base size and ratio generates consistent tokens that resolve weak hierarchy across interfaces.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

radius-scale

Generate scalable border-radius tokens for CSS, Tailwind, and JSON outputs.

Community
Basic
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
Columbia-Cloudworks-LLCColumbia-Cloudworks-LLC
1

tailwind-design-system

Standardize Tailwind UI with design tokens, CVA components, and dark mode patterns.

Official
Advanced
dylantarredylantarre
38

type-scale

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

Community
Intermediate