Understanding Dementia - Color Theme Guide¶

This document defines the official color palette for the Understanding Dementia textbook, derived from the cover artwork. The color scheme balances professional healthcare aesthetics with warmth, compassion, and accessibility.

Cover Image Analysis¶

The cover features a harmonious blend of calming blues and purples with warm accent colors, creating a professional yet compassionate visual identity. The imagery includes a central brain with neural network connections, caregivers, elderly individuals, and symbols representing memory, time, care, and learning.

Primary Color Palette¶

Blues (Primary)¶

Royal Blue - Main brand color - Hex: #4A5FBF - RGB: rgb(74, 95, 191) - Usage: Primary navigation, headers, main CTAs, brain illustration - Represents: Trust, professionalism, healthcare

Periwinkle Blue - Light accent - Hex: #9BA8E3 - RGB: rgb(155, 168, 227) - Usage: Backgrounds, hover states, secondary elements - Represents: Calm, accessibility, openness

Cornflower Blue - Mid-tone - Hex: #6B7FD7 - RGB: rgb(107, 127, 215) - Usage: Interactive elements, links, illustrations - Represents: Clarity, understanding

Navy Blue - Deep accent - Hex: #2B3E7E - RGB: rgb(43, 62, 126) - Usage: Text headings, borders, footer, depth in illustrations - Represents: Authority, stability

Sky Blue - Background gradient - Hex: #B8C5F2 - RGB: rgb(184, 197, 242) - Usage: Page backgrounds, gradient overlays, light sections - Represents: Spaciousness, tranquility

Secondary Color Palette¶

Purples (Secondary)¶

Lavender - Soft accent - Hex: #C8B8E8 - RGB: rgb(200, 184, 232) - Usage: Section backgrounds, soft highlights, gradient transitions - Represents: Compassion, care, gentleness

Purple-Blue - Rich tone - Hex: #7B6BB8 - RGB: rgb(123, 107, 184) - Usage: Brain neural connections, important callouts, accent borders - Represents: Wisdom, depth, neural connections

Mauve - Deep purple - Hex: #8E7BA8 - RGB: rgb(142, 123, 168) - Usage: Darker backgrounds, shadows, depth - Represents: Dignity, respect

Accent Colors¶

Warm Accents¶

Sunshine Yellow - Optimism - Hex: #F9D76A - RGB: rgb(249, 215, 106) - Usage: Lightbulb icon, highlighting insights, important notes, "aha moments" - Represents: Hope, understanding, enlightenment, breakthrough moments

Rose Pink - Care - Hex: #C87B9A - RGB: rgb(200, 123, 154) - Usage: Heart/medical icons, care-related content, emotional support sections - Represents: Love, care, healthcare, emotional connection

Coral/Peach - Warmth - Hex: #E89B7E - RGB: rgb(232, 155, 126) - Usage: Hands/touch icons, caregiver sections, human connection elements - Represents: Touch, human warmth, support, hands-on care

Soft Coral - Gentle warmth - Hex: #F4B89E - RGB: rgb(244, 184, 158) - Usage: Skin tones, gentle backgrounds, warm highlights - Represents: Humanity, gentleness

Neutral Colors¶

Whites & Creams¶

Pure White - Clean base - Hex: #FFFFFF - RGB: rgb(255, 255, 255) - Usage: Main text, content backgrounds, neural network nodes, title text - Represents: Clarity, cleanliness, purity

Off-White/Cream - Soft base - Hex: #F9F7F4 - RGB: rgb(249, 247, 244) - Usage: Card backgrounds, book pages, soft content areas - Represents: Warmth, readability, paper texture

Light Cream - Warm neutral - Hex: #F2EFE9 - RGB: rgb(242, 239, 233) - Usage: Alternating rows, subtle backgrounds - Represents: Comfort, ease

Grays¶

Light Gray - Subtle borders - Hex: #E5E5E8 - RGB: rgb(229, 229, 232) - Usage: Dividers, light borders, subtle separations - Represents: Structure without harshness

Medium Gray - Secondary text - Hex: #8B8B95 - RGB: rgb(139, 139, 149) - Usage: Captions, metadata, secondary information - Represents: Support information, less emphasis

Charcoal - Body text - Hex: #3A3A44 - RGB: rgb(58, 58, 68) - Usage: Body text, readable content - Represents: Readability, professionalism

Browns & Tans¶

Sand/Tan - Natural - Hex: #D4B896 - RGB: rgb(212, 184, 150) - Usage: Hourglass sand, time-related elements, warm backgrounds - Represents: Time, passage, earth tones

Warm Beige - Soft accent - Hex: #E8D8C4 - RGB: rgb(232, 216, 196) - Usage: Soft backgrounds, comfortable reading areas - Represents: Comfort, accessibility

Specialized Color Applications¶

Neural Network & Connections¶

Network White - Nodes - Hex: #FFFFFF - Opacity: 100% for main nodes, 80% for secondary nodes - Usage: Connection nodes, network intersections

Connection Lines - Links - Hex: #FFFFFF - Opacity: 60-40% - Width: 2-3px - Usage: Neural pathways, concept connections in learning graph

Glow Effect - Highlights - Hex: #FFFFFF - Blur: 8-12px - Opacity: 80% - Usage: Active nodes, important connections, emphasis

Icon & Symbol Colors¶

Puzzle Pieces - Challenges - Primary: #4A5FBF (Royal Blue) - Secondary: #6B7FD7 (Cornflower Blue) - Usage: Problem-solving, understanding pieces of dementia

Photos/Memories - Personal - Border: #FFFFFF (White) - Content: Natural skin tones, blues - Usage: Memory sections, personal stories

Magnifying Glass - Investigation - Frame: #2B3E7E (Navy Blue) - Glass: Transparent with white highlight - Question mark: #FFFFFF (White) - Usage: Diagnosis, assessment sections

Lightbulb - Insights - Base: #4A5FBF (Royal Blue) - Glow: #F9D76A (Sunshine Yellow) - Rays: #F9D76A with glow effect - Usage: Key insights, important discoveries, tips

Book - Learning - Cover: #2B3E7E (Navy Blue) - Pages: #F9F7F4 (Off-White) - Text lines: #8B8B95 (Medium Gray) - Usage: Educational content, chapters, learning sections

Heart with Cross - Healthcare - Heart: #C87B9A (Rose Pink) - Cross: #FFFFFF (White) - Usage: Medical care, healthcare team, support

Hourglass - Time - Frame: #6B7FD7 (Cornflower Blue) - Sand: #D4B896 (Sand/Tan) - Usage: Time management, disease progression, stages

Calendar - Scheduling - Frame: #9BA8E3 (Periwinkle Blue) - Pages: #FFFFFF (White) - Markings: #2B3E7E (Navy Blue) - Usage: Daily routines, care planning

Clipboard - Assessment - Board: #E8D8C4 (Warm Beige) - Checkmarks: #4A5FBF (Royal Blue) - Paper: #FFFFFF (White) - Usage: Checklists, assessments, evaluations

Hands - Support - Base: #E89B7E (Coral/Peach) - Highlights: #F4B89E (Soft Coral) - Usage: Caregiving, support, physical care

Gradient Specifications¶

Background Gradients¶

Sky Gradient - Main background - Start: #B8C5F2 (Sky Blue) at top - Mid: #9BA8E3 (Periwinkle Blue) at middle - End: #4A5FBF (Royal Blue) at bottom - Direction: Top to bottom (180deg) - Usage: Page backgrounds, hero sections, cover-style layouts

Subtle Gradient - Content areas - Start: #F9F7F4 (Off-White) - End: #E8D8C4 (Warm Beige) - Direction: Top to bottom - Opacity: 50% - Usage: Card backgrounds, content boxes

Purple-Blue Gradient - Accent areas - Start: #C8B8E8 (Lavender) - Mid: #7B6BB8 (Purple-Blue) - End: #4A5FBF (Royal Blue) - Direction: 135deg (diagonal) - Usage: Special sections, brain imagery, neural themes

Typography Color Pairings¶

Headings¶

H1: #2B3E7E (Navy Blue) on white or #FFFFFF (White) on blue
H2: #4A5FBF (Royal Blue) on white
H3: #6B7FD7 (Cornflower Blue) on white
H4-H6: #3A3A44 (Charcoal) on white

Body Text¶

Primary: #3A3A44 (Charcoal) on #FFFFFF or #F9F7F4
Secondary: #8B8B95 (Medium Gray)
Links: #6B7FD7 (Cornflower Blue)
Link hover: #4A5FBF (Royal Blue)
Link visited: #7B6BB8 (Purple-Blue)

Special Text¶

Highlights: #F9D76A (Sunshine Yellow) background with #2B3E7E (Navy Blue) text
Important notes: #C87B9A (Rose Pink) border with #3A3A44 text
Warnings: #E89B7E (Coral) background with #2B3E7E text
Success: #6B7FD7 (Cornflower Blue) with white text

UI Component Colors¶

Buttons¶

Primary Button - Background: #4A5FBF (Royal Blue) - Text: #FFFFFF (White) - Hover: #2B3E7E (Navy Blue) - Active: #6B7FD7 (Cornflower Blue) - Disabled: #E5E5E8 (Light Gray) with #8B8B95 text

Secondary Button - Background: #9BA8E3 (Periwinkle Blue) - Text: #2B3E7E (Navy Blue) - Hover: #6B7FD7 (Cornflower Blue) with white text - Border: 2px solid #4A5FBF

Accent Button - Background: #C87B9A (Rose Pink) - Text: #FFFFFF (White) - Hover: Darken 10% - Usage: Call-to-action, emotional/support actions

Top Navigation - Background: #2B3E7E (Navy Blue) - Text: #FFFFFF (White) - Active: #F9D76A (Sunshine Yellow) underline or background - Hover: #4A5FBF (Royal Blue) background

Side Navigation - Background: #F9F7F4 (Off-White) - Text: #3A3A44 (Charcoal) - Active: #4A5FBF (Royal Blue) background with white text - Hover: #E8D8C4 (Warm Beige) background - Border: #9BA8E3 (Periwinkle Blue)

Breadcrumbs - Text: #8B8B95 (Medium Gray) - Separator: #E5E5E8 (Light Gray) - Current: #4A5FBF (Royal Blue) - Hover: #6B7FD7 (Cornflower Blue)

Cards & Containers¶

Card Default - Background: #FFFFFF (White) - Border: #E5E5E8 (Light Gray) - Shadow: rgba(43, 62, 126, 0.1) - Hover: Border changes to #9BA8E3 (Periwinkle Blue)

Featured Card - Background: Gradient from #F9F7F4 to #FFFFFF - Border: 2px solid #4A5FBF (Royal Blue) - Shadow: rgba(74, 95, 191, 0.15)

Info Card - Background: #F2EFE9 (Light Cream) - Border-left: 4px solid #6B7FD7 (Cornflower Blue) - Icon: #6B7FD7

Tip Card - Background: #FFF9E6 (light yellow tint) - Border-left: 4px solid #F9D76A (Sunshine Yellow) - Icon: #F9D76A

Care Card - Background: Soft tint of #C87B9A - Border-left: 4px solid #C87B9A (Rose Pink) - Icon: #C87B9A

Support Card - Background: Soft tint of #E89B7E - Border-left: 4px solid #E89B7E (Coral) - Icon: #E89B7E

Forms¶

Input Fields - Background: #FFFFFF (White) - Border: #E5E5E8 (Light Gray) - Focus border: #4A5FBF (Royal Blue) - Error border: #C87B9A (Rose Pink) - Success border: #6B7FD7 (Cornflower Blue) - Placeholder: #8B8B95 (Medium Gray)

Labels - Default: #3A3A44 (Charcoal) - Required: #C87B9A (Rose Pink) asterisk

Helper Text - Default: #8B8B95 (Medium Gray) - Error: #C87B9A (Rose Pink) - Success: #6B7FD7 (Cornflower Blue)

Content-Specific Color Applications¶

Chapter-Specific Color Coding (Optional)¶

Introduction & Overview (Chapters 1-3) - Primary: #6B7FD7 (Cornflower Blue) - Accent: #F9D76A (Sunshine Yellow) for key insights

Medical & Scientific (Chapters 4, 5, 8, 9) - Primary: #4A5FBF (Royal Blue) - Accent: #7B6BB8 (Purple-Blue) for brain/neural content

Stages & Progression (Chapter 6) - Gradient through stages: Light blue → Medium blue → Deep blue → Purple - Timeline: #D4B896 (Sand/Tan) for time elements

Care & Behavior Management (Chapters 7, 10, 12) - Primary: #C87B9A (Rose Pink) - Accent: #E89B7E (Coral) for hands-on care

Risk & Prevention (Chapter 11) - Primary: #F9D76A (Sunshine Yellow) - Accent: #6B7FD7 (Cornflower Blue)

Communication (Chapter 13) - Primary: #9BA8E3 (Periwinkle Blue) - Accent: #E89B7E (Coral) for connection themes

Safety & Home (Chapter 14) - Primary: #2B3E7E (Navy Blue) - Accent: #C87B9A (Rose Pink) for care safety

Resources & Support (Chapter 15) - Primary: #C87B9A (Rose Pink) - Secondary: #F9D76A (Sunshine Yellow) - Tertiary: #4A5FBF (Royal Blue)

Learning Graph Colors¶

Node Types - Factual Knowledge: #4A5FBF (Royal Blue) - Conceptual Understanding: #7B6BB8 (Purple-Blue) - Procedural Skills: #C87B9A (Rose Pink) - Metacognitive: #F9D76A (Sunshine Yellow)

Taxonomy Levels (Bloom's) - Remember: #B8C5F2 (Sky Blue) - lightest - Understand: #9BA8E3 (Periwinkle Blue) - Apply: #6B7FD7 (Cornflower Blue) - Analyze: #4A5FBF (Royal Blue) - Evaluate: #7B6BB8 (Purple-Blue) - Create: #2B3E7E (Navy Blue) - darkest

Connection Strength - Prerequisite: #2B3E7E (Navy Blue) - thick line - Related: #6B7FD7 (Cornflower Blue) - medium line - Optional: #9BA8E3 (Periwinkle Blue) - thin line

Status & State Colors¶

Progress States - Not started: #E5E5E8 (Light Gray) - In progress: #F9D76A (Sunshine Yellow) - Completed: #6B7FD7 (Cornflower Blue) - Mastered: #2B3E7E (Navy Blue)

Alert Levels - Info: #6B7FD7 (Cornflower Blue) - Tip: #F9D76A (Sunshine Yellow) - Important: #C87B9A (Rose Pink) - Caution: #E89B7E (Coral)

Accessibility Guidelines¶

Contrast Ratios¶

All color combinations meet WCAG 2.1 Level AA standards (minimum 4.5:1 for normal text, 3:1 for large text).

Verified Pairings - #2B3E7E (Navy Blue) on #FFFFFF: 9.2:1 ✓ - #4A5FBF (Royal Blue) on #FFFFFF: 5.8:1 ✓ - #6B7FD7 (Cornflower Blue) on #FFFFFF: 4.5:1 ✓ - #3A3A44 (Charcoal) on #FFFFFF: 11.8:1 ✓ - #FFFFFF (White) on #4A5FBF: 5.8:1 ✓ - #FFFFFF (White) on #2B3E7E: 9.2:1 ✓

Caution Pairings (use larger text or alternative) - #9BA8E3 (Periwinkle Blue) on #FFFFFF: 3.2:1 (use for large text only) - #C8B8E8 (Lavender) on #FFFFFF: 2.8:1 (decorative only)

Color Blindness Considerations¶

Deuteranopia (Red-Green) - Blues and purples remain distinct ✓ - Yellow provides strong contrast ✓ - Avoid red-green combinations (not in palette) ✓

Protanopia (Red-Green) - Blue-purple gradient remains clear ✓ - Warm accents (yellow, coral, pink) shift toward yellows but remain distinct ✓

Tritanopia (Blue-Yellow) - Use textures or patterns in addition to blue-purple gradients - Rose pink and coral remain visible - Navy-royal blue distinction may be reduced (use labels)

Recommendations - Always pair color with text labels or icons - Use patterns or textures in graphs and charts - Provide multiple visual cues (color + shape + text) - Test with color blindness simulators

Implementation Notes¶

CSS Variables¶

Suggested CSS custom properties:

:root {
  /* Primary Blues */
  --color-primary: #4A5FBF;
  --color-primary-light: #9BA8E3;
  --color-primary-mid: #6B7FD7;
  --color-primary-dark: #2B3E7E;
  --color-primary-sky: #B8C5F2;

  /* Secondary Purples */
  --color-secondary: #7B6BB8;
  --color-secondary-light: #C8B8E8;
  --color-secondary-dark: #8E7BA8;

  /* Accent Colors */
  --color-accent-yellow: #F9D76A;
  --color-accent-pink: #C87B9A;
  --color-accent-coral: #E89B7E;
  --color-accent-soft-coral: #F4B89E;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #F9F7F4;
  --color-cream: #F2EFE9;
  --color-beige: #E8D8C4;
  --color-sand: #D4B896;
  --color-gray-light: #E5E5E8;
  --color-gray-medium: #8B8B95;
  --color-gray-dark: #3A3A44;

  /* Semantic Colors */
  --color-text-primary: var(--color-gray-dark);
  --color-text-secondary: var(--color-gray-medium);
  --color-text-heading: var(--color-primary-dark);
  --color-link: var(--color-primary-mid);
  --color-link-hover: var(--color-primary);
  --color-link-visited: var(--color-secondary);

  --color-background: var(--color-white);
  --color-background-alt: var(--color-off-white);
  --color-background-accent: var(--color-cream);

  --color-border: var(--color-gray-light);
  --color-border-focus: var(--color-primary);

  --color-success: var(--color-primary-mid);
  --color-info: var(--color-primary-mid);
  --color-warning: var(--color-accent-yellow);
  --color-care: var(--color-accent-pink);
  --color-support: var(--color-accent-coral);
}

Gradient Utilities¶

.gradient-sky {
  background: linear-gradient(180deg,
    var(--color-primary-sky) 0%,
    var(--color-primary-light) 50%,
    var(--color-primary) 100%);
}

.gradient-purple-blue {
  background: linear-gradient(135deg,
    var(--color-secondary-light) 0%,
    var(--color-secondary) 50%,
    var(--color-primary) 100%);
}

.gradient-subtle {
  background: linear-gradient(180deg,
    var(--color-off-white) 0%,
    var(--color-beige) 100%);
  opacity: 0.5;
}

Shadow Utilities¶

.shadow-subtle {
  box-shadow: 0 2px 4px rgba(43, 62, 126, 0.08);
}

.shadow-medium {
  box-shadow: 0 4px 8px rgba(43, 62, 126, 0.12);
}

.shadow-strong {
  box-shadow: 0 8px 16px rgba(74, 95, 191, 0.15);
}

.shadow-glow {
  box-shadow: 0 0 12px rgba(249, 215, 106, 0.6);
}

Design Principles¶

Visual Hierarchy¶

Navy Blue (#2B3E7E) - Highest importance (main headings, primary CTAs)
Royal Blue (#4A5FBF) - High importance (subheadings, primary actions)
Cornflower Blue (#6B7FD7) - Medium importance (links, secondary actions)
Periwinkle Blue (#9BA8E3) - Low importance (backgrounds, subtle elements)

Color Relationships¶

Analogous: Blues and purples create harmony
Complementary: Yellow accents provide energy and emphasis
Warm accents: Pink and coral add human warmth and care
Neutral foundation: Whites, creams, and grays ensure readability

Emotional Resonance¶

Blues: Trust, professionalism, calm, medical care
Purples: Wisdom, dignity, neural connections, depth
Yellow: Hope, insight, optimism, breakthroughs
Pink: Care, compassion, heart, healthcare
Coral: Human touch, warmth, support, connection
Neutral: Clarity, professionalism, accessibility

Brand Consistency¶

All textbook elements—web, print, presentations, handouts—should use this color palette to maintain consistent brand identity and recognition.

Version History¶

Version 1.0 - 2025-02-04 - Initial color theme documentation - Derived from cover artwork analysis - Comprehensive palette with hex codes and RGB values - Usage guidelines for all UI components - Accessibility standards verification - CSS implementation examples

References¶

Cover image: docs/img/cover.png
MkDocs configuration: mkdocs.yml
Custom CSS: docs/css/extra.css
Learning graph color config: docs/learning-graph/color-config.json

This color theme guide should be referenced by all designers, developers, and content creators working on the Understanding Dementia textbook project to ensure visual consistency and professional presentation.