Loading...
Loading...
Design System
The typographic scale, color tokens, spacing rhythm, and visual conventions that define Bounce Kit. Change the CSS variables in tokens.css to retheme everything.
Typography
Three font families — Array for display, Geist Sans for UI, Geist Mono for code. Each serves a clear purpose.
Bounce Kit
Page Heading
Section Title
Card Heading
The quick brown fox jumps over the lazy dog. Every component ships production-ready.
Metadata, captions, and helper text for forms and tables.
Compact captions, sidebar items, helper text.
globals.css • cn() • 0.3s
Profile Billing Keys
npm install bouncekit@latest
WHAT'S INCLUDED
Color Tokens
HSL tokens defined in tokens.css and mapped to Tailwind. Dark mode values swap automatically.
Spacing
Tailwind's default 4px grid. These are the values used most often across components and layouts.
Radii
Based on a 0.5rem root radius. All components use the --radius variable so you can tighten or loosen the whole UI.
calc(0.5rem - 4px)
Badges, tags
calc(0.5rem - 2px)
Inputs, small buttons
0.5rem
Cards, panels, large buttons
9999px
Pills, avatars
Theming
Every color in the kit flows from CSS variables. Change three lines to transform the entire brand.
/* Change the brand to any hue */
--brand: 38 92% 50%; /* amber */
--brand-light: 38 90% 55%;
--background: 222 14% 7%; /* GitHub dark */
/* Try indigo */
--brand: 234 89% 63%;
--brand-light: 234 85% 68%;Guidelines
Rules that keep the system consistent across every component.
bg-brand, text-muted-foregroundfont-display for hero and section labelsbg-background/80 backdrop-blur-sm for overlaysclassName prop on every componentbg-blue-500, text-whitestyle={{ color: '#fff' }}bg-white, bg-blackbg-black/80any types or console.log