A modular type scale, computed and shown as a specimen sheet. Declare a base size and a musical ratio (minor second through golden ratio) and the atom calculates every step -- px and rem to the hundredth, computed with the same integer-safe arithmetic on every renderer -- and sets the sample line at each size with a proportion bar, plus a ready-to-paste block of CSS custom properties. Calcs baked in, the way wall_elevation bakes in wall maths: an agent declares intent (base, ratio, steps), the atom does the typography. Light or dark, no JavaScript.
| Surface | Note |
|---|---|
| google-chat | Renders as a plain text card; the typographic layout is lost |
:root {
--step-6: 3.815rem; /* 61.04px */
--step-5: 3.052rem; /* 48.83px */
--step-4: 2.441rem; /* 39.06px */
--step-3: 1.953rem; /* 31.25px */
--step-2: 1.563rem; /* 25.00px */
--step-1: 1.250rem; /* 20.00px */
--step-0: 1.000rem; /* 16.00px */
--step-n1: 0.800rem; /* 12.80px */
--step-n2: 0.640rem; /* 10.24px */
}| Field | Type | Required |
|---|---|---|
| base | integer. Base size in px, clamped 10-32. Default 16. | optional |
| ratio | "minor_second" | "major_second" | "minor_third" | "major_third" | "perfect_fourth" | "augmented_fourth" | "perfect_fifth" | "golden" (optional, default "major_third") | optional |
| steps_up | integer. Steps above the base, clamped 1-8. Default 6. | optional |
| steps_down | integer. Steps below the base, clamped 0-3. Default 2. | optional |
| sample | string. Sample line set at each size. Default "The quick brown fox". | optional |
| voice | "display" | "serif" | "mono" (optional, default "display") | optional |
| theme | "dark" | "light" (optional, default "light") | optional |
| accent | "#rrggbb". Default "#0e7bb8". | optional |
| show_code | bool. Append the CSS custom properties block. Default true. | optional |
{
"type": "type_scale"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:type_scale",
"displayName": "Type Scale",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/type_scale",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"pdf",
"android"
],
"description": "A modular type scale, computed and shown as a specimen sheet. Declare a base size and a musical ratio (minor second through golden ratio) and the atom calculates every step -- px and rem to the hundredth, computed with the same integer-safe arithmetic on every renderer -- and sets the sample line at each size with a proportion bar, plus a ready-to-paste block of CSS custom properties. Calcs baked in, the way wall_elevation bakes in wall maths: an agent declares intent (base, ratio, steps), the atom does the typography. Light or dark, no JavaScript.",
"representativeQueries": [
"show a computed modular type scale as a specimen sheet with CSS custom properties",
"a modular type scale, computed and shown as a specimen sheet. declare a base size and a musical rati",
"render a type scale"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy