Color Palette

BookWish uses a carefully curated color palette that evokes the warmth and comfort of an indie bookstore.

Design Philosophy

The BookWish color system is:

• Bookish and cozy - Warm, inviting tones
• Calm and uncluttered - Not loud or overwhelming
• Quietly confident - Books and content are the stars

Core Colors

Ink Blue

#233548

Primary text and navigation. The foundational dark color used throughout the interface.

Usage:

• Primary text
• Top-level navigation
• Key icons
• Some buttons

Parchment

#FAF4E8

The main background color. Like the paper content rests on.

Usage:

• Page backgrounds
• Main content areas
• Creates the "paper" feel

Amber Star

#FFC857

Primary accent color. Inspired by the shooting star in the BookWish logo.

Usage:

• Primary action buttons
• Small badges
• Progress indicators
• Highlights

Teal Edge

#4BB4C8

Secondary accent for selected states and subtle highlights.

Usage:

• Selected states
• Chips and tags
• Secondary highlights
• Links (alternative)

Coral Spine

#F37C7C

Gentle attention color for warnings and active states.

Usage:

• Warning states (not full error)
• Active indicators
• Priority badges (high)

Semantic Colors

Success

#3FA37B

Positive actions and confirmations.

Error

#C44545

Error states and destructive actions.

Border / Hairline

#E0D7C8

Subtle borders and dividers.

Color Usage Guidelines

Backgrounds

Surface	Color
Page background	Parchment (#FAF4E8)
Cards	White or light Parchment variant
Overlays	White with shadow

Text

Type	Color
Primary text	Ink Blue (#233548)
Secondary text	Ink Blue at 70% opacity
Muted text	Ink Blue at 50% opacity
Links	Ink Blue (underline on hover)

Interactive Elements

Element	Default	Hover/Active
Primary button	Amber Star or Ink Blue	Darker variant
Secondary button	Transparent + Ink Blue border	Light fill
Selected chip	Teal Edge	-

Contrast Requirements

All color combinations meet WCAG AA contrast requirements:

Combination	Ratio	Status
Ink Blue on Parchment	10.5:1	AAA
Ink Blue on White	12.6:1	AAA
White on Ink Blue	12.6:1	AAA
Ink Blue on Amber Star	5.2:1	AA

Dark Mode

BookWish supports dark mode with inverted values:

Light Mode	Dark Mode
Parchment background	Ink Blue background
Ink Blue text	Parchment text
White cards	Dark gray cards
Amber Star (unchanged)	Amber Star (unchanged)

Gradients

Important: Gradients are for the logo and marketing art only.

Do not use gradients in:

• Regular UI elements
• Buttons
• Backgrounds
• Cards

The logo gradient (Amber to Teal) should remain unique to branding.

Implementation

Flutter

class AppColors {
  static const inkBlue = Color(0xFF233548);
  static const parchment = Color(0xFFFAF4E8);
  static const amberStar = Color(0xFFFFC857);
  static const tealEdge = Color(0xFF4BB4C8);
  static const coralSpine = Color(0xFFF37C7C);
  static const success = Color(0xFF3FA37B);
  static const error = Color(0xFFC44545);
  static const border = Color(0xFFE0D7C8);
}

CSS

:root {
  --ink-blue: #233548;
  --parchment: #FAF4E8;
  --amber-star: #FFC857;
  --teal-edge: #4BB4C8;
  --coral-spine: #F37C7C;
  --success: #3FA37B;
  --error: #C44545;
  --border: #E0D7C8;
}

Store Theming

Individual stores can customize their accent color:

• Default: Ink Blue (#1a1a1a)
• Custom: Store's primaryColor setting

Store accent colors are used sparingly:

• Link highlights
• Section headers
• Small borders

Store colors should not overwhelm the bookish aesthetic.