UI Framework v2.0
Executing
178.5K tokens · $3.01
12 / 18
Layout System
Spatial primitives & responsive grid infrastructure
← spacing-scale → layout.css
3 / 5
47.4K tokens · $0.28
Phase 1 Parallel
Grid primitives Sonnet
12-column CSS grid with named areas and auto-flow
14.2K $0.11
Flex utilities Haiku
Responsive flex-wrap helpers with gap tokens
8.1K $0.01
Stack component Haiku
Vertical/horizontal stack with spacing scale
6.4K $0.01
Phase 2 Sequential
Container queries Sonnet
Responsive primitives using container-type: inline-size
18.7K $0.15
Phase 3 Blocked
Masonry layout Sonnet ←Grid primitives
CSS-only masonry with column-count fallback. Requires grid system.
—
Component Library
Reusable UI building blocks with variant APIs
← tokens.css ← layout.css → components.css
2 / 4
45.0K tokens · $0.96
Phase 1 Parallel
Button system Haiku
Primary, secondary, ghost, danger variants with size tokens
9.3K $0.01
Input fields Haiku
Text, select, textarea with validation states
11.6K $0.01
Phase 2 Sequential
Modal dialog Opus ←Theme: Tokens
Overlay with focus trap, size variants, and nested scroll
24.1K $0.94
Phase 3 Blocked
Data table Sonnet ←Grid primitives
Sortable, filterable table with sticky header. Needs grid system.
—
Theme Engine
Design token pipeline & multi-theme switching
← brand-spec → tokens.css ✓
4 / 4
46.0K tokens · $0.91
Phase 1 Parallel
Design tokens Opus
CSS custom properties for color, space, radius, shadow
18.4K $0.72
Light mode Haiku
Default token set tuned for WCAG AA contrast
5.2K $0.01
Phase 2 Sequential
Dark mode Sonnet
Inverted token set with automatic media-query switching
12.8K $0.10
High contrast Sonnet
Accessibility-first palette meeting WCAG AAA
9.6K $0.08
Animation Kit
Motion language with easing, spring & gesture presets
← tokens.css → motion.css
1 / 3
26.1K tokens · $0.84
Phase 1 Parallel
Easing curves Haiku
Cubic-bezier presets for enter, exit, and emphasis
4.8K $0.01
Phase 2 Sequential
Spring physics Opus ←Theme: Tokens
CSS spring() approximation with configurable damping
21.3K $0.83
Phase 3 Blocked
Gesture responses Sonnet ←Components: Modal
Scroll-linked and hover-triggered motion. Needs modal transitions.
—
Icon Set
Stroke-based SVG icon system with size tokens
← brand-spec → icons.svg ✓
2 / 2
14.0K tokens · $0.02
Phase 1 Parallel
Core icon set Haiku
48 essential UI icons at 20px, stroke-based SVG
7.9K $0.01
Custom glyphs Haiku
Brand-specific icons for product features and status
6.1K $0.01