A comprehensive guide to our visual language, components, and design principles. Built for luxury, engineered for performance.
Our color system is built around luxury and maritime themes with carefully calibrated opacity levels.
Our typography scale uses system fonts for optimal performance and readability.
We use Lucide icons throughout the system for consistency and clarity.
Button variants for different contexts and hierarchies.
Various card styles used throughout the application.
Semi-transparent card with backdrop blur effect. Primary container style.
glass-card p-6 rounded-2xlCard with subtle gradient background and border.
bg-gradient-to-br from-white/5 to-white/[0.02]Interactive card with hover state. Try hovering over me!
hover:border-platinum-400/30Colored accent card for highlighting features or important content.
from-purple-500/10 border-purple-500/20Status indicators and category labels.
Status messages and notifications.
Your changes have been saved successfully.
New features are available. Check out the latest updates.
Your certification expires in 30 days. Please renew.
Failed to save changes. Please try again.
Using the reusable Alert component with variants.
Inputs, labels, and form controls.
Horizontal Separator
Separator with Label
Button variants for third-party authentication.
Modal dialogs for important user interactions.
Complete login and registration forms with social auth.
Sign in to your account to continue
Get started with YachtOS today
Consistent spacing scale based on Tailwind defaults.
Elevation and visual effects.
shadow-luxury-smshadow-luxury-lgshadow-gold