🎨 Design System
Welcome to the Promptbook design system. Here you'll find our logos, brand guidelines, colors, typography, and all the visual elements that make up our brand identity.
Logo Variations
Blue Transparent Logos
1024x1024px
White Background

Black Background

256x256px
White Background

Black Background

128x128px
White Background

Black Background

Blue White Logos
1024x1024px
White Background

Dark Blue Background

Black Background

256x256px
White Background

Dark Blue Background

Black Background

128x128px
White Background

Dark Blue Background

Black Background

White Transparent Logo
1024x1024px
Dark Blue Background

Black Background

Logo Usage Guidelines
✅ Do
- • Use the appropriate logo for the background
- • Maintain clear space around the logo
- • Keep the logo proportional when scaling
- • Use high-resolution versions for print
❌ Don't
- • Stretch or distort the logo
- • Change the logo colors
- • Add effects or shadows
- • Use low-resolution versions
Color Palette
Primary Colors
Blue
#00007F
Neutral Colors
Dark Gray
#111827
Light Gray
#f3f4f6
Accent Colors
Success
#10b981
Error
#ef4444
Typography
Headings
Heading 1 - 4xl Bold
text-4xl font-bold
Heading 2 - 3xl Bold
text-3xl font-bold
Heading 3 - 2xl Semibold
text-2xl font-semibold
Heading 4 - xl Semibold
text-xl font-semibold
Body Text
Large body text - Perfect for introductions and important content.
text-lg
Regular body text - The standard text size for most content.
text-base
Small text - Used for captions, metadata, and secondary information.
text-sm text-muted-foreground
Spacing & Layout
Spacing Scale
2px - 0.5
4px - 1
6px - 1.5
8px - 2
12px - 3
16px - 4
Border Radius
None - rounded-none
Small - rounded-sm
Default - rounded
Large - rounded-lg
Full - rounded-full
Download Assets
Logo Files
Blue Transparent Logos
Blue White Logos
White Transparent Logo
Design Principles
🎯
Clarity
Every element should have a clear purpose and be easily understood by users.
⚡
Efficiency
Design should enable users to accomplish their goals quickly and effortlessly.
🎨
Consistency
Maintain visual and functional consistency across all touchpoints.