HOLOTOME
Premium Components • Production-Ready ✅
1. Brand Logo
Hero Size (Massive Impact)
HOLOTOMELarge Size (Search Page)
HOLOTOMEMedium Size (Headers)
HOLOTOMESmall Size (Navigation)
HOLOTOMEUsed in: Homepage hero, Search page, All headers, Navigation
Features: Golden ratio sizing, Premium gradient animation, Size-specific letter-spacing
2. Three Rings Logo
Navigation Size (48px - Compact)
Desktop Navbar Size (56px)
Mobile Navbar Size (64px)
Large Size (80px)
Design Principles
- • Audi-Inspired: 3 interlocking rings (vs Audi's 4)
- • Brand Colors: Orange, Cyan, Green rings
- • Minimal: Simple, clean, recognizable
- • Symbolic: Represents Innovation, Technology, Performance
- • Scalable: SVG-based, perfect at any size
Technical Details
- • Format: Pure SVG with subtle glow filters
- • Ring Radius: 12% of total size
- • Stroke Width: 5% of total size
- • Colors: #FF6B00 (Orange), #00F5FF (Cyan), #39FF14 (Green)
- • Spacing: 26% between ring centers
Used in: All navigation bars (mobile, desktop, watch pages), Primary brand identity
Psychology: Three interlocking rings symbolize unity and connection, inspired by Audi's premium brand identity. The three brand colors (Orange, Cyan, Green) create instant recognition and represent the trinity of Innovation, Technology, and Performance.
Features: Audi-inspired design, HOLOTOME brand colors, Subtle neon glow effects, Scales perfectly to any size, Pure SVG performance
3. Ultra Buttons
Button Variants
Button Sizes
With Icons
Button States
Used in: Homepage CTAs, Search page, All navigation actions
Features: Multiple variants, Icon support, Loading states, Premium hover effects
4. Ultra Cards
Card Variants
Default Card
Standard card with subtle border and background.
Elevated Card
Card with shadow for depth and hierarchy.
Outlined Card
Minimal card with border emphasis.
Premium Cards with Glow Effect
Feature Cards (Homepage)
Lightning Fast
<500ms with 3-tier caching
Multi-Source
1,500+ sources in one search
Zero Cost
Free forever. No ads
Used in: Homepage stats, Feature cards, Search results, All content containers
Features: Multiple variants, Glow effects, Hover animations, Premium shadows
5. Full Page Loader
Premium loading state for page transitions
Used in: Search page loading, Page transitions
Features: Animated logo, Custom text, Full viewport coverage
6. Glowing Effect
Interactive Glow (Hover to see)
Move your cursor over this card
to see the glow effect
Glow Configuration
Used in: All stat cards, Feature cards, Search bar, Interactive elements
Features: Mouse-tracking glow, Customizable colors, Performance optimized