mirror of
https://github.com/MLSysBook/TinyTorch.git
synced 2026-04-29 22:47:56 -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
4.5 KiB
4.5 KiB
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.