# TinyTorch Flame-Inspired Design System

## Design Philosophy

The TinyTorch website design is inspired by the flame logo, creating a warm, professional academic environment that reflects the educational nature of the framework while maintaining credibility and accessibility.

## Color Palette

### Primary Flame Colors (Extracted from Logo)
- **Flame Primary**: `#E85A34` - Main orange from the flame
- **Flame Secondary**: `#F97316` - Secondary warm orange  
- **Flame Light**: `#FED7AA` - Light warm orange for backgrounds
- **Flame Yellow**: `#FCD34D` - Warm yellow from flame core
- **Flame Deep**: `#DC2626` - Deep red from flame base

### Professional Text Colors
- **Text Dark**: `#1F2937` - Primary text color
- **Text Medium**: `#4B5563` - Secondary text
- **Text Light**: `#6B7280` - Tertiary text

### Background System
- **Background Main**: `#F8F9FA` - Matches logo background
- **Background White**: `#FFFFFF` - Content areas
- **Background Warm**: `#FEF7F0` - Subtle warm backgrounds
- **Accent Gradient**: Subtle flame-inspired gradient

## Design Principles

### 1. Warm Professionalism
- Flame colors provide warmth without sacrificing academic credibility
- Subtle gradients and warm backgrounds create inviting learning environment
- Professional typography maintains educational standards

### 2. Clean Academic Lines
- **No curved borders** - maintains academic formality
- Clean rectangular layouts with flame-colored accents
- Consistent spacing and typography hierarchy

### 3. Flame-Inspired Accents
- **Left borders**: Flame gradients on content blocks, code, and admonitions
- **Progress indicators**: Flame gradient progress bars
- **Interactive elements**: Flame colors for hover states and focus

### 4. Subtle Visual Hierarchy
- **H1 headers**: Flame gradient underlines
- **H3 headers**: Flame primary color
- **Links**: Flame primary with deeper red hover
- **Buttons**: Flame primary background with professional styling

## Component Styling

### Navigation
- **Sidebar**: Flame primary accents for current/hover states
- **Header**: Clean white with flame-colored interactive elements
- **TOC**: No curves, flame-colored indicators

### Content Areas
- **Code blocks**: Warm background with flame gradient left border
- **Admonitions**: Flame-colored borders with warm backgrounds
- **Blockquotes**: Flame left border with warm background

### Interactive Elements
- **Buttons**: Flame primary background, clean professional styling
- **Focus states**: Flame-colored outlines
- **Selection**: Flame background for text selection
- **Hover effects**: Subtle flame-colored shadows and transforms

### Special Components
- **Achievement cards**: Flame left borders with hover animations
- **Learning path steps**: Flame indicators with warm backgrounds
- **Module badges**: Flame-colored completion indicators
- **CTA boxes**: Flame gradient backgrounds with flame borders

## Accessibility Features

### High Contrast Support
- Darker flame colors in high contrast mode
- Maintained readability standards
- WCAG AA compliance for color contrast

### Reduced Motion Support
- Disabled animations for users with motion sensitivity
- Static alternatives for all animated elements

### Focus Management
- Clear flame-colored focus indicators
- Keyboard navigation support
- Screen reader friendly markup

## Usage Guidelines

### Do's
- Use flame colors for accents and interactive elements
- Maintain warm, professional tone
- Keep backgrounds subtle and readable
- Use gradients sparingly for emphasis

### Don'ts
- Avoid intense orange that overwhelms content
- Don't use flame colors for large background areas
- Avoid curved borders (academic requirement)
- Don't compromise text readability for visual appeal

## Implementation Notes

### CSS Custom Properties
All flame colors are defined as CSS custom properties for consistent theming and easy maintenance.

### Browser Compatibility
- Gradient fallbacks for older browsers
- Progressive enhancement for modern features
- Mobile-responsive design

### Performance
- Minimal use of animations
- Optimized gradients and shadows
- Efficient CSS organization

## Relationship to TinyTorch Logo

The design system directly extracts colors from the TinyTorch flame logo:
- Orange/red flame colors for primary accents
- Yellow core colors for highlights and progress
- Maintains visual consistency with brand identity
- Creates cohesive experience from logo to full website

This creates a unified brand experience where the logo naturally fits within the overall design language.