Type Scale Token Naming Export
Export caller actual named type scale as bounded validated CSS custom properties; strict unique identifiers prevent syntax injection, no invented design-token nomenclature or fixed scale.
Description
Named type-scale tokens export measured design choices as CSS custom properties.
Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable.1
Enter newline-separated unique ASCII identifier names, aligned positive rem sizes and one valid identifier prefix. Names are ≤64 characters, starting letter/underscore with letters/digits/_/- thereafter. Render numbers to 12 significant digits and preserve order.
When to use Type Scale Token Naming Export
Use Type Scale Token Naming Export when you need to evaluate the supplied records under the calculation and evidence rules below. The prefix is validated through trimmed lines but emitted as supplied; use one unpadded literal identifier. No scale or naming convention is invented.
Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
How to use Type Scale Token Naming Export and understand its results
- Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
- Enter tokenNames, tokenSizesRem, cssVariablePrefix using the field table and calculation rules, then run the tool.
- Read cssCustomProperties. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| tokenNames | Token names | string | Required |
| tokenSizesRem | Token sizes rem | list of number | Required |
| cssVariablePrefix | Css variable prefix | string | Required |
Enter newline-separated unique ASCII identifier names, aligned positive rem sizes and one valid identifier prefix. Names are ≤64 characters, starting letter/underscore with letters/digits/_/- thereafter. Render numbers to 12 significant digits and preserve order.
property=--prefix-name: sizeRem rem Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| cssCustomProperties | Css custom properties | string |
{
"input": {
"tokenNames": "body\nheading",
"tokenSizesRem": [
1,
1.5
],
"cssVariablePrefix": "type"
},
"output": {
"cssCustomProperties": "--type-body: 1rem;\n--type-heading: 1.5rem;"
}
} Limitations and assumptions
The prefix is validated through trimmed lines but emitted as supplied; use one unpadded literal identifier. No scale or naming convention is invented.
Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Numeric lists are limited to 10,000 entries; string lists to 128 strings of at most 128 characters each. The rules above may impose smaller limits. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use CSS clamp() Min/Preferred/Max Builder: Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints. rem representation depends on the supplied root size. For a complementary task, use Heading Step Consistency Checker: Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.
References
-
Type Scale Token Naming Export — tool.io
Similar or alternative tools
- CSS clamp() Min/Preferred/Max Builder
Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints. rem representation depends on the supplied root size.
- Heading Step Consistency Checker
Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.