HomeCasa Prompts

Type scale for a design system with tokens and fluid CSS

Define a complete type scale: a justified ratio, sizes, line heights and weights per style, fluid type with clamp(), reading rules, accessibility checks and tokens in JSON and CSS. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 6 customizable variables and you can copy it for free in one click.

Intermediate · Text · Pending editorial review

Designed for:

Prompt

Act as a typographer and design systems designer.

Context:
- Product or brand: {{product}}
- Platforms: {{platforms}}
- Available typefaces: {{fonts}}
- Base text size: {{base_size}}
- Preferred ratio: {{ratio}}
- Main content type: {{content}}

Deliverables:
1. Ratio recommendation: confirm or challenge the chosen ratio for this content type (larger ratios suit marketing, smaller ones suit dense interfaces) and explain why.
2. A scale table with 8-10 styles (display, h1-h4, body large, body, body small, label, caption): token name, size in px and rem, line height, weight, letter spacing and recommended use.
3. Fluid type for headings using clamp(), stating the minimum and maximum viewport widths used in the calculation.
4. Mobile versus desktop differences and adjustments for the platforms listed.
5. Paragraph rules: 45-75 characters per line, paragraph spacing and hierarchy inside lists and tables.
6. Accessibility: rem units, 200% zoom, minimum readable sizes, body line height of at least 1.5 and support for the text spacing required by WCAG 1.4.12.
7. Tokens in JSON (Design Tokens compatible format) and as CSS variables.
8. Five usage rules: what to do and what to avoid.

Constraints:
- Do not invent font metrics (x-height, available weights); if you need them, mark them as [FILL IN].
- Remind me to check the font licenses for web and app use.
- Round sizes to practical values and explain the rounding. If key information is missing, ask me first.

Format: the scale table, JSON and CSS code blocks, and the list of rules.

How to use it

  1. List the typefaces you already have licenses for and your base size. 2. Check whether the recommended ratio fits your content. 3. Import the JSON tokens into your token tool or paste the CSS variables into your project.

Usage example

Product: analytics dashboard · Fonts: Inter and JetBrains Mono · Base: 16px · Ratio: 1.2 · Content: dense interface.

Sample output

1. Ratio

I'd keep 1.2 (minor third): in a dense interface with tables, a larger ratio would inflate headings and steal space from the data.

2. Scale (16px base)

TokenpxremLine heightWeightUse
display4831.1700Hero metric on the dashboard
h1402.51.15700Page title
h23221.2600Section
h3281.751.25600Card title
h4241.51.3600Subsection
body-lg201.251.5400Intros
body1611.5400Default text
body-sm140.8751.5400Table cells
caption120.751.4500Axes and notes

Rounding: 1.2ⁿ gives 19.2 · 23.04 · 27.65 · 33.18 · 39.81; I round to multiples of 4 to sit on the 4px grid.

3. Fluid type (360-1280px)

:root {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-figures: "JetBrains Mono", ui-monospace, monospace;
  --text-body: 1rem;
  --text-h1: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --leading-body: 1.5;
}

Remember to check the Inter and JetBrains Mono licenses for web and app use. Metrics such as x-height: [FILL IN]…

Key facts

Category
UI/UX design · Design systems
Output type
Text
Level
Intermediate
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Product or brand, Platforms, Typefaces, Base size, Ratio and Main content
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Which type scale ratio should I choose?

Dense interfaces usually work with gentle ratios like 1.125 or 1.2; marketing or editorial sites benefit from 1.25 or 1.333 for more contrast between headings and body text.

Why use rem instead of px?

Rem units respect the text size users set in their browser, which improves accessibility for people who need larger text.

What is this prompt for?

Define a complete type scale: a justified ratio, sizes, line heights and weights per style, fluid type with clamp(), reading rules, accessibility checks and tokens in JSON and CSS.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Product or brand, Platforms, Typefaces, Base size, Ratio and Main content). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is intermediate: it helps to know the topic so you can provide good context and review the result critically.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts