Style & Component Guide
Living gallery of CloudCreate.ai UI tokens and components—use it to keep creative tools visually consistent.
When you add buttons, cards, inputs, progress patterns, or helper classes, extend this gallery so every tool page stays visually aligned.
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.