Design System
Beehivy component library and design tokens. Everything you need to build consistent, beautiful interfaces.
Branding
Logo and visual identity
- Minimum size: 24px
- Maintain aspect ratio
- Clear space around logo
Typography
Font families and text styles
Headings - Montserrat
Heading H1
36px / Bold
Heading H2
28px / Bold
Heading H3
24px / Bold
Heading H4
20px / Bold
Body Text - Inter
Regular Body Text (16px)
The quick brown fox jumps over the lazy dog. Use this for general content and descriptions.
Small Body Text (14px)
Secondary information and metadata. Line height 1.5 for readability.
Color Palette
Golden bee-inspired color system with dark mode support
Light Mode
Primary
oklch(0.65 0.17 60)
Accent
oklch(0.52 0.2 55)
Secondary
oklch(0.92 0.08 65)
Background
oklch(0.98 0.001 0)
Muted
oklch(0.88 0.01 0)
Destructive
Error color
Dark Mode (Automatic)
Dark mode uses optimized color values for better contrast and readability
Primary brightens in dark mode
From oklch(0.65 0.17 60) to oklch(0.73 0.18 60)
Buttons
Button variants and states
Variants
Main action button
Secondary action
Tertiary action
Alternative action
Sizes
States
Cards
Card components for content organization
Badges & Tags
Labels and status indicators
Badge Variants
Tag Styles
Form Elements
Input fields and form controls
Icons
Common icons used throughout the system
Heart
Star
Check
Close
Search
Filter
Share
Download
Spacing Scale
Tailwind spacing scale for consistency
p-2
8px
p-4
16px
p-6
24px
p-8
32px
p-12
48px
p-16
64px
Border Radius
Rounding scale for consistency
rounded-sm
2px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
Shadows
Box shadow utilities
shadow-sm
Small shadow
shadow-md
Medium shadow
shadow-lg
Large shadow
Patterns & Best Practices
Common usage patterns and guidelines
✓ Use primary for main actions and CTAs
✓ Use accent for highlights and emphasis
✓ Use secondary for subtle backgrounds
✗ Don't mix too many colors in one component
✓ Optimize images for all screen sizes
✓ Use semantic HTML for accessibility
✓ Implement proper loading states
✓ Test dark mode thoroughly
✓ Maintain sufficient color contrast
✓ Include alt text for all images
✓ Use ARIA labels where needed
✓ Ensure keyboard navigation works
✓ Use transitions for hover states
✓ Keep animations under 300ms
✓ Respect prefers-reduced-motion
✓ Use CSS for performance