Skip to main content

Brand Guidelines

BookWish is a literary community platform that connects book lovers, readers, and independent bookstores. Our brand reflects the warmth of a favorite reading nook, the community of a book club, and the discovery of your next great read.

Brand Essence​

BookWish embodies:

  • Literary Heritage: Inspired by the timeless nature of books and reading
  • Warm Community: Creating welcoming spaces for readers to connect
  • Discovery & Delight: Making book discovery exciting and personal
  • Independent Spirit: Supporting local bookstores and independent voices

Logo Usage​

The BookWish logo combines literary symbolism with modern design:

  • Primary Logo: Use on light backgrounds (Parchment or white)
  • Minimum Size: 120px width for digital, 1 inch for print
  • Clear Space: Maintain clear space equal to the height of the logomark around all sides
  • Don't: Distort, rotate, recolor, or add effects to the logo

Color Palette​

Our color palette draws inspiration from classic books and literary spaces.

Primary Colors​

Ink Blue - Primary brand color

Hex: #233548
RGB: 35, 53, 72
Usage: Headers, text, primary UI elements

The deep, rich blue evokes ink on paper. Use for primary text, navigation, and key interactive elements.

Parchment - Background color

Hex: #FAF4E8
RGB: 250, 244, 232
Usage: Page backgrounds, surface color

Our warm off-white background creates a comfortable reading environment, like aged paper.

Accent Colors​

Amber Star - Primary accent

Hex: #FFC857
RGB: 255, 200, 87
Usage: CTAs, highlights, ratings

Warm and inviting, used for primary buttons and highlighting important actions.

Teal Edge - Secondary accent

Hex: #4BB4C8
RGB: 75, 180, 200
Usage: Secondary actions, reading status

Fresh and energetic, represents active reading states and secondary interactions.

Coral Spine - Tertiary accent

Hex: #F37C7C
RGB: 243, 124, 124
Usage: Alerts, high priority items

Used sparingly for important alerts and high-priority indicators.

Semantic Colors​

Success Green

Hex: #3FA37B
RGB: 63, 163, 123
Usage: Success states, completed status

Error Red

Hex: #C44545
RGB: 196, 69, 69
Usage: Error states, destructive actions

Border

Hex: #E0D7C8
RGB: 224, 215, 200
Usage: Borders, dividers, subtle separators

Extended Palette​

Forest Green

Hex: #2D6A4F
RGB: 45, 106, 79
Usage: Store features, nature-inspired elements

Maroon Leather

Hex: #7B2D26
RGB: 123, 45, 38
Usage: Premium features, leather-bound book references

Color Usage Guidelines​

Backgrounds​

  • Primary Surface: Parchment (#FAF4E8) for main app background
  • Card Surface: White (#FFFFFF) for cards, tiles, and content containers
  • Elevated Surface: White with subtle shadow for floating elements

Text​

  • Primary Text: Ink Blue (#233548) for main content
  • Secondary Text: Ink Blue at 70% opacity for supporting text
  • Tertiary Text: Ink Blue at 60% opacity for metadata and captions

Interactive Elements​

  • Primary CTA: Amber Star background with Ink Blue text
  • Secondary CTA: Ink Blue outline with Ink Blue text
  • Text CTA: Ink Blue text only
  • Links: Ink Blue, underline on hover

Status & Feedback​

  • Reading Status: Teal Edge for "currently reading"
  • Finished Status: Success Green for completed books
  • Wishlist Status: Amber Star for "want to read"
  • High Priority: Coral Spine for urgent items

Dark Mode​

BookWish currently uses a consistent light theme optimized for reading comfort. The Parchment background reduces eye strain compared to pure white, while maintaining excellent readability.

Future considerations for dark mode:

  • Inverted color scheme with dark Ink Blue backgrounds
  • Reduced saturation on accent colors
  • Maintained text contrast ratios for accessibility

Typography​

BookWish uses a dual typography system that distinguishes between book content and UI elements.

Font Families​

Merriweather (Serif)

  • Usage: Book titles, author names, card content, literary text
  • Rationale: Classic serif evokes traditional publishing and literary heritage

System Sans Serif (Default Flutter)

  • Usage: Navigation, buttons, labels, empty states, UI elements
  • Rationale: Clean and modern for interface elements

Type Scale​

Book Content (Merriweather)​

Book Title Large

  • Size: 22px
  • Weight: 700 (Bold)
  • Line Height: 1.25
  • Letter Spacing: -0.3px
  • Usage: Featured book displays

Book Title

  • Size: 17px
  • Weight: 600 (Semi-bold)
  • Line Height: 1.3
  • Letter Spacing: -0.2px
  • Usage: Standard book title display

Book Title Small

  • Size: 15px
  • Weight: 600 (Semi-bold)
  • Line Height: 1.3
  • Usage: Compact book listings

Author

  • Size: 14px
  • Weight: 400 (Regular)
  • Line Height: 1.4
  • Color: Ink Blue at 70% opacity
  • Usage: Author attributions

Card Heading

  • Size: 18px
  • Weight: 600 (Semi-bold)
  • Line Height: 1.3
  • Usage: Headings within cards

Card Body

  • Size: 15px
  • Weight: 400 (Regular)
  • Line Height: 1.5
  • Usage: Body text in cards

Card Body Small

  • Size: 14px
  • Weight: 400 (Regular)
  • Line Height: 1.4
  • Usage: Smaller body text in cards

Card Label

  • Size: 14px
  • Weight: 500 (Medium)
  • Usage: Labels within cards

Card Caption

  • Size: 12px
  • Weight: 400 (Regular)
  • Line Height: 1.3
  • Usage: Timestamps, metadata in cards

UI Elements (System Sans Serif)​

Heading Large

  • Size: 24px
  • Weight: 600 (Semi-bold)
  • Letter Spacing: -0.5px
  • Usage: Major section headings

Heading

  • Size: 20px
  • Weight: 600 (Semi-bold)
  • Usage: Screen titles, section headers

Body

  • Size: 16px
  • Weight: 400 (Regular)
  • Line Height: 1.5
  • Usage: Standard UI text

Body Small

  • Size: 14px
  • Weight: 400 (Regular)
  • Line Height: 1.4
  • Usage: Smaller UI text

Label

  • Size: 16px
  • Weight: 500 (Medium)
  • Usage: Button labels, navigation items

Label Small

  • Size: 14px
  • Weight: 500 (Medium)
  • Usage: Smaller labels

Caption

  • Size: 12px
  • Weight: 400 (Regular)
  • Line Height: 1.3
  • Color: Ink Blue at 60% opacity
  • Usage: Metadata, helper text

Typography Guidelines​

  1. Use Merriweather for literary content: Book titles, author names, review text, and any user-generated content about books
  2. Use system sans serif for UI: Navigation, buttons, empty states, form labels, and system messages
  3. Maintain consistent hierarchy: Larger, bolder text for more important information
  4. Optimize for readability: Generous line height (1.4-1.5) for body text
  5. Limit line length: Keep text columns to 60-80 characters for optimal readability

Voice & Tone​

Brand Voice​

BookWish speaks with:

  • Warmth: Friendly and welcoming, like a trusted book recommendation from a friend
  • Knowledge: Informed about books and reading culture without being pretentious
  • Encouragement: Supportive of reading journeys at all levels
  • Community: Inclusive language that brings readers together

Tone Guidelines​

Welcoming New Users

  • Enthusiastic but not overwhelming
  • Clear explanations without jargon
  • Focus on the joy of discovery

Error Messages

  • Helpful and solution-oriented
  • Never blame the user
  • Clear next steps

Success States

  • Celebrate achievements
  • Encourage continued engagement
  • Build momentum

Educational Content

  • Clear and concise
  • Use examples and visuals
  • Break down complex concepts

Writing Style​

  • Active voice: "Add this book to your wishlist" not "This book can be added"
  • Conversational: Write like you speak, but professionally
  • Concise: Respect users' time with clear, direct language
  • Inclusive: Use language that welcomes all readers
  • Positive: Focus on what users can do, not what they can't

Design Principles​

1. Literary-First Design​

Every design decision should enhance the reading and book discovery experience. Keep book covers, titles, and authors prominent.

2. Comfortable Spaces​

Like a favorite reading nook, our interfaces should feel warm and inviting. Use generous padding, soft shadows, and the Parchment background to create comfortable digital spaces.

3. Clear Hierarchy​

Help users navigate content effortlessly with clear visual hierarchy. The most important actions and information should be immediately obvious.

4. Consistent Patterns​

Use established patterns throughout the app. Once users learn an interaction, it should work the same way everywhere.

5. Accessible by Default​

Design for all readers. Maintain WCAG AA contrast ratios, support system font scaling, and provide clear interactive states.

6. Community Connection​

Highlight the social aspects of reading. Make it easy to see what others are reading, share recommendations, and connect over books.

7. Local Store Focus​

When designing store features, emphasize the local, independent nature of bookstores. Celebrate their unique character and community role.