Sigil Token Architecture
Sigil makes a single file -
DESIGN.md- the agent-editable source of truth for an entire visual system: ~519 tokens across 33 categories that compile to CSS variables, a Tailwind v4@theme, and W3C design-token JSON.
Design Position
| Field | Value |
|---|---|
| Design family | Identity, tokens, and visual grammar |
| Use when | Use when visual identity, tokens, color, type, or art direction depends on Sigil Token Architecture. |
| System map | Design System Map |
| Proof path | Token, DESIGN.md, or visual-spec diff plus light/dark rendered checks when applicable. |
This is the mechanism that makes "constraints over context" real: components don't own their appearance, the token spec does. Source: reticle-ui/SPEC.md § 1.1
Three-layer tokens
- Primitive - raw values.
- Semantic -
--s-*variables that express intent (--s-primary,--s-radius-button). - Component-scoped - per-component tokens that read from the semantic layer.
Components reference semantic/component tokens, never primitives directly, so a single spec change cascades everywhere. Source: reticle-ui/SPEC.md § 1.1
Scale and the Sigil grid
The current system ships 519 tokens, 33 categories, 46 presets, and 350+ components (545
exports across 258 files). One distinctive category is the sigil grid itself
(cross-arm, rail-gap, gutter-visible) - the cross-mark/rail aesthetic is tokenized, not
hardcoded. Source: reticle-ui/STATS_MANIFEST.md § Current Values; DESIGN.md § Tokens - Sigil Grid
Reticle grammar tokens
Reticle now needs tokens for line topology, not only appearance. Line topology means the system records which layer owns each visible hairline: page grid, spacer, frame, table, chart, or child cell. This is the token-level version of "avoid double lines." Source: Reticle Design System; dedalus-labs/dedalus PR #2745 ReticlePageGrid.tsx; Agent-Machines ReticleSpacer.tsx
The Reticle subset should include:
| Token group | Examples | Why it matters |
|---|---|---|
| Layout | contentMax, railOffset, railGap, gridCell |
Page rails and gutters stay consistent across sections. |
| Hairline | hairline, border, line, rail, grid, cross |
Boundaries have stable visual weight and ownership. |
| Geometry | crossArm, crossStroke, radius |
Cross marks and square frames stay measurable. |
| Hatch | hatchPitch, hatchAngleLeft, hatchAngleRight, hatchOpacity |
Diagonal fills become structural primitives, not decorative noise. |
| Spacer | spacerHeight, spacerHatchHeight, spacerCrosses |
Two-line full-width spacers can be rendered from spec. |
| Controls | controlHeight, pressScale, hoverDuration |
Buttons, selects, segmented controls, and copy buttons share behavior. |
Agent-authored Reticle UI should be generated from these constraints before component code. The agent should decide: "which primitive owns this line?" before adding any border-* class. Source: dedalus-labs/dedalus PR #2745 DashboardHero.tsx, ContainersTable.tsx, QuickstartStep.tsx; Agent-Machines web/components/reticle/*
Pipeline and CLI
DESIGN.md compiles to CSS variables + a Tailwind v4 @theme block + W3C JSON; sigil design sync
refreshes the compiled sections in place. The CLI surface: design generate|compile|sync|extract,
inspire, adapter, doctor, and create-sigil-app. Twelve agent skills (tokens, preset,
component, layout, playbook, migration, polish, design, messaging, audit, scene, cli) teach an
agent to operate the system. Source: reticle-ui/README.md § DESIGN.md Format; packages/cli/README.md; AGENTS.md
Relationship
This page is the token mechanism; Sigil UI is the project, Reticle Design System is the Dedalus-era component layer, and Constraints over Context is the philosophy. It supersedes the older "259 tokens / 16 categories" figures still found in some pages.
Timeline
- 2026-07-01 | Design category refresh added this page to the Identity, tokens, and visual grammar family, linked it to Design System Map, and kept it standalone because Sigil Token Architecture owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-07-01 | Added Reticle grammar tokens from Dedalus PR #2745 and Agent Machines: line topology, content rails, spacer bands, diagonal hatching, square controls, and ownership-before-border generation. Source: dedalus-labs/dedalus PR #2745; Agent-Machines
web/components/reticle/* - 2026-05-31 | Page created from the Reticle/Sigil
SPEC.md,DESIGN.md,STATS_MANIFEST.md, and CLI. Captured the three-layer token model, the 519/33/46/350+ stats, the sigil-grid token category, and the DESIGN.md → CSS/Tailwind/JSON compile + CLI. Source: reticle-ui, 2026-05-31