HAP's Color Learning Lab - Design Rules Guide

1. HTML Structure & Patterns

Core HTML Template

• DOCTYPE: HTML5 with lang="en"
• Head Elements Order:
  1. Meta charset and viewport
  2. Title with consistent pattern: "HAP's Color Learning Lab - [Station Name/Description]"
  3. Meta descriptions (educational SEO)
  4. Open Graph meta tags with HAP laptop image
  5. Favicon links (4 sizes using Cloudinary HAP favicon)
  6. Preconnect to Cloudinary
  7. Stylesheet link to css/style.css

Page Architecture

• Skip link for accessibility (first element in body)
• Header with HAP avatar and intro box
• Navigation: Inter-page navigation with position indicators
• Main content with id="main-content"
• Footer with consistent copyright and HAP trademark info

2. HAP Character Integration

Visual Elements

• HAP Avatar: 200x200px in header using Cloudinary images
• HAP Images: Multiple contextual images (waving, confused, learning)
• Image Specifications:
  • Always use Cloudinary URLs with optimization parameters
  • Include width/height attributes
  • Add decoding="async" and appropriate fetchpriority/loading attributes

HAP's Voice & Personality

• First-person narrative throughout
• Relatable mistakes: Share specific color failures (hex chaos, #bada55 joke)
• Prof. Teeters references: Credit learning moments
• Casual tone: Contractions, occasional emojis (sparingly)
• Encouragement: Celebrate small wins, normalize mistakes

3. Content Sections

Station Pages Structure

1. Header with intro box: HAP's personal color struggle story
2. Tab navigation (if multiple topics) or direct content sections
3. Overview/learning objectives
4. Interactive demos (critical for color learning)
5. HAP Note Callouts with contextual advice
6. Code examples with "My Old Way" vs "What I Learned"
7. Practice exercises
8. Bottom navigation to hub and next station

Content Components

• insight-card: Key learning points
• analysis-grid: Before/after comparisons
• hap-note-callout: HAP's personal insights with image
• warning-box: Important discoveries/warnings
• prompt-box: Code examples
• interactive-demo: Color tools and visualizers

4. Color-Specific Interactive Elements

Essential Color Demos (adapt from typography lab patterns)

• Color format converter (like font-display visualizer)
• Contrast checker with live preview
• Palette builder with export functionality
• Color harmony visualizer
• CSS variables generator
• Dark mode toggle demo

Demo Patterns

• Use demo-container wrapper
• Include controls, preview, and output sections
• Add copy buttons to code outputs
• Show real-time updates
• Include HAP's comments on results

5. CSS Design System

Color Palette (from existing HAP sites)

--warm-orange: #E8A557
--soft-orange: #F4C584
--peach-background: #F4E8D8
--cream-white: #FFF8F0
--dark-brown: #3D2817
--medium-brown: #6B5444
--teal-accent: #5BA69C
--success-green: #6BBF59
--warning-red: #E85D75

Typography

• Font: 'Nunito' for body text
• Code: 'Source Code Pro' or 'Courier New'
• Sizes: Use clamp() for responsive sizing
• Line length: max-width: 75ch for readability

Layout Patterns

• Max-width: 1200px for content containers
• Grid layouts: repeat(auto-fit, minmax()) for responsive grids
• Border radius: --radius: 16px and --radius-lg: 24px
• Spacing: Consistent margin/padding using utility classes

6. Code Examples

Format for Color Code

• Always show "HAP's Old Way": Messy hex codes, inconsistent formatting
• Then "What I Learned": Clean CSS variables, organized system
• Use Prism.js for syntax highlighting
• Include copy buttons on all code blocks

Example Structure

<div class="prompt-box">
    <div class="prompt-label">HAP's Old Way (Hex Chaos):</div>
    <pre><code class="language-css">/* CSS here */</code></pre>
</div>

7. Navigation System

Inter-Station Navigation

• Top nav: Back to hub + position indicator ("Station X of 6")
• Bottom nav: Hub link + Next station link
• Consistent placement and styling

Tab System (for multi-topic stations)

• Use native button elements
• JavaScript tab switching
• Active state styling
• Smooth transitions

8. Easter Egg System

Implementation

• Include easter-egg.js script
• URL parameter pattern: ?hybit or ?hybit=keyword
• Dialog with HAP insights
• Color-specific parameters (hex, contrast, variables, etc.)

9. Performance & Accessibility

Performance Requirements

• Lighthouse target: 95+ score
• Image optimization: Cloudinary with f_auto,q_auto
• Lazy loading: For non-critical images
• Preconnect: To Cloudinary CDN

Accessibility Must-Haves

• Skip links
• Semantic HTML landmarks
• ARIA labels on interactive elements
• Keyboard navigation for all demos
• Focus indicators visible
• Alt text on all images

10. File Organization

Directory Structure

hybit-colors/
├── index.html                    # Hub with 6 station cards
├── stations/
│   ├── color-formats.html        # Station 1
│   ├── color-systems.html        # Station 2
│   ├── color-harmony.html        # Station 3
│   ├── color-accessibility.html  # Station 4
│   ├── modern-css-color.html     # Station 5
│   └── ai-color-assistance.html  # Station 6
├── css/
│   ├── style.css                 # Main styles
│   └── prism-hap-theme.css      # Syntax highlighting
├── js/
│   └── easter-egg.js             # HAP Insights
└── data/
    └── hybit-insights.jsonc     # Easter egg content

11. Footer Standards

Required Footer Elements

• Main tagline: "HAP's Learning Lab | An AI-Enhanced Educational Experience by Prof. Cynthia Teeters"
• HAP's sign-off message (color-specific)
• Copyright block with HAP image (80x80)
• Full trademark text

12. Responsive Breakpoints

Mobile First Approach

• Base: Mobile styles
• 768px: Tablet adjustments
• 480px: Small mobile specific fixes
• Grid stacking: Auto-stack on mobile
• Touch targets: Minimum 44x44px

13. Color-Specific Requirements

Must Include

• Hex code examples showing student problems
• Before/after transformations
• Live color previews (not just code)
• Accessibility warnings with contrast
• Real metrics (file sizes, contrast ratios)
• Interactive not static demos

HAP's Color Journey Arc

1. Started with only hex codes
2. Mixed case sensitivity issues
3. Had "47 different shades of blue"
4. Discovered CSS variables ("game changer!")
5. Learned about contrast (invisible text disaster)
6. Now helps others avoid same mistakes

This design system ensures consistency with existing HAP labs while being specifically tailored for teaching color concepts through HAP's relatable learning journey.