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

# Hopper · Design System

> A bright booking interface framed by destination imagery.

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

Hopper pairs a photo-led booking hero with compact destination deal cards and a practical travel footer. A restrained white-and-blue interface keeps search and offers easy to scan.

## North star

Let destination photography provide the drama while a crisp white interface and blue booking actions remain immediately legible.

## Overview

The homepage balances a cinematic, full-bleed mountain photograph with a restrained booking interface. White is the dominant canvas, allowing the landscape to carry the emotional weight; the saturated Hopper blue is reserved for search action, links, and small interface accents. Near-black headings and muted gray supporting text make destination offers easy to scan without competing with their photography. Proxima Nova supplies a compact, friendly sans-serif voice, with heavy headings and regular body copy. The first screen layers navigation and travel-category controls over the image, then centers a white segmented search bar. Below, a three-column destination deal grid uses rounded image cards, followed by a two-column app-download block. A pale gray exploration band separates the white content from the multi-column footer. Consistent rounded controls, modest section spacing, and restrained borders keep the experience practical rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Hopper Blue | `#1878ec` | `--color-hopper-blue` | brand | Primary search action, destination links, and occasional blue section or text accents. |
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Main page canvas, search surface, and light text or controls over the hero photograph. |
| Journey Gray | `#606060` | `--color-journey-gray` | neutral | Muted supporting copy and footer text, including secondary destination details. |
| Midnight Ink | `#111111` | `--color-midnight-ink` | neutral | Headings, primary interface text, and dark text on light buttons. |
| Divider Gray | `#d9d9d9` | `--color-divider-gray` | semantic | Subtle borders and separators between segmented search fields or interface elements. |
| Cloud Surface | `#f6f6f6` | `--color-cloud-surface` | surface | Pale gray exploration section band and understated light interface surfaces. |
| Coral Signal | `#f1574b` | `--color-coral-signal` | accent | Small NEW badge accent; use sparingly for status labels, not as a page-wide color. |
| Footer Hairline | `#e0e0e0` | `--color-footer-hairline` | semantic | Faint lower-page separators and footer rules. |
| Deep Booking Blue | `#156bd2` | `--color-deep-booking-blue` | accent | Secondary blue accent in small interface details; the main visible action uses Hopper Blue. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f6f6f6` (Cloud Surface) · `--color-text` → `#111111` (Midnight Ink) · `--color-text-muted` → `#606060` (Journey Gray) · `--color-text-subtle` → `#ffffff` (Canvas White) · `--color-border` → `#d9d9d9` (Divider Gray) · `--color-accent` → `#1878ec` (Hopper Blue) · `--color-accent-2` → `#156bd2` (Deep Booking Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#f6f6f6` | 17.47:1 | AAA |
| `#606060` | `#ffffff` | 6.29:1 | AA |
| `#606060` | `#f6f6f6` | 5.82:1 | AA |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#1878ec` | `#ffffff` | 4.25:1 | AA-large |
| `#1878ec` | `#f6f6f6` | 3.94:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Proxima Nova | `--font-body` | webfont | 400, 700, 600, 800 | All page typography: navigation, search controls, headings, deal-card copy, links, and footer. | Nunito Sans |

- **Proxima Nova:** Use regular body copy, semibold interface labels, and bold-to-extrabold headings; uppercase is limited to tiny eyebrow labels.

### Type scale — Major Third (ratio ≈ 1.23, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 800 | 1.25 | 0 | — | Proxima Nova | Hero-level or primary page heading where present. |
| h2 | 24px | 700 | 1.33 | 0 | — | Proxima Nova | Section headings such as destination deals and app alerts. |
| h3 | 20px | 700 | 1.4 | 0 | — | Proxima Nova | Card-group or subordinate content headings. |
| h4 | 18px | 600 | 1.33 | 0 | — | Proxima Nova | Smaller subsection labels and supporting panel headings. |
| body | 14px | 400 | 1.43 | 0 | — | Proxima Nova | Descriptions, destination details, and general supporting copy. |
| caption | 13px | 400 | 1.23 | 0 | — | Proxima Nova | Compact labels and secondary metadata beneath cards. |
| button | 14px | 700 | 1.43 | 0 | — | Proxima Nova | Bold labels on booking and deal actions. |
| link | 14px | 400 | 1.43 | 0 | — | Proxima Nova | Destination links, See all, and footer navigation. |
| eyebrow | 10px | 700 | 1.2 | 0.05em | uppercase | Proxima Nova | Small uppercase status or category labels. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1100px.

A wide, centered content area sits within a compact page rhythm. The first section is a nearly viewport-wide rounded photographic hero, with overlaid navigation and a centered booking control. Below it, destination deals align to a three-column card grid; the app promotion shifts to a two-column split. A full-width pale gray exploration band precedes a spacious multi-column footer. Content headings and card text align left, while the hero controls are centered.

## Shape & elevation

- Radius: button `9999px` · media `20px` · badge `9999px` · link `12px` · xs `4px` · sm `8px` · md `12px` · lg `20px` · xl `32px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.25) 0px 4px 26px -7px`
- Motion: standard transition `0.25s cubic-bezier(0.77, 0, 0.18, 1)` on interactive elements.

The interface is mostly flat: white sections meet directly, with light borders and subtle separation around cards and footer rules. Rounded image cards and the hero frame establish shape without heavy shadow. Keep the search bar layered clearly above its background, and reserve stronger contrast for the blue action and white controls over photography.

## Imagery

Use vivid travel photography as the main visual draw: a full-bleed alpine hero, followed by destination photographs cropped into consistent rounded deal cards. Keep the hero image dark enough for white navigation to read, using restrained overlays if needed. The app section uses phone imagery and a QR code; these are supporting product visuals, not replacements for destination photography.

## Components

### Hero booking search

A white, rounded horizontal search surface divided into destination, dates, and guest fields, ending in a circular Hopper Blue search action.

### Hero navigation

Logo and account controls sit over the travel image; category tabs for stays, flights, cars, packages, and deals align above the search.

### Destination deal card

Three-column image-led cards pair destination photography with a bold location name, muted offer detail, and a compact light Claim now button.

### App promotion

A two-column block combines a heading, brief copy, QR download prompt, ratings marks, and overlapping phone imagery.

### Exploration links

A pale gray full-width band groups popular destination links in several compact columns under a left-aligned heading.

### Footer directory

A white, multi-column link directory organizes travel, products, company, FAQs, and media, followed by a subtle legal separator.

### Measured component styles

- **Primary button** (“Claim now”): background #f2f2f2 · text #111111 · radius 8px · padding 4px 16px · 700 14px Proxima Nova
- **Secondary button** (“AI Mode NEW”): transparent background · text #ffffff · border 1px solid · radius 1000px · padding 8px 12px · 600 16px Proxima Nova
- **Link** (“Las Vegas”): transparent background · text #1878ec · radius 0px · padding 0px · 400 14px Proxima Nova
- **Input** (“2 guests”): transparent background · text #111111 · radius 0px · padding 25px 12px 8px 20px · 600 16px Proxima Nova
- **Badge** (“NEW”): background #f1574b · text #ffffff · radius 100px · padding 2px 6px · 700 10px Proxima Nova · uppercase

## Do

- Keep the canvas predominantly white.
- Use large destination photography to define the hero.
- Make the booking search the clearest hero control.
- Use Hopper Blue for primary actions and links.
- Keep offer cards compact and image-led.
- Separate exploration content with a pale gray band.

## Don't

- Do not introduce unmeasured brand colors.
- Do not compete with the photography using decorative gradients.
- Do not make secondary copy as dark or heavy as headings.
- Do not turn the hero into a text-heavy banner.
- Do not use heavy shadows across otherwise flat sections.
- Do not stretch destination cards into oversized editorial panels.

## Agent prompt

Build a new travel booking page in Hopper’s clean, photo-led style. Use Canvas White (#ffffff) as the main surface, Midnight Ink (#111111) for headings, Journey Gray (#606060) for supporting text, and Hopper Blue (#1878ec) for primary actions and links. Start with a wide rounded destination-photo hero; layer light navigation and a centered white segmented booking search over it. Follow with a compact three-column grid of rounded destination deal cards, then a split app-download section with QR and phone imagery. Use Cloud Surface (#f6f6f6) for a distinct destination-links band before a white multi-column footer. Set all text in Proxima Nova or a close sans-serif substitute, with strong section headings and compact body copy. Keep borders subtle and shadows minimal; preserve clear contrast over photographs.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width rounded landscape image with overlaid navigation, category tabs, and centered segmented search. | Destination search, Travel category switching, Account access | Photo backdrop, White search bar, Blue search action, Small status badge |
| 2 | product-grid | Left-aligned heading above a three-column grid of image-led destination deal cards. | Browse destination deals, Open offer, See all | Rounded photo cards, Muted deal details, Compact claim buttons |
| 3 | cta | Two-column app promotion with copy and QR code opposite overlapping phone imagery. | Scan to download, Check app ratings | Text-and-QR column, Phone mockups, Ratings marks |
| 4 | category-nav | Full-width pale gray band with a heading and destination links arranged in compact columns. | Browse popular destinations, Jump to destination | Light gray section band, Blue text links, Multi-column link groups |
| 5 | footer | White footer with logo, social icons, multi-column link groups, and a separated legal row. | Navigate site categories, Open social channels, Review legal links | Multi-column directory, Subtle horizontal rule, Muted small text |

## Source CSS custom properties (selected)

```css
--spacing: .005rem;
--spacing-25: .125rem;
--spacing-50: .25rem;
--spacing-100: .5rem;
--spacing-150: .75rem;
--spacing-200: 1rem;
--spacing-250: 1.25rem;
--spacing-300: 1.5rem;
--spacing-350: 1.75rem;
--spacing-400: 2rem;
--spacing-450: 2.25rem;
--spacing-500: 2.5rem;
--spacing-600: 3rem;
--spacing-800: 4rem;
--spacing-1000: 5rem;
--spacing-1200: 6rem;
--spacing-container-padding: 2rem;
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-3xl: 32px;
--default-font-family: "Proxima Nova",sans-serif;
--text-1: 10px;
--text-1--line-height: calc(16 / 10);
--text-2: 12px;
--text-2--line-height: calc(16 / 12);
--text-3: 14px;
--text-3--line-height: calc(20 / 14);
--text-4: 16px;
--text-4--line-height: calc(22 / 16);
--text-5: 18px;
--text-5--line-height: calc(24 / 18);
--text-6: 20px;
--text-6--line-height: calc(28 / 20);
--text-7: 24px;
--text-7--line-height: calc(32 / 24);
```

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