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

# Going · Design System

> Bright travel utility with a friendly, confident edge

**Theme:** light · **Industry:** travel · **Source:** https://www.going.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._

Going pairs a warm ivory canvas and deep teal typography with vivid violet calls to action and soft green feature bands. Oversized headlines, rounded controls, travel imagery, and member stories make the flight-deal membership feel approachable and practical.

## North star

Keep the page warm and spacious, using deep teal for confident structure and violet only to signal emphasis or action.

## Overview

The page builds its identity from a warm, nearly-white canvas (#fffef0), punctuated by bright green feature sections (#d7ffc2) and a dark teal inverse treatment (#004449) for the app panel and footer. Violet (#483cff) is a concentrated action and headline accent, not a background wash; reserve it for key buttons and selected words. PP Mori gives the page a clean, rounded sans-serif voice: large, bold display headlines sit beside more restrained body copy, while navigation and small labels use uppercase styling. The hero uses a generous two-part composition, pairing headline and membership prompt with a phone mock-up over travel photography. Below, the page alternates a green three-step feature band, an ivory testimonial carousel, and a dark app promotion. Rounded pill CTAs and soft-corner cards keep the experience friendly. Spacing is comfortable, with clear separation between sections and imagery given room to breathe.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Teal | `#004449` | `--color-deep-teal` | brand | Core text, navigation, outlined signup button, inverse app feature panel, and deep teal footer. |
| Signal Violet | `#483cff` | `--color-signal-violet` | accent | Primary app buttons and selected headline words; use sparingly for strong emphasis. |
| Fresh Lime | `#d7ffc2` | `--color-fresh-lime` | surface | Three-step feature band, testimonial cards, and pale filled membership CTAs. |
| Warm Ivory | `#fffef0` | `--color-warm-ivory` | surface | Main hero and content canvas, testimonial area, and light text on dark teal. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Measured page canvas, most visibly used behind the footer area. |

### Semantic aliases

`--color-canvas` → `#fffef0` (Warm Ivory) · `--color-surface` → `#d7ffc2` (Fresh Lime) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#004449` (Deep Teal) · `--color-text` → `#004449` (Deep Teal) · `--color-text-muted` → `#fffef0` (Warm Ivory) · `--color-border` → `#483cff` (Signal Violet) · `--color-accent` → `#483cff` (Signal Violet) · `--color-on-accent` → `#fffef0` (Warm Ivory)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#004449` | `#fffef0` | 10.76:1 | AAA |
| `#004449` | `#d7ffc2` | 9.87:1 | AAA |
| `#004449` | `#ffffff` | 10.92:1 | AAA |
| `#fffef0` | `#d7ffc2` | 1.09:1 | fail |
| `#fffef0` | `#ffffff` | 1.02:1 | fail |
| `#fffef0` | `#004449` | 10.76:1 | AAA |
| `#483cff` | `#fffef0` | 6.15:1 | AA |
| `#483cff` | `#d7ffc2` | 5.64:1 | AA |
| `#483cff` | `#ffffff` | 6.24:1 | AA |
| `#483cff` | `#004449` | 1.75:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Mori | `--font-body` | webfont | 475, 600, 400, 700 | Site-wide type for headlines, navigation, body copy, CTAs, and small labels. | DM Sans |

- **PP Mori:** Use a clean sans-serif voice; headlines are large and confident, while nav and eyebrow labels are uppercase with noticeable tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.1 | 0 | — | PP Mori | Oversized hero headline and primary promotional statement. |
| h1 | 48px | 475 | 1.17 | 0 | — | PP Mori | Main hero heading and prominent top-level page title. |
| h2 | 40px | 600 | 1.4 | 0 | — | PP Mori | Feature, testimonial, and app-promotion section headings. |
| h3 | 28px | 600 | 1.14 | 0 | — | PP Mori | Feature-step headings and smaller card titles. |
| h4 | 24px | 600 | 1.33 | 0 | — | PP Mori | Supporting subsection headings and compact promotional titles. |
| body | 16px | 475 | 1.5 | 0.02em | — | PP Mori | Feature explanations, testimonial text, and supporting descriptions. |
| caption | 14px | 600 | 1.14 | 0.1em | uppercase | PP Mori | Compact labels and metadata, styled in uppercase. |
| nav | 14px | 600 | 1.14 | 0.1em | uppercase | PP Mori | Uppercase main navigation links and compact utility navigation. |
| eyebrow | 14px | 600 | 1.14 | 0.1em | uppercase | PP Mori | Small uppercase pre-headings and section labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 24, 32, 40, 48, 60, 64, 80, 104 px.
- Section rhythm 32px · element gap 16px · card padding — · max content width 1200px.

Use a centered content frame with a measured maximum width of 1200px and a comfortable density. The hero aligns its headline and CTA to the left, balanced by a phone-and-photo composition on the right. Follow with a centered feature heading above three columns, then a horizontal testimonial-card carousel and a two-column app promotion. Maintain clear section bands and generous whitespace; the footer switches to a structured multi-column link layout.

## Shape & elevation

- Radius: button `9999px` · card `24px` · nav `9999px` · xs `24px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.04) 0px 2px 8px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most surfaces are flat, with color bands and dark inverse panels providing structure instead of heavy shadows. Cards have soft rounded corners and measured card styling includes a subtle shadow. Buttons are pill-shaped and distinguished with filled or outlined borders; phone mock-ups and layered photography provide the main depth.

## Imagery

Use vivid travel photography, destination scenes, and realistic smartphone UI mock-ups as the primary visual storytelling. Frame phone screens prominently, sometimes layered over wide landscape crops or rounded photo shapes. Feature and testimonial sections use compact image-led cards; keep images bright and natural rather than applying heavy decorative filters. Small logos and publication marks remain secondary details.

## Components

### Pill CTAs

Use fully rounded buttons with horizontal padding. Primary app actions use #483cff with #fffef0 text; free membership actions use #d7ffc2 with #004449 text.

### Outlined signup

A pill-shaped signup control uses a #004449 outline and matching text on the warm light canvas.

### Hero phone composition

Pair a large, left-aligned message with a prominent phone mock-up layered over a wide destination image.

### Three-step feature cards

Place three concise travel workflow steps in a centered row over a full-width #d7ffc2 section band.

### Testimonial carousel

Show rounded lime member-story cards in a horizontal carousel, with compact navigation controls and a centered signup action.

### Inverse app promotion

Combine travel photography and phone imagery with a #004449 panel, light text, selective green emphasis, and a pale CTA.

### Multi-column footer

Use a dark teal footer with grouped link lists, social icons, app badges, and a narrow light legal strip.

### Measured component styles

- **Primary button** (“GET APP”): background #483cff · text #fffef0 · border 2px solid #483cff · radius 900px · padding 0px 32px · 400 16px PP Mori
- **Secondary button** (“Join for free”): background #d7ffc2 · text #004449 · border 2px solid #d7ffc2 · radius 900px · padding 0px 32px · 400 16px PP Mori
- **Link** (“Rated excellent on TrustPilot”): transparent background · text #004449 · radius 0px · padding 0px 0px 60px 0px · 400 18px PP Mori
- **Card** (“April D. When we saw the low fares pop u”): background #d7ffc2 · text #000000 · radius 24px · padding 0px · 400 16px PP Mori · shadow rgba(0, 0, 0, 0.04) 0px 2px 8px 0px
- **Navigation item** (“HOW IT WORKS CHEAP FLIGHTS PREMIUM ELITE”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px PP Mori

## Do

- Use Warm Ivory (#fffef0) as the main content backdrop.
- Reserve Signal Violet (#483cff) for primary actions and selective emphasis.
- Use Deep Teal (#004449) for navigation, headings, and inverse surfaces.
- Break up the page with Fresh Lime (#d7ffc2) feature surfaces.
- Pair travel photography with recognizable phone UI mock-ups.
- Keep buttons and testimonial cards visibly rounded.
- Leave generous space around major headings and imagery.

## Don't

- Do not turn violet into a dominant page background.
- Do not replace the warm light canvas with a cold gray system.
- Do not crowd the hero or feature sections with dense text.
- Do not make every section a card or add heavy shadows.
- Do not use generic abstract illustrations in place of travel imagery.
- Do not flatten all headings into one uniform size and weight.

## Agent prompt

Build a new page in Going’s friendly travel-deal visual style. Use Warm Ivory (#fffef0) as the primary canvas, Deep Teal (#004449) for structural text and inverse panels, Fresh Lime (#d7ffc2) for feature bands and soft CTA fills, and Signal Violet (#483cff) sparingly for primary actions and emphasized words. Set type in PP Mori or a close sans-serif substitute, with prominent confident headlines, readable body copy, and tracked uppercase navigation labels. Use a centered content frame, comfortable section spacing, rounded pill buttons, and soft-corner cards. Pair copy with bright destination photography and realistic phone UI mock-ups. Alternate open light sections with green feature areas and occasional dark teal promotions; keep card shadows subtle and avoid gradients or crowded layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and CTA balanced by a phone mock-up over travel imagery. | free membership CTA, trust and rating cue | warm ivory canvas, violet headline emphasis, pill CTA, phone-and-photo layering |
| 2 | how-it-works | Centered heading above three side-by-side feature steps on a green band. | three-step explanation, repeat signup CTA | fresh lime section, phone screenshots, centered headings |
| 3 | testimonials | Centered title and rating above a horizontal row of member-story cards. | social proof, carousel navigation, signup CTA | rounded lime cards, travel photos, compact arrows |
| 4 | feature-split | Two-column block with travel imagery on the left and an inverse text panel on the right. | app promotion, free signup CTA | deep teal panel, phone over landscape photo, green text emphasis |
| 5 | footer | Dark multi-column link area above a narrow light legal strip. | grouped site navigation, social links, app downloads | deep teal background, small uppercase links, app store badges |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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