Logo System¶
Overview¶
Our logo system reflects the sophistication, technical expertise, and premium quality of the Ultimate MkDocs Guide. The design combines modern geometric elements with documentation metaphors, using our signature purple and amber brand colors.
Primary Logo¶
Enhanced Horizontal Logo¶
Usage: Primary logo for headers, navigation, and most brand applications.
Dimensions: 160×48px optimized ratio (10:3)
File: assets/logo-enhanced.svg
Key Design Elements¶
- Documentation Stack: Three-layer document metaphor representing comprehensive guides
- Technical Identity: Code brackets (``) emphasize technical documentation focus
- Geometric Sophistication: Modern rounded rectangles with subtle depth
- Brand Integration: Purple-to-amber gradient system throughout
- Professional Typography: Inter font with optimized letter spacing
Logo Variations¶
Icon-Only Version¶
Usage: Favicons, app icons, social media profiles, compact spaces
Dimensions: 48×48px square format
File: assets/logo-icon.svg
Vertical Layout¶
Usage: Vertical layouts, mobile splash screens, print materials
Dimensions: 80×100px format (4:5 ratio)
File: assets/logo-vertical.svg
Favicon System¶
Modern SVG Favicon¶
Our favicon uses a simplified version of the icon optimized for small sizes:
favicon.svg (32×32px)
Complete Icon Package¶
For comprehensive platform support, our icon system includes:
| Size | Usage | Platform |
|---|---|---|
| 16×16px | Browser tab | All browsers |
| 32×32px | Desktop shortcut | Windows, macOS |
| 192×192px | PWA mobile icon | Android, iOS |
| 512×512px | PWA desktop icon | Windows, macOS, Linux |
PWA Icons
All PWA icons are already generated in the docs/assets/images/ directory:
icon-72x72.pngthroughicon-512x512.png- Automatically referenced in
manifest.json - Optimized for all device densities
Design Specifications¶
Color Usage¶
- Main container: Primary gradient (#673ab7 → #512da8)
- Document stack: White with subtle gradient (#ffffff → #f8f9fa)
- Content lines: Primary purple with 70% opacity
- Corner accent: Amber gradient (#ffc107 → #ffb300)
- Code brackets: Amber gradient for technical identity
- Typography: Primary purple for titles, subtle gray for subtitles
Spacing & Proportions¶
- Container: 8px border radius for modern feel
- Document stack: 2px border radius, 1px offset layers
- Text spacing: 0.02em letter spacing for optimal readability
- Element margins: 8px grid system alignment
Typography Treatment¶
/* Primary text */
font-family: 'Inter', sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
/* Secondary text */
font-family: 'Inter', sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
color: #64748b;
Usage Guidelines¶
Do's¶
Correct Usage
✅ Use primary logo for main navigation and headers
✅ Maintain clear space equal to logo height around logo
✅ Use icon version for favicons and compact spaces
✅ Preserve aspect ratios when scaling
✅ Use on appropriate backgrounds (light or dark)
✅ Link logos to homepage when applicable
Don'ts¶
Avoid These Mistakes
❌ Don't stretch or skew the logo proportions
❌ Don't use on busy backgrounds without sufficient contrast
❌ Don't recreate or modify logo elements
❌ Don't use outdated versions (always use enhanced version)
❌ Don't place logos closer than minimum clear space
❌ Don't use low-resolution versions in high-DPI contexts
Clear Space Requirements¶
Maintain clear space around the logo equal to the height of the "Ultimate" text:
Minimum clear space = height of "Ultimate" text
Background Compatibility¶
Light Backgrounds¶
Dark Backgrounds¶
Dark Theme Compatibility
Our logo is designed to work on both light and dark backgrounds. The white document stack provides sufficient contrast, while the purple elements maintain brand recognition.
File Formats & Downloads¶
Available Formats¶
| Format | Primary Use | File |
|---|---|---|
| SVG | Web, scalable applications | logo-enhanced.svg |
| SVG Icon | Favicons, app icons | logo-icon.svg |
| SVG Vertical | Vertical layouts, print | logo-vertical.svg |
| SVG Favicon | Browser favicons | favicon.svg |
Technical Specifications¶
<!-- Primary logo implementation -->
<img loading="lazy" src="assets/logo-enhanced.svg"
alt="Ultimate MkDocs Guide"
width="160"
height="48" />
<!-- Icon implementation -->
<img loading="lazy" src="assets/logo-icon.svg"
alt="Ultimate MkDocs Guide"
width="48"
height="48" />
<!-- Favicon reference -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
Performance Optimization¶
- SVG format: Vector graphics ensure crisp display at all sizes
- Optimized code: Clean SVG markup for fast loading
- Gradient efficiency: Reusable gradient definitions
- Minimal complexity: Balanced detail for performance
Brand Evolution¶
Enhanced Features (Current)¶
- ✅ Sophisticated three-layer document metaphor
- ✅ Technical code bracket indicators
- ✅ Professional gradient system
- ✅ Improved typography treatment
- ✅ Modern geometric composition
- ✅ Enhanced visual hierarchy
Previous Version Improvements¶
- More distinctive identity: Evolved from simple document icon
- Professional sophistication: Added depth and visual interest
- Technical emphasis: Included code brackets for developer focus
- Brand consistency: Aligned with comprehensive color system
- Scalability: Optimized for all sizes from favicon to hero
This logo system establishes a strong, professional brand identity that perfectly represents our position as the ultimate guide to MkDocs Material documentation.