Bounce Together Design System
Internal reference for colors, typography, spacing, and components
Brand Colors
Bounce Green
#00B894
CTAs, success states, primary actions
Dark Navy
#2D3436
Text, headings, navigation
Pure White
#FFFFFF
Backgrounds, cards, surfaces
Muted Background
CSS Variable
Subtle backgrounds, disabled states
Accent
CSS Variable
Hover states, highlights
Destructive
CSS Variable
Errors, warnings, dangerous actions
Typography
Heading 1 - Hero Section
text-4xl font-extrabold tracking-tight
Heading 2 - Section Headers
text-3xl font-semibold tracking-tight
Heading 3 - Subsections
text-2xl font-semibold tracking-tight
Body text - Regular paragraph content with good line height for readability. Maximum 65-75 characters per line for optimal reading experience.
text-base leading-7
Small text - Used for captions, footnotes, and supplementary information
text-sm text-muted-foreground
Eyebrow Label
text-xs font-bold uppercase tracking-wider
Button Variants
Button Sizes
Usage Guidelines
- • Primary (default): Main CTAs like "Start Free", "Book a Demo"
- • Outline: Secondary actions, less emphasis
- • Ghost: Tertiary actions, navigation links
- • Destructive: Delete, remove, cancel operations
Spacing System
(8-point grid system - Tailwind default)
XS (2)SM (4)MD (6)LG (8)XL (12)2XL (16)Border Radius
radius-sm
calc(var(--radius) - 4px)
radius-md
calc(var(--radius) - 2px)
radius (default)
0.625rem
radius-lg
var(--radius)
radius-xl
calc(var(--radius) + 4px)
radius-2xl
calc(var(--radius) + 8px)
CSS Variables
Color Variables:
- --background
- --foreground
- --primary
- --primary-foreground
- --secondary
- --secondary-foreground
- --muted
- --muted-foreground
- --accent
- --accent-foreground
- --destructive
- --border
- --input
- --ring
This page is for internal reference only. Not linked in navigation.
Access via: /styling