Logo
Primary logo on light and dark backgrounds
Favicon
App icons and favicon variations
64x64
32x32
16x16
Typography
Lato font family with various weights
Font Family: Lato
Thin (100)
The quick brown fox jumps over the lazy dog
Light (300)
The quick brown fox jumps over the lazy dog
Regular (400)
The quick brown fox jumps over the lazy dog
Bold (700)
The quick brown fox jumps over the lazy dog
Black (900)
The quick brown fox jumps over the lazy dog
Heading Scale
Heading 1 (48px)
Heading 2 (36px)
Heading 3 (30px)
Heading 4 (24px)
Heading 5 (20px)
Heading 6 (18px)
Body text (16px) - Regular paragraph text
Small text (14px) - Secondary information
Extra small (12px) - Captions and labels
Color Palette
Vibrant blue theme with semantic colors
Core Colors
#2563eb
221 83% 53%
#f1f5f9
221 30% 96%
#dbeafe
221 70% 95%
#f8fafc
221 20% 96%
#ef4444
0 84% 60%
#ffffff
0 0% 100%
Foreground Colors
#0f172a
221 40% 10%
#64748b
221 15% 45%
#e2e8f0
221 20% 90%
#2563eb
221 83% 53%
Tabs
Tab navigation component
Welcome to our church community. Here you'll find information about our services and activities.
Dropdown Menu
Dropdown menu for actions and navigation
Avatar
User avatars with image and fallback support
Sizes
With Initials
Icons
Commonly used Lucide icons
CSS Variables
Copy these to your globals.css for shadcn compatibility
:root {
--background: 0 0% 100%;
--foreground: 221 40% 10%;
--card: 0 0% 100%;
--card-foreground: 221 40% 10%;
--popover: 0 0% 100%;
--popover-foreground: 221 40% 10%;
--primary: 221 83% 53%;
--primary-foreground: 0 0% 100%;
--secondary: 221 30% 96%;
--secondary-foreground: 221 40% 20%;
--muted: 221 20% 96%;
--muted-foreground: 221 15% 45%;
--accent: 221 70% 95%;
--accent-foreground: 221 83% 40%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 221 20% 90%;
--input: 221 20% 90%;
--ring: 221 83% 53%;
--radius: 0.5rem;
}