Text
A string in a list of children is a text. It takes its font and color from the nearest container that sets them, or from the kit's font.
{
"name": "Type",
"font": "Inter 15/22",
"gap": 8,
"width": 360,
"padding": 20,
"fill": "#FFFFFF",
"column": [
{
"text": "Practise the raga",
"font": "Fraunces 36/40 600 -1"
},
{
"text": "Evening · first prahar",
"font": "Inter 12/16 700 +1.6 caps",
"color": "#D9485F"
},
{
"text": "Every note is shuddha except tivra Ma.",
"font": "17/26"
},
{
"text": "यमन · कल्याण थाट",
"font": "Tiro Devanagari Hindi 20/28"
},
{
"text": "Last riyaz 2 days ago",
"font": "13/18 500 italic",
"color": "#6F6879"
}
]
}
One container sets Inter 15/22; each text changes only what differs. 17/26 keeps the family and changes the size; italic and a weight add to it.
The font shorthand
"Family Size/LineHeight Weight" and optional words, in any order after the size: italic, letter spacing with a sign (+0.4, -2%) and a case (caps, lower, title). Leave the family out to keep the inherited one. The full grammar is in Font.
| You write | Means |
|---|---|
"Inter 15/22" | Inter, 15 px, 22 px line height |
"Fraunces 44/1.1 600 -1" | line height 1.1 × size, weight 600, letter spacing −1 px |
"12/16 700 +1.6 caps" | inherited family, uppercase, spaced |
Presets
A kit type preset is a text style. {"title": "Today"} is a text in it; "style": "title" on a container makes it the default for the texts inside. A text's own font replaces a preset.
What wins
From strongest to weakest: keys written on the text (fontSize, color), the text's own font, its own style, then what the nearest container passes down (font or style, and color), then the kit's font.
Sentences with components
"type": "paragraph" with runs mixes text and nodes. It wraps like text: each word is a text in the paragraph's font, nodes stay in place, and punctuation that touches a node stays on its line.
{
"kit": {
"parts": {
"tag": {
"params": {"label": "", "tone": "#D9485F"},
"node": {
"row": [{"text": "{label}", "font": "Inter 13/18 600"}],
"padding": [1, 7],
"cornerRadius": 6,
"fill": "{tone}/18%"
}
}
}
},
"nodes": [
{
"name": "Digest",
"font": "Inter 16/24",
"width": 340,
"padding": 20,
"fill": "#FFFFFF",
"column": [
{
"type": "paragraph",
"width": "fill",
"runs": [
"Checkout errors rose ",
{"tag": "+38%"},
" on Saturday, the most since ",
{"tag": {"label": "Tue 14 Oct", "tone": "#6F6879"}},
". Two agents stopped sending traces overnight."
]
}
]
}
]
}
A chip part used twice inside a sentence. wordSpacing and lineGap tune the spacing when the defaults (0.27 × size and 0.3 × size) do not suit the font.
Scripts and symbols
Devanagari and other scripts that reorder letters shape as written. Some symbols draw as color emoji by default (zodiac signs, ☕, ⚡, ⭐); put U+FE0E after one to get the font's glyph. A build notes each such symbol.