--- version: alpha name: "Polygon" description: "White-canvas gaming media with electric magenta headlines, Montserrat black weight, neon-green category badges, and a bold editorial grid built for enthusiast audiences." colors: background: "#ffffff" surface: "#f2f2f2" surface-dark: "#181818" ink: "#101010" ink-secondary: "#777777" ink-on-dark: "#f2f2f2" primary: "#e90c59" on-primary: "#ffffff" primary-container: "#20232b" accent-neon: "#66ff75" on-accent: "#000000" border: "#20232b" border-subtle: "#333333" # was rgba(15,15,15,0.15) — Google format requires hex focus-ring: "#e90c59" text-hover: "#9d9a9c" shadow-soft: "#1a1a1a" typography: display-hero: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px display: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.22 letterSpacing: 0px heading-section: fontFamily: "Roboto, Arial, Helvetica, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.11 letterSpacing: 2px heading-sub: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 28px fontWeight: 900 lineHeight: 1.14 letterSpacing: 0px body-large: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px body: fontFamily: "Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.23 letterSpacing: 0px nav-link: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "Montserrat, Arial, Helvetica, sans-serif" fontSize: 19px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px label-ui: fontFamily: "Roboto, Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.0 letterSpacing: 2px caption: fontFamily: "Roboto, Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.66px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 4px md: 10px pill: 9999px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.ink-on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 16px 24px border: "1px solid {colors.ink-secondary}" button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 16px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 16px 24px border: "1px solid {colors.border-subtle}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 16px 24px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 16px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink-on-dark}" rounded: "{rounded.md}" padding: 16px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 16px 80px 16px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 16px 80px 16px 16px badge: backgroundColor: "{colors.accent-neon}" textColor: "{colors.on-accent}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 3px 6px badge-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 3px 6px nav-item: textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 8px 12px nav-item-hover: textColor: "{colors.primary}" typography: "{typography.nav-link}" padding: 8px 12px --- # Polygon Design System ## Overview Polygon's homepage reads like a broadsheet sports page reimagined for the generation that grew up with gaming magazines. The canvas is pure white (`{colors.background}`), and the editorial hierarchy snaps into focus immediately: bold Montserrat Black headlines in near-black `{colors.ink}`, a jolting magenta accent (`{colors.primary}`) that traces every CTA and category marker, and a neon electric-green badge (`{colors.accent-neon}`) that pops like a gamer's HUD element above story headlines. The palette is compressed and intentional — three chromatic ingredients, two typefaces, and one clear hierarchy rule. The typography makes Polygon recognizable at a glance. Montserrat runs the show: headlines and deck text land in weight 700–900, often at 36–64px with 1.00–1.14 line-height, giving section fronts the compressed energy of a print cover. Roboto handles the structural chrome — section labels run UPPERCASE at 2px letter-spacing, bylines and captions run at 12px with tight tracking — which keeps transactional UI readable without competing with the editorial energy. Arial/Helvetica appears as a system fallback for body copy, signalling that long-form reading comfort is a secondary concern to the index-page scanning experience. The signature visual contrast is the pairing of the near-black footer `{colors.surface-dark}` against the white editorial grid, with magenta `{colors.primary}` appearing on both surfaces — it is the single chromatic thread that ties the whole page together. The 10px media card radius on images (`{rounded.md}`) softens an otherwise hard-edged editorial system just enough to signal "modern web," while article badges keep sharp-corner `{rounded.none}` as a nod to print-publication label conventions. Shadows are extremely restrained — a fine inset line (`rgb(19,19,19) 0px -1px 0px 0px inset`) does most separation work. **Key Characteristics:** - Electric magenta accent (`{colors.primary}`) — the brand's lone high-saturation color, used on the Polygon logo diamond, primary CTAs, category links, and inline link hover states - Neon green badge (`{colors.accent-neon}`) — "ANALYSIS", "FEATURE", "REVIEW" category labels above headlines — zero border-radius, pure HUD energy - Montserrat weight 700–900 for all editorial display text — `{typography.display-hero}` at 64px caps the scale - Roboto UPPERCASE for section labels — `{typography.heading-section}` with 2px letter-spacing creates structural chrome - White canvas (`{colors.background}`) with near-black ink — standard editorial web convention respected rather than subverted - 10px image and card border-radius (`{rounded.md}`) — the sole rounded element in a mostly hard-edge system - Sharp `{rounded.none}` on badges and article labels — print-publication convention preserved in digital - `{colors.surface-dark}` footer at `#181818` — carries the reversed logo and renders the magenta accent in its most dramatic contrast - Uniform `{colors.text-hover}` (`#9d9a9c`) muted gray on all link hover states — consistent across foreground colors - 300ms ease transitions on every interactive element — smooth but never sluggish ## Colors ### Primary Brand - **Electric Magenta** (`{colors.primary}`): Polygon's signature brand accent. The logo diamond, primary CTAs, active category navigation links, and inline article-link hover states all pull from this single saturated color. Its 1-count in the raw palette contrasts with 90 occurrences — deliberate restraint in the editorial grid keeps it potent. - **Near Black** (`{colors.ink}`): The default editorial ink. Headlines, body text, and dark-surface tiles all derive from this value — it is the structural foundation of the white-canvas grid. - **Footer Dark** (`{colors.surface-dark}`): The richest dark in the palette, used exclusively in the footer and reversed-logo contexts. Against this, the reversed white logomark and magenta diamond reach their highest contrast. ### Brand Accent - **Neon Green** (`{colors.accent-neon}`): Category badge fill — "ANALYSIS", "FEATURE", "GUIDES", etc. At `#66ff75` it sits in high-saturation electric territory that reads as gamer-UI rather than botanical. Carries black text (`{colors.on-accent}`) and always renders with zero border-radius for print-badge directness. ### Text States - **Ink Secondary** (`{colors.ink-secondary}`): Bylines, timestamps, comment counts, author metadata. The system's primary gray at medium lightness. - **Text Hover** (`{colors.text-hover}`): The unified hover color across ALL link variants regardless of default foreground — whether a headline link or a nav item, hover always transitions to this muted pewter. A strict consistency rule. - **Ink on Dark** (`{colors.ink-on-dark}`): Near-white at `#f2f2f2` for type on `{colors.surface-dark}` and `{colors.surface}` surfaces. Softer than pure white — easier to sustain across long footer columns. ### Borders and Shadow - **Border** (`{colors.border}`): Subtle dark border for nav dividers and structural rules. - **Border Subtle** (`{colors.border-subtle}`): A dark-on-light separator that was originally `rgba(15,15,15,0.15)` — flattened to `#333333` for Google format compliance. - **Shadow Soft** (`{colors.shadow-soft}`): Used for fine inset lines — `0 -1px 0 0 inset` in `{colors.shadow-soft}` — the system's primary elevation language. ## Typography ### Font Family - **Primary Display**: `Montserrat` (self-hosted variable font: `Montserrat-VariableFont_wght.woff2`). Geometric sans-serif with weight 400–900 range. The editorial workhorse — headlines, section decks, navigation links, button labels. - **Structural Chrome**: `Roboto` (self-hosted: `roboto-regular.woff2`, `roboto-bold.woff2`). Used for UPPERCASE section labels, byline metadata, and caption-level UI. Roboto's neutral warmth keeps structural text readable without editorial voice. - **Body Fallback**: `Arial, Helvetica, sans-serif`. System fonts for inline article body copy — a pragmatic choice that prioritizes page weight and rendering consistency over typographic personality in long-form reading. - **OpenType Features**: None declared explicitly; Montserrat variable font delivers all weight interpolation via `font-weight` axis. The icomoon icon font (`icomoon.woff2`) handles UI icons throughout. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Lead headline on featured story — Montserrat 700 64px, 1.00 line-height | | `display` | Major article headlines in the primary editorial grid | | `heading-section` | Section labels — Roboto UPPERCASE with 2px letter-spacing | | `heading-sub` | Sub-section headlines, Montserrat 900 — the heaviest weight in the system | | `body-large` | Card headlines and promoted content decks | | `body` | Inline article copy and general body text | | `nav-link` | Top navigation category links — Montserrat 700 20px | | `button-ui` | CTA labels and interactive button text | | `label-ui` | UPPERCASE UI labels — Roboto 500 with 2px tracking | | `caption` | Bylines, timestamps, comment counts — Roboto 700 12px UPPERCASE | ### Principles - **Montserrat does the editorial work**: weights 700 and 900 carry all headlines and navigation. The variable font file means weight interpolation is smooth — Polygon uses discrete stops (400, 500, 700, 800, 900) rather than fine-grained variation. - **Roboto handles the chrome**: UPPERCASE + letter-spacing on structural labels creates visual separation between editorial voice and interface wayfinding without a third typeface. - **Weight as hierarchy**: The scale runs 400 body → 500 section labels → 700 headlines → 900 feature heds. There is no single-weight system here — the type works hard as a hierarchy signal. - **Tight display, open captions**: Headlines run at 1.00–1.14 line-height, maximizing density on the editorial grid. Captions open to 1.50 for the rare long-form contexts. - **UPPERCASE is structural, not decorative**: Montserrat UPPERCASE appears only in the label-ui and heading-section contexts — section openers and category labels. Headline text runs in sentence case. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Polygon's editorial grid is dense in the Condé Nast / Vox Media tradition — story tiles sit close together at 8–16px gutters, and the page breathes through section color contrast rather than generous whitespace. The 4xl (96px) token handles the hero-to-grid transition; md (16px) and lg (24px) dominate internal component padding. ### Grid & Container - Max content width: 1440px breakpoint at the widest; primary editorial grid at ~1180px - Homepage: 3-column primary grid (lead story left, article grid right, latest-news sidebar right-most) - Story tiles: 16:9 image thumbnails with `{rounded.md}` radius, headline directly below - Footer: full-width `{colors.surface-dark}` band with 3-column link grid and centered reversed logo ### Whitespace Philosophy - Dense editorial packing — story tiles butt close together; the white canvas does the separation - Section labels and the magenta accent color create visual breathing room without increased spacing - The neon badge `{colors.accent-neon}` punches above story headlines without added margin — color substitutes for space ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Default state for story tiles, editorial grid | | Inset Rule (Level 1) | `rgb(19,19,19) 0px -1px 0px 0px inset` | Divider lines between nav items and section rows | | Card Lift (Level 2) | `rgba(0,0,0,0.15) 0px 0px 5px 0px` | Subtle card lift on hover (low-confidence) | | Dialog (Level 3) | `rgba(0,0,0,0.15) 0px 0px 12px 0px` | Modal / dropdown elevation | | Directional (Level 4) | `rgba(0,0,0,0.3) 100px 0px 200px 0px` | Sidebar content-edge vignette | | Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on CTAs and links | **Shadow Philosophy**: Polygon's elevation system is almost entirely flat. The most common shadow treatment is an inset `0 -1px 0 0` line — a single-pixel dark rule used to separate nav items and section dividers. The system avoids decorative blur; depth is achieved through the white-to-dark canvas contrast between the editorial grid and the footer. Where other publications use card shadows to lift content, Polygon uses tight grid proximity and the magenta accent to create visual hierarchy. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Article badges, category labels, input fields — the print-publication baseline | | `sm` | 4px | Small interactive elements, badge variants | | `md` | 10px | Images, media cards, primary CTAs — the dominant rounded element | | `pill` | 9999px | Circle avatars and social icons (via `50%`) | The radius philosophy is binary in practice: either sharp zero for editorial labels and form elements (print convention), or the 10px `{rounded.md}` for images and cards (modern web convention). There is no mid-range softening between 4px and 10px — the system jumps directly from badge-sharp to card-rounded. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — Near-black fill, white text, 10px radius, bordered. The "See More" load-more button uses this treatment — content-driven rather than brand-accent driven. - **`button-primary-hover`** — Background flips to magenta `{colors.primary}` on hover, text stays white. The accent color surfaces only on interaction. - **`button-secondary`** — White fill, dark border and text. Used for secondary navigation and inline actions. - **`button-secondary-hover`** — Surface fill transitions to `{colors.surface}`, text transitions to magenta `{colors.primary}`. ### Cards **Story Card** (`{components.card}`) — White background, 10px radius, 16px padding. Standard editorial tile format: 16:9 thumbnail + badge label + headline + byline metadata. No shadow at rest; subtle card lift on hover. **Dark Card** (`{components.card-dark}`) — Near-black `{colors.surface-dark}` fill for reversed-context sections and sidebar panels. White text; magenta accent on interactive elements. ### Inputs The search input has no border-radius (`{rounded.none}`) — flat, print-form convention. Focus fires a `2px solid` outline in the current color, which defaults to `{colors.ink}`. The input background is transparent against the white canvas; the border appears only on the bottom rule in default state. ### Badges / Tags **Neon Badge** (`{components.badge}`) — Electric green `{colors.accent-neon}` fill, black text, zero border-radius, 3px 6px padding, Roboto 700 12px UPPERCASE. "ANALYSIS", "FEATURE", "REVIEW", "GUIDES" — the primary story categorization signal. **Primary Badge** (`{components.badge-primary}`) — Magenta `{colors.primary}` fill, white text — the same physical form as the neon badge, used for sponsored or highlighted story labels. ### Navigation The top navigation bar is white-canvas with Montserrat 700 20px category links in `{colors.ink}`. Active and hover links transition to `{colors.primary}` (magenta). The logo diamond also runs in magenta. Navigation is sticky, with a bottom inset border-rule in `{colors.border}` providing the only structural shadow. On mobile, top-level categories collapse to a hamburger menu; the Polygon wordmark stays full at all breakpoints. ## Do's and Don'ts ### Do - Use electric magenta (`{colors.primary}`) for the logo diamond, primary CTA hover states, category link active states, and inline link hover — reserve it for interaction and brand anchoring - Render category labels ("ANALYSIS", "GUIDES", "FEATURE") as neon-green (`{colors.accent-neon}`) zero-radius badges in Roboto 700 UPPERCASE - Run Montserrat at weight 700–900 for all headlines — `{typography.display-hero}` for feature leads, `{typography.heading-sub}` for section frontpages - Apply `{rounded.md}` (10px) to image thumbnails and cards, `{rounded.none}` to badges and form elements — don't mix radii on the same component type - Use the universal hover color `{colors.text-hover}` (`#9d9a9c`) on all link states, regardless of the default foreground color - Keep the white canvas (`{colors.background}`) as the dominant surface — the system earns its contrast through accent color, not dark surfaces - Run Roboto UPPERCASE with 2px letter-spacing for section headers and structural labels — it is the system's structural register - Use the `{colors.surface-dark}` footer exclusively as the dark-surface canvas — it is the only permitted non-white background outside of image tiles ### Don't - Don't use magenta `{colors.primary}` as a fill for story tiles or section backgrounds — it is an interactive accent, not a surface color - Don't apply `{rounded.md}` 10px radius to category badges — sharp zero-radius is the print-label convention the system commits to - Don't introduce additional display typefaces — Montserrat + Roboto is the complete typographic vocabulary - Don't use the neon green `{colors.accent-neon}` for anything other than category badge fills — applied to CTA fills or body text it loses its signal value - Don't soften link hover to a primary color on inline editorial links — the unified muted-pewter `{colors.text-hover}` is a system-wide consistency rule - Don't add decorative gradients or background blurs — the system is entirely flat surfaces and editorial photography - Don't apply mid-range radii between 4px and 10px — the system has no 6px, 8px rounding; the jump from sm to md is intentional - Don't increase body copy font size above 16px Arial for inline article text — at-index scanning, not long-read comfort, is the design priority --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <410px | Single column, headline font scales to ~28px, hamburger nav only | | Mobile | 410–480px | Single column, badge labels preserved, 8px gutters | | Mobile Mid | 481–540px | 1-up story grid, full article card thumbnail | | Tablet | 541–767px | 2-up story grid starts, inline category nav partially visible | | Tablet Wide | 768–1023px | 2–3 up grid, partial sidebar visible | | Desktop | 1024–1180px | Full 3-column layout, sticky top nav, sidebar panel | | Large Desktop | 1180–1440px | Max editorial grid width, wider gutters | | XL | >1440px | Centered at 1440px container, extended sidebar | ### Touch Targets - Story tile entire area is tappable — not just headline text - Primary CTAs maintain minimum 44px touch height at all breakpoints - Navigation items maintain 44px minimum tap target height on mobile ### Collapsing Strategy - Top nav categories collapse to hamburger drawer below ~1024px; the magenta Polygon diamond stays visible as a lone wayfinding anchor - 3-column grid collapses: primary lead → full width; article grid → 2-up → 1-up; "The Latest" sidebar stacks below main content on mobile - Section label badges (`{components.badge}`) maintain their visual form at all breakpoints — they never simplify or drop - Hero display headline (`{typography.display-hero}`) scales progressively: 64px desktop → ~40px tablet → ~28px mobile ### Image Behavior - Story card thumbnails maintain a 16:9 crop at all widths, with `{rounded.md}` (10px) radius preserved - Feature hero images span full editorial grid width with object-fit cover cropping - The Polygon logo remains full wordmark + diamond at all breakpoints — no logomark-only fallback in the primary nav --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#ffffff`) - Text: `{colors.ink}` (`#101010`) - Brand accent: `{colors.primary}` (`#e90c59`) - Secondary text: `{colors.ink-secondary}` (`#777777`) - Border: `{colors.border}` (`#20232b`) - Badge neon: `{colors.accent-neon}` (`#66ff75`) - CTA hover: `{colors.primary}` (`#e90c59`) - Link hover: `{colors.text-hover}` (`#9d9a9c`) - Footer canvas: `{colors.surface-dark}` (`#181818`) ### Example Component Prompts - "Build a Polygon-style story card on `{colors.background}` white. 16:9 thumbnail with `{rounded.md}` 10px radius. Above the image: a neon-green `{colors.accent-neon}` category badge — zero border-radius, Roboto 700 12px UPPERCASE, 3px 6px padding, black text. Below the image: a `{typography.display}` Montserrat 700 36px headline in `{colors.ink}` at 1.22 line-height, then byline in `{typography.caption}` Roboto 700 12px `{colors.ink-secondary}`. On headline hover, text transitions to `{colors.text-hover}` at 300ms ease." - "Create a Polygon homepage editorial grid — white `{colors.background}` canvas, 3-column desktop layout. Lead story left spans 2 rows with a large 16:9 thumbnail. Right column shows 3 stacked smaller story cards. Rightmost panel is 'THE LATEST' sidebar with article titles in `{typography.body}` and timestamps in `{typography.caption}`. Section headers in `{typography.heading-section}` Roboto 500 UPPERCASE 2px tracking at `{colors.ink}`." - "Design a Polygon navigation bar — white background, bottom border `1px solid {colors.border}`. Left: Polygon wordmark with magenta diamond glyph in `{colors.primary}`. Center: category links `{typography.nav-link}` Montserrat 700 20px in `{colors.ink}`, transitioning to `{colors.primary}` on hover at 300ms ease. Right: search icon, account icon, hamburger. The entire bar is sticky with a fine bottom inset shadow rule." - "Create a 'See More' CTA button per the Polygon system. Background `{colors.ink}`, text `{colors.ink-on-dark}`, `{typography.button-ui}` Montserrat 700 19px, `{rounded.md}` 10px radius, 16px 24px padding, `1px solid {colors.ink-secondary}` border. On hover: background flips to `{colors.primary}` magenta, text stays white, border removed, transition 300ms ease." - "Build a Polygon footer section — full-width `{colors.surface-dark}` canvas at `#181818`. Top: centered reversed logomark in white and magenta diamond. Below: 3-column link grid in `{typography.body}` `{colors.ink-on-dark}`, section headers in `{typography.heading-section}` UPPERCASE. Link hover transitions to `{colors.primary}` magenta at 300ms ease. Bottom rule: copyright line in `{colors.ink-secondary}` at 12px Roboto." ### Iteration Guide 1. Start with pure white `{colors.background}` canvas — the system earns hierarchy through accent color and typography density, not dark surfaces. 2. Electric magenta `{colors.primary}` is the brand-accent contract: use it on the logo diamond, CTA hover states, active nav links, and inline link hovers. Nowhere else. 3. Neon green `{colors.accent-neon}` belongs exclusively on category badge fills — zero radius, Roboto 700 UPPERCASE, black text. 4. Typography rule: Montserrat 700–900 for editorial headlines, Roboto 500 UPPERCASE for structural labels, Arial/Helvetica for body reading copy. 5. The universal hover rule: ALL link foregrounds transition to `{colors.text-hover}` (`#9d9a9c`) at 300ms ease — maintain this consistency across every interactive text element. 6. Border-radius is binary: `{rounded.none}` for badges and form elements, `{rounded.md}` 10px for images and cards. No values in between. 7. The footer is the only permitted dark surface (`{colors.surface-dark}`) — use it exclusively for the reversed logo context and link-dense footer grids. 8. Elevation is flat — use fine inset border rules (`0 -1px 0 0 inset`) for structural separation; avoid decorative drop-shadows on editorial tiles. --- ## 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 Polygon. Brand names and trademarks belong to their respective owners.