Design systems
Pick a system to restyle every component on this page. The components are unchanged; only the tokens behind them switch.
Cortexcn's own tokens: square corners, neutral surfaces, Geist.
Buttons and toggles
Hover and focus them with the mouse and keyboard; disabled and invalid are shown fixed.
variants
sizes
states
toggles
Badges
variants
defaultsecondaryoutlinedestructiveghost
Inputs and selection
Tabs and accordion
The default tabs follow the system: segmented or underlined.
Dividers, trigger weight, spacing, and the chevron turn all come from the system.
Cards and alerts
Heads up
A default alert on the card surface.
Payment failed
Update your card to continue.
Overlays and menus
Open each one to see the overlay, menu, and popover surfaces.
Color, type, and elevation
background
foreground
card
primary
primary-foreground
secondary
muted
muted-foreground
accent
border
input
ring
destructive
chart-1
chart-2
chart-3
Display type, set in the system
Body copy uses the system's body face, weight, and tracking. The quick brown fox jumps over the lazy dog.
const theme = "mono face";
scale: 12 / 14 / 16 / 18 / 24 / 30 / 48 px
shadow-xs
shadow-md
shadow-lg