Design System
The UI foundations of the playground — components, typography, gradients, animations, and layout helpers.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
This is a paragraph of text. Our typography system is designed to provide clear hierarchy and readability across all screen sizes.
This is how links lookButtons
Cards
Default Card
This is a default card component.
Card content goes here.
Elevated Card
This card has elevation.
Card content goes here.
Bordered Card
This card has a border.
Card content goes here.
Badges
DefaultSecondarySuccessDestructiveWarningInfoOutline
SmallDefaultLarge
Labels & Inputs
This field is required
Alerts
Default Alert
This is a default alert message.
Info Alert
This is an informational alert message.
Success Alert
This is a success alert message.
Warning Alert
This is a warning alert message.
Error Alert
This is an error alert message. Click the ✕ to dismiss it.
Gradients
Animations
Fade In
Scale In
Bounce In
Spin
Pulse
Layout Patterns
Centered Content
LeftRight
Item 1
Item 2
Item 3
Absolute Center
Glass Effect
Glass Card
Content with a frosted-glass effect.