Style & Component Guide
Preview shared UI elements. Every new global component or style token must be showcased here.
Use this page to verify the current design system. When adding buttons, cards, inputs, progress indicators, or helper classes, append a demo here for quick regression checks.
Buttons
Utility Controls
Control buttons (used in toolbars)
100%
SliderWithInput
Progress & Feedback
Loading document
Cards & Surfaces
Card
δ½Ώη¨ .card + η»δΈ paddingγ
Drop zone example
Click or drop files to interact
Usage Notes
- Buttons inherit from .btn. Variants (.preset-filled-primary-500, .preset-outlined-surface-200-800, .btn-ghost, .control-btn) are showcased below.
- Cards use .card with CCW tokens. Drop zones layer dashed borders on top of cards.
- Any new shared component must be demoed here along with brief guidance.