Color Palette
+
+
+ Brand Colors
+
+
+
+
+
+ Primary
+
+
+
+ Accent
+
+
+
+ Success
+
+
+
+ Warning
+
+
+
+ Danger
+ Typography
+
+
+
+
+ Heading 1 - Hero Title
+Heading 2 - Section Title
+Heading 3 - Subsection
+Heading 4 - Component Title
+Bold text and regular paragraph text with good readability and proper line spacing for optimal user experience.
+Small text for captions and metadata information.
+Buttons
+
+
+
+
+
+ Primary Buttons
+
+
+
+
+
+
+
+
+ Secondary Buttons
+
+
+
+
+
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+ Badges & Status Indicators
+
+
+
+
+
+ Event Status Badges
+
+ Available
+ Limited
+ Sold Out
+ ★ Featured
+ VIP
+
+
+
+ Notification Badges
+
+
+
+
+ 3
+
+
+
+
+
+ Cards
+
+
+
+
+
+
+
+ Basic Card
+Simple card with header and content
+
+
+ This is a basic card component that can be used for various content types. It includes proper spacing and hover effects.
+ +
+ 
+
+
+
+
+
+
+ ★ Featured
+ Available
+
+ Networking Event
+Join professionals for an evening of networking and insights.
+
+ €35
+
+
+
+
+ User Profile Card
+
+
+
+ 
+
+
+
+
+
+
+ Alex Johnson
+Senior Developer
+ +
+
+
+
+ Form Elements
+
+
+
+
+
+ Input Fields
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Form Validation
+
+
+
+
+
+
+
+
+
+ Email is valid
+
+
+
+
+
+
+
+
+ Password must be at least 8 characters
+
+
+
+
+
+
+
+ Please complete phone number
+
+ Notifications & Alerts
+
+
+
+
+
+
+ Event successfully created! Your attendees will receive confirmation emails.
+
+
+
+
+ Only 5 spots remaining for this event. Book quickly to secure your place.
+
+
+
+
+ Payment failed. Please check your card details and try again.
+
+
+
+
+ New features available! Check out our improved event discovery tools.
+
+ Navigation & Tabs
+
+
+ Tab Navigation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You have 3 upcoming events
+Next event starts in 2 days
+
+
+
+
+
+
+
+
+ 12 events attended
+Great networking history!
+
+
+
+
+
+
+
+
+ 5 saved events
+Events you're interested in
+
+
+
+
+
+
+
+ 2 events hosting
+Active event host
+Interactive Elements
+
+
+
+
+
+ Tooltips
+
+
+
+
+
+ This is a helpful tooltip
+
+
+
+ Configure your preferences
+
+
+
+ Progress Indicators
+
+
+
+
+
+
+ Event Setup
+ 75%
+
+
+
+
+
+ Registrations
+ 45/60
+
+
+
+
+
+ Loading States
+
+
+
+
+
+
+
+
+
+
+
+ Avatar Groups
+
+
+
+
+
+ Event Attendees
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+ JD
+ +5
+
+
+ Small Avatars
+
+
+ AB
+ CD
+ EF
+ Data Display
+
+
+
+
+
+ Price Tags
+
+
+ €15
+ €35
+ €55
+
+ €60
+ €45
+
+
+
+
+ Ratings
+
+
+
+
+
+
+
+
+
+
+ Statistics
+
+
+
+
+ 42
+ Events
+
+
+ 1.2K
+ Attendees
+
+
+ Key-Value Lists
+
+
+
+ Date
+ March 15, 2024
+
+
+ Duration
+ 3 hours
+
+
+ Capacity
+ 50 people
+
+
+ Price
+ €35
+
+ Spacing System
+
+
+
+
+
+ --space-1 (4px)
+
+
+
+ --space-2 (8px)
+
+
+
+ --space-4 (16px)
+
+
+
+ --space-8 (32px)
+
+
+
+ --space-12 (48px)
+
+
+
+ --space-16 (64px)
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+