🎨 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

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.