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)