🎨 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
Blue Logo on White
Black Background
Blue Logo on Black

256x256px

White Background
Blue Logo 256 on White
Black Background
Blue Logo 256 on Black

128x128px

White Background
Blue Logo 128 on White
Black Background
Blue Logo 128 on Black

Blue White Logos

1024x1024px

White Background
Blue White Logo on White
Dark Blue Background
Blue White Logo on Dark Blue
Black Background
Blue White Logo on Black

256x256px

White Background
Blue White Logo 256 on White
Dark Blue Background
Blue White Logo 256 on Dark Blue
Black Background
Blue White Logo 256 on Black

128x128px

White Background
Blue White Logo 128 on White
Dark Blue Background
Blue White Logo 128 on Dark Blue
Black Background
Blue White Logo 128 on Black

White Transparent Logo

1024x1024px

Dark Blue Background
White Logo on Dark Blue
Black Background
White Logo on Black

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

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.