Design System
Showcase of UI components and design tokens used across Releash NYC.
Color Palette
Semantic tokens defined in globals.css
Typography
Type scale using the design system font
Display / H1
Heading / H2
Heading / H3
Heading / H4
Body — The quick brown fox jumps over the lazy dog.
Secondary / Muted — Supporting text and captions.
Label / Overline
Mono — code snippet or ID
Buttons
All variants and sizes of the Button component
Variants
Sizes
States
Form Inputs
Text inputs and form controls
Cards & Surfaces
Elevated card containers
Default Card
bg-background with border and subtle shadow.
Card Surface
bg-card for slightly elevated surfaces.
Primary Card
Used for featured or highlighted content.
Muted Card
bg-muted for subtle backgrounds.
Badges & Pills
Status indicators and labels
Alerts & Callouts
Contextual message banners
✓ Success — Your booking has been confirmed!
ℹ Info — We're open Monday–Saturday, 8am–7pm.
✗ Error — Something went wrong. Please try again.
⚠ Neutral — Review your details before submitting.
Dividers & Spacing
Horizontal rules and separators
or