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

# Parachute Home · Design System

> Soft neutrals, tactile imagery, and quiet editorial type.

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

Parachute’s homepage pairs quiet, editorial typography with full-bleed bedroom photography to make home textiles feel tactile and inviting. A restrained white-and-charcoal interface keeps product discovery clear while generous spacing gives each image room to lead.

## North star

Let warm, full-width home photography carry the emotion while a quiet white-and-charcoal interface keeps shopping effortless.

## Overview

The visual system is built on a white canvas, dark charcoal text, and the contrast between fine Canela headlines and practical Suisse Intl interface copy. The opening hero uses a full-bleed lifestyle photograph, with large white serif text anchored at the lower left and a small pale CTA at the lower right. Below it, the page alternates generous white intervals with image-led product stories, curated product cards, and category imagery. Neutral merchandise photography supplies most of the page’s warmer hues; these are photographic tones, not a separate interface palette. Product grids and navigation remain restrained, with small labels and understated dividers. Buttons use pale warm-gray fills and compact corners, while most content sits flat rather than in elevated cards. The result feels tactile and editorial without sacrificing straightforward shopping paths.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation background, and contrast for dark hero lettering. |
| Soft Charcoal | `#353331` | `--color-soft-charcoal` | brand | Main text and navigation color; also used for dark controls and footer details. |
| Utility Blue | `#0000ee` | `--color-utility-blue` | semantic | Crawler-detected text-link accent; not a defining brand color in the screenshots. |
| Gradient Gray | `#7f7f7f` | `--color-gradient-gray` | semantic | Measured in a gradient artifact; not a prominent interface color in the page imagery. |
| Quiet Divider | `#cccccb` | `--color-quiet-divider` | neutral | Thin footer and component borders that separate content without strong contrast. |
| Muted Graphite | `#696663` | `--color-muted-graphite` | neutral | Secondary copy and small product badges, including muted ORGANIC labels. |
| True Black | `#000000` | `--color-true-black` | semantic | Limited measured button and text usage; not the primary text color or overall brand tone. |
| Linen Tint | `#e3dfd7` | `--color-linen-tint` | neutral | Minor measured border or product-related tone; warm neutral imagery is more prominent than this UI color. |
| Cloud Surface | `#f7f7f7` | `--color-cloud-surface` | surface | Subtle card or secondary surface, including a measured empty-state card. |
| Warm Porcelain | `#f1eee9` | `--color-warm-porcelain` | accent | Pale warm button and badge fill that softens the otherwise white interface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Cloud Surface) · `--color-text` → `#353331` (Soft Charcoal) · `--color-text-muted` → `#696663` (Muted Graphite) · `--color-border` → `#cccccb` (Quiet Divider) · `--color-accent` → `#0000ee` (Utility Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#353331` | `#ffffff` | 12.58:1 | AAA |
| `#353331` | `#f7f7f7` | 11.74:1 | AAA |
| `#696663` | `#ffffff` | 5.7:1 | AA |
| `#696663` | `#f7f7f7` | 5.32:1 | AA |
| `#0000ee` | `#ffffff` | 9.4:1 | AAA |
| `#0000ee` | `#f7f7f7` | 8.77:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.5) 44.31%, rgba(0, 0, 0, 0))`
- `linear-gradient(0deg, rgba(0, 0, 0, 0) 18.75%, rgba(0, 0, 0, 0.5))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400, 300, 500, 700 | Navigation, body copy, captions, badges, and buttons. | Inter |
| Canela | `--font-display` | webfont | 400, 300 | Display and heading typography, plus selected editorial product links. | Cormorant Garamond |

- **Suisse Intl:** Use clean sans-serif forms with mostly regular weight; keep interface labels compact and case straightforward.
- **Canela:** Light-to-regular serif contrast, especially in large campaign headlines; avoid heavy weights or conspicuous tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 0.85 | 0 | — | Canela | Oversized, light serif campaign headlines over hero photography. |
| h1 | 48px | 300 | 1.1 | 0 | — | Canela | Primary page or campaign headline in Canela. |
| h2 | 36px | 400 | 1.04 | -0.011em | — | Canela | Editorial section titles introducing product stories. |
| h3 | 28px | 300 | 1.2 | 0 | — | Canela | Subsection headings within collections and editorial blocks. |
| h4 | 24px | 400 | 1.12 | 0 | — | Canela | Compact product-story and category headings. |
| body | 16px | 400 | 1.8 | 0 | — | Suisse Intl | Product descriptions, editorial paragraphs, and supporting copy. |
| caption | 14px | 400 | 1.4 | 0 | — | Suisse Intl | Small product metadata, badges, and image-related labels. |
| button | 14px | 400 | 1.8 | 0 | — | Suisse Intl | Compact shopping actions and calls to action. |
| nav | 14px | 400 | 1.4 | 0 | — | Suisse Intl | Top-level category and utility navigation. |
| link | 16px | 400 | 1.1 | 0 | — | Canela | Editorial-style linked text and selected product titles. |

## Spacing & layout

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

Use a broad, centered content frame with the measured maximum width of 1344px, while allowing campaign photography to span edge to edge. The page pairs a compact two-tier header with a large hero, then moves through product grids, editorial image blocks, and category bands. Align text and card content cleanly, but vary image compositions to avoid a rigid catalog feel. Keep the overall density comfortable: broad white intervals separate content, with a measured 64px section rhythm and 8px element gap.

## Shape & elevation

- Radius: button `4px` · badge `2px` · nav `2px` · xs `2px` · sm `4px` · md `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s linear` on interactive elements.

Keep the interface mostly flat: measured data reports no shadows, and product cards sit directly on the white canvas rather than in raised containers. Separate the header and footer with understated hairlines where needed. Use image overlays for text contrast, not card-like elevation. Buttons have compact rounded corners, while badges remain subtly rounded.

## Imagery

Use authentic lifestyle and product photography of bedding, towels, bedrooms, and people at home. Favor tactile fabric detail, natural light, warm interiors, and varied wide or portrait crops. Hero images fill the viewport width, often with a dark gradient at the bottom so white serif copy stays readable. Product cards use simple, clean cutouts or quiet studio settings; illustrations and 3D are not the defining visual language.

## Components

### Announcement and navigation

A slim dark announcement strip sits above a white navigation row with category links, centered wordmark, and compact utility icons.

### Campaign hero

Full-bleed bedroom photography with a large lower-left Canela headline and a small warm-pale CTA near the lower-right edge.

### Product card

Show a clean product image, small Suisse Intl title and price, optional color swatches, and a compact uppercase badge on a flat surface.

### Shop button

Use a measured 4px radius and Suisse Intl label; pale #f1eee9 fills suit secondary actions, with dark charcoal for stronger actions.

### Editorial image block

Pair lifestyle photography with a restrained Canela headline and short link or CTA, keeping text directly over or beside the image.

### Product badge

Small uppercase Suisse Intl label on #f1eee9 with muted #696663 text and a measured 2px radius.

### Measured component styles

- **Primary button** (“Bedding”): background #f1eee9 · text #000000 · radius 4px · padding 0px 32px · 400 14px Suisse Intl
- **Secondary button** (“Skip To Content”): background #353331 · text #ffffff · border 1px solid #353331 · radius 10px · padding 15px · 500 16px Suisse Intl · capitalize
- **Link** (“Organic Cotton Mosaic Towels, Ochre and ”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Suisse Intl
- **Card** (“Nothing here yet. Life is short. Get the”): background #f7f7f7 · text #353331 · radius 0px · padding 0px · 400 16px Suisse Intl
- **Badge** (“ORGANIC”): background #f1eee9 · text #696663 · radius 2px · padding 2px 4px 1px 4px · 400 10px Suisse Intl · uppercase
- **Navigation item** (“Best Sellers New Bedding Pillows & Duvet”): transparent background · text #353331 · radius 0px · padding 0px · 400 16px Suisse Intl

## Do

- Use Canela-style serif headlines for campaign moments.
- Keep navigation and product details in a clean sans serif.
- Let real textile and bedroom photography dominate large sections.
- Use white and charcoal as the primary interface colors.
- Reserve warm pale fills for compact calls to action and badges.
- Separate sections with generous white space rather than decorative containers.

## Don't

- Do not turn the interface into a colorful palette; warm hues belong mainly in photography.
- Do not add heavy shadows or raised-card styling.
- Do not use bold geometric display type in place of the editorial serif.
- Do not cover every image with labels, badges, or controls.
- Do not make the page feel like a dense marketplace catalog.
- Do not treat measured utility blue or gradient gray as defining brand colors.

## Agent prompt

Build a new Parachute-style home-goods page with an editorial, understated shopping experience. Use Gallery White (#ffffff) as the main canvas and Soft Charcoal (#353331) for navigation and primary text; apply Warm Porcelain (#f1eee9) sparingly to compact buttons or badges. Set campaign headlines in a light Canela-like serif and interface copy in a Suisse Intl-like sans serif. Lead with a full-bleed, tactile bedroom photograph and a large lower-left headline, using a subtle dark image overlay only where white text needs contrast. Organize the rest into spacious product grids, editorial image stories, and category photography within a broad content frame. Keep product metadata small and clear, use thin Quiet Divider (#cccccb) rules where useful, and avoid shadows, bright interface colors, or dense card chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with left-aligned headline near the bottom and a compact CTA at the opposite corner. | Seasonal campaign discovery, Direct shop CTA | Edge-to-edge bedroom photography, Large white serif headline, Dark image overlay |
| 2 | other | Long sequence of spacious product, editorial, category, and footer blocks on a white canvas. | Browse best sellers, Explore by category, Follow editorial product stories, Email signup and store discovery | Product cards, Lifestyle image bands, Small badges and labels, Quiet footer dividers |

## Source CSS custom properties (selected)

```css
--color-background: 255, 255, 255;
--gradient-background: rgb(255, 255, 255);
--color-foreground: 53, 51, 49;
--color-background-contrast: 191,178,155;
--color-shadow: 53, 51, 49;
--color-button: 53, 51, 49;
--color-button-text: 255, 255, 255;
--color-secondary-button: 255, 255, 255;
--color-secondary-button-text: 53, 51, 49;
--color-link: 53, 51, 49;
--color-badge-foreground: 53, 51, 49;
--color-badge-background: 255, 255, 255;
--color-badge-border: 53, 51, 49;
--payment-terms-background-color: rgb(255, 255, 255);
--font-body-family: "Suisse Intl", sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: "Canela", "Canela Fallback", serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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