Fandom Brand Design System Deep-Dive

1. Brand Overview

Fandom is unapologetically about community, passion, and hyper-specific knowledge. You land on their site and it’s instantly clear—this is where fans go deep. The visual language is bold but playful. Colors hit hard, typography leans modern and approachable, and UI elements aren’t shy about mixing strong contrast with bright accents. This isn’t a sterile corporate brand—it’s a living world of pop culture, gaming, and niche universes, wrapped in a design system that’s meant to handle everything from Star Wars lore to Pokémon stats.

The vibe: energetic but structured. They use a strong brand purple (#520044) as a foundation, which feels rich and a bit mysterious, paired with pops of yellow (#ffc500) and magenta (#fa005a) for excitement. Their teal (#088488) and softer cream (#f9edd8) balance things out, keeping it from feeling too heavy.

Typography is all Rubik—a geometric sans-serif from Google Fonts—with high weights and uppercase transforms in headings. This choice says “modern gaming UI” more than “classic editorial.” It’s clean, readable, and works cross-platform. They’re not trying to be typographically experimental—this is a functional, recognizable voice.

Layout is predictable in a good way. An 8px spacing grid underpins everything. Breakpoints are granular, suggesting they’ve tuned the responsive behavior to fit actual content patterns rather than arbitrary marketing standards. Components are rounded just enough to feel friendly (common radius: 3px), but not so much they look cartoonish. And yes, they use shadows—but sparingly, often relying on borders for separation.

The audience is anyone deep into fandom culture—gamers, cinephiles, anime enthusiasts—who expect a fast, clear interface but don’t mind a bit of visual flair. The design system supports that with high-contrast CTAs, accessible link colors, and consistent component states. It’s built to scale across thousands of community wikis, meaning the system has to be flexible but still unmistakably “Fandom.”

2. Color System

2.1 Primary Colors

The undisputed hero here is #520044 (rgb(82,0,68)). This deep purple is the anchor for brand identity—used in buttons, borders, and navigation accents. It’s saturated enough to stand out against white, yellow, and teal backgrounds, and it plays well with both light and dark text. Psychologically, purple signals creativity and imagination—spot on for a brand about fictional worlds and storytelling.

Compared to competitors like Reddit (orange) or Discord (blurple), Fandom’s purple is darker and more grounded. It leans more toward a "premium fantasy" vibe than “casual social chat.”

2.2 Complete Palette

2.3 Color Relationships

The palette is high contrast. #520044 against #ffffff is AA-compliant for large text and AAA for normal text. Yellow (#ffc500) over purple passes accessibility for large text but fails for small text unless bold. Magenta (#fa005a) is intense—over white it’s fine, but over cream it can fail contrast ratios.

They don’t appear to have a formal dark mode—the palette is tuned for light backgrounds with dark accents. The CSS variables suggest dynamic theme colors, but the extracted data shows mostly light surfaces.

2.4 Usage Guide

• Works well: Purple + white (high contrast, brand-forward), teal + white (clear link styling), cream + black (soft reading experience).
• Avoid: Yellow on white (poor contrast), magenta on cream (low readability).
• Hover states: Magenta is the go-to for attention; blue hover (#005fcc) for links keeps them feeling interactive.
• Borders: Purple and yellow borders stand out; grays (#696969, #555555) are for subtle dividers.

3. Typography

3.1 Font Families

Everything is Rubik, with helvetica, arial as fallbacks. Rubik is geometric, slightly rounded, and modern—good legibility and a friendly feel. Source: Google Fonts. No variable fonts here—weights are explicitly defined.

3.2 Type Scale

3.3 Hierarchy

Heavy weights (700–900) in headings and uppercase transforms give a loud, confident hierarchy. Body text sticks to 400 or 500 weight—keeping readability high. The jump from 36px H1 to 24px sub-headings is clear, while smaller captions at 12px–14px keep UI labels tight. Line heights are sometimes zero or very tight (0.00 for certain headings)—probably in navigation items to keep them vertically aligned.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px system, but with plenty of odd values for micro-adjustments.

4.2 Layout

Breakpoints are numerous: smallest at 330px, largest at 1500px. They’ve clearly tested for specific device widths—there are near-duplicates (768, 769px; 896, 897px) to catch quirks. This suggests a responsive approach tuned to content modules rather than generic mobile/tablet/desktop splits.

5. Visual Elements

• Border Radius: Common values are 3px (inputs, buttons), 4px (images, links), and 50px/100px for pill styles. They even have 17px, 18px for specific components—probably filters or special UI chips.
• Shadows: Sparse usage. Examples:
  • rgba(0,0,0,0.2) 0px 4px 8px
  • rgba(30,12,27,0.3) 0px 0px 20px
• Borders: Purple borders for brand elements, grays for subtle separation, yellow for highlight actions.

6. Components

6.1 Buttons

Secondary (wds-is-secondary)

• Default: bg transparent, color #520044, padding 7px 18px, radius 3px, border 1px solid #520044.
• Hover: bg #fa005a, color rgb(34,133,247), transform translate(0.5em,-50%), box-shadow white inset.
• Active: bg rgb(44,100,21), color white.
• Focus: bg rgb(30,174,219), color white, translateY(-16px).

Primary (wds-button)

• Default: bg #520044, color white, padding 7px 18px, radius 3px.
• Hover: same hover as secondary.
• Active/Focus: same as secondary.

Search Submit

• Default: bg #f9edd8, color black, radius 50px.
• Hover: bg #fa005a, color white.
• Focus: bg #1eaedb, color white.

Newsletter Submit

• Default: bg #ffc500, color #520044.
• Hover: bg #1eaedb, color white.

6.2 Links

Four main link styles:

• Teal (#088488) → hover blue (#3860be)
• Purple (#520044) → hover blue
• White → hover blue
• Yellow (#ffc500) → hover blue

No underlines—interaction is purely color-change.

6.3 Forms

Text input:

• Default: bg white, border #b3b3b3, radius 3px.
• Focus: bg #1eaedb, color white, border black.

Email input:

• Transparent background, white text.

7. Design Tokens

:root {
  /* Colors */
  --color-brand-purple: #520044;
  --color-white: #ffffff;
  --color-teal: #088488;
  --color-yellow: #ffc500;
  --color-magenta: #fa005a;
  --color-black: #000000;
  --color-dark-gray: #696969;
  --color-cream: #f9edd8;
  --color-charcoal: #282628;
  --color-mid-gray: #555555;
  --color-deep-plum: #1e0c1b;
  --color-bright-purple: #8d0075;
  --color-blue: #005fcc;

  /* Typography */
  --font-primary: "Rubik", helvetica, arial;
  --font-secondary: "Helvetica Neue", helvetica, arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-18-5: 18.5px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-30-5: 30.5px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-17: 17px;
  --radius-18: 18px;
  --radius-50: 50px;
  --radius-100: 100px;

  /* Shadows */
  --shadow-1: rgba(0,0,0,0.2) 0px 4px 8px 0px;
  --shadow-2: rgba(30,12,27,0.3) 0px 0px 20px 0px;
  --shadow-3: rgb(153,153,153) 0px 2px 10px -3px;
  --shadow-4: rgb(199,197,199) -3px -3px 5px -2px;
  --shadow-5: rgb(199,197,199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Fandom Design System Specification

You are a Fandom design expert. Build UIs matching their visual language exactly.

## Brand Context
Fandom's design is bold, playful, and community-driven. Strong purple anchors the brand, accented by bright yellows, magentas, and teal. The typography is geometric and modern, with clear hierarchy and uppercase headings. The UI is friendly but highly functional, tuned for responsive behavior across many content types.

## Color Palette
- Brand Purple: #520044 — primary buttons, borders, navigation accents
- White: #ffffff — backgrounds, text
- Teal: #088488 — links, highlights
- Yellow: #ffc500 — secondary CTAs, accents
- Magenta: #fa005a — hover states, emphasis
- Black: #000000 — text, outlines
- Dark Gray: #696969 — secondary text
- Cream: #f9edd8 — card backgrounds
- Charcoal: #282628 — dark backgrounds
- Mid Gray: #555555 — icons, subtle text
- Deep Plum: #1e0c1b — hover/focus backgrounds
- Bright Purple: #8d0075 — focus states
- Blue: #005fcc — link hover/focus outlines

## Typography
Font Families:
- Primary: "Rubik", helvetica, arial
- Secondary: "Helvetica Neue", helvetica, arial

Type Scale:
| Element | Size | Weight | Line Height | Use For |
|---------|------|--------|-------------|---------|
| H1 | 36px | 900 | 1.25 | Page titles |
| H2 | 24px | 700 | 1.50 | Section headings |
| Subhead | 24px | 500 | 1.25 | Secondary headings |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 3px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 11.2px, 12px, 15px, 16px, 18px, 18.5px, 20px, 24px, 30px, 30.5px

## Border Radius
- xs: 1px — spans
- sm: 2px — buttons, small containers
- md: 3px — inputs, buttons
- lg: 4px — images, links
- pill: 50px — search submit
- full: 100px — large pill buttons

## Shadows & Depth
- rgba(0,0,0,0.2) 0px 4px 8px
- rgba(30,12,27,0.3) 0px 0px 20px
Use sparingly; borders often replace shadows.

## Component Specifications

### Primary Button
Default: bg #520044; color #ffffff; padding 7px 18px; radius 3px; border 1px solid #520044
Hover: bg #fa005a; color rgb(34,133,247)
Active: bg rgb(44,100,21); color #ffffff
Focus: bg rgb(30,174,219); color #ffffff

### Secondary Button
Default: bg transparent; color #520044
Hover: same as primary hover
Active/Focus: same as primary

### Navigation Links
Teal links: default #088488; hover #3860be
Purple links: default #520044; hover #3860be
No underlines

### Input Fields
Text:
Default: bg #ffffff; color #1e0c1b; border 1px solid #b3b3b3; radius 3px
Focus: bg #1eaedb; color #ffffff; border 1px solid #000000

Email:
Default: bg transparent; color #ffffff

## Layout & Responsive Rules
Breakpoints: 330px, 400px, 425px, 426px, 500px, 530px, 550px, 600px, 767px, 768px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1279px, 1280px, 1499px, 1500px

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus: solid outline, brand color or black

## DO List
- Use only palette colors
- Maintain 8px grid multiples
- Use Rubik for headings and body text
- Keep button radii consistent at 3px (except pills)
- Match hover/active/focus states exactly

## DON'T List
- Don't add extra shadows
- Don't mix sharp and rounded corners inconsistently
- Don't invent new colors
- Don't remove uppercase transforms from headings

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #520044;
  color: #ffffff;
  padding: 7px 18px;
  border-radius: 3px;
  border: 1px solid #520044;
  font-weight: 600;
  font-size: 12px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #fa005a; color: rgb(34,133,247); }
.btn-primary:focus { background: rgb(30,174,219); color: #ffffff; outline: 1px solid #000; }
```

Input:
```css
.input-text {
  background: #ffffff;
  color: #1e0c1b;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  padding: 1px 34px 1px 40px;
}
.input-text:focus {
  background: rgb(30,174,219);
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR: Fandom’s design system is built for energy and clarity—deep purple foundation, bright accents, geometric sans-serif type, and an 8px grid. Components are consistent in their radii and states, with hover/focus colors that pop. It’s a system confident enough to handle wildly different fan communities while staying recognizably “Fandom.”

Brand Keywords:

• bold-playful
• fan-driven
• structured-chaotic
• fantasy-premium
• modern-gaming