Supercell Brand Design System Deep Dive

1. Brand Overview

Supercell’s visual language is unapologetically bold, game-centric, and pixel-precise. This is a company that trades in high-energy, high-engagement experiences — think Clash of Clans, Brawl Stars — and the site mirrors that ethos. The design system is built for a wide audience, from hardcore mobile gamers to curious recruits, but it doesn’t dilute its identity to accommodate everyone. Instead, it leans into a distinct personality: chunky type, punchy blues, strong contrast.

The vibe is confident but never overproduced. You’re not getting glossy gradients or over-the-top skeuomorphism. Instead, there’s a deliberate restraint in the palette and typography that lets the brand’s game art carry the emotional weight. The UI itself is clean, almost utilitarian — a frame for the content.

From a design philosophy standpoint, this is a utilitarian chassis wrapped around a playful core. The chassis — the buttons, grids, and text — is consistent and disciplined, sticking to an 8px spacing scale, a small set of radii, and a defined palette. The playfulness shows up in the imagery and occasional accent colors like hot pink (#fb4a9d). This split keeps the UI from competing with the games’ art direction.

The typography choices reinforce this. Headings use a proprietary “SupercellHeadline-Heavy” that’s uppercase and tight, giving off that “poster” feel you’d expect from game splash screens. Body and UI text switches to “SupercellText” variants, which are highly readable sans-serifs with Helvetica/Arial fallbacks — safe, legible, and consistent.

Everything about the system says: “We know what matters — the games — so the UI won’t distract.” But that doesn’t mean it’s boring. The primary blue (#2d85f3) is vibrant and energetic, used sparingly enough to pop. Neutral grays range from soft (#989893) to dark (#555555), supporting a clear information hierarchy.

If you’re designing for Supercell, the takeaway is: keep it bold, keep it clean, and let the content speak. This is a brand that knows restraint can be a form of confidence.

2. Color System

2.1 Primary Colors

The main brand action color is #2d85f3 (rgb(45,133,243)). It’s bright enough to stand out against both light and dark backgrounds, and it reads as “playful tech” — somewhere between a corporate SaaS blue and a gaming neon. It’s used for CTAs, links, and interactive highlights.

Psychologically, blue conveys trust and stability, but this particular hue is more energetic due to its high saturation. Compared to competitors: Riot Games leans into deep reds, Blizzard into icy blues and golds. Supercell’s blue is cleaner, less moody, which aligns with the mobile-first, mass-market appeal.

Hot pink (#fb4a9d) is the secondary accent. It’s not overused — think of it as a highlight for special promotions or UI moments that need extra punch.

Whites and grays form the backbone. #ffffff is the primary background. #989893 serves as a mid-gray, #555555 and #696969 provide darker text tones. #808080 is a secondary gray for subtle text or icons.

2.2 Complete Palette

These are the only colors in the extracted palette. No greens, no yellows — except for a one-off border color (#32AE88) in a specific div context, which is not part of the core set.

2.3 Color Relationships

Contrast-wise:

• #2d85f3 on #ffffff has a ratio of ~4.5:1 — just at WCAG AA for normal text.
• #ffffff on #2d85f3 is ~4.5:1 — same story. Fine for buttons and large type.
• Grays on white need careful pairing: #989893 on white is around 5:1, safe. #808080 is ~4.5:1, borderline for small text.

The palette is light-mode-centric. Dark mode is not represented in the data, so any inversion would require careful mapping to preserve contrast.

2.4 Usage Guide

• Use #2d85f3 ONLY for interactive elements (buttons, primary links). Don’t paint large backgrounds with it — it loses its pop.
• Hot pink is a sparing accent. One per view max, or it becomes noise.
• Grays should be used to create hierarchy: darker for headings, lighter for meta.
• Avoid placing mid-gray text (#989893) on mid-gray backgrounds — contrast will fail.
• If designing a dark variant, swap white for dark gray backgrounds and adjust text to maintain 4.5:1 contrast.

3. Typography

3.1 Font Families

Two main families:

• SupercellHeadline-Heavy — custom, no fallbacks listed except Arial in smaller sizes. All caps in headings, heavy weight (though marked as weight 400 in CSS — likely a naming quirk).
• SupercellText variants — Regular, Medium, Bold. Fallbacks: Helvetica, Arial. Used for body, links, buttons.

No Google Fonts or Adobe Fonts; these are custom-loaded.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is built more on size and casing than weight — interestingly, all weights are “400” in CSS, even for bold labels. Likely the weight is baked into the font file. Headings are massive (64px) and uppercase, creating instant visual anchors. Body text sits in the 16-18px range, with generous line heights for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — confirmed by common values. But there are also non-8px increments (1px, 2px, 3.5px, 5px, 7px, 10px, etc.), used for fine-tuning.

4.2 Layout

Breakpoints are numerous — from 340px up to 1681px — suggesting a very granular responsive system. Likely a fluid layout with tweaks at common device widths.

5. Visual Elements

Border Radius

Values used: 2px, 2.5px, 3px, 8px, 16px, 17px, 20px, 50px.

• 2px: small buttons, close icons.
• 8px: primary CTAs, large buttons.
• 50px: pill shapes (search inputs).

Shadows

Sparse use. Five unique shadows, mostly subtle:

• rgba(0,0,0,0.2) 0 0 18px
• rgba(0,0,0,0.3) 0 10px 20px
• rgb(153,153,153) 0 2px 10px -3px
• rgb(199,197,199) -3px -3px 5px -2px
• rgb(199,197,199) 0 0 12px 2px

Borders

Mostly 1px solids in blue, grays, or accent green. Used for inputs, switches, buttons.

6. Components

6.1 Buttons

Primary “blue pill”:

• Default: bg #2d85f3, white text, padding 14.4px 24px, radius 8px.
• Hover: bg #2979de, opacity 0.7.
• Focus: bg #1eaedb, outline 2px solid black, border 1px solid black.
• No active state defined.
• Font: SupercellText-Regular, 12px.

6.2 Links

Multiple variants by color:

• Black (#000000), Gray (#808080), Mid Gray (#989893), White (#ffffff), Blue (#2d85f3).
• All no underline, hover changes color to #3860be.

6.3 Forms

Inputs not detailed in data — likely minimal.

6.4 Cards

Not explicitly defined, but shadows suggest subtle elevation.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-mid: #989893;
  --color-hot-pink: #fb4a9d;
  --color-gray-dark: #696969;
  --color-gray-charcoal: #555555;
  --color-blue-primary: #2d85f3;
  --color-gray-neutral: #808080;

  /* Typography */
  --font-headline: "SupercellHeadline-Heavy", Arial, sans-serif;
  --font-text-regular: "SupercellText-Regular", Helvetica, Arial, sans-serif;
  --font-text-medium: "SupercellText-Medium", Helvetica, Arial, sans-serif;
  --font-text-bold: "SupercellText-Bold", Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3-5: 3.5px;
  --space-5: 5px;
  --space-7: 7px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14-4: 14.4px;
  --space-15: 15px;
  --space-15-6: 15.6px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22-5: 22.5px;
  --space-24: 24px;
  --space-25: 25px;
  --space-25-5: 25.5px;
  --space-30: 30px;
  --space-32: 32px;
  --space-64: 64px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;

  /* Shadows */
  --shadow-1: rgba(0,0,0,0.2) 0px 0px 18px 0px;
  --shadow-2: rgba(0,0,0,0.3) 0px 10px 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

# Supercell Design System Specification

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

## Brand Context
Supercell's design language is bold, clean, and gamer-centric. UI elements are restrained to let vivid game art shine. The system uses a disciplined 8px grid, strong uppercase headings, and a vibrant blue for CTAs.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark
- Mid Gray: #989893 — Secondary text, meta info
- Hot Pink: #fb4a9d — Promotional highlights
- Dark Gray: #696969 — Body text, icons
- Charcoal Gray: #555555 — Strong headings, nav
- Primary Blue: #2d85f3 — Primary actions, links
- Neutral Gray: #808080 — Disabled states

## Typography
Fonts:
- Headings: "SupercellHeadline-Heavy", Arial
- Body/UI: "SupercellText-Regular/Medium/Bold", Helvetica, Arial

Type scale:
| Level | Font | Size | Weight | Line Height | Use |
| H1    | Headline | 64px | 400 | 1.25 | Hero titles |
| H2    | Headline | 45px | 400 | 1.65 | Section titles |
| Body  | Text-Regular | 16-18px | 400 | 1.56-1.65 | Body copy |
| Buttons | Text-Regular | 12-17px | 400 | 1.2-1.65 | CTAs |
| Captions | Text-Bold | 12-14px | 400 | 1.56 | Labels |

## Spacing & Grid
Base: 8px grid. Values: 1, 2, 3.5, 5, 7, 10, 12, 14.4, 15, 15.6, 16, 18, 20, 22.5, 24, 25, 25.5, 30, 32, 64px.

## Border Radius
- sm: 2px — small buttons
- md: 8px — CTAs
- lg: 16px — large containers
- pill: 50px — search bars
- others: 2.5px, 3px, 17px, 20px for specific components

## Shadows & Depth
- rgba(0,0,0,0.2) 0 0 18px
- rgba(0,0,0,0.3) 0 10px 20px
- rgb(153,153,153) 0 2px 10px -3px
- rgb(199,197,199) -3px -3px 5px -2px
- rgb(199,197,199) 0 0 12px 2px

## Component Specifications

### Primary Button
Default:
- background: #2d85f3
- color: #ffffff
- padding: 14.4px 24px
- radius: 8px
- border: none
- font: SupercellText-Regular, 12px
Hover:
- background: #2979de
- opacity: 0.7
Focus:
- background: #1eaedb
- outline: 2px solid #000000
- border: 1px solid #000000

### Links
Default: no underline, color varies (black, gray, white, blue)
Hover: color #3860be

## Layout & Responsive Rules
Breakpoints: 340px, 400px, 425px, 476px, ..., 1681px.
Fluid layout with adjustments at these widths.

## Interaction Rules
- Transition timing: 150ms ease on hover/focus
- Focus indicators: visible outlines for accessibility

## DO
- Use only palette colors
- Maintain 8px grid
- Keep headings uppercase
- Reserve hot pink for emphasis
- Ensure contrast ratios meet WCAG

## DON'T
- Add new colors
- Mix sharp and rounded corners randomly
- Overuse shadows
- Use hot pink for body text
- Remove focus outlines

## Code Examples

Button:
```css
.btn-primary {
  background: #2d85f3;
  color: #ffffff;
  padding: 14.4px 24px;
  border-radius: 8px;
  border: none;
  font-family: "SupercellText-Regular", Helvetica, Arial, sans-serif;
  font-size: 12px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #2979de;
  opacity: 0.7;
}
.btn-primary:focus {
  background: #1eaedb;
  outline: 2px solid #000000;
  border: 1px solid #000000;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.2) 0 0 18px;
  padding: 24px;
}
```

Input:
```css
.input {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  padding: 10px 12px;
  font-family: "SupercellText-Regular", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.input:focus {
  border-color: #2d85f3;
  outline: none;
}
```

9. Summary

TL;DR — Supercell’s UI system is bold but minimal. Primary blue CTAs, uppercase heavy headings, and an 8px grid keep it consistent. Let the game art do the talking.

Brand Keywords — bold-minimalist, gamer-focused, grid-disciplined, vivid-accent