What is GoPro's primary brand color?

GoPro's brand voltage is GoPro Blue, a saturated cobalt wired into the CSS as --theme-stk2-button-primary-brand-background and replicated across 19 sibling tokens that cover hover, focus, pressed, outline, and icon-button variants. Critically, the brand blue is not the default primary button color on the page — the default primary is matte ink on a near-white surface, used 520 times as text and 498 times as border. GoPro Blue fires only when the action button needs to read against a dark background; on the light surface it recedes entirely. This is the inverse of how dev-infra brands like Vercel deploy a single voltage.

What typefaces does GoPro use, and what should I substitute?

GoPro runs three Sohne cuts in concert. Sohne (regular) carries body and paragraph text at 12-16px, weight 400. SohneBreit — the wide, semi-condensed-by-aspect cut — carries every display and uppercase label at 14-52px, weights 600 and 900. SohneMono handles product-spec strips at 12-14px. The dominant typographic moment is SohneBreit at 52px / weight 900 / all-caps / 0.25px tracking — the hero headlines that ride the adventure video. Open-source substitutes: Inter at the same weights covers Sohne; for SohneBreit's wider cut use Archivo Black or Bebas Neue Pro (extended); for SohneMono swap in JetBrains Mono.

Why are there two blues in the GoPro extraction?

The page contains two distinct blues. GoPro Blue #0059c2 is the brand voltage wired into 19 --theme-stk2-button-primary-brand-* tokens — used for primary buttons on dark surfaces and as the brand outline color. The other blue, #0000ee, appears 190 times as the browser default anchor color leaking through on unstyled links in editorial content; it is not a brand token and should not be reused. A teal-adjacent #00a6e0 also appears 20 times on social or partner links. Only the GoPro Blue belongs in your design tokens; the other two are residual.

What is GoPro's corner-radius philosophy?

The radius scale is binary: 8px or 50%. 8px appears 39 times across primary buttons, secondary buttons, dropdowns, and the email input — every tappable rectangle. 50% appears 17 times across profile orbs, category-icon circles, and the product-thumbnail badges. A handful of 11.861px values appear (12 times) on legacy carousel-arrow chrome, and 4-16-24px values appear in narrow contexts. The system effectively skips the 4-6-12-16-20px middle tier that most consumer SaaS uses; surfaces are either soft-rectangular at 8px or fully circular as photo orbs, with nothing in between.

Can I use this DESIGN.md to build my own action-camera or adventure-brand marketing site?

Yes — the file feeds cleanly into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce GoPro's specific moves: uppercase tracked headlines at weight 900, three Sohne cuts as one typographic voice, brand blue reserved for dark-surface CTAs only, and the 8px-or-orb radius binary. The tokens resolve without invention — every hex, font name, and component value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the full-bleed adventure-video carousel only works if you have content strong enough to carry the typography. On a SaaS surface the same headline weight reads as shouting rather than as broadcast.

GoPro Design System

GoPro's marketing system documented as a DESIGN.md file.

About GoPro DESIGN.md

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

Consumer Electronics

GoPro's home page does the opposite of what most consumer-electronics brands do above the fold. 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 a column of edge-to-edge adventure footage — a snowboarder mid-flip, a surfer dropping into a wave, a freediver under reef — each clip carrying a 40-52px SohneBreit headline in all-caps at weight 900 directly on top. There is no scrim, no card, no underline; the typography sits on the image and trusts the high-contrast subject behind it to do its own backgrounding. The first headline reads "RESERVE YOUR MISSION 1, GET A FREE GRIP." in white over a dark studio shot. The voice is loud the way an action-sports broadcast is loud — uppercase, weight 900, tracked 0.25px, designed to read at 20 feet.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 16 color tokens drawn from 1,029 occurrences of matte ink (text 520, border 498), 525 occurrences of white as the secondary surface and 190 of a residual browser-default cobalt acting as the underlying link color — but the brand voltage is GoPro Blue, wired through 19 different CSS custom-properties on the `--theme-stk2-button-primary-brand-*` family and reserved for buttons that need to read on dark surfaces. Three Sohne cuts (Sohne, SohneBreit, SohneMono) carry every text role across 20 typography tokens. The radius scale stops at 8px for everything tappable and 50% for every circular photo orb; nothing in between. 16 components cover the cobalt-on-dark CTA, the ink-on-white primary, the uppercase nav label, the email-capture row, the bordered secondary, and the Instagram-pink social chip.

Feed this file to Claude or Cursor and it reproduces GoPro's specific moves: black-default chrome with cobalt firing only on dark surfaces, three-cut Sohne typography handling display through monospace without a second family, uppercase tracked headlines at weight 900, and the 8px-or-orb radius binary. The voice it carries is not subtle — borrow it only when your product is itself loud. The full-bleed adventure-footage carousel does not survive being applied to a SaaS dashboard the way Vercel's matte-black canvas does; this is a brand built for content that pulls the eye on its own, and the typographic system was designed to ride it rather than compete with it.

What makes it distinct

Uppercase typographic shouting40-52px SohneBreit at weight 900, all-caps, tracked 0.25px, sits directly over edge-to-edge footage with no card or scrim between
Black-default, blue-on-demandprimary CTA is matte ink on white; GoPro Blue is wired into 19 button-brand tokens but only fires when the surface is dark and a secondary action needs to read
Three Sohne cuts as one voiceSohne for body, SohneBreit wide for display and uppercase labels, SohneMono for product-spec strips; no second typeface in the system
Carousel-first layoutthe home page is six stacked full-bleed adventure carousels rather than feature cells, each with its own caption strip and Shop CTA
Eight-pixel rounding everywhere except the photo orbsbuttons and inputs sit at 8px, profile and category orbs at 50% (39 occurrences vs. 17 circular), no middle 12-16px tier

Live at gopro.com

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

gopro.com

Explore GoPro

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

GoPro design system FAQ

Common questions about GoPro'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.

GoPro — official site

GoPro'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.