FanFest Design Guidelines
Welcome to the FanFest Design Guidelines. This document provides comprehensive specifications for all visual assets and design elements needed to create a professional presence on the FanFest Platform.
Purpose
This guide ensures that your channel maintains visual consistency, responsive design, and high-quality presentation across all devices and screen densities. Whether you're a creator, brand, or organization, following these guidelines will help you deliver the best experience to your audience.
What You'll Need to Provide
As you prepare to launch your channel on FanFest, you'll need to provide:
- Visual Assets - Logo, banner, and thumbnail images for shows, contests, and interactive content
- Brand Theme - Optional custom color tokens for your channel (advanced)
This document outlines the exact specifications for each asset type.
Visual Asset Specifications
Channel Logo
Your channel logo is the primary visual identifier for your brand within the FanFest Platform. It appears throughout the interface and should be instantly recognizable at various sizes.
Use Cases
| Usage Context | Display Size | Description |
|---|---|---|
| Channel Header | 64 × 64 px | Main channel page header and navigation |
Format Requirements
- Shape: Square (1:1 aspect ratio)
- Display Size: 64 × 64 px
- Upload Resolution: Minimum 256 × 256 px (for Retina/4K displays)
- File Type: PNG (preferred for transparency support)
- Transparency: Supported and recommended for dark/light theme flexibility
- Maximum File Size: 2 MB
Design Best Practices
- Legibility: Ensure the logo remains clear and recognizable at small sizes. Avoid intricate details or thin lines.
- Padding: Include a small margin around the main symbol to prevent visual clipping in circular or rounded containers.
- Background: Use solid or gradient colors from your brand palette. Avoid photos or noisy textures.
- Typography: Avoid text smaller than 10 px in height within the logo.
Channel Banner
The channel banner serves as the hero image for your FanFest channel, appearing prominently at the top of your page. It's your first opportunity to make a visual impression on visitors.
Use Cases
| Usage Context | Display Size | Device | Description |
|---|---|---|---|
| Channel Header | Full-width × 300 px | Desktop | Hero banner at top of channel page |
| Channel Header | Full-width × 260 px | Mobile | Hero banner with responsive center cropping |
Technical Specifications
| Platform | Recommended Size | Display Height | Notes |
|---|---|---|---|
| Desktop | 820 × 300 px | 300 px | Full-width container, center-aligned |
| Mobile | 820 × 260 px | 260 px | Scales proportionally with responsive center cropping |
- Aspect Ratio: Approximately 2.73:1
- Upload Resolution: Minimum 1640 × 600 px (2× scale for Retina/4K displays)
- File Type: JPG or PNG (PNG preferred for better color depth)
- Maximum File Size: 5 MB
Safe Zones
A single banner image is used across all devices with responsive cropping. To ensure your key content remains visible:
- Core Safe Zone: Keep logos, text, or focal points within the central 640 × 180 px zone
- Edge Zones: The outer areas (top/bottom 60 px, left/right 90 px) may be cropped on smaller screens or different aspect ratios
- Best Practice: Avoid placing essential visuals near the edges; keep the composition centered
Design Guidelines
- Keep it simple—this is a hero image, not a detailed infographic
- Use high-quality imagery that represents your brand identity
- Ensure good contrast if overlaying text or logos
- Test how it looks cropped at different sizes
Show & Contest Thumbnails
Thumbnails are visual entry points to interactive content on your channel. They appear in content rails and widget cards, providing a preview of what users can engage with.
Use Cases
| Usage Context | Display Size | Aspect Ratio | Description |
|---|---|---|---|
| Show Cards | 312 × 200 px | 1.56:1 | Displayed in the horizontal scrollable rail on your channel page |
| Contest Cards | 312 × 200 px | 1.56:1 | Used for contest widgets across the platform |
Requirements
- Upload Resolution: Minimum 624 × 400 px (2× for Retina/4K displays)
- File Type: PNG or JPG (PNG preferred for better definition and transparency)
- Maximum File Size: 3 MB
Design & Composition Guidelines
- Contrast: Use high-contrast imagery with clear focal elements to attract attention
- Hierarchy: Maintain consistent visual hierarchy (e.g., subject centered, branding at bottom)
- Text Limitation: Limit embedded text or logos to 20% of the total area to maintain clarity
- Backgrounds: Use gradient overlays or blurred visuals that align with your brand palette
- Simplicity: Avoid cluttered compositions or elements that might be cropped in responsive layouts
- Mobile First: Design with mobile viewing in mind, as the majority of users engage via mobile devices
Typography & Branding
- Text Overlays: Titles and key information are handled by the UI layer; avoid embedding large text within the image
- Brand Placement: If including sponsor logos, position them in the bottom area of the thumbnail
Media Share Images
Media share images appear within shows when content is shared by users or hosts. These images are displayed with zoom-to-fit scaling.
Use Cases
| Usage Context | Display Format | Device | Description |
|---|---|---|---|
| In-Show Media Feed | Zoom-to-fit | Mobile | Primary content display within show interface (portrait optimized) |
| In-Show Media Feed | Zoom-to-fit | Desktop | Content display in show viewer (landscape supported) |
| Share Preview | Thumbnail | All | Preview thumbnail before opening full media |
Format Specifications
- Recommended Format: Portrait or Square
- Aspect Ratio:
- Portrait (Recommended): 4:5 (e.g., 1080 × 1350 px) - Optimized for mobile viewing
- Square: 1:1 (e.g., 1080 × 1080 px) - Universal compatibility
- Landscape (Supported): 16:9 (e.g., 1920 × 1080 px) - Desktop-optimized
- Upload Resolution:
- Portrait: Minimum 1080 × 1350 px
- Square: Minimum 1080 × 1080 px
- Landscape: Minimum 1920 × 1080 px
- File Type: JPG or PNG (JPG preferred for photos, PNG for graphics)
- Maximum File Size: 5 MB
Design Considerations
- Mobile First: Portrait orientation (4:5) is recommended as it maximizes screen real estate on mobile devices
- Safe Area: Keep important content away from edges as zoom-to-fit may crop slightly
- Focal Point: Center key subjects as the image may be displayed at different aspect ratios
- Quality: Use high-resolution images that maintain clarity when zoomed
Offer Images
Offer images are used to promote special deals, products, or services within shows. They appear as square cards in both horizontal and vertical layouts.
Use Cases
| Usage Context | Display Size | Device | Description |
|---|---|---|---|
| In-Show Offers | 280 × 280 px | Mobile | Square offer cards within show content |
| In-Show Offers | 320 × 320 px | Desktop | Square offer cards in desktop show view |
Format Specifications
- Aspect Ratio: 1:1 (Square)
- Display Size: 280 × 280 px (mobile), 320 × 320 px (desktop)
- Upload Resolution: Minimum 640 × 640 px (2× for Retina/4K displays)
- Recommended Resolution: 1080 × 1080 px for optimal quality
- File Type: PNG or JPG (PNG preferred for sharp text and graphics)
- Maximum File Size: 3 MB
Design Best Practices
- Clarity: Use bold, clear imagery that communicates the offer at a glance
- Text: Keep text minimal and large (min 48 px for key text in source file)
- Branding: Include your logo but keep it subtle (10-15% of image area)
- Call-to-Action: Visual indicators (arrows, buttons) should be clear and prominent
- Contrast: Ensure high contrast between background and foreground elements
- Mobile First: Design at mobile size first, then verify it scales well to desktop
Contest Prize Images
Contest prize images showcase rewards and incentives for contests. They appear as square cards on both the channel page and within shows.
Use Cases
| Usage Context | Display Size | Location | Description |
|---|---|---|---|
| Channel Contest Widget | 240 × 240 px | Channel page | Contest prize display on main channel page |
| In-Show Contest Card | 280 × 280 px | Show feed | Prize showcase within show interface |
| Winner Announcement | 240 × 240 px | Notifications | Prize image in winner notification and announcements |
Format Specifications
- Aspect Ratio: 1:1 (Square)
- Display Size:
- Channel Page: 240 × 240 px
- Within Shows: 280 × 280 px
- Upload Resolution: Minimum 640 × 640 px (2× for Retina/4K displays)
- Recommended Resolution: 1080 × 1080 px for optimal quality
- File Type: PNG (preferred for transparency) or JPG
- Maximum File Size: 3 MB
Design Guidelines
- Product Focus: Feature the prize prominently with clean, uncluttered composition
- Background: Use solid colors or subtle gradients that don't compete with the prize
- Lighting: Ensure even lighting that highlights the prize attractively
- Context: Show the prize in use or with scale reference where appropriate
- Transparency: Use PNG with transparent background when the prize image allows
- Mobile First: Ensure key details are visible at small sizes (240 × 240 px)
Image Types by Prize Category
- Physical Products: Professional product photography on clean background
- Digital Prizes: Icon or graphic representation with clear branding
- Experiences: Lifestyle photography showing the experience context
- Gift Cards/Vouchers: Brand logo or styled voucher design
Theme Customization
Design Tokens Reference
Theme Notice
The FanFest interface currently operates under a dark theme configuration. Future iterations will introduce multi-theme support, enabling light, dark, and high-contrast modes.
This reference documents the Dark Theme (v1) design tokens used across all FanFest surfaces. These tokens are available for advanced customization of your channel's appearance.
Brand Colors
Core brand colors that define your channel's visual identity and interactive elements.
| Token | Default Value | Description |
|---|---|---|
--brand-bg-main | #100B1E | Primary background color (deep purple tone) |
--brand-light-bg-overlay-50 | #100B1E80 | Light overlay at 50% opacity for background layering |
--brand-strong-bg-overlay-80 | #100B1ECC | Stronger overlay at 80% opacity for modals and emphasis |
--brand-primary | #875AF9 | Main brand color for highlights, CTAs, and interactive accents |
--brand-surface-hover | #875AF94D | Hover state color (30% transparency) |
--brand-bgdivider-20 | #875AF933 | Subtle divider color (20% opacity) |
--brand-bgdivider-10 | #875AF91A | Light divider (10% opacity) |
--brand-quaternary-40 | #875AF966 | Fourth-level brand tint for gradients and overlays |
--brand-secondary-80 | #875AF9CC | Secondary brand tone for hover and pressed states |
--brand-tertiary-60 | #875AF999 | Tertiary brand tone for mid-level states |
--brand-fill-dark | #00000099 | Semi-transparent dark overlay for blending effects |
--brand-icon-emphasis | #FFFFFF | High-contrast icon color for brand surfaces |
Backgrounds & Surfaces
Surface tokens define the layering system for cards, modals, and interface panels.
| Token | Default Value | Description |
|---|---|---|
--bg | #100B1E | Global background color (dark mode base) |
--bg-secondary | #100B1EB3 | Secondary background with 70% opacity |
--surface | #875AF91A | Transparent surface background for cards or widgets |
--surface-hover | #875AF933 | Hover variation of surface tone |
--surface-secondary | #FFFFFF0D | Secondary surface layer (light translucent white) |
--surface-secondary-hover | #FFFFFF1A | Hover state for secondary surfaces |
--surface-accent | #FF8D3A | Accent tone for surface highlights or alerts |
Fill & State Layers
Fill colors for buttons, interactive elements, and system feedback states.
| Token | Default Value | Description |
|---|---|---|
--fill-brand | #875AF9 | Main fill color for brand components |
--fill-brand-hover | #875AF9CC | Hover state for brand-filled elements |
--fill-brand-pressed | #875AF999 | Pressed or active state for brand elements |
--fill-brand-secondary | #875AF94D | Secondary fill for subtle brand tints |
--fill-brand-secondary-hover | #875AF980 | Hover variant for secondary fills |
--fill-brand-secondary-pressed | #875AF980 | Pressed variant for secondary fills |
--fill-dark | #00000099 | Neutral dark fill for overlays or shadows |
--fill-dark-hover | #00000066 | Hover state of neutral dark fill |
--fill-dark-pressed | #000000CC | Pressed state of neutral dark fill |
--fill-disabled | #7E7E7E66 | Disabled state background fill |
--fill-success | #0DD32D | Success (positive feedback) color |
--fill-critical | #ED3024 | Critical (error) color |
--fill-critical-secondary | #ED30244D | Secondary error overlay |
--fill-warning | #FF8D3A | Warning or alert color |
--fill-warning-secondary | #FF8D3A4D | Secondary warning background |
--fill-silver | #7E7E7E | Neutral gray tone for rankings or status |
--fill-bronze | #AB8F54 | Bronze accent (achievement or rank) |
--fill-gold | #FFCA17 | Gold accent (trophies, rewards) |
--fill-gold-light | #EFEDDB | Light gold tone for highlights |
--fill-gold-dark | #977400 | Dark gold tone for contrast |
Text Colors
Typography color tokens for various emphasis levels and states.
| Token | Default Value | Description |
|---|---|---|
--text | #FFFFFF | Default text color on dark backgrounds |
--text-on-brand | #FFFFFF | Text color used on brand-colored elements |
--text-inverse | #000000 | Inverted text color for light backgrounds |
--text-secondary | #FFFFFFCC | Secondary text (reduced emphasis) |
--text-tertiary | #FFFFFF99 | Tertiary text for captions or metadata |
--text-disabled | #FFFFFF66 | Disabled or de-emphasized text |
--text-success | #0DD32D | Positive message color |
--text-critical | #ED3024 | Error or alert text color |
--text-brand | #875AF9 | Brand-related text color |
--text-accent | #BC5BAA | Secondary accent tone (used in UI highlights) |
--text-accent-secondary | #F15C5C | Alternate accent color |
--text-gold | #FFCA17 | Highlight color for special mentions or achievements |
--text-gold-light | #EFEDDB | Light tone for gold text on dark surfaces |
--text-gold-dark | #977400 | Dark gold tone for emphasis |
Borders
Border color tokens for UI elements, states, and interactions.
| Token | Default Value | Description |
|---|---|---|
--border | #FFFFFF0D | Default border color (subtle) |
--border-hover | #FFFFFF1A | Hover state border |
--border-pressed | #FFFFFF4D | Pressed state border |
--border-selected | #FFFFFF66 | Selected element border |
--border-secondary | #FFFFFF1A | Secondary divider border |
--border-brand | #875AF9 | Brand border color |
--border-brand-hover | #875AF9CC | Hover state brand border |
--border-brand-pressed | #875AF999 | Pressed state brand border |
--border-brand-selected | #875AF9B3 | Selected state brand border |
--border-critical | #ED3024 | Error border |
--border-success | #0DD32D | Success border |
--border-warning | #FF8D3A | Warning border |
--border-dark | #100B1E | Dark background border tone |
--border-button-shadow-light | #FFFFFF66 | Button highlight shadow for light-on-dark surfaces |
--border-button-shadow-dark | #00000066 | Button inset shadow for dark-on-light surfaces |
Icons
Icon color tokens for various states and emphasis levels.
| Token | Default Value | Description |
|---|---|---|
--icon | #FFFFFF80 | Default icon color (medium emphasis) |
--icon-emphasis | #FFFFFF | High-emphasis icon color |
--icon-on-branded-surface | #FFFFFF | Icon color used over brand surfaces |
--icon-hover | #FFFFFFB3 | Hover state color for icons |
--icon-secondary | #FFFFFF66 | Secondary (low emphasis) icon tone |
--icon-secondary-hover | #FFFFFF80 | Hover variant for secondary icons |
--icon-disabled | #FFFFFF66 | Disabled icon color |
--icon-brand | #875AF9 | Brand-specific icon accent |
Need Help?
If you have questions about these specifications or need assistance preparing your assets, please contact your FanFest onboarding representative or reach out via the support chat in your FanFest dashboard.