Core layout tokens. Compose with gap modifiers: sm md lg xl
Surface tokens with elevation and style modifiers.
Base surface with hover border transition.
Medium shadow for depth.
Large shadow for prominence.
Gold border + glow shadow.
Subtle background, minimal border.
Transparent background and border.
Transparent bg with visible border.
Frosted glass with backdrop blur.
Larger padding, XL radius. For major content areas.
Subheading — secondary title weight
Body text — the default reading weight. Optimized for long-form content at .9rem with 1.7 line-height.
Inline code token and block:
// Block code
const ui = document.querySelector('[ui~="card"]');
console.log(ui.getAttribute('ui'));
Scroll down to see reveal animations trigger.
Slides up from below.
Slides in from the left.
Slides in from the right.
Drops down from above.
Pure opacity, no movement.
CEDUIX uses a single ui attribute with a 36-word vocabulary. Every component is composed from these tokens — max 4 per element.
<div ui="card elevated">
<h3 ui="heading sm">Title</h3>
<p ui="body">Content</p>
</div>CEDUIX is LLM-optimal: any language model can generate correct UI using just the vocabulary list.
color-mix() derivativeslight-dark() for automatic theme support@layer for clean cascade controlRead the full spec at CEDUIX_UI.md.
| Token | Type | Description |
|---|---|---|
| card | Surface | Bordered container with hover effect |
| stack | Layout | Vertical flex column |
| button | Interactive | Action element with variants |
| heading | Typography | Title text with size modifiers |
This text is very long and will be truncated with an ellipsis when it overflows the container boundaries.