Back to Home
Serenity
Serenity Design System
A comprehensive guide to our design language, components, and patterns.
Colors
Primary (Emerald)
emerald-50bg-emerald-50
emerald-100bg-emerald-100
emerald-200bg-emerald-200
emerald-300bg-emerald-300
emerald-400bg-emerald-400
emerald-500bg-emerald-500
emerald-600bg-emerald-600
emerald-700bg-emerald-700
emerald-800bg-emerald-800
emerald-900bg-emerald-900
Secondary (Teal)
teal-50bg-teal-50
teal-100bg-teal-100
teal-200bg-teal-200
teal-300bg-teal-300
teal-400bg-teal-400
teal-500bg-teal-500
teal-600bg-teal-600
teal-700bg-teal-700
teal-800bg-teal-800
teal-900bg-teal-900
Typography
Heading 1
heading-1Heading 2
heading-2Heading 3
heading-3Large Body Text
body-largeBody Text
bodyCaption Text
captionButtons
Cards
Basic Card
A simple card component with basic styling.
Hover Card
A card that animates on hover.
Glass Card
A card with glassmorphism effect.
Image Panels
Gradient Overlay
Text overlay with gradient background
Blur Overlay
Text overlay with blur effect
Form Elements
Icons
Legal Content
Example Legal Section
This demonstrates the styling for legal content such as Terms & Conditions and Privacy Policy.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- List item one with detailed information
- List item two with additional context
- List item three with specific requirements
Section 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.