What is Supercell's primary brand color?

Supercell's only chromatic accent is hot-pink (#fb4a9d), appearing 42 times across the captured page — 21 as text, 21 as border, 0 as background. It functions as a category-label accent on the editorial photo grid and as border lines on section headers, never filling a panel or button. The primary CTA button ('Watch Video') is blue (#2d85f3), a Supercell brand blue also declared in the CSS as the canonical button color. The brand does not declare CSS custom properties for its colors; both the pink and blue are hard-coded values in the stylesheets.

What typefaces does Supercell use, and what are the best substitutes?

Supercell ships three proprietary faces. SupercellHeadline-Heavy is the display face: 56px / weight 900 (though declared as weight 400 due to the font's own weight axis) / uppercase / -0.8px tracking for the hero h1, and 34px / weight 900 / uppercase for sub-section h3s. SupercellText-Medium runs nav links (15px), body text (20px), and small labels (13px). SupercellText-Bold handles uppercase category labels (14px / uppercase) and button text (12px / uppercase). Fallbacks are Helvetica, Arial, sans-serif. The closest open-source substitutes: Inter Black (weight 900) at uppercase for SupercellHeadline-Heavy; Inter Medium (weight 500) for SupercellText-Medium; Inter Bold (weight 700) for SupercellText-Bold.

Why does Supercell use white when most game-marketing sites use dark backgrounds?

Supercell's white canvas is a deliberate corporate-studio distinction, not a game-marketing convention. The site is the company's homepage — a recruitment, press, and culture destination — not a franchise-specific game landing page. By running white with black ink and a single pink accent, Supercell signals that its products are fun but its organization is mature and editorial. EA's dark-gradient system and Activision's franchise-color saturation serve individual game launches; Supercell's white system serves the studio identity above any single game. The game photography in the editorial grid below the fold supplies all visual energy without the UI system having to perform it.

How does the Supercell editorial photo grid work?

Below the hero, the entire page is a 2-column masonry-style grid of game and culture photography. Each cell is a full-bleed image with a small text block beneath it: a hot-pink uppercase category label (14px / SupercellText-Bold / uppercase), a black headline (20px / SupercellText-Medium), and a muted-gray meta line (13px / SupercellText-Medium). There is no card chrome — no border, no border-radius, no background color on the text block. The text sits directly below the image on the white page floor. The grid has no fixed row height — images vary in aspect ratio and stack naturally.

Can I use this DESIGN.md to build a studio or company editorial site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Supercell's moves: white canvas with black ink (no gray backgrounds), hot-pink as text-and-border only (not fill), uppercase display headings at 56px / weight 900, and a 2-column photo editorial grid with no card chrome. The single 8px corner radius and the absence of shadow tokens keep implementation straightforward. The one proprietary element is the SupercellHeadline-Heavy face — substituting Inter Black at uppercase will get you 80% of the visual identity. The broader lesson: a white editorial system can hold a game-studio identity without franchise-color saturation, as long as the photography is compelling.

Supercell Design System

Supercell's marketing-site design system as a DESIGN.md file.

About Supercell DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source supercell.com

Gaming & Entertainment

Supercell's marketing site is the corporate face of a company that has never made a complicated product — and it shows. The hero is a white panel with the Supercell wordmark in SupercellHeadline-Heavy (56px / weight 900 / uppercase / -0.8px tracking), a three-line description of the company, and a single blue "Watch Video" button. Three game-character illustrations (Clash of Clans, Brawl Stars, and Hay Day characters) float in the upper right quadrant of the hero against the white background. There are no gradients, no hero video loops, no franchise-colored zones. Below the fold, the entire page becomes a dense 2-column editorial photograph grid — game announcement images, team photos, event coverage, cultural moments — captioned only with a title and a pink category label. The hot-pink (#fb4a9d) appears exclusively on these category labels and as border/text accents on section headers; it never fills a panel, a card, or a button. Unlike EA's neon-dark game-marketing system or Activision's franchise-color saturation, Supercell runs white.

The DESIGN.md file packages the system as a machine-readable spec for React and AI tools. Inside: 11 color tokens anchored by a pure white canvas (#ffffff), black ink (#000000), a warm mid-gray for muted text (#989893), and the hot-pink voltage (#fb4a9d); 12 typography tokens spanning SupercellHeadline-Heavy at two display sizes and SupercellText-Medium and SupercellText-Bold across 10 body, label, and nav tiers; a single 8px radius token (the only border-radius value on the page); and 14 component definitions covering the hero, the blue video CTA, the editorial photo grid, and the footer navigation.

Feed this file to Claude or Cursor and it will reproduce Supercell's specific moves: pure white canvas instead of the dark-gradient game-marketing default, hot-pink as a category-label and border accent rather than a CTA fill, uppercase-heavy display headings in a custom proprietary face, and a dense photograph editorial grid with no card chrome. The system is worth studying because it is the corporate-studio inverse of most game-marketing design: understated, editorially structured, and willing to let game photography carry all visual energy. The proprietary font family is the single non-replicable element — Inter at weight 900 / uppercase is the closest substitute for the display tier.

What makes it distinct

Hot-pink as border and text only#fb4a9d appears 42 times but never as a background fill; it functions as an underline and label-accent against white
Uppercase at every heading tierSupercellHeadline-Heavy renders all display text in all-caps with tight -0.8px tracking, matching the bold visual grammar of Clash of Clans box art
White canvas with no gradientunlike EA or Activision's dark-gradient marketing surfaces, Supercell's corporate site is pure white with black ink and a single accent
Single 8px radiusthe entire captured component set uses exactly one corner radius value; no radius scale, no pill variants in the marketing chrome
Dense editorial photo gridbelow the hero, a 2-column masonry-style grid of game-and-culture images fills the page without section breaks or card chrome

Live at supercell.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

supercell.com

Explore Supercell

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Supercell design system FAQ

Common questions about Supercell's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Supercell — official site

Supercell's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.