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

# Shuttle — About · Design System

> A quiet canvas for files, sharing, and control.

**Theme:** light · **Industry:** saas · **Source:** https://shuttle.zip/about · **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._

Shuttle presents its file-sharing workspace through a calm, near-white canvas, concise centered copy, and vivid blue upload actions. Oversized product-interface mockups make the workflow tangible while rounded forms and restrained shadows keep the page approachable.

## North star

Keep the page quiet and spacious; let real-looking product interfaces carry the visual detail and use blue only to signal action.

## Overview

The page uses a near-white #f5f5f5 canvas throughout, letting generous open areas and dark typography establish its quiet visual character. Bright #0077ff is reserved for high-intent actions such as Upload File, Share, and Sign up, rather than broad decorative fills. InterVariable provides a consistent voice: a large, medium-weight display headline anchors the hero, while centered section headings and compact body copy keep the product story direct. A narrow floating pill navigation sits above the hero. The content then alternates centered feature introductions with broad workspace mockups, keeping a steady vertical rhythm and a comfortable, constrained page width. Interface previews, file tiles, and collaborator markers supply the visual variety; photographic and colorful file imagery belongs to those product examples, not the core brand palette. Rounded cards, subtle hairlines, and barely-there shadows give mockups separation without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f5f5f5` | `--color-soft-canvas` | brand | Dominant page canvas and continuous background across the hero and feature sections. |
| Shuttle Blue | `#0077ff` | `--color-shuttle-blue` | accent | Primary upload, share, signup, and account actions. |
| Quiet Graphite | `#525252` | `--color-quiet-graphite` | semantic | Muted descriptive text and footer copy. |
| Nav Charcoal | `#404040` | `--color-nav-charcoal` | semantic | Secondary navigation and understated supporting text. |
| Paper Surface | `#fefefe` | `--color-paper-surface` | surface | Floating navigation, preview panels, and light interface controls. |
| Fine Divider | `#e5e7eb` | `--color-fine-divider` | neutral | Subtle interface separators and hairline borders. |
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Headlines, primary text, and high-contrast interface labels. |
| Soft Ash | `#737373` | `--color-soft-ash` | neutral | Low-emphasis labels and supporting interface text. |
| Mockup Gray | `#afafaf` | `--color-mockup-gray` | semantic | Fine card edging in interface mockups; supporting detail rather than a defining brand color. |
| Slate Note | `#666666` | `--color-slate-note` | neutral | Occasional low-emphasis text within interface or preview details. |

### Semantic aliases

`--color-canvas` → `#f5f5f5` (Soft Canvas) · `--color-surface` → `#fefefe` (Paper Surface) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#525252` (Quiet Graphite) · `--color-text-subtle` → `#404040` (Nav Charcoal) · `--color-border` → `#e5e7eb` (Fine Divider) · `--color-accent` → `#0077ff` (Shuttle Blue) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#fefefe` | 20.82:1 | AAA |
| `#525252` | `#f5f5f5` | 7.17:1 | AAA |
| `#525252` | `#fefefe` | 7.75:1 | AAA |
| `#404040` | `#f5f5f5` | 9.51:1 | AAA |
| `#404040` | `#fefefe` | 10.28:1 | AAA |
| `#0077ff` | `#f5f5f5` | 3.79:1 | AA-large |
| `#0077ff` | `#fefefe` | 4.1:1 | AA-large |

### Gradients

- `linear-gradient(rgb(245, 245, 245) 30%, rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterVariable | `--font-body` | webfont | 400, 500, 600, 700 | All page typography, from display headlines and centered feature copy to navigation, buttons, and interface labels. | Inter |

- **InterVariable:** Use restrained sans-serif forms, medium display weight, regular body copy, and sentence case; the measured display style uses slightly tight tracking.

### Type scale — Custom (ratio ≈ 2.104, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 500 | 1.16 | -0.025em | — | InterVariable | Large centered hero headline introducing Shuttle’s file-sharing proposition. |
| h1 | 24px | 400 | 1.38 | 0 | — | InterVariable | Section-level feature headings and closing call-to-action heading. |
| body | 14px | 400 | 1.43 | 0 | — | InterVariable | Short explanatory paragraphs below feature headings. |
| caption | 11px | 400 | 1.4 | 0 | — | InterVariable | Small upload allowance notes and compact secondary annotations. |
| button | 15px | 500 | 1.5 | 0 | — | InterVariable | Upload File and prominent account actions. |
| nav | 14px | 500 | 1.43 | 0 | — | InterVariable | Floating pill navigation links and signup label. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 32, 48, 128 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1180px.

A centered page sits within a measured 1180px maximum width, with a comfortable density and broad, uncluttered section bands. The floating pill navigation precedes a centered hero with small peripheral file visuals and a wide workspace preview. Subsequent feature blocks repeat a centered heading-and-copy introduction followed by large product imagery, sometimes arranged as two-column content. Sections follow a measured 48px rhythm; the closing CTA returns to a single centered column.

## Shape & elevation

- Radius: button `8px` · input `6px` · card `24px` · media `16px` · nav `9999px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 0px 1px 0px`
- Shadow `hairline-2` (card, nav): `rgba(0, 0, 0, 0.25) 0px 0px 1px 0px`
- Shadow `md` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the page remains flat and open. Rounded white or near-white interface panels gain separation from hairline edging and very subtle shadows; larger previews may layer over the surrounding workspace to suggest depth. Avoid heavy outlines or dramatic page-wide elevation.

## Imagery

Product-interface mockups are the main visual asset: workspace canvases, file previews, menus, storage panels, and sharing controls. They appear large and light against the pale page, with small floating file tiles and collaborator labels adding context. Colorful photos, file icons, and document thumbnails appear inside these interface demonstrations, so treat them as product content rather than brand decoration.

## Components

### Floating pill navigation

Compact centered white navigation capsule with Shuttle identity, Updates, Pricing, and a blue Sign up action; use fully rounded ends and a restrained hairline shadow.

### Hero introduction

Centered oversized headline, concise supporting copy, blue Upload File button, and a small free-capacity caption, with file visuals flanking the copy.

### Upload action

Prominent blue pill button with white medium-weight Inter text; a small muted allowance note sits directly beneath.

### Workspace showcase

Wide pale product canvas with compact workspace controls, file drop area or preview, and discreet edging; keep product UI more detailed than the surrounding page.

### Feature introduction

Centered short heading and explanatory paragraph paired with a large workspace mockup; repeat for Intuitive, Smart, and Safe.

### Closing CTA

Minimal centered brand mark and two-line headline, followed by a blue Create account action and small social and policy links.

### Measured component styles

- **Primary button** (“Upload File”): background #0077ff · text #ffffff · radius 9999px · padding 8px 16px · 500 15px InterVariable
- **Secondary button** (“Untitled”): background #ffffff · text #000000 · radius 8px · padding 0px 12px · 600 12px InterVariable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Input**: transparent background · text #000000 · radius 6px · padding 12px 0px · 400 14px InterVariable
- **Card** (“Palet Untitled Download Share Drag & Dro”): background #fafafa · text #000000 · radius 24px · padding 0px · 400 16px InterVariable · shadow rgba(0, 0, 0, 0.25) 0px 0px 1px 0px
- **Navigation item** (“Updates Pricing Sign up”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px InterVariable

## Do

- Use #f5f5f5 as the continuous page canvas.
- Reserve #0077ff for clear, high-priority actions.
- Center feature headings and keep supporting copy concise.
- Show product workflows in large, pale interface mockups.
- Use InterVariable or a close Inter substitute throughout.
- Keep navigation capsule-shaped and visually lightweight.
- Use colorful imagery inside product demonstrations, not as broad page decoration.

## Don't

- Do not introduce broad saturated color bands.
- Do not fill empty space with unnecessary decoration.
- Do not make shadows or borders visually heavy.
- Do not use multiple competing display typefaces.
- Do not crowd the feature introductions with long paragraphs.
- Do not treat mockup file imagery as the site’s base palette.

## Agent prompt

Build a new page in Shuttle’s understated product-story style. Use Soft Canvas (#f5f5f5) as the continuous background, Deep Ink (#000000) for headings, and Shuttle Blue (#0077ff) only for primary actions. Set all typography in Inter or InterVariable, with a prominent centered headline, regular concise supporting copy, and compact navigation text. Constrain the main content to the measured 1180px maximum width and preserve generous vertical breathing room. Start with a floating Paper Surface (#fefefe) pill navigation, then use centered introductions paired with broad, realistic product-interface mockups. Keep UI panels rounded and lightly separated with Fine Divider (#e5e7eb) or subtle shadows. Any vivid photos, file icons, or collaborator labels should live inside the mockups. Finish with a quiet, centered account CTA and small secondary links.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy with peripheral file visuals above a wide workspace mockup. | Primary upload action, Free-capacity reassurance | Floating pill navigation, Centered headline, Product workspace preview |
| 2 | product-showcase | Centered feature introduction followed by a two-column product preview with floating file tiles. | Feature explanation, File preview context | Centered heading, Large preview panel, Floating file labels |
| 3 | product-showcase | Centered heading and paragraph above a wide workspace demonstration. | Workflow explanation, Upload action | Centered feature copy, Context menu mockup, Soft interface layering |
| 4 | product-showcase | Centered security introduction and provider symbols above a broad, layered sharing interface. | Security reassurance, Hosting-control message | Centered copy, Provider icons, Layered storage and sharing panels |
| 5 | cta | Single centered closing block with brand mark, headline, account action, and compact links. | Account creation, Policy and social navigation | Centered brand mark, Blue CTA, Small text links |

## Source CSS custom properties (selected)

```css
--color-tint: #0077ffff;
--color-label: #000000ff;
--color-labelInverted: #ffffffff;
--color-label2: #00000099;
--color-label3: #0000004d;
--color-label4: #0000002e;
--color-placeholder: #0000004d;
--color-separator: #3c3c434a;
--color-link: #007affff;
--color-background: #f9f9f9;
--color-background2: #ffffff;
--color-grouped: #ffffff;
--color-grouped2: #f7f7f7;
--color-grouped3: #ebebeb;
--color-pressHighlight: #00000010;
--color-windowBorder: transparent;
--color-group: #f2f2f7ff;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-shadow-color: #000;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-color: #fff;
--input-focus-border-color: Highlight;
--input-unfocused-border-color: transparent;
--input-disabled-border-color: transparent;
--input-hover-border-color: black;
--react-pdf-text-layer: 1;
--highlight-bg-color: rgba(180, 0, 170, 1);
--highlight-selected-bg-color: rgba(0, 100, 0, 1);
```

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