Design Sandbox
UI Preview for V2 modernization
Pick a theme mode below to compare direction quickly. This preview is scoped to this page only and uses production component classes.
Theme Chooser
Choose a style direction
Current mode: Brand Classic
Navbar Concepts
Logo + font + color combinations
These are side-by-side navbar mockups using your PNG logo and Google fonts so you can choose a final header direction.
Layout Behavior
How this mode structures information
Brand Classic: balanced hierarchy
Best for broad audiences. Hero context, cards, and table surfaces keep equal visual weight so pages feel familiar and polished.
Collector Terminal: data-first density
Best for active collectors. Filters and sortable tables dominate, typography tightens, and cards compress to reduce scrolling.
Comic Casual: editorial storytelling
Best for casual visitors. Larger type, roomier spacing, and narrative cards make collection pages feel more like rich info pages than dashboards.
Buttons + Pills
Actions and state language
Collection Card
Power Stones
Example card copy for summary-heavy views. This style should feel premium while still readable for data-first interfaces.
1,248 active items
Highlight Variant
Operator Insight
Use this card treatment for areas where you want more visual prominence such as featured collections, roadmap callouts, or internal controls.
Data Table
Sortable-table visual baseline
| Collection | Indexed | Drop Date | Last Indexed | Status |
|---|---|---|---|---|
| Power Stones | 1248 | 2025-03-01 | 2026-05-04T18:32:00Z | |
| Mad Lads | 987 | 2024-11-13 | 2026-05-01T11:14:00Z |
Form Controls
Creator and operator input patterns
Spacing + Typography
Text hierarchy
Body text should prioritize scanning and rhythm. Collector pages can be information-dense while still feeling premium by keeping clear spacing blocks and consistent type scale.
- Use uppercase eyebrows for section grouping
- Reserve large display headings for route hero sections
- Keep table labels and pills concise to reduce visual noise