GoPro Design System

Overview

GoPro's marketing site inverts the consumer-electronics convention. Broadcast typography. Where Apple frames the device on a quiet white field and Sony hangs a lifestyle photo behind soft display type, GoPro stacks the page as six full-bleed adventure-video carousels and lands 40-52px SohneBreit at weight 900 in all-caps directly on top of them. The first headline — "RESERVE YOUR MISSION 1, GET A FREE GRIP." — sits in white over a dark studio shot of the camera; the second h2 reads "SUPER SMOOTH STABILIZATION + AI TRACKING" over a surfer mid-drop. There is no card, no scrim, no underline. The typography rides the image. The cursor never feels still because the imagery never is.

The brand voltage is GoPro Blue ({colors.primary}), wired into 19 different CSS custom-properties on the --theme-stk2-button-primary-brand-* family. But the page's default primary button is not blue. Where most brands hold one color in reserve as the conversion voltage, GoPro inverts the deployment: the default primary CTA is matte ink ({colors.ink}) on the near-white surface — 520 text occurrences, 498 border occurrences — and GoPro Blue fires only when the action button sits on a dark surface and needs chromatic separation from the surrounding video. The blue is wired and ready; it just rarely fires above the fold.

Typography is three Sohne cuts running as one voice: Sohne for body, SohneBreit for shouting, SohneMono for spec strips. SohneBreit is the unusual member — a wide, semi-condensed-by-aspect grotesk that reads as cinematic when set at 52px / 900 / 0.25px-tracked / uppercase. There is no intermediate display size between 22px heading and 30px display; the system jumps. SohneMono appears in product-spec captions only, never in headings or body. The result is a typographic stack with three voices but no second typeface family — every word on the page belongs to one Sohne sibling.

Key Characteristics:

• Six stacked full-bleed adventure-video carousels carry the page instead of feature cells or static photography.
• All-caps display at weight 900 ({typography.display-xl} — 52px) tracked 0.25px is the dominant typographic moment; weight 600 ({typography.label-caps} — 14px / 1px tracking) carries the uppercase nav labels and section eyebrows.
• Brand voltage is wired but scarce: GoPro Blue ({colors.primary}) lives in 19 button-brand tokens, but the default primary CTA is matte ink ({colors.ink}) on white. Blue fires only on dark surfaces.
• Three-cut Sohne typography handles display, body, and spec strips without a second typeface; SohneMono is reserved for technical captions only.
• Binary radius scale: {rounded.md} 8px on every tappable rectangle (39 occurrences), {rounded.full} on every photo orb (17 occurrences). No middle 12-16px tier.
• Hairline-on-white cards lift surfaces with a {colors.hairline} (#c3c5c6) 1px border rather than a shadow — 188 occurrences as border / gradient combined.
• Two residual blues in the page ({colors.link-default} browser-default anchor and {colors.partner-blue} for social/partner links) that are NOT brand tokens; only {colors.primary} is.
• Carousel-arrow chrome uses an idiosyncratic 11.861px radius (12 occurrences) — likely a transform-rounded value, not a token to reuse.

Colors

Brand

• GoPro Blue ({colors.primary} — #0059c2): rendered count 0 in the captured surface but wired into 19 CSS custom-properties — --theme-stk2-button-primary-brand-background, --theme-stk2-text-brand, --theme-stk2-default-outline-color, plus every hover / focus / pressed / outline / icon-button-brand sibling. The brand voltage held in reserve for dark-surface CTAs and brand-outlined chrome. The lack of rendered occurrences is the design statement: the system has the cobalt voltage available but uses ink-on-white as the default primary instead.
• GoPro Blue Soft ({colors.primary-soft} — #99c8ff): wired into --theme-stk2-button-primary-brand-disabled-background and three other disabled-state sibling tokens. Reserved for disabled brand-button states; never appears as an active fill.
• GoPro Blue Dark ({colors.primary-dark} — #002f66): wired into --theme-stk2-button-secondary-brand-pressed-border and --theme-stk2-icon-button-brand-disabled-background. The press-state and disabled-icon-background variant.

Ink

• Ink ({colors.ink} — #111111): frequency 1029. Used as text (520), border (498), background (11). Wired as --theme-stk2-color, --theme-stk2-button-tertiary-default-color, --theme-stk2-button-primary-default-background, and the entire button-secondary-default-* family. This is the load-bearing tone — body text, default primary button fill, secondary button border, top-nav background. Where most light-canvas brands sit at warmer near-blacks, GoPro commits to a deeper matte ink for maximum contrast on white.
• Ink Soft ({colors.ink-soft} — #19191a): wired into --theme-stk2-button-secondary-default-pressed-border. The press-state variant of the secondary button outline.
• Ink Tertiary ({colors.ink-tertiary} — #353535): frequency 15. Wired as --theme-stk2-text-tertiary and --theme-stk2-button-primary-default-pressed-background. Used for tertiary running text and the pressed state of the default primary button.
• Muted ({colors.muted} — #a0a1a2): frequency 17 — 15 border, 2 text. Wired across five disabled-state tokens including --theme-stk2-text-disabled and --theme-stk2-border-disabled. The disabled-tint applied to text, button borders, and input outlines.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 525 — 240 border, 231 text-on-dark, 54 background. Wired as --theme-stk2-background-color, --theme-stk2-button-primary-default-color, and --theme-stk2-button-primary-brand-color. The page floor below the fold and the on-dark text color above it.
• Surface Tertiary ({colors.surface-tertiary} — #e7e9ea): frequency 40, all as gradient stops. Wired as --theme-stk2-surface-tertiary and --stk2-theme-skeleton-background-color. Used as the skeleton-loader fill and the category-orb resting surface.
• Hairline ({colors.hairline} — #c3c5c6): frequency 188 — 84 border, 84 text-disabled, 20 gradient. Wired as --theme-stk2-icon-button-default-disabled-color, --theme-stk2-border-disabled, and --stk2-theme-skeleton-highlight-color. The hairline border on product cards and the disabled-state icon tint.

Residual / non-brand

• Link Default ({colors.link-default} — #0000ee): frequency 190 — 95 text, 95 border. The browser default anchor color leaking through on unstyled editorial links. NOT a brand token; absent from the CSS variable map. Should not be reused as a design token.
• Partner Blue ({colors.partner-blue} — #00a6e0): frequency 20. Used on social-partner links and external chips. Not in the GoPro brand-color family.
• Partner Blue Alt ({colors.partner-blue-alt} — #0097d6): frequency 4. A second partner-chip variant.
• Social Instagram ({colors.social-instagram} — #e1306c): frequency 48 — 24 text, 24 border. The Instagram brand pink, used on the @gopro social-link chip — not part of the GoPro palette.
• Shadow / Scrim ({colors.shadow} — #000000): frequency 17 — 8 background, 8 shadow ink. Pure black is the scrim color over video sections and the shadow ink under the secondary button hover state.

Typography

Font Families

The system runs three cuts of one family: Sohne for body, SohneBreit (the wide, semi-condensed-by-aspect cut) for every display and uppercase label, SohneMono for product-spec strips. Fallbacks walk to "Sohne Fallback Helvetica", "Sohne Fallback Arial", sans-serif — a custom fallback stack rather than system-ui, suggesting GoPro ships dedicated metric-matched fallback fonts to keep layout stable while the variable file loads. A fourth declared family, SohneSchmal (a condensed cut), appears in the CSS variable map but is not rendered in the captured page.

Hierarchy

Principles

The display tier sits exclusively at weight 900 with 0.25px tracking and uppercase transformation. There is no weight-700 step in the system — the jump is 600 (heading / button / label) to 900 (display) with nothing in between. Body and caption stay at weight 400. The single "emphasis" treatment within body copy is weight 900 — borrowed straight from the display tier, used for prices and product specs inline. SohneBreit's wider aspect makes the all-caps display read as cinematic rather than as shouted text; substituting a normal-width sans at the same weight loses the broadcast quality.

Note on Font Substitutes

Sohne, SohneBreit, SohneMono, and SohneSchmal are all licensed Klim Type cuts. Open-source substitutes: Inter at weight 400 / 600 covers Sohne for body and headings. Archivo Black or Bebas Neue Pro Extended at the display sizes approximates SohneBreit's wider aspect for the 40-52px all-caps tier — neither matches perfectly but both read as broadcast-cinematic when uppercase. JetBrains Mono or IBM Plex Mono can substitute SohneMono for spec strips.

Layout

Spacing System

• Base unit: 4px, with 16px and 24px as the dominant gap values (22 and 21 occurrences each).
• Tokens: {spacing.xs} 6px · {spacing.sm} 8px · {spacing.base} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 60px.
• Section padding (vertical): the dominant vertical block padding is {spacing.3xl} (60px), captured 6 times on the carousel sections.
• Hero padding: 0 horizontal — adventure footage extends edge-to-edge; the headline floats in the centered safe zone with {spacing.md} (16px) padding on the button row.
• Card internal padding: {spacing.md} (16px) on product cards; {spacing.lg} (24px) on the email-capture row.

Grid & Container

• Max content width: carousels run edge-to-edge (1440px). The "Shop by Activity" orb grid and the product grid below cap at ~1280px.
• Hero block: full-bleed video with text centered at ~700px max-width. The "MISSION 1" headline measures 682px wide at 52px / 156px tall (three lines).
• Carousel layout: six stacked full-bleed video carousels, each with an active slide and pagination dots. Sub-categories rendered as a 4-column orb grid below.
• Footer: ink-canvas dark band with multi-column link list, identical typographic system inverted onto dark.

Rhythm

The page rhythm is video-then-typography-then-video. Every section begins with an edge-to-edge clip, lands the SohneBreit headline as the only text layer over the image, then drops into a single-button CTA strip before transitioning into the next carousel. There is no atmospheric gradient between bands and no decorative chrome between video and headline — the transitions happen as hard cuts, the way an action-sports broadcast cuts between sequences.

Elevation

The system has essentially no shadow tier. The captured page has 17 occurrences of {colors.shadow} (#000000) used as shadow ink, almost all bound to the secondary-button hover state (a translucent black-on-dark overlay) and a thin halo under the email-capture input on focus. Above the fold, depth comes from the video itself — the headline sits on the image without any shadow or blur backing.

• Flat (no shadow): hero, all six carousel sections, the orb grid, the product grid, the footer — 99% of surfaces.
• Input focus halo: the email-capture {component.text-input} carries a 2px shadow at focus, the only consistently-elevated chrome on the page.
• Hairline borders: {colors.hairline} (#c3c5c6) carries the elevation work that shadows would carry on a SaaS surface — 188 occurrences on cards, dropdowns, and input outlines.

Shapes

The radius scale is binary: 8px tappable rectangle or full-circle photo orb.

• {rounded.none} 0px — full-bleed carousel surfaces, video tiles, and the top-nav band.
• {rounded.sm} 4px — small chips and price tags (10 occurrences).
• {rounded.md} 8px — the dominant radius (39 occurrences). Primary and secondary buttons, the email input, product cards, dropdowns.
• {rounded.lg} 16px — larger feature cards and modal corners (10 occurrences).
• {rounded.xl} 24px — a handful of promotional banners (5 occurrences).
• {rounded.full} — circular: profile orbs, category orbs, social-link chips, and icon-button backgrounds (29 occurrences combined between 50% and 100%).

There is no 12-20px middle tier. Surfaces are soft-rectangular at 8px or fully circular as photo orbs; nothing in between. A handful of 11.861px radii appear on legacy carousel-arrow chrome (12 occurrences) — likely a transform-rounded artifact, not a deliberate token.

Components

hero-section — Full-bleed ink {colors.ink} canvas (or video frame), 60×24px padding, no border-radius. Holds the SohneBreit headline at {typography.display-xl} in cream over the adventure footage, with a single ink-on-white CTA centered below.

hero-heading — White text on the dark canvas, SohneBreit 52px / 900 / 0.25px-tracked / uppercase. The broadcast-cinematic display moment.

section-heading — Same family, one step down at 40px / 900. Used for h2s like "SUPER SMOOTH STABILIZATION + AI TRACKING" that ride the carousel below the hero.

body-paragraph — Sohne 16px / 400 white on the dark carousel surface. The sub-headline running text under display.

body-paragraph-ink — Same typography but in ink {colors.ink} on the below-fold white surfaces.

label-uppercase — SohneBreit 14px / 600 / 1px-tracked / uppercase. The eyebrow above sections ("FEATURED", "SHOP BY ACTIVITY") and the top-nav category labels.

button-primary — The default primary CTA. Ink {colors.ink} fill, white text, SohneBreit 14px / 600 button label, {rounded.md} 8px radius, 15×22px padding, 48px height. No border. The dominant conversion button on the page — used for "RESERVE NOW", "SHOP NOW", and "GET YOURS" across the carousels.

button-primary-brand — The cobalt variant: GoPro Blue {colors.primary} fill, white text, same dimensions. Fires only on dark surfaces where the ink button would disappear into the background. Wired through 19 brand-variant CSS custom-properties.

button-secondary — Transparent fill, ink text, 1px ink border {colors.ink}, {rounded.md} 8px radius, 13×20px padding, 44px height. Used for "Learn More" tertiary actions on white surfaces.

top-nav — Ink {colors.ink} band, 56px height, full-width. Wordmark left, category labels center (Cameras / Accessories / Apps / Subscription / Support) in {typography.label-caps}, account + bag right. No bottom border — the band fades into the carousel below.

nav-link — Transparent background, white text in {typography.label-caps} (14px / 600 / 1px tracking / uppercase), 8×0 padding. No hover background captured.

category-orb — Light surface {colors.surface-tertiary} fill, ink label below, full circle ({rounded.full}), 96px diameter. The "Shop by Activity" grid orbs.

product-card — White {colors.canvas} fill, ink text, 1px {colors.hairline} border, {rounded.md} 8px radius, 16px internal padding. Holds the product thumbnail, title in {typography.heading-sm}, and price in {typography.emphasis} (Sohne 16px / 900).

text-input — White fill, ink text, 1px {colors.muted} (#a0a1a2) border, {rounded.md} 8px radius, 13×24px padding, 48px height. The email-capture input — at 451px wide, the dominant form element on the page.

footer — Ink {colors.ink} canvas, white text, 60×24px padding. Multi-column link list at {typography.body-sm}. The system inverted: ink as floor, white as ink.

Do's and Don'ts

Do keep display headlines uppercase, weight 900, and tracked 0.25px. The system has no in-between display weight — bumping down to weight 700 loses the broadcast-cinematic quality that defines the brand voice.

Do use the default {component.button-primary} (ink on white) on light surfaces and reserve {component.button-primary-brand} (GoPro Blue) for dark surfaces only. The blue is wired for contrast against video, not as a chromatic accent on white.

Do let the video do its own backgrounding. The system does not add a scrim, blur, or card behind the headline — the typography rides the image. If your image is too low-contrast to carry white text on its own, replace the image rather than add a scrim.

Do treat SohneBreit, Sohne, and SohneMono as one family with three roles. Adding a fourth typeface (a serif for editorial, an extra display sans) breaks the single-voice typographic discipline.

Don't use the link-default blue ({colors.link-default} — #0000ee) as a brand token. It is the browser default anchor color leaking through on unstyled editorial links — 190 occurrences, but zero CSS custom-property mapping. Use {colors.primary} (#0059c2) for any intentional blue.

Don't introduce a 12-20px middle radius tier. The system is binary: {rounded.md} 8px for tappable rectangles, {rounded.full} for photo orbs. A 16-or-20px corner reads as borrowed from a generic SaaS card library rather than as GoPro's own move.

Don't put a tinted shadow under cards. The system has no decorative shadow tier — {colors.hairline} (#c3c5c6) borders carry the elevation work. Drop shadows feel SaaS-soft; the brand wants the hard cut.

Don't set the social-Instagram pink ({colors.social-instagram} — #e1306c) anywhere outside the @gopro social-link chip. It is the Instagram brand color, not a GoPro accent — using it elsewhere reads as a foreign brand spilling into the design.

Known Gaps

• Dark mode: the system runs dark-by-default above the fold (hero, top-nav, footer) and light-default below it. There is no separate dark-mode CSS variable tier exposed — the same tokens drive both surfaces, with text and background colors swapped manually per section.
• Hover and focus states: the CSS variable map declares --theme-stk2-*-hover-background, -pressed-background, -focused-background, and -disabled-* tokens across the button-primary-brand, button-secondary-brand, and icon-button-brand families, but the rendered marketing surface only exposes resting and disabled states. The hover state matrix is documented in the CSS but not visible on the captured page.
• Motion: the six carousels auto-rotate and the hero clip plays in loop, but the spec captures end-state values only. Easing curves, loop duration, and pagination-dot animation live in the live runtime.
• Form input error states: {component.text-input} carries the resting state of the email-capture row only; error / validation styling is not exposed on the captured marketing surface.
• Product surfaces: this DESIGN.md captures the regional storefront marketing site only. The GoPro Subscription / Quik / app surfaces carry their own component sets that are not represented here. The captured page is the /en/il/ regional variant; the global gopro.com canonical may differ on minor chrome.
• SohneSchmal use: the CSS declares --font-sohne-schmal-local referencing a condensed cut, but no rendered element uses it. Reserved for legal small print or future product surfaces, presumably.
• Carousel-arrow radius: the 11.861px values (12 occurrences) appear to be transform-rounded artifacts on rotated carousel-arrow chrome rather than a deliberate radius token; treat as not-to-reuse.