---
title: "Segway design system"
variant: extended
source: https://www.segway.com/
captured_at: 2026-10-12
theme: dark
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/segway-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Segway · Design System

> Cinematic mobility, grounded in bold black and signal red

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.segway.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Segway’s homepage pairs a black canvas and crisp white navigation with cinematic, full-bleed mobility photography. Bright red calls to action and rounded image cards guide visitors across a broad range of personal transportation products.

## North star

Let cinematic mobility photography lead, using black negative space and restrained red CTAs to keep every product scene clear and compelling.

## Overview

The page uses pure black as its persistent canvas, letting immersive product photography set each section’s mood. White navigation, headings and card labels stay legible over the dark interface, while vivid rider red marks primary actions; the darker brand red appears more selectively. Muted grays support footer text and secondary surfaces without competing with imagery. Misans forms a clean sans-serif system: substantial, centered campaign headlines contrast with compact navigation and concise supporting copy. The homepage alternates full-bleed promotional scenes with dark product-showcase areas, then shifts into a dense but orderly grid of rounded category cards. Wide gutters and generous gaps between major sections keep the long page from feeling crowded, while card-level content remains compact. Photo-led framing, subtle black overlays and restrained borders preserve contrast and cinematic depth; decoration is secondary to vehicles, riders and landscape imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and dark campaign backgrounds; supports high-contrast photography and white text. |
| Rider Red | `#ff0009` | `--color-rider-red` | accent | Primary campaign and Learn More buttons; the brightest action color against black. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Navigation, headings, card labels, button text and selected light borders. |
| Footer Gray | `#86868b` | `--color-footer-gray` | semantic | Muted footer and lower-priority supporting text on dark backgrounds. |
| Midnight Slate | `#666666` | `--color-midnight-slate` | surface | Measured dark gray surface; use as a supporting band, not a defining photographic color. |
| Graphite Gray | `#6e6e73` | `--color-graphite-gray` | surface | Secondary section surface in measured styles; maintain the overall dark-page treatment. |
| Divider Charcoal | `#333333` | `--color-divider-charcoal` | semantic | Subtle footer dividers and link-associated hairlines. |
| Footer Black | `#0f0f0f` | `--color-footer-black` | surface | Near-black footer surface, distinct from the main canvas only on close inspection. |
| Brand Red | `#da291c` | `--color-brand-red` | brand | Segway brand red used selectively for compact Store actions and brand accents. |
| Card Graphite | `#444446` | `--color-card-graphite` | surface | Dark card and button surface, including supporting app or service cards. |
| Soft Gray | `#999999` | `--color-soft-gray` | semantic | Secondary muted text where contrast should remain softer than white. |
| Mist White | `#f3f3f4` | `--color-mist-white` | neutral | Occasional light text detail; not a primary page background. |
| Pale Silver | `#e1e1e4` | `--color-pale-silver` | neutral | Subtle light footer text detail against the near-black footer. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#666666` (Midnight Slate) · `--color-surface-2` → `#6e6e73` (Graphite Gray) · `--color-surface-3` → `#0f0f0f` (Footer Black) · `--color-surface-4` → `#444446` (Card Graphite) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#86868b` (Footer Gray) · `--color-text-subtle` → `#999999` (Soft Gray) · `--color-border` → `#333333` (Divider Charcoal) · `--color-accent` → `#ff0009` (Rider Red) · `--color-accent-2` → `#da291c` (Brand Red) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#666666` | 5.74:1 | AA |
| `#ffffff` | `#6e6e73` | 5.07:1 | AA |
| `#ffffff` | `#0f0f0f` | 19.17:1 | AAA |
| `#86868b` | `#000000` | 5.8:1 | AA |
| `#86868b` | `#666666` | 1.58:1 | fail |
| `#86868b` | `#6e6e73` | 1.4:1 | fail |
| `#86868b` | `#0f0f0f` | 5.29:1 | AA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#666666` | 2.02:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 11.67%, rgba(0, 0, 0, 0.5))`
- `linear-gradient(360deg, rgba(0, 0, 0, 0.4) -22.5%, rgba(0, 0, 0, 0) 95.42%)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Misans-Medium | `--font-body` | webfont | 380, 400, 520 | Primary body, navigation, captions and product labels | Inter |
| Misans-Demibold | `--font-misans-demibold` | webfont | 400, 450, 380 | Headings and button labels | Inter |
| Misans-Regular | `--font-misans-regular` | webfont | 400, 330, 380 | Regular-weight links and card copy | Inter |
| Misans-Semibold | `--font-display` | webfont | 520, 400 | Large campaign and section headings | Inter |

- **Misans-Medium:** Clean sans-serif; medium-weight default, with compact navigation and sentence-case copy.
- **Misans-Demibold:** Use stronger weight for hierarchy and CTAs; keep case natural and tracking restrained.
- **Misans-Regular:** Use for lighter supporting text; avoid letting small text compete with campaign imagery.
- **Misans-Semibold:** Prominent but controlled headline weight; keep headings crisp and avoid decorative styling.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 520 | 1.21 | 0 | — | Misans-Semibold | Centered campaign headline over the homepage hero imagery. |
| h2 | 40px | 520 | 1.2 | 0 | — | Misans-Semibold | Major product or editorial section headings. |
| h3 | 28px | 450 | normal | 0.04em | — | Misans-Demibold | Product and category titles with subtle tracking. |
| h4 | 24px | 400 | 1.4 | 0 | — | Misans-Medium | Secondary headings and compact card titles. |
| body | 16px | 400 | 1.4 | 0 | — | Misans-Medium | Supporting product descriptions and section copy. |
| caption | 12px | 380 | 1.33 | 0 | — | Misans-Medium | Small labels and supporting metadata. |
| button | 16px | 400 | 2.75 | 0 | — | Misans-Demibold | Primary and secondary CTA labels. |
| nav | 14px | 380 | 4 | 0 | — | Misans-Medium | Top-level product and support navigation. |
| link | 16px | 400 | 1 | 0 | — | Misans-Regular | Footer and inline text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 15, 16, 24, 28, 30, 32, 48, 114, 150 px.
- Section rhythm 114px · element gap 16px · card padding — · max content width 1408px.

A spacious, vertically scrolling homepage anchored by a centered, wide content area; measured maximum width is 1408px. The first viewport is a full-bleed campaign hero beneath a slim navigation bar. Below it, broad dark sections alternate between product showcases and category cards. Category imagery sits in a responsive grid, with rounded corners and text anchored over the images. Major sections have generous separation, while card interiors and footer columns are more compact. Keep headings and key campaign actions centered, and use alignment within cards to support quick scanning.

## Shape & elevation

- Radius: button `9999px` · card `20px` · xs `18px` · sm `20px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.25) 0px 0px 5px 0px`
- Motion: standard transition `0.3s ease-in` on interactive elements.

The interface is mostly flat: black section fields and image-led cards provide the structure. Rounded card corners soften the grid, while fine dark borders are reserved for subtle separation. Black gradient overlays add depth over photography. Avoid prominent drop shadows or layered, floating panels; the red CTA supplies the main non-photographic emphasis.

## Imagery

Photography is the central visual device: riders, scooters, bikes and outdoor landscapes fill the hero and category cards. Images are cropped boldly, often edge-to-edge, with centered product campaign text or labels anchored over the scene. Dark gradient overlays improve text contrast. Product cutouts and app imagery appear in supporting cards; illustrations are not the defining brand signature.

## Components

### Top navigation

Dark horizontal header with white Segway mark, compact white product links, search icon and a small pill-shaped red Store action.

### Campaign hero

Full-bleed rider and terrain photography with centered white campaign typography, a bright red primary CTA and an outlined secondary action.

### Product showcase

Dark product-focused band with centered heading and copy, prominent scooter imagery, carousel controls and small pagination indicators.

### Category cards

Rounded, photo-led tiles for mobility and adjacent products; white labels and compact red Learn More buttons sit over darkened image areas.

### Explore cards

Compact dark-gray service and app cards combining product imagery, brief white text and understated pill-shaped actions.

### Footer

Near-black footer with multiple compact link columns, muted gray text, thin dividers and small social and locale details.

### Measured component styles

- **Primary button** (“Enter CES”): background #ff0009 · text #ffffff · radius 60px · padding 0px 28px · 400 16px Misans-Demibold
- **Secondary button** (“Store”): background #da291c · text #ffffff · radius 99px · padding 8px 16px · 380 13px Misans-Medium
- **Link**: transparent background · text #333333 · radius 0px · padding 0px · 400 16px Misans-Regular
- **Card** (“Segway Mobility App Your ride. One app. ”): background #444446 · text #ffffff · radius 20px · padding 0px · 400 16px Misans-Regular
- **Navigation item** (“eKickScooter eBike GoKart Self-Balancing”): transparent background · text #ffffff · radius 0px · padding 0px · 380 14px Misans-Medium

## Do

- Use black as the main page canvas.
- Let large, cinematic product photography lead each campaign section.
- Reserve Rider Red (#ff0009) for prominent actions.
- Keep navigation, headings and card labels bright white.
- Use rounded image cards for product categories.
- Add dark image overlays wherever text crosses photography.

## Don't

- Do not introduce a bright page background.
- Do not let gray surfaces overwhelm the black canvas.
- Do not use red for large decorative panels.
- Do not place dense copy over busy images without contrast treatment.
- Do not add heavy shadows or ornamental borders.
- Do not make navigation or card labels visually louder than the campaign.

## Agent prompt

Build a new Segway-style page around a Canvas Black (#000000) foundation, using cinematic, edge-to-edge mobility photography as the main storytelling device. Set navigation, headings and image-card labels in Signal White (#ffffff), with compact product links and a small Brand Red (#da291c) Store action. Use Rider Red (#ff0009) sparingly for high-priority CTAs. Choose a clean sans-serif close to Inter if Misans is unavailable; use stronger weights for headings and buttons, lighter weights for supporting copy. Alternate broad dark campaign bands with product showcases and rounded photo-led category cards. Use subtle black gradients behind text on images, keep spacing generous between major sections, and avoid heavy shadows, bright surfaces or decorative effects that compete with the products.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Near-black footer organized into six compact link columns, followed by legal, locale and social rows. | Grouped navigation links, Legal and privacy links, Region selector | Near-black background, Muted gray text, Thin dividers, Compact column grid |

## Source CSS custom properties (selected)

```css
--Primary-Brand-Red: #da291c;
--Primary-White: #fff;
--Primary-Black: #000;
--Primary-Rider-Red: #ff0009;
--Secondary-Red-200: #f13528;
--Secondary-Red-300: #cc2316;
--Secondary-Blue: #035FE7;
--swiper-theme-color: #a1a1a1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/segway-com