Design Iterations & Visual Evolution

Contents

Design Iterations & Visual Evolution#

This document chronicles the visual and UX design evolution of the Education Playground project, capturing the “why” behind each design decision and the problems each iteration solved.

Design Philosophy#

Core Principles#

  1. Education First - Design should enhance learning, not distract

  2. Accessibility - Must work for all users, all abilities, all devices

  3. Professional Polish - Suitable for both students and institutional buyers

  4. Consistency - Unified experience across landing page and learning platform

  5. Performance - Fast, responsive, no unnecessary complexity

Iteration 1: Original Jupyter Book (Functional Foundation)#

Design Characteristics#

  • Visual Style: Clean, minimal, academic

  • Color Scheme: Jupyter Book defaults (blue accents, white background)

  • Typography: Default system fonts

  • Layout: Standard Jupyter Book sidebar + content layout

Strengths#

✅ Fast to implement ✅ Content-focused ✅ Familiar to developers ✅ Mobile responsive (default)

Weaknesses#

❌ Generic appearance ❌ No brand identity ❌ Limited customization ❌ Not optimized for B2B marketing ❌ No onboarding for new users ❌ Dark mode not supported

User Feedback#

“The content is great, but it looks like every other Jupyter Book site” “Hard to know where to start as a beginner”

Iteration 2: Custom Styling + Onboarding (Personalization)#

Design Changes#

  • Added: Interactive onboarding modal with skill assessment

  • Custom CSS: 813 lines of custom styling

  • Color Palette: Introduced blue (#3A86FF) as primary color

  • Typography: Custom font stack with better hierarchy

  • Interactive Elements: Choice cards, progress tracking, badges

Key Features#

  • Welcome modal with 3-step onboarding flow

  • Skill level assessment (Never → A Little → Yes)

  • Personalized learning path recommendations

  • Continue Learning banner for returning users

  • Progress tracking with localStorage

  • “Mark as Complete” buttons on lessons

Visual Improvements#

/* Custom Onboarding Modal */
.onboarding-content {
    border-radius: 16px;
    max-width: 600px;
    padding: 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    animation: slideUp 0.4s ease;
}

/* Choice Cards */
.choice-card {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

Strengths#

✅ Unique, branded appearance ✅ Guides new users effectively ✅ Tracks user progress ✅ More engaging than defaults

Weaknesses#

❌ Still no B2B marketing presence ❌ Blue color not distinctive ❌ No dark mode support ❌ Some layout inconsistencies

Iteration 3: Landing Page Integration (Professional Presence)#

The Problem#

How do schools discover and evaluate the platform? We needed:

  • Professional marketing presence

  • Clear value proposition for decision-makers

  • Course catalog visibility

  • Social proof (testimonials)

  • Easy contact/inquiry process

The Solution: CodeBridge Labs Landing Page#

Visual Design#

  • Hero: Gradient navy background with glowing orbs

  • Layout: Modern card-based sections

  • Typography: Bold headings, readable body text

  • CTAs: Prominent green buttons with hover effects

Design System#

:root {
  --navy: #0D1B2A;
  --sky-blue: #3A86FF;
  --soft-gray: #F3F4F6;
  --white: #FFFFFF;
}

Section Design Patterns#

Hero Section:

[Gradient Background]
    ├── Large Heading
    ├── Subheading
    ├── Primary CTA (solid)
    └── Secondary CTA (outline)

Content Sections:

[White/Gray Background]
    ├── Section Heading
    ├── Subheading
    └── 3-Column Card Grid

Visual Hierarchy#

  1. Level 1: Hero - Immediate value proposition

  2. Level 2: Problems - Pain points we solve

  3. Level 3: How It Works - Simple 3-step process

  4. Level 4: Courses - Detailed catalog

  5. Level 5: Results - Social proof

  6. Level 6: Pricing - Call to action

Strengths#

✅ Professional B2B appearance ✅ Clear value proposition ✅ Complete course catalog ✅ Builds trust with testimonials ✅ Easy inquiry process

Weaknesses#

❌ Color scheme not unified with Jupyter Book ❌ Card heights inconsistent ❌ Some alignment issues ❌ Dark mode causing mixed appearance

Iteration 4: Color Unification (Brand Consistency)#

The Color Problem#

Before:

  • Landing Page: Blue (#3A86FF) primary

  • Jupyter Book: Blue (#3A86FF) primary

  • Result: Generic “tech blue” aesthetic

Design Question: What color represents education, growth, and success?

The Solution: Green + Purple#

/* New Unified Palette */
--primary-color: #4CAF50;        /* Green - Growth, learning, success */
--primary-hover: #45a049;        /* Darker green */
--secondary-color: #667eea;      /* Purple - Creativity, innovation */
--secondary-dark: #764ba2;       /* Deep purple */
--navy: #0D1B2A;                /* Navy - Professional, trustworthy */

Color Psychology#

  • Green (#4CAF50)

    • Represents growth and progress

    • Positive, encouraging

    • Good contrast for accessibility

    • Less common in tech = more distinctive

  • Purple Gradient (#667eea → #764ba2)

    • Creative and innovative

    • Luxurious, premium feel

    • Great for hero sections

    • Complements green without clashing

  • Navy (#0D1B2A)

    • Professional and trustworthy

    • Excellent readability

    • Corporate-friendly

Application#

  • Buttons: Green primary

  • Hero Sections: Purple gradient

  • Headings: Navy

  • Links: Green

  • Highlights: Purple

Visual Impact#

✅ Distinctive brand identity ✅ Better accessibility ✅ Warmer, more approachable ✅ Consistent across both sites

Iteration 5: Layout Refinement (Perfect Alignment)#

The Alignment Problem#

Visual inspection revealed:

  • Cards in grid layouts had varying heights

  • Content floating awkwardly within cards

  • Testimonial author info not anchored properly

  • Inconsistent gap spacing (gap-12 vs gap-8)

The Solution: Flexbox Patterns#

Equal-Height Cards:

<div className="... flex flex-col h-full">
  {/* Card content */}
</div>

Expandable Content:

<p className="flex-1">
  {/* Content that expands to fill available space */}
</p>

Bottom-Anchored Elements:

<div className="mt-auto">
  {/* Always sits at bottom of card */}
</div>

Before & After#

Before:

[Card 1 - Short]   [Card 2 - Medium]   [Card 3 - Tall]
┌────────────┐     ┌────────────┐      ┌────────────┐
│ Content    │     │ Content    │      │ Content    │
│            │     │            │      │            │
│ [Bottom]   │     │            │      │            │
└────────────┘     │ [Bottom]   │      │            │
                   └────────────┘      │ [Bottom]   │
                                       └────────────┘

After:

[Card 1]           [Card 2]            [Card 3]
┌────────────┐     ┌────────────┐      ┌────────────┐
│ Content    │     │ Content    │      │ Content    │
│            │     │            │      │            │
│            │     │            │      │            │
│            │     │            │      │            │
│ [Bottom]   │     │ [Bottom]   │      │ [Bottom]   │
└────────────┘     └────────────┘      └────────────┘

Gap Standardization#

  • Before: gap-12 lg:gap-8 (inconsistent)

  • After: gap-8 (consistent across all breakpoints)

Visual Impact#

✅ Perfect visual symmetry ✅ Professional appearance ✅ Predictable layout ✅ No awkward white space

Iteration 6: Dark Mode Implementation (Accessibility)#

The Dark Mode Problem#

Issue: CSS had dark mode styles but they were never activated

  • Variables defined but not applied

  • No @media (prefers-color-scheme: dark) queries

  • No JavaScript to set data-theme attribute

The Solution: Automatic Detection#

CSS Architecture:

/* Light Mode (Default) */
:root {
    --bg-primary: #ffffff;
    --text-primary: #1a1a1a;
}

/* Dark Mode (Auto-Detect) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --text-primary: #e0e0e0;
    }
}

/* Manual Override Support */
html[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --text-primary: #e0e0e0;
}

Dark Mode Palette#

/* Dark Mode Colors */
--primary-color: #66bb6a;        /* Lighter green for dark bg */
--bg-primary: #1a1a1a;          /* Almost black */
--bg-secondary: #242424;         /* Dark gray */
--bg-tertiary: #2d2d2d;         /* Medium gray */
--text-primary: #e0e0e0;        /* Light gray */
--text-secondary: #b0b0b0;      /* Medium gray */
--border-color: #404040;         /* Subtle borders */

Component Coverage#

✅ Body and main content ✅ Onboarding modal ✅ Choice cards ✅ Code blocks ✅ Tables ✅ Sidebar navigation ✅ All interactive elements

Landing Page Decision#

Choice: Force light mode only Rationale:

  • B2B sites need consistent appearance

  • Professional/corporate environments expect light themes

  • Avoids mixed light/dark sections

  • Simpler A/B testing and screenshots

Visual Impact#

✅ Reduces eye strain in low light ✅ Respects user system preferences ✅ Maintains readability in both modes ✅ Professional on Playground, consistent on Landing

Iteration 7: Layout Optimization (Content Excellence)#

The Layout Problem#

Content felt cramped or too wide depending on screen size:

  • No max-width constraint on main content

  • Inconsistent padding

  • Long lines hard to read on large screens

  • Images not properly centered

The Solution: Typography-Driven Layout#

Optimal Reading Width:

.bd-article {
    max-width: 1000px;      /* ~75 characters per line */
    margin: 0 auto;         /* Centered */
    padding: 2rem;          /* Breathing room */
}

Content Container:

.bd-container__inner.bd-page-width {
    max-width: 1400px;      /* Overall page width */
    margin: 0 auto;
}

Section Spacing:

.bd-article > section {
    margin-bottom: 3rem;    /* Clear section breaks */
}

Image Handling:

.bd-article img,
.bd-article figure {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;      /* Centered with spacing */
}

List Improvements:

.bd-article ul,
.bd-article ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.bd-article li {
    margin-bottom: 0.5rem;  /* Breathing room */
}

Typography Standards#

  • Line Length: 45-75 characters (optimal readability)

  • Line Height: 1.7 for body text (comfortable reading)

  • Heading Hierarchy: Clear size differentiation

  • Paragraph Spacing: 1rem for visual breaks

Visual Impact#

✅ Comfortable reading experience ✅ Professional typography ✅ Clear visual hierarchy ✅ Proper white space usage ✅ Responsive across all screens

Design System (Current State)#

Color Palette#

Primary Actions:

  • Green #4CAF50 (buttons, links, primary actions)

  • Green Hover #45a049 (hover states)

  • Green Light #e8f5e9 (backgrounds)

Secondary Highlights:

  • Purple #667eea (gradients start)

  • Purple Dark #764ba2 (gradients end)

Text:

  • Navy #0D1B2A (headings, important text)

  • Dark Gray #1a1a1a (body text light mode)

  • Light Gray #e0e0e0 (body text dark mode)

Backgrounds:

  • White #FFFFFF (primary)

  • Soft Gray #F3F4F6 (secondary)

  • Dark #1a1a1a (dark mode primary)

  • Dark Gray #242424 (dark mode secondary)

Typography Scale#

h1: 2.5rem (40px)  - Page titles
h2: 2rem (32px)    - Section headings
h3: 1.5rem (24px)  - Subsection headings
h4: 1.25rem (20px) - Minor headings
body: 1rem (16px)  - Body text
small: 0.875rem    - Captions, metadata

Spacing Scale#

--spacing-xs: 0.25rem  (4px)
--spacing-sm: 0.5rem   (8px)
--spacing-md: 1rem     (16px)
--spacing-lg: 1.5rem   (24px)
--spacing-xl: 2rem     (32px)
--spacing-2xl: 3rem    (48px)

Border Radius Scale#

--radius-sm: 4px    - Small elements
--radius-md: 8px    - Cards, buttons
--radius-lg: 12px   - Large cards
--radius-xl: 16px   - Modals
--radius-2xl: 20px  - Hero sections

Shadow System#

--shadow-sm: 0 2px 4px rgba(0,0,0,0.1)    - Subtle elevation
--shadow-md: 0 4px 12px rgba(0,0,0,0.15)  - Cards
--shadow-lg: 0 8px 20px rgba(0,0,0,0.2)   - Modals, popovers

Responsive Breakpoints#

Mobile First Approach#

/* Base Styles (Mobile) */
/* 320px - 767px */

/* Tablet */
@media (min-width: 768px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Large Desktop */
@media (min-width: 1440px) { }

Key Responsive Patterns#

Grid Layouts:

/* Mobile: 1 column */
grid-template-columns: 1fr;

/* Tablet: 2 columns */
@media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
}

Typography Scaling:

/* Mobile */
h1 { font-size: 2rem; }

/* Tablet */
@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
}

/* Desktop */
@media (min-width: 1024px) {
    h1 { font-size: 2.5rem; }
}

Component Library#

Buttons#

Primary Button:

<button className="px-8 py-4 bg-primary-color text-white rounded-lg
                   font-semibold shadow-lg hover:bg-primary-hover
                   transition-all duration-300 hover:scale-105">
  Start Learning
</button>

Secondary Button:

<button className="px-8 py-4 bg-transparent border-2 border-white
                   text-white rounded-lg font-semibold
                   hover:bg-white hover:text-navy transition-all duration-300">
  Learn More
</button>

Cards#

Standard Card:

<div className="bg-white rounded-xl p-8 shadow-md hover:shadow-xl
                transition-shadow duration-300 border border-gray-100
                flex flex-col h-full">
  {/* Card content */}
</div>

Featured Card:

<div className="bg-gradient-to-br from-navy to-[#1a2f4a]
                rounded-xl p-8 text-white shadow-xl">
  {/* Featured content */}
</div>

Interactive Elements#

Choice Card:

<button className="bg-soft-gray rounded-xl p-6 border-2
                   border-transparent hover:border-primary-color
                   hover:shadow-lg transition-all duration-300
                   flex flex-col items-center gap-4">
  <span className="text-4xl">{icon}</span>
  <h3 className="font-bold">{title}</h3>
  <p className="text-sm">{description}</p>
</button>

Design Metrics#

Before vs After#

Metric

v1.0

v3.0

Improvement

Load Time

~1.2s

~1.1s

✅ 8% faster

Custom CSS

0 lines

1,247 lines

✅ Full customization

Color Palette

Default

Unified 5-color

✅ Brand identity

Dark Mode

❌

✅ Auto-detect

✅ Accessibility

Responsive

✅ Basic

✅ Optimized

✅ Better mobile

Alignment

⚠️ Inconsistent

✅ Perfect

✅ Professional

Typography

Default

Optimized

✅ Readability

User Onboarding

❌

✅ Interactive

✅ Guidance

Design Principles Applied#

1. Visual Hierarchy#

✅ Clear heading structure (h1 → h2 → h3) ✅ Size and weight communicate importance ✅ Consistent spacing creates rhythm ✅ Color draws attention to actions

2. Consistency#

✅ Unified color palette across both sites ✅ Consistent spacing and sizing ✅ Predictable interaction patterns ✅ Reusable component patterns

3. Accessibility#

✅ Sufficient color contrast (WCAG AA) ✅ Dark mode support ✅ Semantic HTML structure ✅ Keyboard navigation support ✅ Mobile responsive

4. Usability#

✅ Clear CTAs with hover states ✅ Logical information architecture ✅ Intuitive navigation ✅ Fast load times ✅ Minimal cognitive load

5. Delight#

✅ Smooth animations and transitions ✅ Satisfying hover effects ✅ Progress indicators ✅ Achievement feedback ✅ Polished micro-interactions

Lessons Learned#

What Worked Well#

  1. Iterative approach - Small, focused improvements

  2. User feedback - Identifying real pain points

  3. Design systems - CSS variables for consistency

  4. Flexbox patterns - Reliable layout solutions

  5. Auto dark mode - No JavaScript required

What We’d Do Differently#

  1. Earlier brand identity - Should have unified colors from start

  2. Mobile-first design - Some responsive issues required fixing

  3. Accessibility testing - Should have tested dark mode earlier

  4. Component library - Would benefit from earlier standardization

Key Insights#

  • B2B vs B2C design - Different needs (landing page vs app)

  • Color psychology matters - Green > Blue for education

  • Layout perfection - Alignment issues are very noticeable

  • Dark mode is complex - Many edge cases to consider

  • Typography is foundation - Good text = good design

Future Design Directions#

Potential Enhancements#

  • Custom illustrations for hero and sections

  • Animated icons and micro-interactions

  • Video background in hero section

  • Interactive course previews

  • Gamification elements (badges, achievements)

  • Personalized dashboard

  • Theme customization options

  • Print-optimized styles

Research Areas#

  • A/B test color variations

  • User testing for navigation

  • Heat map analysis

  • Conversion rate optimization

  • Accessibility audit (WCAG AAA)

  • Performance optimization

  • Animation performance testing

Maintained by: Mykolas Perevicius Last Updated: November 13, 2025 Current Design Version: 3.0 Status: Production Ready ✅

Contents