Supercell Design System

Overview

Supercell's marketing surface is the corporate inverse of the industry it operates in. Editorial white against game-world maximalism. Where EA's marketing site runs dark gradients and franchise-color saturation, and where Activision layers neon on black for each Call of Duty release, Supercell runs pure white with black ink and a single hot-pink category label. The white is not neutral — it is a deliberate studio-identity statement that says: we are the company behind the games, not a game itself.

The hot-pink voltage (#fb4a9d) appears 42 times across the captured page — 21 as text color, 21 as border. It never fills a button, a panel, or a card. It marks category labels in the editorial grid ("NEWS," franchise tags) and section-header hairlines. The primary CTA is blue (#2d85f3), a separate Supercell brand blue that carries the "Watch Video" button. Two chromatic voices, each with a distinct role, on a white floor that lets both read without competing.

Typography is entirely proprietary: SupercellHeadline-Heavy at 56px / uppercase for the hero (with a declared weight of 400 on the font axis, but visually heavy at grade 9), SupercellText-Medium for body and nav, SupercellText-Bold for labels and buttons. The uppercase treatment at every heading tier is the system's most recognizable move — it carries the same bold direct-address quality as the Clash of Clans and Brawl Stars box-art lettering, transplanted into a corporate-editorial register.

Key Characteristics:

• Pure white canvas (#ffffff) — no off-white, no gray zones, no gradient bands.
• Hot-pink (#fb4a9d) exclusively as text and border accent, 0 background uses.
• Blue (#2d85f3) as the CTA fill — the only button-fill color in the system, distinct from the pink accent.
• Three-tier proprietary font system: SupercellHeadline-Heavy (display), SupercellText-Medium (body / nav), SupercellText-Bold (labels / buttons).
• All-caps at every heading tier — display, section h3, category label, button.
• Single 8px radius — the only border-radius value in the extracted components; no pill variant in the marketing chrome.
• Dense 2-column editorial photo grid below the fold, no card chrome, no border-radius on the image cells.
• Gray nav links (#808080) that darken to black on hover — muted by default, active by state.

Colors

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 133 as text and border. The dominant and only page floor — pure white with no warm or cool cast. Every section sits on the same canvas without background-color variation.

Text

• Ink ({colors.ink} — #000000): frequency 305 — the dominant text and border color. Pure black on pure white, maximum contrast. Carries all headings, the primary display tier, nav active states, and most body text.
• Ink Muted ({colors.ink-muted} — #989893): frequency 98 — used for secondary text across the editorial grid (publication dates, sub-labels, footer text). A warm mid-gray with a slight olive cast.
• Ink Subdued ({colors.ink-subdued} — #808080): frequency 16 as text. Declared via --supercell-color-grey CSS custom property. Used for nav links in resting state, placeholder text.

Accent

• Accent Pink ({colors.accent-pink} — #fb4a9d): frequency 42 — 21 text, 21 border, 0 background. The system's chromatic voltage — used only for category labels and section-header accent lines.

Interactive

• Primary Blue ({colors.primary-blue} — #2d85f3): frequency 2 as background. The CTA button fill. A saturated medium blue used exclusively on the "Watch Video" primary action.
• Primary Blue Hover ({colors.primary-blue-hover} — #1f7aeb): frequency 1 as background. The hover state for the primary blue button — a slightly deeper shade.

Typography

Font Families

The system runs three proprietary Supercell faces with no fallback beyond the system sans stack (Helvetica, Arial, sans-serif):

• SupercellHeadline-Heavy — display only, uppercase at every size. The 56px h1 declares fontWeight: 400 on the font axis (the face is optically heavy regardless), while the 34px h3 declares 900. Visually equivalent weight across both sizes.
• SupercellText-Medium — the workhorse face for body, nav, and most label tiers at weight 500.
• SupercellText-Regular — body text at weight 400 for the longer paragraph runs below the hero.
• SupercellText-Bold — labels, buttons, and category tags at weight 700, always uppercase.

Hierarchy

Substitute Note

SupercellHeadline-Heavy → Inter Black (weight 900) at uppercase with -0.5px tracking. SupercellText-Medium → Inter Medium (weight 500). SupercellText-Bold → Inter Bold (weight 700). The uppercase transforms are as load-bearing as the weight choices — applying Inter at the same sizes without uppercase will not reproduce the system's identity.

Layout

Spacing System

• Base unit: the system shows an irregular mix — 7px, 12px, 15px, 18px, 30px, 64px — suggesting a 7px primary unit.
• Tokens: {spacing.xs} 7px · {spacing.sm} 12px · {spacing.md} 15px · {spacing.base} 18px · {spacing.lg} 24px · {spacing.xl} 30px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Nav height: 78px — unusually tall for a minimalist corporate nav, creating a generous breathing zone at the top.
• Section gap: 64px vertical rhythm between editorial grid rows.

Grid & Container

• Max content width: ~1200px.
• Hero layout: centered text column with floating game-character illustrations (Clash, Brawl Stars, Hay Day art) at right.
• Editorial photo grid: 2-column masonry grid below hero, spanning the full content width. No gutter borders, no card chrome, text metadata sits directly below each image on the white floor.

Rhythm

The page has two zones: the hero (type-led) and the editorial body (photography-led). There are no intermediate editorial bands — no feature sections, no feature strips, no colored zones. The transition from hero to grid is immediate. All section rhythm is conveyed through the 64px inter-row gap in the photo grid.

Elevation

The system has no shadows and no elevated surfaces. The white canvas is flat; card backgrounds are transparent (images sit directly on the floor). The only visual separation between card cells is the 30px gap between them in the grid. There are no drop shadows, no border-radius on image cells, no hairline card borders.

• Flat (no shadow): all surfaces.
• No tonal lift: unlike dark-canvas systems that use a surface ladder for elevation, the white-canvas system has nothing to lift.
• Button depth: the primary blue button has no shadow — the filled blue-on-white contrast is sufficient to read as interactive.

Shapes

The radius scale has a single entry:

• {rounded.md} 8px — used on the "Watch Video" button and mobile navigation toggle.

Every other surface — photo grid cells, the hero heading, nav links, footer — has no applied border-radius. The absence of card rounding is the most distinctive shape decision: the editorial photo grid runs square-cornered images edge-to-edge, which gives the page a print-layout quality rather than a product-card aesthetic.

Components

button-primary — Blue {colors.primary-blue} fill, white text, {rounded.md} 8px rounding, 14.4×24 padding, 44px height. SupercellText-Bold at 12px / uppercase. The only filled CTA on the page — "Watch Video."

button-primary-hover — Background deepens to {colors.primary-blue-hover} (#1f7aeb). Everything else unchanged.

button-secondary — Canvas fill with black ink text and 1px black border. Same rounding and height as primary.

top-nav — White {colors.canvas} floor, 78px height, 30px horizontal padding. Houses the Supercell wordmark (a stylized "SC" mark) and navigation links (Games, People, News) in {typography.nav-link} at muted-gray resting state.

nav-link — Transparent, {colors.ink-subdued} (#808080) text at {typography.nav-link} (15px / 500). Muted gray in resting state; darkens to {colors.ink} on hover.

hero-heading — Black text, {typography.display-xl} (56px / uppercase / -0.8px tracking). The only display moment on the page where the font identity is unambiguous.

section-heading — Black text, {typography.display-md} (34px / 900 / uppercase).

body-paragraph — Black text at {typography.body-lg} (20px / 400). The hero sub-paragraph; no background.

category-label — Hot-pink {colors.accent-pink} text at {typography.label-lg} (14px / 700 / uppercase). Appears above each editorial photo card as a category tag ("NEWS," franchise name).

photo-card — Full-bleed image occupying the full cell width, no background fill, no border-radius, 0 padding. Text metadata sits directly below on the white floor.

photo-card-meta — Muted gray {colors.ink-muted} text at {typography.label-md} (13px / 500). Publication date, category sub-label.

footer — White canvas floor, muted-gray text at {typography.label-md}, 30px all-side padding.

footer-nav-link — Ink-black text at {typography.label-md}, no background, 0 padding.

nav-mobile-toggle — The three-line mobile hamburger button. Black text, {rounded.md} 8px, 15×21 padding.

Do's and Don'ts

Do keep the hot-pink to text and border roles only. Filling a button or card background with {colors.accent-pink} (#fb4a9d) would make it a primary CTA that competes with the blue button — the pink's role is editorial accent, not interactive fill.

Do uppercase every headline at every size tier. SupercellHeadline-Heavy, {typography.display-xl} and {typography.display-md}, are uppercase by design. Removing the transform makes them read as an ordinary condensed sans rather than the game-studio headline face.

Do use {colors.ink-subdued} (#808080) for nav links in their resting state, not black ink. The gray-to-black nav-link hover contrast is subtle but intentional — it marks the nav as secondary content relative to the editorial grid.

Do run photo cards with zero border-radius. The square-cornered editorial grid (rounded: "0px") is what gives the page its print-layout quality. Rounding photo card corners to 8px or 12px would shift the aesthetic from editorial to product-marketing.

Don't use the hot-pink (#fb4a9d) for the primary button fill. The CTA button is blue (#2d85f3). Swapping to pink would invert the system's two-accent logic: blue = action, pink = editorial label.

Don't introduce additional radius values above 8px. The entire system uses a single 8px token for the two interactive elements that need rounding. Adding 12px or 16px card rounding would break the flat-editorial visual contract.

Don't add background-color sections or color bands to the page structure. Supercell's editorial below-fold is entirely white — no gray alternating bands, no dark feature strips. Introducing background-color zones would make the corporate site look like a product landing page.

Don't apply {typography.display-xl} at weights other than the declared 400/900. The apparent weight of SupercellHeadline-Heavy comes from the font's own optical design, not from CSS weight axes — setting weight 700 on this face will not produce an intermediate result; it will fall back to system sans.

Known Gaps

• Dark mode: no alternate theme captured; the marketing surface is light-only.
• Mobile layout: the 2-column photo grid presumably collapses to single-column on mobile, but breakpoint widths and column-count changes are not captured.
• Hover and focus states: only button-primary-hover is documented; nav link hover, photo card hover overlay, and focus ring styles are absent.
• Game sub-brand pages: each Supercell franchise (Clash of Clans, Brawl Stars, Hay Day, Clash Royale) has its own branded landing page with distinct color systems not captured here.
• Animation: the hero game-character illustrations may animate or parallax on scroll — end-state values only are captured.
• Form and input styling: no form fields appear on the marketing surface; input token styling is not represented.
• SVG illustration tokens: the character illustrations (Clash, Brawl Stars) are vector art with their own color palettes not included in this token set.