🐾 Design system gallery

→ Live component catalog — the revived React lab (badges, buttons, cards, color, calendar, data-table, maps, recipes… with light/dark/system theming), running on the real design-system components. Below: 24 interactive prototypes (the DesignSync hi-fi mockups — the "beautiful options") and 63 component preview cards.

Hi-fi prototypes (24)

• Wave1 Admin March Hub archive/claude-code-handoff/designs
• Wave1 Events archive/claude-code-handoff/designs
• Wave1 March HQ Home archive/claude-code-handoff/designs
• Wave1 March Participant Page archive/claude-code-handoff/designs
• Wave1 Nav Shell archive/claude-code-handoff/designs
• Wave2 Teams archive/claude-code-handoff/designs
• Wave3 Actions archive/claude-code-handoff/designs
• Wave3 Committee archive/claude-code-handoff/designs
• Wave4 Discussion archive/claude-code-handoff/designs
• Wave4 People + Resources archive/claude-code-handoff/designs
• Wave5 Profile + Auth archive/claude-code-handoff/designs
• Wave6 Admin Core archive/claude-code-handoff/designs
• Wave6 Admin Tail archive/claude-code-handoff/designs
• Wave7 Email System archive/claude-code-handoff/designs
• Wave8 BeagleBot Admin Console archive/claude-code-handoff/designs
• Wave8 Comms + Composer archive/claude-code-handoff/designs
• Wave8 Kiosk + BeagleBot archive/claude-code-handoff/designs
• Wave8 Onboarding + Organize archive/claude-code-handoff/designs
• Wave8 States + Notifications archive/claude-code-handoff/designs
• Wireframes archive/claude-code-handoff/designs
• Admin Hi-fi archive/design_handoff_portal_overhaul
• Portal Hi-fi archive/design_handoff_portal_overhaul
• Portal Mobile Hi-fi archive/design_handoff_portal_overhaul
• Portal Wireframes archive/design_handoff_portal_overhaul

Component preview cards (63)

• calendar-mini archive/design-cards/components
• calendar-month archive/design-cards/components
• calendar-week archive/design-cards/components
• data-key-value archive/design-cards/components
• data-metrics archive/design-cards/components
• data-table-basic archive/design-cards/components
• data-table-pagination archive/design-cards/components
• data-table-selection-sort archive/design-cards/components
• data-table-toolbar archive/design-cards/components
• datetime-picker archive/design-cards/components
• datetime-range archive/design-cards/components
• editor-content archive/design-cards/components
• editor-toolbar archive/design-cards/components
• entity-picker archive/design-cards/components
• events-card archive/design-cards/components
• events-hero archive/design-cards/components
• events-list archive/design-cards/components
• events-rsvp archive/design-cards/components
• explainer-panel archive/design-cards/components
• explainer-steps archive/design-cards/components
• feedback-empty archive/design-cards/components
• feedback-loading archive/design-cards/components
• feedback-progress archive/design-cards/components
• filters-bar archive/design-cards/components
• filters-panel archive/design-cards/components
• forms-advanced-fields archive/design-cards/components
• forms-multistep archive/design-cards/components
• lists-activity archive/design-cards/components
• lists-definition archive/design-cards/components
• lists-rows archive/design-cards/components
• nav-breadcrumbs archive/design-cards/components
• nav-sidebar archive/design-cards/components
• nav-tabs archive/design-cards/components
• overlays-menu archive/design-cards/components
• overlays-popover-tooltip archive/design-cards/components
• person-avatar archive/design-cards/components
• person-card archive/design-cards/components
• person-roster-row archive/design-cards/components
• political-campaign archive/design-cards/components
• political-commitments archive/design-cards/components
• political-officials archive/design-cards/components
• shell-app archive/design-cards/components
• shell-split-rail archive/design-cards/components
• split-view archive/design-cards/components
• tag-picker archive/design-cards/components
• teaching-callout archive/design-cards/components
• teaching-coachmark archive/design-cards/components
• tree-filebrowser archive/design-cards/components
• tree-view archive/design-cards/components
• workflow-kanban archive/design-cards/components
• workflow-status archive/design-cards/components
• workflow-stepper archive/design-cards/components
• color-accent-semantic archive/design-cards/foundations
• color-neutral-ramp archive/design-cards/foundations
• color-status archive/design-cards/foundations
• surfaces-document archive/design-cards/foundations
• surfaces-modal archive/design-cards/foundations
• surfaces-sheet archive/design-cards/foundations
• tokens-elevation-motion archive/design-cards/foundations
• tokens-radius-spacing archive/design-cards/foundations
• communication-inbox archive/design-cards/recipes
• dashboard archive/design-cards/recipes
• workflow-board archive/design-cards/recipes