Kimo
Docs
v1.0
Changeloggetkimo.design
Docs
v1.0
Agents & MCP

Text

1 min read
·
Kimo 1.0 · format 1.0
On this page4 sections
  1. Growth
  2. Style
  3. Content
  4. Fonts
JSON
{"type":"text","content":"Ship faster","grow":"fixed-width","w":{"mode":"fill"},
"style":{"font":"Inter","size":32,"weight":700,"lineHeight":1.2,"letterSpacing":-0.5}}

Growth

growWidthHeightUse for
auto (default)from contentfrom contentlabels, buttons, one-liners. Omit w/h
fixed-widthwfrom contentparagraphs, anything that wraps
fixedwhfixed boxes. Overflow is cut only by an ancestor's clip
auto (default)
Width from content
Height from content
Use for labels, buttons, one-liners. Omit w/h
fixed-width
Width w
Height from content
Use for paragraphs, anything that wraps
fixed
Width w
Height h
Use for fixed boxes. Overflow is cut only by an ancestor's clip

Style

font (family), size px, weight 1–1000, italic, lineHeight (a multiplier like 1.4, or {"px":24}), letterSpacing px, align (left center right justify), valign (top middle bottom), decoration (["underline"], ["strike"]), case (upper lower title, applied at render time, so content keeps what was typed), href.

The text color is fill. With no fill, text uses the variable text/default if the document defines one, else black. So you rarely need to set it, and you should not set fill: [].

Content

  • content is literal. "$49" is just text. To bind a string variable use {"$ref":"copy/cta"}.
  • Line breaks: \n inside the string.
  • Mixed styles in one node (feature text/runs, declared for you when an op writes spans): "content":[{"text":"Save "},{"text":"40%","style":{"weight":700},"fill":"#E5484D"}]. A span's style applies on top of the node's style (font, size, weight, italic, lineHeight, letterSpacing, decoration, case, features); its fill is a color or a color binding for that span only; its href links that span. align and valign stay on the node. Merge neighbouring spans that look the same, and write a plain string when every span would be equal.
  • Typography tokens (feature tokens/composite): "style":{"typography":{"$ref":"heading/l"}}. Inline fields override the token.

Fonts

kimo_assets {action:"check_font", family} tells you whether a family is available. If it isn't, the text renders in a fallback face and measures differently. Use common families (Inter, Roboto, system stacks) unless the document already uses others.