Gogoro DESIGN.md

Overview

Visual Theme & Atmosphere

Gogoro is Taiwan's electric-mobility company — the maker of the Smartscooter and the GoStation battery-swap network — and its design language is the rarest kind: a hardware brand that earns its digital surfaces the way it earns its physical ones. The atmosphere is monochrome-industrial with electric-blue voltage. The page chrome is overwhelmingly black (#000000) and near-black, with a warm-neutral charcoal (#323237) carrying body copy, and content breathing on a clean off-white surface (#f6f6f6). Into that disciplined grayscale, Gogoro injects a single charge of color — an electric blue (#0074ff) and a brighter cyan (#28c3ff) — used the way a current runs through a circuit: sparingly, deliberately, only where energy should be felt. This is not a "tech startup" palette of gradients and pastels; it is the palette of a product photographed in a clean room, where the matte black of the machine is the hero and the blue is the spark of the battery coming alive.

Typography is led by Graphik — a grotesque sans with the geometric confidence of an industrial-design house, not a marketing department — with PingFang TC and Noto Sans TC Traditional-Chinese fallbacks for native TW rendering. Graphik gives Gogoro headlines a precise, engineered feel: tight letterspacing, generous weight contrast, the kind of type you'd see laser-etched onto an aluminum chassis. The brand pairs this with large, full-bleed product photography and video — the Smartscooter is almost always shown in motion or in dramatic studio light, because the object is the argument.

What distinguishes Gogoro from other consumer-tech brands is that its design system serves a physical product and a network, not an app. Every surface — the marketing site, the GoStation map, the Network subscription flow — has to make a battery-swap kiosk feel as premium as an Apple Store and as reliable as a gas pump. The result is a restrained, premium, motion-forward system where black is the canvas, Graphik is the engineering voice, and electric blue is the only color allowed to move.

Key Characteristics:

• Graphik as the brand typeface, with PingFang TC / Noto Sans TC Traditional-Chinese fallbacks (live-verified font stack)
• Black-dominant chrome (#000000) — the matte-machine canvas; the product is the hero, the UI is the frame
• Warm charcoal body text (#323237) rather than pure black — softer for long reads on white
• Electric blue (#0074ff) + cyan (#28c3ff) as the only chromatic accents — "the spark of the battery," used sparingly
• Clean off-white surface (#f6f6f6) for content sections that break out of the black chrome
• Full-bleed product photography / video — the Smartscooter shown in motion or studio light
• Premium-industrial register: precise letterspacing, weight-driven hierarchy, engineered restraint
• Generous radius on interactive controls (12px on primary buttons, observed live)
• Dual-surface system: marketing storytelling (black, cinematic) vs. network/utility flows (light, functional)
• Neutral gray scale (#737d82, #b9bcbf, #888) for metadata, captions, and disabled chrome

Primary tasks

• Find the nearest swap station and check battery availability
• Swap a depleted battery for a charged one at a kiosk
• Compare models on torque, range, and other spec numbers
• Check whether station coverage is dense enough for a delivery fleet
• Work out what to do when a battery swap fails

Brand Narrative

Gogoro was founded in 2011 in Taoyuan, Taiwan, by Horace Luke (former Chief Innovation Officer at HTC) and Matt Taylor, with a thesis bigger than a scooter: that the bottleneck for clean urban mobility was not the vehicle but the energy infrastructure. Their answer was the GoStation battery-swapping network — kiosks where a rider exchanges a depleted battery for a charged one in seconds, paid for by a monthly subscription (the Gogoro Network). The Smartscooter, first revealed at CES 2015, was the beautiful object built to prove the network worked. (en.wikipedia.org/wiki/Gogoro)

The design language flows directly from that thesis. Gogoro is selling two things that must both feel premium: a hardware object and an invisible network. The black-dominant, photography-led, Graphik-set system makes the Smartscooter feel as considered as a flagship phone — unsurprising given Luke's HTC and design background. The electric-blue/cyan accent is not a brand-guideline whim; it is the visual signature of the battery coming alive, the one moment of energy in an otherwise disciplined grayscale. Every surface, from the marketing hero to the GoStation map, is in service of making "refuel in seconds" feel as trustworthy as it is futuristic.

By April 2021 the Taiwan network counted 370,000 riders and had managed over 175 million battery swaps (≈265,000 per day) across 2,000 GoStations; the company expanded into Asia, the Middle East, and Latin America, licensing its battery network to Yamaha, Aeon Motor, and Hero MotoCorp, and went public on Nasdaq in 2022. (en.wikipedia.org/wiki/Gogoro) . In December 2020, Frost & Sullivan named Gogoro Global Company of the Year for the swappable-battery electric-scooter market. What Gogoro refuses: the toy-like pastel aesthetics of micro-mobility startups, the gas-station grime of legacy refueling, and any design that treats the battery network as plumbing rather than product.

Principles

1. The product is the hero; the UI is the chassis. Marketing surfaces recede into black so the Smartscooter can carry the page. UI implication: Default hero background to #000000 with full-bleed product media; keep chrome minimal and let one headline + one CTA do the work. Don't decorate around the product.

2. Blue is current, not color. Electric blue (#0074ff) and cyan (#28c3ff) are rationed to energy moments — links, active states, battery/charge graphics. UI implication: If a surface has more than ~10% blue area, you're overspending the voltage. Use grayscale for structure; reserve blue for where energy is literally or interactively present.

3. Numbers are the argument. Range, swap-time, station count, kilometers traveled — Gogoro proves claims with metrics, not adjectives. UI implication: Render hero statistics large and bold (36px+/700). Never pair a numeric claim with hype copy; the number is the persuasion.

4. The network must feel as reliable as a gas pump. GoStation UI is utility, not marketing — accuracy and legibility over flourish. UI implication: Station/battery-availability states must be unambiguous and live-accurate; use the charge palette consistently; never animate availability in a way that implies a state that isn't real.

5. Engineered restraint. Graphik, tight letterspacing, soft 12px radii, flat surfaces with luminous accents — everything reads as designed by engineers with taste. UI implication: Prefer value-step layering over heavy shadows; keep one radius system; let typography weight (not size inflation) carry hierarchy.

6. Two languages, both native. English and Traditional Chinese are authored in parallel as first-class voices. UI implication: Never machine-translate one from the other; keep the Graphik + PingFang TC / Noto Sans TC stack so both render with equal care. Simplified Chinese is never acceptable on TW surfaces.

Personas

Personas are fictional archetypes informed by publicly described Gogoro user segments (Taiwanese urban commuters and the licensed-partner ecosystem), not individual people.

家豪 (Jia-Hao), 31, Taipei. Daily scooter commuter who switched from a gas scooter to a Smartscooter for the GoStation convenience near his MRT exit. Opens the app mostly to find the nearest station and check battery availability before a long ride. Values "refuel in seconds" literally — he chose Gogoro because waiting at a gas station annoyed him more than the price.

Wei-Lin, 27, Taichung. Design-conscious early adopter who follows the product launches and treats the Smartscooter as a statement object as much as transport. Reads spec comparisons closely, cares about torque and range numbers, and shares clean studio shots of new models. Would not buy a scooter that looked "cheap."

Mr. Lin, 45, fleet operator. Runs a small delivery fleet and evaluates Gogoro (or a licensed Yamaha/Aeon model on the same network) on total cost of ownership and station density. Cares about uptime, swap reliability, and the subscription math — the network's coverage map is his primary decision surface.

Colors

Values below are drawn from live computed-style inspection of gogoro.com/media-center/logos/ plus the brand's known monochrome-plus-voltage system. Hexes are converted from observed rgb() values.

Brand / Chrome

• Pure Black (#000000): The primary brand color and dominant chrome. Page headers, footers, hero backgrounds, the matte-machine canvas.
• Charcoal (#323237): rgb(50, 50, 55) — the dominant text color (live: 194 occurrences). Warm near-black for body copy and headings on light surfaces.
• Ink (#141719 / #101418): Near-black section backgrounds, slightly lifted off pure black for layering dark-on-dark surfaces.

Accent (Voltage)

• Electric Blue (#0074ff): rgb(0, 116, 255) — the primary accent. Links, active states, focus rings, key inline highlights. The "current" color.
• Cyan Spark (#28c3ff): rgb(40, 195, 255) — brighter secondary accent. Battery/charge indicators, energy graphics, hover lift on blue elements.
• CTA Blue (#2b96ed): rgb(43, 150, 237) — a softer mid-blue observed on primary action buttons; the interactive-blue used when a filled CTA needs a slightly calmer tone than pure electric blue.

Surface & Neutral

• Off-White (#f6f6f6): rgb(246, 246, 246) — default light content surface; the clean-room background for product sections.
• Pure White (#ffffff): Cards, modals, inverted surfaces, button text on dark.
• Gray Mid (#737d82): rgb(115, 125, 130) — secondary text, captions, metadata.
• Gray Light (#b9bcbf): rgb(185, 188, 191) — tertiary text, disabled labels, subtle dividers.
• Gray Faint (#888888): rgb(136, 136, 136) — low-emphasis hints.
• Border (#dee2e6): rgb(222, 226, 230) — thin component borders on light surfaces (inputs, outlined chips).
• Surface Veil (rgba(248, 248, 248, 0.8)): Translucent overlay for sticky headers over imagery.

Semantic (inferred from category conventions, not live-verified)

• Success / Charge Complete: lean on cyan (#28c3ff) — "fully charged" reads as the brand's own energy color rather than a generic green.
• Warning / Low Battery: amber reserved for genuine battery-state warnings only; not used decoratively.
• Error / Danger: a saturated red for destructive or failed-swap states; used minimally to preserve the monochrome calm.

Typography

Font Stack (live-verified)

Graphik, "PingFang TC", "Noto Sans TC", sans-serif

Graphik leads (the brand's engineered grotesque), with Traditional-Chinese fallbacks for native TW/HK rendering. There is no Simplified-Chinese fallback in the observed stack — TW Traditional Chinese is the first-class CJK voice.

Weights

• Bold (700): Hero headlines, product names, key numeric claims (range/swap-count statistics). Gogoro headlines are confident and heavy — the engineering voice.
• Medium (500–600): Subheads, nav labels, button text, section titles.
• Regular (400): Body copy, captions, long-form spec descriptions.

Scale (inferred from category + observed chrome)

Conventions

• Tight letterspacing on display type — Graphik's geometric forms carry negative tracking on large headlines for an engineered, etched look.
• Weight + color drive hierarchy on light surfaces: #323237 charcoal for primary, #737d82 gray for secondary, electric blue for links.
• All-caps micro-labels appear on utility chrome (button labels like "LEARN MORE", "DISCOVER MORE" observed) — a nod to industrial/automotive UI signage.
• Numerals are hero material — range, swap counts, station counts render large and bold; numbers are the proof points of the network.

Layout

Structure

• Full-bleed cinematic sections alternate with centered max-width content blocks (~1200–1280px container)
• Hero = full viewport, product in motion/studio light, single headline + one or two CTAs
• Spec and network sections drop to the light #f6f6f6 surface for legibility and detail density

Spacing

• Generous vertical rhythm between marketing sections (80–120px) — the product needs room
• Tighter density inside spec tables and comparison grids
• 8px-based spacing scale for component internals

Density

Gogoro is low-to-medium density on marketing surfaces (premium, breathing, photography-led) and medium-high density on utility surfaces (spec comparisons, station maps, account flows). The contrast is intentional: storytelling is airy; functional truth is dense.

Responsive Behavior

Breakpoints (inferred)

Touch & Mobile

• Generous touch targets (40px+ on controls, 48–58px circular media controls)
• Hero video may swap to a static product still on mobile to preserve performance/data
• Station-locator map becomes a full-screen mobile experience with a bottom sheet for station detail

Media

• Full-bleed video/photo with object-fit: cover
• Lazy-load and responsive srcset for heavy product imagery

Elevation & Depth

Gogoro's depth philosophy is mostly flat, occasionally luminous. On black chrome, separation comes from value steps (#000000 → #141719 → #323237), not shadow. On light surfaces, cards use subtle neutral shadows for lift.

• Card shadow (light surface): 0 2px 12px rgba(0,0,0,0.08) — soft neutral lift
• Sticky header: translucent veil (rgba(248,248,248,0.8)) + backdrop blur over media
• Glow accents: electric-blue / cyan are occasionally used as soft glows around battery/charge graphics — the only "lighting" in the system, reserved for energy moments

Z-Index

• Sticky nav above content
• Map info-cards above the map surface
• Modals / locale pickers above all chrome

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: 0 2px 12px rgba(0,0,0,0.08)

Motion & Easing

Gogoro's motion is cinematic on marketing, instantaneous on utility. Hero media moves (the scooter is shown riding); UI motion is restrained and platform-native.

Durations:

Easings:

Spring stance. Overshoot/bounce is avoided on product and utility surfaces — Gogoro's register is engineered precision, not playful elasticity. The one place energy "moves" is the charge animation: a blue→cyan luminance pulse on battery/swap graphics, which reads as electrical current rather than UI bounce.

Signature motions.

1. Hero product reveal. As the hero loads or scrolls into view, the Smartscooter fades/parallaxes in over motion-cinematic / ease-enter; the headline follows on a short delay. Coordinated, not simultaneous.
2. Charge pulse. Battery/charge graphics pulse a soft electric-blue→cyan glow over ~motion-slow, looping subtly — the only ambient motion in the system, reserved for energy.
3. Station pin drop. On the GoStation map, pins fade/scale in over motion-standard / ease-enter as the viewport resolves; the selected pin lifts to cyan.
4. Sticky-header veil. On scroll, the nav transitions from transparent to the translucent veil (rgba(248,248,248,0.8) + blur) over motion-standard.

Reduce motion. Under prefers-reduced-motion: reduce, hero parallax and charge pulses collapse to static states; pin drops become instant; all motion-* tokens fall to motion-instant. No exceptions.

Verified: 2026-05-19 Tier 1 sources: https://gogoro.com/media-center/logos/ (live computed style — Graphik + TC stack, #323237 text, #0074ff blue, #28c3ff cyan, #f6f6f6 surface, #2b96ed CTA 12px·14px/600, #000000 chrome); https://gogoro.com home + /smartscooter (WebFetch — tagline, CTAs, stats). Tier 2 sources: styles.refero.design / getdesign.md — not checked this pass (browser session unreliable). Tier 2 (Philosophy/founders): Wikipedia (Gogoro — Horace Luke / Matt Taylor / 2011 Taoyuan / GoStation / CES 2015 / Nasdaq 2022). Style ref: premium-industrial (TW). Conflicts unresolved: brief's "accent green" corrected to live-observed electric blue/cyan (no green present in the system).

Components

Buttons

Primary (Filled CTA)

• Background: #2b96ed
• Text: #ffffff
• Border: none
• Radius: 12px
• Padding: 0 24px (height-driven)
• Height: 40px
• Font: 14px / 600 / Graphik
• Use: Account / login / primary site CTAs (live-observed: "로그인 및 회원가입" header CTA at #2b96ed, 12px radius, 14px·600)

Primary (Marketing / on-dark)

• Background: #0074ff (electric blue) or #ffffff (inverted)
• Text: #ffffff (blue) / #000000 (white)
• Border: none
• Radius: 12px
• Padding: 14px 28px
• Font: 16px / 600
• Use: Hero CTAs over black/photo backgrounds — "LEARN MORE", "DISCOVER MORE"

Secondary (Outlined)

• Background: transparent
• Text: #323237 (light surface) / #ffffff (dark surface)
• Border: 1px solid #dee2e6 (light) / 1px solid rgba(255,255,255,0.4) (dark)
• Radius: 12px
• Padding: 14px 28px
• Font: 16px / 600
• Use: "Work With Us", "See Case Study", lower-priority actions

Icon Button (circular)

• Background: #ffffff or rgba(0,0,0,0.15)
• Border: optional 1px solid #dee2e6
• Radius: 50%
• Size: 40–58px
• Use: Carousel controls, play/pause on video heroes, map controls (live-observed: 48px and 58px circular controls)

Inputs

Default

• Background: #ffffff
• Text: #323237
• Border: 1px solid #dee2e6
• Radius: 8px
• Padding: 12px 16px
• Font: 16px / 400
• Focus: border #0074ff, subtle blue focus ring
• Use: Account, dealer-locator, contact forms

Cards

Product / Spec Card

• Background: #ffffff or #f6f6f6
• Border: none (contrast separation) or 1px solid #dee2e6
• Radius: 8–16px
• Padding: 24px
• Use: Model comparison, spec breakdowns, network feature cards

Dark Feature Card

• Background: #141719
• Text: #ffffff
• Radius: 16px
• Use: On-black storytelling cards with product imagery + electric-blue accent line

Navigation

• Top bar: black (#000000) or translucent veil (rgba(248,248,248,0.8)) over imagery
• Logo (the Gogoro "G" mark) left, model/network nav center, account + locale right
• Nav labels: 14–16px / 500, white on dark / #323237 on light
• Sticky on scroll with the translucent veil for legibility over hero media

Map / Station Components (GoStation network)

• Map surface uses muted neutral base with electric-blue station pins
• Active/selected station: cyan (#28c3ff) highlight
• Battery-availability indicators use the charge palette (blue → cyan)

States

Do's and Don'ts

• DO keep black (#000000) as the dominant canvas on marketing surfaces. The product is the hero; the UI recedes.
• DON'T introduce competing accent colors. Electric blue and cyan are the only chromatic voices — adding green/orange/purple breaks the "single current" metaphor.
• DO reserve electric blue (#0074ff) and cyan (#28c3ff) for energy moments — links, active states, charge/battery graphics.
• DON'T flood a layout with blue. The voltage reads as voltage only because it's rationed against grayscale.
• DO use Graphik with the TC fallback stack. The engineered grotesque is the brand's typographic signature.
• DON'T substitute a generic system sans for headlines — Graphik's geometry is load-bearing.
• DO use 12px radius on interactive controls and 50% on icon buttons (live-observed).
• DON'T use sharp 0px corners on CTAs — the soft radius is part of the premium-tactile feel.
• DO let product photography go full-bleed and cinematic; show the Smartscooter in motion or studio light.
• DON'T clutter hero sections with multiple CTAs — one primary, optionally one secondary.
• DO use Traditional Chinese (網路, 電池, 里程) on TW surfaces; never Simplified.
• DON'T treat the GoStation network UI as decoration — it's the product's beating heart; station/battery states must be accurate and legible.

Voice & Tone

Gogoro speaks like an industrial designer who is also an environmentalist — precise, confident, and quietly idealistic, never preachy. The register is engineered-optimistic: short declarative sentences, concrete numbers, and a refusal of hype adjectives. English is a first-class brand voice (Gogoro is a global, Nasdaq-listed company), and Traditional Chinese is the first-class TW voice; the two are authored in parallel, not translated. The brand talks about energy, freedom, and the city as a system — but it earns those words with hard metrics (riders, kilometers, battery swaps) rather than slogans. The tagline "Ride Smarter. Refuel in seconds." is characteristic: a benefit, then a proof, no exclamation.

Forbidden phrases. Hype adjectives (revolutionary, game-changing, world's best) without a number behind them; exclamation marks on buttons; "eco-friendly" as decoration; Simplified-Chinese characters on TW surfaces (网络 → 網路, 电池 → 電池); approximate range/spec claims (every number must be real); cute mascots or emoji in product chrome (the machine is the brand).

Voice samples.

• Ride Smarter. Refuel in seconds. — homepage value proposition
• A ride like no other. — Smartscooter page title
• LEARN MORE / DISCOVER MORE — primary marketing CTAs
• Battery available · 2 min walk — illustrative GoStation availability string
• Swap complete. Ride on. — illustrative successful-swap confirmation

Agent Prompt Guide

Quick Color Reference

• Canvas / chrome: Pure Black (#000000)
• Body text: Charcoal (#323237)
• Primary accent / links: Electric Blue (#0074ff)
• Secondary accent / charge: Cyan (#28c3ff)
• Filled CTA: CTA Blue (#2b96ed), white text, 12px radius
• Light surface: Off-White (#f6f6f6)
• Secondary text: Gray Mid (#737d82)
• Border: #dee2e6

Example Component Prompts

• "Create a Gogoro hero: full-viewport black (#000000) background, full-bleed Smartscooter video, single Graphik headline at 56px/700 white with tight letterspacing, one filled CTA (#0074ff bg, white text, 12px radius, 16px/600, padding 14px 28px) reading 'DISCOVER MORE', optional outlined secondary (transparent, 1px solid rgba(255,255,255,0.4))."
• "Build a Gogoro primary button: #2b96ed background, white text, 12px border-radius, 14px/600 Graphik, padding 0 24px, height 40px, no border. Hover: lift toward #0074ff. No heavy shadow."
• "Design a GoStation network card on light surface: white bg, 16px radius, 24px padding, Graphik title 20px/600 #323237, a row of battery-availability indicators using cyan (#28c3ff) fills, address meta in 14px/400 #737d82, electric-blue (#0074ff) 'Navigate' link."
• "Create a spec-comparison grid: #f6f6f6 background, multi-column white cards, big bold numerals (range/swap-count) at 36px/700 #323237, units in 14px/500 #737d82. Numbers are the hero."

Iteration Guide

1. Black is the canvas, blue is the current. Default to grayscale; spend blue only on energy/interaction.
2. Graphik + TC fallbacks, always. Never drop the typeface to a generic sans on headlines.
3. 12px radius on CTAs, 50% on icon buttons. Soft, tactile, premium.
4. One primary CTA per hero. Restraint is the brand.
5. Cinematic photography full-bleed. The Smartscooter in motion is the argument.
6. Charge palette (blue → cyan) for battery/network states. Don't use generic green for "charged."
7. Traditional Chinese only on TW surfaces. Never Simplified.
8. Numerals bold and large — the network's proof is in the numbers.

Governance

Known Gaps

• Contrast, button-cta. Text #ffffff on #2b96ed measures 3.14:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-marketing. Text #ffffff on #0074ff measures 4.25:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-outline. Text #323237 on #00000000 measures 1.65:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.