type-scale

Name: type-scale
Author: dylantarre

33stars3forks

How to install type-scale?

dylantarre/design-system-skills/type-scale

$npx -y skills add dylantarre/design-system-skills --skill type-scale

Installs into the current project.

Summary

Generates typography scales using modular ratios with auto-calculated line heights. Use when setting up font-size tokens, heading hierarchy (h1-h6), or text sizing systems. Outputs CSS, Tailwind, or JSON.

Files · 1

View on GitHub

SKILL.md

1	# Type Scale Generator
2
3	## Overview
4
5	Generate harmonious typography scales using musical interval ratios. Automatically calculates appropriate line heights based on font size for optimal readability.
6
7	## When to Use
8
9	- Setting up typography for a new project
10	- Creating heading hierarchy (h1-h6)
11	- Standardizing font sizes across components
12	- Building a responsive type system
13
14	## Quick Reference: Musical Ratios
15
16	\| Name \| Ratio \| Character \|
17	\|------\|-------\|-----------\|
18	\| Minor Second \| 1.067 \| Subtle, tight \|
19	\| Major Second \| 1.125 \| Conservative \|
20	\| Minor Third \| 1.2 \| Versatile (recommended) \|
21	\| Major Third \| 1.25 \| Balanced \|
22	\| Perfect Fourth \| 1.333 \| Bold contrast \|
23	\| Augmented Fourth \| 1.414 \| Dramatic \|
24	\| Perfect Fifth \| 1.5 \| High contrast \|
25	\| Golden Ratio \| 1.618 \| Classical, striking \|
26
27	## The Process
28
29	1. Get base size: Default 16px (browser default, good baseline)
30	2. Choose ratio: Recommend Minor Third (1.2) for most projects
31	3. Steps up: How many sizes above base (6-8 typical for headings)
32	4. Steps down: How many sizes below base (2-3 for small/caption text)
33	5. Ask unit: px, rem, or em?
34	6. Ask format: CSS, Tailwind, or JSON?
35	7. Generate: Create scale with auto line heights
36
37	## Auto Line Height
38
39	Larger fonts need tighter line height for readability:
40
41	\| Font Size \| Line Height \| Reasoning \|
42	\|-----------\|-------------\|-----------\|
43	\| 14px or less \| 1.7 \| Small text needs room \|
44	\| 15-18px \| 1.6 \| Body text range \|
45	\| 19-24px \| 1.5 \| Large body/small headings \|
46	\| 25-32px \| 1.4 \| Subheadings \|
47	\| 33-48px \| 1.3 \| Headings \|
48	\| 49px+ \| 1.2 \| Display text \|
49
50	## Output Formats
51
52	CSS Custom Properties:
53	```css
54	:root {
55	/* Font Sizes */
56	--text-xs: 13.33px;
57	--text-sm: 14.22px;
58	--text-base: 16px;
59	--text-lg: 19.2px;
60	--text-xl: 23.04px;
61	--text-2xl: 27.65px;
62
63	/* Line Heights */
64	--leading-xs: 1.70;
65	--leading-sm: 1.70;
66	--leading-base: 1.60;
67	--leading-lg: 1.50;
68	--leading-xl: 1.50;
69	--leading-2xl: 1.40;
70	}
71	```
72
73	Tailwind Config:
74	```js
75	module.exports = {
76	theme: {
77	fontSize: {
78	'xs': ['13.33px', { lineHeight: '1.70' }],
79	'sm': ['14.22px', { lineHeight: '1.70' }],
80	'base': ['16px', { lineHeight: '1.60' }],
81	'lg': ['19.2px', { lineHeight: '1.50' }],
82	'xl': ['23.04px', { lineHeight: '1.50' }],
83	'2xl': ['27.65px', { lineHeight: '1.40' }],
84	}
85	}
86	}
87	```
88
89	JSON Tokens:
90	```json
91	{
92	"typography": {
93	"xs": { "fontSize": "13.33px", "lineHeight": "1.70" },
94	"sm": { "fontSize": "14.22px", "lineHeight": "1.70" },
95	"base": { "fontSize": "16px", "lineHeight": "1.60" },
96	"lg": { "fontSize": "19.2px", "lineHeight": "1.50" }
97	}
98	}
99	```
100
101	## Naming Convention
102
103	\| Position \| Name \|
104	\|----------\|------\|
105	\| 3 below base \| xxs \|
106	\| 2 below base \| xs \|
107	\| 1 below base \| sm \|
108	\| Base \| base \|
109	\| 1 above base \| lg \|
110	\| 2 above base \| xl \|
111	\| 3+ above base \| 2xl, 3xl, 4xl... \|
112
113	## Common Configurations
114
115	Compact UI (dashboards, data-dense):
116	- Ratio: 1.125 (Major Second)
117	- Base: 14px
118	- Steps: 2 down, 5 up
119
120	Content Site (blogs, marketing):
121	- Ratio: 1.25 (Major Third)
122	- Base: 18px
123	- Steps: 2 down, 6 up
124
125	Editorial (magazines, long-form):
126	- Ratio: 1.333 (Perfect Fourth)
127	- Base: 20px
128	- Steps: 2 down, 8 up

People who liked this also viewed

6 picks

Type

type-scale

33stars3forks

View on GitHub

How to install type-scale?

dylantarre/design-system-skills/type-scale

$npx -y skills add dylantarre/design-system-skills --skill type-scale

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Type Scale Generator
2
3	## Overview
4
5	Generate harmonious typography scales using musical interval ratios. Automatically calculates appropriate line heights based on font size for optimal readability.
6
7	## When to Use
8
9	- Setting up typography for a new project
10	- Creating heading hierarchy (h1-h6)
11	- Standardizing font sizes across components
12	- Building a responsive type system
13
14	## Quick Reference: Musical Ratios
15
16	\| Name \| Ratio \| Character \|
17	\|------\|-------\|-----------\|
18	\| Minor Second \| 1.067 \| Subtle, tight \|
19	\| Major Second \| 1.125 \| Conservative \|
20	\| Minor Third \| 1.2 \| Versatile (recommended) \|
21	\| Major Third \| 1.25 \| Balanced \|
22	\| Perfect Fourth \| 1.333 \| Bold contrast \|
23	\| Augmented Fourth \| 1.414 \| Dramatic \|
24	\| Perfect Fifth \| 1.5 \| High contrast \|
25	\| Golden Ratio \| 1.618 \| Classical, striking \|
26
27	## The Process
28
29	1. Get base size: Default 16px (browser default, good baseline)
30	2. Choose ratio: Recommend Minor Third (1.2) for most projects
31	3. Steps up: How many sizes above base (6-8 typical for headings)
32	4. Steps down: How many sizes below base (2-3 for small/caption text)
33	5. Ask unit: px, rem, or em?
34	6. Ask format: CSS, Tailwind, or JSON?
35	7. Generate: Create scale with auto line heights
36
37	## Auto Line Height
38
39	Larger fonts need tighter line height for readability:
40
41	\| Font Size \| Line Height \| Reasoning \|
42	\|-----------\|-------------\|-----------\|
43	\| 14px or less \| 1.7 \| Small text needs room \|
44	\| 15-18px \| 1.6 \| Body text range \|
45	\| 19-24px \| 1.5 \| Large body/small headings \|
46	\| 25-32px \| 1.4 \| Subheadings \|
47	\| 33-48px \| 1.3 \| Headings \|
48	\| 49px+ \| 1.2 \| Display text \|
49
50	## Output Formats
51
52	CSS Custom Properties:
53	```css
54	:root {
55	/* Font Sizes */
56	--text-xs: 13.33px;
57	--text-sm: 14.22px;
58	--text-base: 16px;
59	--text-lg: 19.2px;
60	--text-xl: 23.04px;
61	--text-2xl: 27.65px;
62
63	/* Line Heights */
64	--leading-xs: 1.70;
65	--leading-sm: 1.70;
66	--leading-base: 1.60;
67	--leading-lg: 1.50;
68	--leading-xl: 1.50;
69	--leading-2xl: 1.40;
70	}
71	```
72
73	Tailwind Config:
74	```js
75	module.exports = {
76	theme: {
77	fontSize: {
78	'xs': ['13.33px', { lineHeight: '1.70' }],
79	'sm': ['14.22px', { lineHeight: '1.70' }],
80	'base': ['16px', { lineHeight: '1.60' }],
81	'lg': ['19.2px', { lineHeight: '1.50' }],
82	'xl': ['23.04px', { lineHeight: '1.50' }],
83	'2xl': ['27.65px', { lineHeight: '1.40' }],
84	}
85	}
86	}
87	```
88
89	JSON Tokens:
90	```json
91	{
92	"typography": {
93	"xs": { "fontSize": "13.33px", "lineHeight": "1.70" },
94	"sm": { "fontSize": "14.22px", "lineHeight": "1.70" },
95	"base": { "fontSize": "16px", "lineHeight": "1.60" },
96	"lg": { "fontSize": "19.2px", "lineHeight": "1.50" }
97	}
98	}
99	```
100
101	## Naming Convention
102
103	\| Position \| Name \|
104	\|----------\|------\|
105	\| 3 below base \| xxs \|
106	\| 2 below base \| xs \|
107	\| 1 below base \| sm \|
108	\| Base \| base \|
109	\| 1 above base \| lg \|
110	\| 2 above base \| xl \|
111	\| 3+ above base \| 2xl, 3xl, 4xl... \|
112
113	## Common Configurations
114
115	Compact UI (dashboards, data-dense):
116	- Ratio: 1.125 (Major Second)
117	- Base: 14px
118	- Steps: 2 down, 5 up
119
120	Content Site (blogs, marketing):
121	- Ratio: 1.25 (Major Third)
122	- Base: 18px
123	- Steps: 2 down, 6 up
124
125	Editorial (magazines, long-form):
126	- Ratio: 1.333 (Perfect Fourth)
127	- Base: 20px
128	- Steps: 2 down, 8 up

People who liked this also viewed

6 picks

Type