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

# Zipline · Design System

> Cinematic human stories against a warm, quiet canvas.

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

Zipline’s homepage pairs immersive, people-focused video with a restrained cream canvas and bold condensed headlines. The interface stays sparse, letting the delivery story and imagery lead while pill-shaped outlined actions remain easy to spot.

## North star

Let full-bleed human-centered footage and oversized cream headlines carry the story; keep the interface sparse and pill-shaped.

## Overview

The visual strategy is built around contrast between a quiet, warm canvas and expansive, cinematic footage. Gallery White (#f7f4e8) carries the page background and also appears in the hero headline, navigation, and outlined header actions, so interface elements stay legible over changing video. Stone Haze (#c6c3ba) is a measured section surface, while Ink (#000000) is reserved for muted text and a dark-on-light CTA treatment; the warmer browns and reds visible in the screenshot belong to the footage, not the core interface palette. Oversized uppercase FK Screamer display type creates a decisive editorial hook, balanced by FK Grotesk Neue for navigation, copy, and buttons. The layout favors a full-bleed video hero, generous open space, and sparse content rather than cards or decorative UI. Rounded pill controls and fine light outlines provide the main interface structure, while soft crossfades and the curved transition below the hero let media meet the pale page canvas without hard visual clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f7f4e8` | `--color-gallery-white` | brand | Warm canvas and light text for the hero, navigation, and outlined header buttons. |
| Stone Haze | `#c6c3ba` | `--color-stone-haze` | surface | Measured pale gray-beige section surface; use as a quiet band, not a dominant brand accent. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Muted text and dark text on the light hero CTA; keep it secondary to the cream canvas. |

### Semantic aliases

`--color-canvas` → `#f7f4e8` (Gallery White) · `--color-surface` → `#c6c3ba` (Stone Haze) · `--color-text` → `#f7f4e8` (Gallery White) · `--color-text-muted` → `#000000` (Soft Ink) · `--color-border` → `#f7f4e8` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f7f4e8` | `#c6c3ba` | 1.6:1 | fail |
| `#000000` | `#f7f4e8` | 19.06:1 | AAA |
| `#000000` | `#c6c3ba` | 11.92:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| fkGroteskNeue | `--font-body` | webfont | 500 | Navigation, body copy, captions, and buttons. | Inter |
| fkScreamer | `--font-display` | webfont | 700 | Oversized hero and display headlines. | Anton |

- **fkGroteskNeue:** Medium weight is prevalent; keep ordinary sentence case, compact interface text, and comfortable body leading.
- **fkScreamer:** Bold, very condensed display face; use uppercase headlines with tight line height.

### Type scale — Custom (ratio ≈ 6.818, base 22px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 150px | 700 | 0.85 | 0 | uppercase | fkScreamer | Oversized uppercase hero headline, set in a bold condensed display face. |
| body | 22px | 500 | 1.4 | 0 | — | fkGroteskNeue | Hero supporting copy and longer explanatory text. |
| caption | 14px | 500 | 1 | 0 | — | fkGroteskNeue | Small supporting labels and secondary copy. |
| button | 14px | 500 | 1 | 0 | — | fkGroteskNeue | Compact CTA labels inside rounded pill controls. |
| nav | 14px | 500 | 1.5 | 0 | — | fkGroteskNeue | Header navigation labels, in light text over the hero video. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 14, 18, 24, 60, 104, 199 px.
- Section rhythm 60px · element gap 6px · card padding — · max content width 1272px.

The page opens with a full-bleed video hero and an overlay navigation row. Content aligns to a broad centered page frame, with a measured maximum width of 1272px; the header and hero copy sit toward the left while navigation spans the top. Large areas of warm canvas separate sparse content, creating a low-density, comfortable rhythm rather than a packed grid. A curved lower edge softens the transition from hero media into the page. Avoid card-heavy layouts; use wide media and restrained text groupings.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is predominantly flat: there are no measured shadows or gradients. Fine cream borders outline the header pills over video, while the pale canvas provides separation between sections. Create depth through full-bleed footage and text overlays rather than raised cards; use the curved hero boundary as a soft transition.

## Imagery

Use large cinematic video or photography featuring people and real delivery contexts. The hero fills the viewport behind the navigation and text; its warm, naturally varied colors come from the footage rather than the measured interface palette. Keep overlays minimal, using cream headline and copy for contrast. Full-page imagery is sparse outside the hero, with later media appearing as a broad landscape frame.

## Components

### Overlay navigation

A light Zipline mark and compact FK Grotesk Neue links sit across the top of the full-bleed hero.

### Header action pills

“Partner with us” and “Get delivery” use light text, a thin #f7f4e8 outline, and fully rounded ends over the video.

### Hero headline

Large uppercase FK Screamer lettering sits left of center over footage, with tight leading and strong contrast.

### Hero supporting copy

Short, two-line light copy anchors below the headline and explains the delivery benefit.

### Primary light CTA

A compact light pill labeled “Try it now” uses dark text and an arrow, contrasting with the outlined header actions.

### Curved media transition

A rounded, organic lower edge separates the full-bleed hero video from the warm canvas below.

### Measured component styles

- **Primary button** (“Partner with us”): transparent background · text #f7f4e8 · border 1px solid #f7f4e8 · radius 999px · padding 0px 18px · 500 14px fkGroteskNeue
- **Navigation item** (“Technology”): transparent background · text #f7f4e8 · radius 0px · padding 0px · 500 14px fkGroteskNeue

## Do

- Use #f7f4e8 as the warm page canvas and primary light interface color.
- Keep hero imagery full-bleed and centered on people or real delivery contexts.
- Set display headlines in bold, condensed uppercase lettering.
- Use FK Grotesk Neue or a close sans-serif for copy and navigation.
- Keep header links and hero copy visually legible over video.
- Use thin outlined pill buttons for header actions.
- Leave generous open space between media-led content.

## Don't

- Do not treat footage browns and reds as core brand colors.
- Do not introduce unmeasured accent colors, shadows, or gradients.
- Do not fill the page with raised cards or dense UI panels.
- Do not use a conventional solid navigation bar over the hero.
- Do not use wide, delicate display lettering for the main headline.
- Do not add heavy borders or sharp rectangular CTA treatments.

## Agent prompt

Build a new page in Zipline’s cinematic, media-led style. Use Gallery White (#f7f4e8) for the warm canvas, light hero typography, navigation, and outlined controls; use Stone Haze (#c6c3ba) only for a subdued section band and Soft Ink (#000000) for secondary text or dark-on-light CTA copy. Begin with full-bleed people-focused video, overlay a sparse header and an oversized uppercase condensed headline, then keep supporting copy short. Use FK Screamer-like display type and FK Grotesk Neue-like sans-serif text. Favor open space, broad content framing, and an organic curved transition from hero to canvas. Keep elevation flat, avoid card grids and decorative effects, and use thin outlined pill buttons for secondary actions with a light filled pill for the main CTA.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with overlay header, left-aligned headline, brief copy, and compact CTA. | persistent-looking overlay navigation, primary hero CTA, high-contrast text over video | full-bleed media, uppercase condensed headline, outlined header pills, curved lower edge |
| 2 | other | A long, spacious warm-canvas section following the curved hero edge. | visual breathing room, scroll-led content reveal | warm neutral canvas, minimal decoration |
| 3 | testimonials | A short testimonial band with a prominent customer quote and supporting imagery. | customer voice, social proof | quote-led content, sparse image grouping |

## Source CSS custom properties (selected)

```css
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-color: #000;
--bs-body-color-rgb: 0, 0, 0;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: #212529bf;
--bs-secondary-color-rgb: 33, 37, 41;
--bs-secondary-bg: #e9ecef;
```

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