Design Systems Made Simple

Build consistent, beautiful interfaces with our component library and design tokens.

Get Started

Color Tokens

Semantic color system with light and dark mode support out of the box.

#667eea

Typography Scale

Harmonious type system with responsive sizes and weights.

Spacing Grid

Consistent 4px-based spacing scale for predictable layouts everywhere.

5
X-IPE Reference
Phase 1 — Core
Phase 2 — Advanced
Collected References
3 colors 2 elements
#667eea .card-icon
#764ba2 .hero
#4facfe .card-icon
div .cards > .card:nth-child(2) 340×180
div .cards > .card:nth-child(1) 340×180
Hover items to highlight on page
Drag to move toolbar
FEATURE-030-B v3 · CR-001 Injected Reference Toolbar v3 — CR-001 enhancements: eyedropper cursor on color picker, expandable color/element lists with hover-to-highlight, remove buttons, post-send reset. Hover list items to see page highlighting.