Design System
VamoraUI
One visual language for the OS, the website, and every app — built to adapt on its own across phone, tablet, and desktop.
Why it exists
Most software redesigns itself per platform. VamoraUI is one set of rules for color, shape, and spacing instead — so every surface stays recognizably Vamora, and density adapts to screen size on its own.
One Interface, Every Screen
Same component, same code path. VamoraUI decides what to show, not what to rebuild.
Blur Over Color, Make It Yours
The frosted-glass card below is sitting on a photo right now — proof the effect works on anything, not just flat backgrounds. Nothing here is a fixed rulebook, though: drag the controls and watch it change.
Always at the Bottom
One floating element, anchored to the bottom of every screen — a search bar for browsing, a pill nav for moving between sections. Same shape, same blur, same shadow either way.
Search bar
Full-width pill, floats above content. Used on screens where finding something is the main action — like this blog.
Pill navigation
Wide pill, not a circle — easier to tap and room for the active state to breathe. Try it, it reacts on hover and press just like the real component.
Core Principles
Zinc, always
No competing grays. Every surface, border, and shadow draws from the same zinc scale, in both light and dark mode.
rounded-3xl as default
Cards, panels, and containers round generously. Sharp corners are reserved for things that need to feel structural, not soft.
Frosted glass, not flat
Floating elements — nav bars, the search bar, overlays — use backdrop-blur-xl over translucent zinc, so content always breathes underneath.
rounded-full controls
Buttons, pills, and tags are fully rounded. It's the fastest visual signal that something is interactive.
lucide-react only
One icon family, one stroke width, everywhere. No mixing icon sets between the OS and the website.
Automatic, not manual
Dark mode follows the system. Layout follows the viewport. The person using Vamora should never have to configure how it looks.
Palette
Light mode leans on the low end of the zinc scale for backgrounds and the high end for text. Dark mode inverts it — true black backgrounds, not dark gray, with zinc-100 text.
Type
Headline
3xl–4xl bold, used once per page for the title.
Section title
lg semibold, marks the start of a card or block.
Body text
sm regular, used for descriptions and paragraphs.
Eyebrow
xs uppercase tracked, labels a section above its title.
How It Adapts
Phone: single column, bottom navigation, the fewest controls needed to act.
Tablet: two-column density, navigation grows just enough to use the extra width.
Desktop: full grid density, top navigation, room for everything at once.