dotgui v0.2
Spec Reference
Every tag, property, and convention in the dotgui format. Pick an item from the sidebar — or a card below — to open its full reference. Beyond the elements, the spec also defines the role vocabulary (53 recognized UI structures that make files self-describing) and the CCAC quality model.
Format
A .gui file is a ZIP package. The markup, design tokens, font declarations, binary assets, and a preview thumbnail all live in one self-contained file.
Open reference →The root element is a document envelope — never rendered. Direct children are metadata blocks or exactly one root layout node. Metadata always precedes the layout root.
Open reference →The first layout tag under <gui> defines the canvas. Two patterns cover all cases.
Open reference →Metadata
Design system primitives. Referenced anywhere in the tree with $name. Figma Variables resolve to <tokens> entries. Only tokens used in the exported tree are emitted.
Open reference →Named text styles from the design system. Each <text-style> captures a full typography definition. Text nodes reference a style by name — individual font attrs are omitted when a style is applied.
Open reference →Font declarations for the renderer to load Google Fonts or fall back gracefully. Text nodes still carry their own font-family and font-weight — the fonts block makes those families resolvable.
Open reference →Images and vector artwork are embedded in assets/ and referenced inline via src — no declaration block, no $id indirection.
Open reference →A <components> block at the top of the document holds all component definitions. Instances reference a component by id and pass prop overrides as attributes.
Open reference →Layout
Fixed container. Children are absolutely positioned with x and y attributes. Maps to a Figma frame without auto-layout.
Open reference →<row> is horizontal, <col> is vertical. <stack> requires an explicit direction. Children are flow-positioned.
Open reference →Two modes determined by which attrs are present. Track grid (columns/rows): parent declares track sizes, children place themselves. Unit grid: fixed coordinate canvas.
Open reference →No layout behavior. Children are absolutely positioned relative to the group origin. Maps to a Figma group node.
Open reference →Content
Single-style text is self-closing with a value attribute. Mixed-style text has <segment> children — each segment overrides font attrs for its run.
Open reference →Handles both raster and vector assets. The renderer detects format from the file extension at render time — the author only writes src, w, and h.
Open reference →Geometry
Sugar for a childless <frame>. Signals decorative intent — no layout children. w and h are required.
Open reference →Sugar for <frame radius="9999">. Full-radius rendering is the contract — radius is not an attribute on <ellipse>. Equal dimensions produce a circle.
Open reference →Sugar for a thin frame used as a visual divider. Default: horizontal, thickness="1", w="fill".
Open reference →Appearance
A non-layout child that describes the parent's complete paint and effect stack. Used when a node has multiple fills, complex borders, or multiple effects.
Open reference →The fill attribute accepts hex colors, gradient functions, and token references. Alpha is encoded as the last byte of an 8-digit hex: #1C1C1ECC.
Open reference →Visual attributes available on all layout, content, and geometry nodes.
Open reference →