shapes
The non-typographic elements of the system. Hairline rules, corner crops, geometric sigils, dot grids — the marks between content. Each shape exists because space alone can't carry every separation; when it can, the shape doesn't appear.
rules
One pixel of border color. The default hairline divides two thoughts inside the same surface. The mark-caret variant adds a short yellow segment at the leftmost 24px — use it once per page, on the section the page is actually about.
<hr class="rule">
<hr class="rule mark-caret">
<hr class="rule thick">vertical rule
Inline divider. Use sparingly — only when two adjacent items don't fit on the type baseline.
<span class="vrule"></span>corner crops
Bracket marks at the four corners of a container — registration marks for the document. They imply a frame without rendering it. Use the mark variant exactly once per view, on the section the page exists for.
shipped · PR #19
design · #59
<div class="crop">
<div class="bl"></div><div class="br"></div>
content
</div>sigils
Small geometric marks used as section anchors, list bullets, status pips, and inline labels. They are the only iconography the system ships. If a glyph isn't on this list, find one that is.
<div class="sigil box"></div>
<div class="sigil plus">+</div>
<div class="sigil dot dot-mark"></div>dot grid
Background pattern. Visualizes the spatial grid the layout sits on. Used sparingly — on a hero, an empty state, or a section that wants to admit it's a canvas. The default tile is 16px; the tight variant is 8px.
<div class="dot-grid"></div>
<div class="dot-grid tight"></div>frame
A full-perimeter hairline. Use when a container needs to be read as a unit and the type alone isn't enough. The dashed variant signals provisional content — a draft, a stub, a TBD.
<div class="frame"></div>
<div class="frame mark"></div>
<div class="frame dashed"></div>mark accent
Highlight a word inside a sentence. Three variants: an underline (the default), an overline, and a soft block. One mark per paragraph; the mark drops to zero if the paragraph is already the most important thing on the page.
Switchboard is the chain-agnostic and token-agnostic payment substrate for agents.
Settlement finalizes on LUX regardless of which chain the agents transacted on.
PQ envelope is mandatory, not optional, on the canonical receipt format.
<p class="accent-under">text with <em>mark</em> inside</p>
<p class="accent-over">text with <em>mark</em> inside</p>
<p class="accent-block">text with <em>mark</em> inside</p>principles
No icons. The sigil set is the icon set. If a concept needs a glyph and a sigil doesn't fit, write the word.
No decoration. Every shape carries information: a separation, a boundary, an anchor, a status. Shapes that decorate are shapes that lie.
Hairline. All borders are 1px. The thick rule is 2px and exists for the one place per page where 1px disappears.