mirror of
https://github.com/MLSysBook/TinyTorch.git
synced 2026-07-10 16:56:14 -05:00
897eecab8e
- Reorganized chapter structure with new numbering system - Added new chapters: introduction, tokenization, embeddings, profiling, quantization, caching - Removed obsolete chapters (15-mlops) and consolidated content - Updated table of contents and navigation structure - Enhanced visual design with new logos and favicon - Added comprehensive documentation (FAQ, user manual, command reference, competitions) - Improved theme design and custom CSS styling - Added QUICKSTART.md for rapid onboarding - Updated all chapter cross-references and links
127 lines
4.5 KiB
Markdown
127 lines
4.5 KiB
Markdown
# 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. |