---
version: alpha
name: Supercell
description: Dark editorial homepage with uppercase heavy display headlines, a hot-pink brand accent, and character-first game imagery — a gaming company that presents itself as a people-first studio with playful confidence.

colors:
  # Canvas
  background: "#ffffff"         # was #191919 (= dark canvas; ink #000000 on #191919 = 1.19:1); fixed to white (the surface where ink text reads); dark canvas moved to surface-dark
  surface: "#ffffff"
  surface-dark: "#191919"       # the brand's near-black dark hero/nav canvas — added to replace background for dark-section use
  surface-muted: "#f5f5f5"

  # Ink
  ink: "#000000"
  ink-inverted: "#ffffff"
  ink-muted: "#989893"  # nav links, secondary text
  ink-dim: "#808080"  # tertiary / disabled states

  # Brand accent
  primary: "#fb4a9d"  # hot pink — Supercell signature
  on-primary: "#000000"  # black text on pink per detected onColor
  primary-hover: "#d53f85"  # darker hover on pink

  # CTA / Link blue
  cta: "#2d85f3"  # Watch Video button blue
  on-cta: "#ffffff"
  cta-hover: "#2671cf"

  # Interaction
  text-hover: "#ffffff"  # nav link hover: muted → white color-shift
  focus-ring: "#fb4a9d"

  # Borders / shadows
  border: "#333333"  # dark theme dividers (approx)
  shadow-soft: "#000000"  # was rgba(0,0,0,0.2–0.3) — Google format requires hex

typography:
  display-hero:
    fontFamily: "SupercellHeadline-Heavy, Impact, Arial Black, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.8px
  display:
    fontFamily: "SupercellHeadline-Heavy, Impact, Arial Black, sans-serif"
    fontSize: 45px
    fontWeight: 900
    lineHeight: 1.65
    letterSpacing: 0px
  heading-section:
    fontFamily: "SupercellHeadline-Heavy, Impact, Arial Black, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "SupercellText-Medium, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.65
    letterSpacing: 0px
  body-large:
    fontFamily: "SupercellText-Regular, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "SupercellText-Regular, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  button-ui:
    fontFamily: "SupercellText-Bold, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
  nav-link:
    fontFamily: "SupercellText-Regular, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  caption:
    fontFamily: "SupercellText-Medium, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 2px
  md: 8px
  lg: 16px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.cta}"
    textColor: "{colors.on-cta}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.cta-hover}"
    textColor: "{colors.on-cta}"
    rounded: "{rounded.md}"
    padding: 14px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 15px 21px
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 15px 21px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.md}"
    padding: 12px 24px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"  # updated from background (#191919 moved here)
    rounded: "{rounded.md}"
    padding: 24px

  nav:
    backgroundColor: "{colors.surface-dark}"  # updated from background
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: 0px 16px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
---

# Supercell Design System

## Overview

Supercell's homepage lives in the tension between two surfaces: a near-black `{colors.background}` that feels cinematic and grown-up, and a clean white `{colors.surface}` where game characters explode into view with the uncontained energy of their own worlds. The result is a corporate site that never feels corporate — the dark canvas amplifies the vivid character art, making every game mascot glow against the void like a theatrical spotlight reveal.

The typography leans into this duality. `SupercellHeadline-Heavy` arrives at the display scale in full uppercase, a proprietary grotesque with the mass of a game logo rather than a browsable headline. It carries an air of authority appropriate for one of the world's highest-revenue mobile studios. Below that, `SupercellText-Regular` and `SupercellText-Medium` shift the gear down entirely — conversational, generous line-height, comfortably readable. The font family was built in-house and self-hosted, signalling that even the typography is part of a controlled creative universe.

The `{colors.primary}` hot pink is one of the most specific brand fingerprints in mobile gaming: saturated, warm, and categorically distinct from the cooler blues and greens competitors reach for. It surfaces on the logo, in filter chips, and as the focus ring, acting as a visual thread that confirms you are in Supercell's world. The CTA blue `{colors.cta}` is deliberately kept separate — a distinct action color that preserves the pink's identity as a brand mark rather than a call-to-action trigger. Together they form an intentional two-accent vocabulary where brand recognition and action clarity never compete.

**Key Characteristics:**
- Dark `{colors.background}` canvas used for navigation, hero, and footer — creates cinematic contrast against character art
- `{colors.primary}` hot pink used exclusively for logo identity and filter/tag accents — brand mark, not CTA
- `{colors.cta}` blue reserved for primary action buttons (Watch Video, See Games) — separate from brand pink
- `{typography.display-hero}` in all-caps heavy grotesque at 64px — reads as a game logo, not a headline
- Two-family type system: proprietary headline face + proprietary text face, both self-hosted WOFF2
- Character-first art direction: 3D game mascots escape containment boxes and overlap layout edges
- White surface sections (`{colors.surface}`) serve as stage for light-background game scenes (Hay Day, Everdale)
- Nav link hover uses `{colors.text-hover}` color-shift from muted `{colors.ink-muted}` to bright white — no underline
- `{rounded.pill}` used for career section filter chips; `{rounded.md}` for CTAs — binary radius vocabulary
- Motion timing at 0.25s ease dominates nav transitions; button background transitions at 0.15s ease-in
- Custom fonts carry the brand: no Google Fonts, no Adobe Fonts — fully owned typographic identity
- Spacing scale is generous at body level (22px body text, 1.56 line-height) — prioritises readability on small mobile screens

## Colors

### Primary Surfaces
- **Near-black** (`{colors.background}`): The dominant canvas — used for the main navigation bar, hero section, and dark alternating content rows. Creates a theatre-like atmosphere where character art and brand color pop.
- **White** (`{colors.surface}`): Used for light-content sections featuring games with pastoral or light-colored palettes. Provides breathing room and contrast rhythm across the page.
- **Muted white** (`{colors.surface-muted}`): Background for hover and secondary surface states.

### Brand Accent
- **Hot pink** (`{colors.primary}`): Supercell's most identifiable color. Applied to the wordmark, career filter chips, and active navigation states. Never used for generic CTAs — reserved as a brand identity marker.

### CTA / Action Blue
- **CTA blue** (`{colors.cta}`): Watch Video, See Games, See Careers — every primary action button runs on this blue. Its distance from the brand pink prevents the two colors from visually competing.

### Text States
- **White** (`{colors.ink-inverted}`): Primary reading color on dark surfaces.
- **Black** (`{colors.ink}`): Primary reading color on white surface sections.
- **Medium grey** (`{colors.ink-muted}`): Default nav link color on dark background — muted until hovered.
- **Darker grey** (`{colors.ink-dim}`): Tertiary or disabled text states.
- **Hover white** (`{colors.text-hover}`): Nav link hover target color — a direct grey-to-white shift, no intermediate tint.

### Shadows & Borders
- **Shadow** (`{colors.shadow-soft}`): Soft box shadows on floating elements (popup menus, cookie banner). Original values were `rgba(0,0,0,0.2–0.3)` — flattened to opaque hex.

## Typography

### Font Family
- **Display / Headline**: `SupercellHeadline-Heavy`, with fallbacks: `Impact, Arial Black, sans-serif`. Self-hosted WOFF2; no public CDN source.
- **Text / UI**: `SupercellText-Regular`, `SupercellText-Medium`, `SupercellText-Bold`, with fallbacks: `Helvetica, Arial, sans-serif`. Three weights, all self-hosted.
- **No variable fonts detected** — discrete weight files loaded individually.

### Hierarchy

The complete type scale is in the `typography:` token block above. Use those tokens via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Page-level hero headline at 64px — uppercase, tight tracking |
| `display` | Large section headlines at 45px — uppercase, heavy weight |
| `heading-section` | Sub-hero headers at 24px in headline face |
| `heading-sub` | Section labels and callout text in text face at 22px |
| `body-large` | Primary body paragraphs, hero descriptor copy at 22px |
| `body` | Standard body text at 18px |
| `button-ui` | CTA and badge labels at 12px bold |
| `nav-link` | Navigation items at 17px regular |
| `caption` | Meta text, tags, filter chips at 14px |

### Principles
- Display text always appears in `SupercellHeadline-Heavy` at uppercase — the typeface was purpose-built for this role.
- Body text is deliberately generous (22px, 1.56 line-height) — optimised for mobile-first readability across game description copy.
- The two-family system creates a clean register boundary: heavy geometric for titles, humanist for reading.
- Tight tracking (`-0.8px`) on hero display gives headlines mass without excess width.
- No web-safe fallback compromises — system fonts only appear if self-hosted WOFF2 fails to load.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The spacing personality is generous rather than compressed — game promotional sites need room to breathe between full-bleed image sections and text blocks. Body-level padding runs wide to give character art visual territory.

### Grid & Container
- Max content width: ~1280px (dembrandt detected breakpoint at 1281px → 1280px transition)
- Hero section: full-bleed on dark background, character art bleeds into margins
- Content rows alternate between full-width dark and contained white sections
- Multi-column card grids (2-up on tablet, 3-up on desktop) for game listing

### Whitespace Philosophy
- Dark hero sections use negative space aggressively — character art is the content, text is secondary
- White surface sections apply conventional padding that makes editorial copy comfortable
- Inter-section spacing is large (48–96px) to create distinct chapter breaks between game showcases

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Content sections, dark-background rows |
| Subtle (Level 1) | `rgba(0,0,0,0.2) 0 0 18px` | Cookie consent banner |
| Card (Level 2) | `rgba(0,0,0,0.3) 0 10px 20px` | Floating menus, nav dropdowns |
| Soft (Level 3) | `rgb(153,153,153) 0 2px 10px -3px` | Light surface cards |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard navigation, `{colors.primary}` pink |

**Shadow Philosophy**: Shadows are used sparingly and practically — primarily on floating UI layers (cookie banners, dropdown menus) rather than on card content. On dark backgrounds, elevation is expressed through contrast between the near-black `{colors.background}` and darker overlay surfaces rather than through shadow values. The system is contextual, not decorative.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed image containers, dark section backgrounds |
| `sm` | 2px | Cookie banner close button, small UI elements |
| `md` | 8px | Primary CTA buttons, secondary buttons, news cards |
| `lg` | 16px | Larger card containers |
| `pill` | 100px | Career filter chips, search fields — the dominant rounded element |

The radius vocabulary is effectively binary at the visible level: flat rectangles for layout structures, soft pills for filter/chip interactive elements, and a consistent 8px for buttons. Mid-range radii (4–16px) appear only on specific secondary elements, keeping the language clean and unambiguous.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing raw values.

### Button Variants

- **`button-primary`** — Blue `{colors.cta}` on white text, 8px radius, compact 12px bold label. Used for Watch Video, See Games, See Careers. Transitions background-color at 0.15s ease-in on hover.
- **`button-secondary`** — White fill on black text, same radius and weight. Used as an alternative CTA in light-surface contexts.
- **`button-ghost`** — Transparent fill on white text, applied inside dark-background sections where full fill would be too heavy.

### Cards

- **`card`** — White surface, 8px radius. Wraps game screenshots and news items on light sections. Padding 24px.
- **`card-dark`** — Same geometry on dark background for dark-section content rows.

### Navigation

- Top navigation: dark `{colors.background}` bar, `{typography.nav-link}` at `{colors.ink-muted}` → hover shifts to `{colors.text-hover}` (white) over 0.25s ease. Height transitions on mobile menu open/close.
- Secondary horizontal nav (careers section): similar treatment at a slightly smaller size.

### Badges / Tags

- **`badge`** — `{colors.primary}` hot-pink fill on black text, pill radius. Used for career filter chips and game category tags. Hover shifts to `{colors.primary-hover}`.

### Inputs

- **`input`** — White surface, 8px radius, body-scale text. Focus state maintains the same geometry; cursor indicates focus via `{colors.focus-ring}`.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default canvas for hero and navigation — the dark foundation is non-negotiable for brand atmosphere
- Apply `{colors.primary}` exclusively to brand identity elements (logo, filter chips, active states) — never as a primary CTA background
- Use `{colors.cta}` for all action buttons to maintain a clear, consistent call-to-action signal separate from brand recognition
- Set all display headlines in `{typography.display-hero}` or `{typography.display}` in uppercase — the typeface is designed for this register
- Use `{rounded.pill}` for filter chips and tag-style elements; `{rounded.md}` for buttons — keep the radius vocabulary binary
- Let character art bleed beyond grid containers on dark-surface hero sections — constrained art undermines the brand's energy
- Scale body text generously (at least `{typography.body}` at 18px with 1.56 line-height) — game audiences browse on phones
- Honor the two-accent system: pink (`{colors.primary}`) for brand recognition, blue (`{colors.cta}`) for action prompts

### Don't
- Don't use `{colors.primary}` pink as a CTA button background — it erodes its identity as a brand mark
- Don't use mid-weight, title-case headlines in `SupercellHeadline-Heavy` — the face is made for uppercase and should stay there
- Don't introduce a third accent color — the pink/blue pairing is intentional and complete
- Don't apply drop shadows to game character art or card backgrounds on dark surfaces — use contrast, not depth illusions
- Don't add border-radius between 8px and 100px for interactive elements — the system is binary (`{rounded.md}` or `{rounded.pill}`)
- Don't use white nav text as the default state — the `{colors.ink-muted}` → `{colors.text-hover}` grey-to-white hover transition is deliberate UX, not a starting point
- Don't over-compress body text — the generous 22px / 1.56 ratio reflects a mobile-first readability commitment that should be respected
- Don't substitute generic sans-serif system fonts in mockups — the proprietary font duo is the typographic identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <340px | Single-column, maximum text size reduction |
| Mobile | 340–503px | Single-column; hero characters stack or overlap centrally |
| Mobile Medium | 504–767px | Widened mobile columns; nav collapses to hamburger |
| Tablet | 768–1024px | Two-column game grids; wider margins; nav still collapsed |
| Desktop | 1025–1280px | Full horizontal nav; three-column grids; full hero character bleeding |
| Large Desktop | >1280px | Capped container width; characters scale, layout holds |

### Touch Targets
- Navigation items maintain sufficient tap area at 17px text with generous padding
- CTA buttons with `14px 24px` padding provide comfortable 44px+ touch targets on mobile
- Filter chips (pill shape) have at least 8px vertical padding for finger accuracy

### Collapsing Strategy
- Navigation collapses to hamburger below ~1024px; secondary (careers) nav collapses similarly
- Hero layout shifts from side-by-side (characters left, text right) to stacked on mobile
- Character art scales down but retains its bleeds and overlaps — the overflow effect is preserved
- Two-column game card grids collapse to single-column at 504px and below

### Image Behavior
- Game character art is largely PNG/WebP with transparent backgrounds — scales freely without cropping
- Full-bleed section images (game world backgrounds) use `object-fit: cover` to fill width
- Lazy loading applied to below-fold game showcase images

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text (dark surface): `{colors.ink-inverted}`
- Text (light surface): `{colors.ink}`
- Secondary text: `{colors.ink-muted}`
- Brand accent: `{colors.primary}`
- Action CTA: `{colors.cta}`
- Border: `{colors.border}`

### Example Component Prompts

- "Build a hero section for Supercell using `{colors.background}` as the full-width dark canvas. Center a text block with an `{typography.display-hero}` uppercase headline in `{colors.ink-inverted}`, a 22px body paragraph below it, and a `{components.button-primary}` Watch Video button. Leave space to the right for a floating character art PNG that bleeds beyond the section boundary."
- "Create a game card component with a full-bleed game screenshot at the top, 8px radius (`{rounded.md}`), and a content area on `{colors.surface}` containing a `{typography.heading-section}` title in `{colors.ink}` and a `{typography.caption}` platform tag as a `{components.badge}` in `{colors.primary}`."
- "Build a top navigation bar on `{colors.background}`. Logo at left. Center nav links using `{typography.nav-link}` in `{colors.ink-muted}` with a 0.25s ease color transition to `{colors.text-hover}` on hover. Right side: icon row for search, profile, and platform links."
- "Design a filter chip set using `{components.badge}` styling — `{colors.primary}` pink fill, `{colors.on-primary}` black text, `{rounded.pill}` radius, `{typography.caption}` label. Include a default/inactive state on `{colors.surface-muted}` with `{colors.ink}` text."
- "Implement a careers section card grid on `{colors.surface}`. Two columns on desktop (24px gap), one column on mobile. Each card uses `{components.card}` with 8px radius, a role title in `{typography.heading-sub}`, location and team in `{typography.caption}`, and a `{components.button-primary}` Apply CTA in `{colors.cta}` blue."
- "Create a full-bleed alternating content band — dark row on `{colors.background}` followed by light row on `{colors.surface}`. Dark row: `{typography.display}` uppercase headline in `{colors.ink-inverted}`, left-aligned, game mascot art right-aligned. Light row reverses the layout with `{colors.ink}` text."

### Iteration Guide

1. Start with `{colors.background}` — the dark canvas is the non-negotiable brand foundation for navigation and hero areas.
2. Brand accent `{colors.primary}` is a marker, not a button color — apply it to logo, filter chips, and active badge states only.
3. Action hierarchy: every clickable CTA uses `{colors.cta}` blue — this is the only button fill color on the site.
4. Typography is uppercase at the headline level — set `text-transform: uppercase` on anything using `{typography.display-hero}` or `{typography.display}`.
5. Character art should overflow its container box — clip paths and tight bounds undermine the brand's playful spatial energy.
6. Radius is binary: `{rounded.pill}` for chips/tags, `{rounded.md}` for buttons and cards — no intermediate values.
7. The dark surface makes shadows invisible — use brightness contrast rather than shadow depth for elevation on dark sections.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Supercell. Brand names and trademarks belong to their respective owners.