Brand Identity & Design System

The visual language and design principles for Logbook.

Brand Identity

Name: Logbook Domain: logbook.social Tagline: "Your reading life, your people."

Personality

• Warm, cozy, inviting
• Intellectual but not pretentious
• Community-focused
• Trustworthy and authentic

Color Palette

Primary Colors

Name	Hex	Usage
Cream	#FAF7F2	Background
Paper	#F5F1EA	Secondary background
Warm White	#FFFDFB	Cards, surfaces
Amber	#C4883A	Primary brand, CTAs, active states
Amber Dark	#A66E2C	Hover/pressed
Amber Light	rgba(196, 136, 58, 0.12)	Tint backgrounds

Accent Colors

Name	Hex	Usage
Terracotta	#C27B5C	Warm accent
Sage	#8B9A7D	Success, calm
Purple	#8B7AA8	Category accent
Blue	#5C6B8A	Category accent
Pink	#C27B8A	Category accent

Neutrals

Name	Hex	Usage
Charcoal	#3D3835	Primary text
Charcoal Light	#5C5552	Secondary text
Dust	#D4CFC7	Borders, dividers

Dark Mode

Name	Hex	Usage
Background	#1A1817	Dark background
Surface	#252220	Dark cards/surfaces
Text	#E8E4DD	Dark mode text

Typography

Headings

• Font: Fraunces (serif)
• Weights: 400 (regular), 600 (semibold)
• Use for: Logos, page titles, section headers

Body

• Font: DM Sans (sans-serif)
• Weights: 400 (regular), 500 (medium), 600 (semibold)
• Use for: All UI text, descriptions, buttons

Serif Accent

• Font: Source Serif 4
• Use for: Pull quotes, book descriptions

UI Components

Liquid Glass Effect

The signature Logbook visual style:

background: rgba(255, 253, 251, 0.55-0.75);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
box-shadow: /* multi-layer soft shadows */;
/* Inner white border for depth/glow */

Buttons

Type	Style
Primary	Amber background, charcoal text
Secondary	Glass background, charcoal text
Ghost	Transparent, amber text

• Border radius: 12-14px
• Padding: 12-16px vertical, 20-28px horizontal

Cards

• Background: Warm white or glass
• Border radius: 16-20px
• Padding: 16-24px
• Shadow: Soft, multi-layer
• Hover: Subtle lift + shadow increase

Input Fields

• Glass background
• Border: Dust color (1px)
• Focus: Amber border
• Border radius: 12px
• Padding: 12-14px

Spacing Scale

Size	Value	Use
xs	4px (0.25rem)	Tight spacing
sm	8px (0.5rem)	Small spacing
md	12px (0.75rem)	Default spacing
lg	16px (1rem)	Medium spacing
xl	24px (1.5rem)	Large spacing
2xl	32px (2rem)	XL spacing
3xl	48px (3rem)	XXL spacing

Iconography

• Style: Emoji-based for warmth
• Fallback: Line icons (Lucide/Feather)
• Size: 20-24px for UI icons

Animations

• Duration: 200-300ms (interactions), 400-600ms (page transitions)
• Easing: Ease-out for entries, ease-in for exits
• Use: Button hovers, page transitions, micro-interactions
• Avoid: Excessive animation, animation on every element

Design Decisions

Decision	Rationale
Liquid glass UI	Creates premium feel without being cold
Emoji avatars	Removes photo upload friction, maintains warmth
Friend-first feed	Trust in friends > trust in algorithms
Book clubs prioritized	Strongest differentiator from competitors