WARDROBE / HYPER
HYPER.
Acid yellow. Brown borders. CAPS forever.
Stop building purple-gradient apps.
TOKENS.
Colors
acid yellow · #EFFF71
deep brown · #3A1E1E
pure white · #FFFFFF
pastel pink · #FFC1E3
pastel blue · #BCEFFF
pastel green · #C3FF8B
red flag · #FF4B4B
Typography
IS A TRACK.
Hyper is loud on purpose. The body copy is Georgia — old-school serif — so the display can scream while the reading stays grown-up. Don't replace it with Inter.
Radius & shadow
COMPONENTS.
Button.
Pill-shaped, CAPS forever. Hard offset shadow when you press.
Input.
White surface, brown border, focus shadows hard. Optional numeric badge.
Textarea.
Same energy as Input, just taller. Body font for what you write.
Select.
Caps display value, custom chevron, border-color matches everything.
Card.
Pastel pink, blue, green, or white. Numeric badge lapping the corner.
Badge.
Inline pill. Outline by default, brown-filled for live status.
Dialog.
Centered, hard shadow, brown veil. Escape to close. Focus trapped inside.
Tabs.
Segmented control. Active tab fills brown. Arrow keys move you.
Switch.
Pill track, brown thumb. Flips to brown-filled with acid thumb.
Toast.
Slides in from below. Auto-dismisses after 4s. Success swaps to green.
INSTALL.
One paste, one prompt, your project is wearing Hyper. No npm install, no config files, no purple gradients.
BIG GREEN INSTALL BUTTON →MCP COMING SOON.
Wardrobe MCP server is in the works. Soon you'll just say "install hyper" to your AI and it'll be done. Sign up below for the drop.
SEE IT LIVE.
Marathon Club — a fictional running club using Hyper end-to-end.