Main content
Sidebar is auto-width. Main fills remaining space.
Sidebar is auto-width. Main fills remaining space.
Default surface
Shadow depth
High shadow
Gold border + glow
Subtle bg
Transparent
Border only
Frosted blur
Larger padding, XL radius. For major content areas.
Subheading — secondary title weight
Body text — default reading weight. 0.9rem, 1.7 line-height, 300 weight.
Inline code token and block:
const el = document.querySelector('[ui~="card"]');
Overview — first tab, selected by default.
Details — switch without JavaScript.
Settings — pure CSS via :has() selector.
96-token LLM-optimal UI framework. One CSS file, zero dependencies.
One ui attribute, max 4 tokens. LLMs generate correct UI first-pass.
Built-in via color-scheme: light dark + light-dark().
Native [popover] with @starting-style entry. No JS toggle.
| Name | Protocol | Value | Min | Max | Address |
|---|---|---|---|---|---|
| Zone 1 — Ground Floor | |||||
| GT1 Supply | BACnet | 21.4 | 18.2 | 23.1 | 1:3:AI:2 |
| GT2 Return | BACnet | 19.8 | 17.5 | 21.0 | 1:3:AI:3 |
| Zone 2 — Office Wing | |||||
| SV1 Valve | Modbus | 72 % | 0 % | 100 % | 2:1:HR:40 |
| GT3 Offline | Offline | — | — | — | 2:1:AI:5 |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Slides up
From left
From right
Opacity only
This text is long and clamped to 2 lines. Overflow hidden with ellipsis. Resize to see it change.
One ui attribute, 96 tokens, max 4 per element.
<div ui="card elevated">
<h3 ui="heading sm">Title</h3>
</div>Any LLM generates correct UI from just the vocabulary list.
color-mix()This text overflows and gets an ellipsis at the boundary.
Run in F12 console or via evaluate_script to verify every token.
// Scan → spatial manifest (all elements with zones)
CeduixCanvas.scan()
// YAML manifest for LLM context injection
CeduixCanvas.manifest()
// Visual overlay toggle
CeduixCanvas.toggle()
// Verify all fonts are Inter
document.querySelectorAll('[ui]').forEach(el => {
const f = getComputedStyle(el).fontFamily;
if (!f.includes('Inter')) console.warn(el, f);
});
// Verify :disabled styling
const btn = document.querySelector('button[disabled]');
console.log('disabled opacity:', getComputedStyle(btn).opacity);
// Verify scan count
console.log(CeduixCanvas.scan().length + ' elements');
// Full automated verify
CeduixCanvas.verify()