Brand Guidelines
The FanFest brand system gives channels complete control over their visual identity. From design tokens and color themes to asset specifications and embed styling, everything is built to be customizable while maintaining a consistent, professional experience.
Visual Identity Principles
Dark-first design --- FanFest interfaces are built on dark backgrounds, with brand colors providing accent and emphasis. All tokens are optimized for dark-mode readability.
Brand color as accent --- The primary brand color (default
#875AF9) drives interactive elements, selections, and visual hierarchy. It flows consistently through fills, borders, text, and icons.Layered surfaces --- The interface uses a surface layering system (background, surface, surface-secondary) with subtle transparency to create depth without visual clutter.
Consistent token language --- Every color in the system maps to a named design token with a CSS custom property and Tailwind utility. No magic hex values in component code.
Quick Reference
Common Asset Dimensions
| Asset | Minimum Upload Size | Aspect Ratio |
|---|---|---|
| Channel Logo | 256 x 256 px | 1:1 (square) |
| Channel Banner | 1640 x 600 px | ~2.73:1 |
| Show/Contest Thumbnail | 624 x 400 px | 1.56:1 |
| Media Share Image | 1080 x 1080 px | 1:1 (square) |
| Offer Image | 640 x 640 px | 1:1 (square) |
| Contest Prize Image | 640 x 640 px | 1:1 (square) |
See Visual Assets for full specifications.
Primary Brand Color
The default FanFest brand color is #875AF9 (indigo). This value is used as the default for --fill-brand, --text-brand, --border-brand, and --icon-brand tokens. Channels override this with their own brand color through the theming system.
Sections
- Visual Assets --- Complete specifications for logos, banners, thumbnails, and all image assets
- Design Tokens --- All 76 design tokens organized by category, with CSS variable and Tailwind utility mappings
- Theming --- Two-layer theming system, the theme editor, community themes, and pre-built theme library
- Embed Styling --- Making the embedded FanFest widget match your brand and host page design