Type Scale Generator MCP tool
findutils:type_scale_generator Generate a modular type scale as CSS custom properties. Each step multiplies the one below it by a ratio, so sizes stay in proportion instead of being picked by hand. Ratios are the classical musical intervals from minor-second (1.067, tight) to golden-ratio (1.618, dramatic), or supply custom_ratio. Sizes are emitted in rem against a root size so they respect the reader browser setting, or in px if you ask. Returns the full :root block and every step with its pixel equivalent.
Arguments
application/json-
base
number optional
Base body size in px (8 to 48). Default 16. Default
16. -
ratio
string optional
Named ratio. Default major-third (1.25). One of
minor-second · major-second · minor-third · major-third · perfect-fourth · augmented-fourth · perfect-fifth · golden-ratio. Default"major-third". -
custom_ratio
number optional
Own ratio between 1.01 and 3. Overrides ratio.
-
steps_up
integer optional
How many sizes above the base (1 to 9). Default 5. Default
5. -
steps_down
integer optional
How many sizes below the base (0 to 5). Default 2. Default
2. -
unit
string optional
rem keeps the scale relative to the reader root size; px is fixed. Default rem. One of
rem · px. Default"rem". -
root
number optional
Root font size in px used to convert to rem (8 to 32). Default 16. Default
16.
Example arguments
Verified{
"base": 16,
"ratio": "major-third"
}More Generators tools
- Barcode Generator Generate a 1D barcode as an SVG string from text.
- Box Shadow Generator Generate a CSS box-shadow declaration from offset, blur, spread, colour, opacity, and inset settings, or from a named preset (subtle, soft…
- Caption Generator Generate a social-media caption from a topic using built-in templates (no AI): picks a template for the content type and tone, fills…
- Clip Path Generator Generate a CSS clip-path from a named shape (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, chevron…
- Color Palette Generator Generate a harmonious colour palette from a base hex colour: complementary, analogous, triadic, tetradic, split-complementary…
- Css Animation Generator Return CSS @keyframes animation code (or Tailwind config, Web Animations API / React, or Framer Motion code) from a named preset such…