Color Themes
Explore Hypandra's design system with live examples of our color themes.
Explore Hypandra's design system with live examples of our color themes, CSS variables, and component styling. This interactive showcase demonstrates how our light and dark themes work across different UI components, making it easy for collaborators to understand and verify the visual consistency of our design system.
This box uses bg-background class
Mode: Light
Light: #F9F0EB
Dark: #236F9F
This box uses bg-card class
Should be slightly different from background
Light: #F7CBAB
Dark: #173A4F
This box uses bg-hypandra-orange class
Should be Hypandra orange
Light & Dark: #FE7C25
Buttons
Our default button variant uses Hypandra Orange for background with black text and hover states. Below are common variants and sizes, followed by app-specific buttons like the Feedback button.
App buttons
Note: The FAB (Floating Action Button) appears at the bottom-right due to its fixed positioning, matching in-app behavior.
Interactive Elements
AlertPopoverButton Component
Generic alert popover button component displayed in light and dark containers.
Light Container
Dark Container
Streaming Indicators
Hypandra Orange Button Variant
With Progress Count
No Progress Count
Pulse Animation
Logo
Light background
Dark background
CSS Variables Status
| Variable | Current Value | Expected (Light) | Status |
|---|