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

# HOUSEPLANT · Design System

> Thoughtful objects, warm tones, and playful retro character.

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

HOUSEPLANT pairs a warm, pale canvas with deep brown typography and tactile product imagery. Its spacious editorial sections balance bold display headlines, approachable shopping grids, and rounded, restrained controls.

## North star

Keep the warm cream-and-ink framework quiet and spacious so expressive product photography and bold editorial headlines lead.

## Overview

The page is anchored by a creamy canvas (#f4f1e0) and dark, red-brown ink (#321e1e), with warm beige cards (#e5e0ca) supporting product discovery. Pale mint (#bbe7db) appears mainly as a fine divider or outlined accent, while the yellow highlight and saturated blue link are rare interface details rather than defining brand fields. Typography shifts from compact, confident sans-serif navigation and body copy to oversized condensed display lettering and occasional softer serif editorial moments. A wide, rounded hero image carries the strongest visual impact; subsequent category tiles, product photography, founder story, and collaboration cards form a varied but coherent sequence. The page uses comfortable whitespace and broad section breaks rather than dense decoration. Thin horizontal rules, subtle corners, and mostly flat surfaces keep the presentation tactile and calm, letting the rich, warm product photographs supply contrast and personality.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roasted Cocoa | `#321e1e` | `--color-roasted-cocoa` | brand | Primary text, navigation, dark story panels, and the contrasting footer background. |
| Warm Porcelain | `#f4f1e0` | `--color-warm-porcelain` | surface | Main page canvas and light text against dark image or story areas. |
| Oat Beige | `#e5e0ca` | `--color-oat-beige` | neutral | Product card surfaces and selected button backgrounds, paired with cocoa text. |
| Butter Highlight | `#faeaa1` | `--color-butter-highlight` | accent | Rare highlighted control detail, including the keyboard skip-to-content button. |
| Pale Mint | `#bbe7db` | `--color-pale-mint` | semantic | Fine section rules and occasional outlined or highlighted interface details. |
| Link Blue | `#0000ee` | `--color-link-blue` | accent | Rare measured navigation accent; not a dominant color in the visible page. |

### Semantic aliases

`--color-canvas` → `#f4f1e0` (Warm Porcelain) · `--color-surface` → `#321e1e` (Roasted Cocoa) · `--color-surface-2` → `#e5e0ca` (Oat Beige) · `--color-text` → `#321e1e` (Roasted Cocoa) · `--color-text-muted` → `#e5e0ca` (Oat Beige) · `--color-text-subtle` → `#f4f1e0` (Warm Porcelain) · `--color-border` → `#bbe7db` (Pale Mint) · `--color-accent` → `#0000ee` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#321e1e` | `#f4f1e0` | 13.81:1 | AAA |
| `#321e1e` | `#e5e0ca` | 11.83:1 | AAA |
| `#e5e0ca` | `#f4f1e0` | 1.17:1 | fail |
| `#e5e0ca` | `#321e1e` | 11.83:1 | AAA |
| `#f4f1e0` | `#321e1e` | 13.81:1 | AAA |
| `#f4f1e0` | `#e5e0ca` | 1.17:1 | fail |
| `#0000ee` | `#f4f1e0` | 8.28:1 | AAA |
| `#0000ee` | `#321e1e` | 1.67:1 | fail |
| `#0000ee` | `#e5e0ca` | 7.09:1 | AAA |

### Gradients

- `linear-gradient(rgba(50, 30, 30, 0) 0%, rgba(50, 30, 30, 0.02) 24.884%, rgba(50, 30, 30, 0.04) 48.501%, rgba(50, 30, 30, 0.05) 100%)`
- `linear-gradient(rgba(50, 30, 30, 0) 0%, rgba(50, 30, 30, 0.4) 24.884%, rgba(50, 30, 30, 0.8) 48.501%, rgba(50, 30, 30, 0.95) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue LT Pro | `--font-body` | webfont | 400, 700, 600 | Primary navigation, body copy, buttons, links, and much of the headings. | Inter |
| New Spirit | `--font-new-spirit` | webfont | 500 | Editorial headings and caption-style details. | DM Serif Display |
| Houseplant | `--font-display` | webfont | 400 | Brand display lettering and selected oversized section headlines. | Oswald |

- **Helvetica Neue LT Pro:** Clean sans-serif with compact body copy; navigation is bold, while buttons and eyebrows use uppercase lettering and wide tracking.
- **New Spirit:** Use sparingly for a softer editorial contrast; measured captions are small, medium-weight, and tightly tracked.
- **Houseplant:** Distinctive condensed, characterful display face; reserve for large headline moments rather than utility text.

### Type scale — Perfect Fifth (ratio ≈ 1.557, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 400 | 0.9 | -0.03em | — | Houseplant | Large custom brand lettering and expressive display moments. |
| h1 | 51px | 900 | 0.9 | -0.05em | uppercase | eurostile-extended | Oversized uppercase campaign headline over hero imagery. |
| h2 | 50px | 400 | normal | 0.012em | — | Helvetica Neue LT Pro | Prominent section titles, including story and product areas. |
| h3 | 44px | 400 | 1 | 0 | — | Houseplant | Custom display heading for selected feature sections. |
| h4 | 32px | 500 | 1.25 | -0.03em | — | New Spirit | Editorial subheadings and supporting feature titles. |
| body | 14px | 400 | 1.35 | 0 | — | Helvetica Neue LT Pro | Product descriptions, explanatory copy, and supporting text. |
| caption | 12px | 500 | 1.8 | -0.03em | — | New Spirit | Small editorial notes, labels, and supporting details. |
| button | 12px | 600 | 1.2 | 0.2em | uppercase | Helvetica Neue LT Pro | Compact uppercase action labels and interface controls. |
| nav | 14px | 700 | 1.35 | -0.03em | — | Helvetica Neue LT Pro | Header navigation and primary shopping links. |
| link | 21px | 700 | 1.25 | -0.03em | — | Helvetica Neue LT Pro | Emphasized collection and collaboration links. |
| eyebrow | 12px | 600 | 1.2 | 0.2em | uppercase | Helvetica Neue LT Pro | Short uppercase section labels above a main heading. |

## Spacing & layout

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

A broad, centered desktop storefront uses a measured maximum content width of 1312px, with a compact header above a full-width, rounded hero. The page moves through a horizontal category rail, a two-column founder story, a four-column product grid, an image-led scent feature, and collaboration cards. Sections share a light canvas and are separated by generous measured 64px section gaps; inner elements use a comfortable rhythm. Most content aligns left, while campaign copy can center over imagery. The visual density stays moderate, with whitespace around product cards and clear transitions between content types.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `8px` · nav `4px` · link `4px` · xs `3px` · sm `4px` · md `8px` · lg `12px`
- Shadow `inset` (other): `rgba(50, 30, 30, 0.12) 0px 0px 0px 1px inset`
- Shadow `inset-2` (other): `rgb(50, 30, 30) 0px 0px 0px 1.5px inset`
- Shadow `inset-3` (link): `rgb(50, 30, 30) 0px 0px 0px 2px inset`
- Shadow `hairline` (button): `rgb(168, 232, 226) 0px 0px 0px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is largely flat, with little visible drop-shadow. Separation comes from the cream canvas, beige product surfaces, fine horizontal rules, and dark story or footer bands. Buttons, navigation, and cards use restrained rounded corners; measured inset outlines appear as subtle focus or interaction treatments rather than default card elevation.

## Imagery

Photography is central: cinematic hero imagery, lifestyle scenes, founder portraits, colorful scent visuals, and close product still lifes. Images are typically large and cleanly framed, with rounded corners on hero and card media. Product photography often sits on a pale background, while campaign imagery can be dark, saturated, or warmly lit. The images—not decorative illustration—provide most of the page’s texture and color variation.

## Components

### Header navigation

Compact brand mark, shopping links, and utility icons sit in a single horizontal row on the warm canvas; navigation text is measured at 14px, bold.

### Campaign hero

Wide, rounded photographic banner with centered uppercase display headline, a short supporting line, and a light action button crossing a fine horizontal rule.

### Category rail

Side-by-side image tiles for shopping categories, each with a concise label and link treatment beneath the image.

### Founder story split

Two-column block pairs a dark cocoa text panel and large portrait; large condensed heading and light button create strong contrast.

### Product cards

Four-column merchandise grid uses pale beige product surfaces, compact product information, rating details, and small Best Seller labels.

### Collaboration cards

Three image-led partner cards combine photography, a bold linked title, concise copy, and a collection link.

### Footer and newsletter

Dark cocoa footer gathers an email signup, grouped shopping and company links, social links, and oversized low-contrast brand lettering.

### Measured component styles

- **Primary button** (“SKIP TO CONTENT”): background #faeaa1 · text #212326 · border 1px solid #faeaa1 · radius 0px · padding 6px 20px · 600 12px Helvetica Neue LT Pro · uppercase · shadow rgb(168, 232, 226) 0px 0px 0px 0px
- **Secondary button** (“Set the Mood”): background #e5e0ca · text #321e1e · radius 4px · padding 12px 16px · 400 16px Helvetica Neue LT Pro
- **Link** (“New Arrivals”): transparent background · text #321e1e · radius 0px · padding 0px · 400 16px Helvetica Neue LT Pro
- **Input**: transparent background · text #e5e0ca · radius 0px · padding 0px 24px 0px 0px · 400 14px Helvetica Neue LT Pro
- **Card** (“Best Seller”): background #e5e0ca · text #321e1e · radius 8px · padding 0px · 400 16px Helvetica Neue LT Pro
- **Navigation item** (“Shop The Basement New Ashtrays Scent Fur”): transparent background · text #321e1e · radius 0px · padding 0px · 400 16px Helvetica Neue LT Pro

## Do

- Use #f4f1e0 as the dominant page canvas.
- Set primary text and dark bands in #321e1e.
- Let product and lifestyle photography carry the strongest color.
- Keep display lettering large, bold, and confined to headline moments.
- Separate major sections with generous whitespace and fine rules.
- Use rounded corners selectively on media, cards, and controls.

## Don't

- Do not introduce a new dominant color beyond the measured palette.
- Do not turn rare blue or yellow accents into primary brand fields.
- Do not make the page feel dense with stacked borders and shadows.
- Do not use the display typeface for long body copy.
- Do not force every section into the same centered layout.
- Do not treat colors inside campaign photography as interface colors.

## Agent prompt

Build a new HOUSEPLANT-style storefront page with a warm, editorial retail feel. Use Warm Porcelain (#f4f1e0) for the main canvas and Roasted Cocoa (#321e1e) for text, navigation, dark story panels, and footer areas. Use Oat Beige (#e5e0ca) for product surfaces; reserve Pale Mint (#bbe7db) for fine rules or occasional details. Butter Highlight (#faeaa1) and Link Blue (#0000ee) should remain rare accents. Use a clean sans-serif for navigation and body, with bold custom-feeling display headlines and occasional editorial serif. Organize the page with a broad hero, category rail, split story, product grid, image-led campaign, and card-based editorial content. Keep spacing comfortable, imagery tactile and prominent, corners restrained, and elevation minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | 宽幅圆角横向影像，居中叠加标题、说明文字与行动按钮。 | 主行动入口, 主题故事导流 | 全幅摄影, 居中标题, 细横线, 浅色按钮 |
| 2 | category-nav | 横向图片分类轨道，图片下方放置简短类别名称与链接。 | 按品类浏览, 图片入口 | 横向商品图块, 简短标签, 箭头链接 |
| 3 | feature-split | 左右双栏，深色文字面板与创始人肖像并置。 | 品牌介绍, 故事延伸入口 | 深棕底色, 醒目标题, 人物摄影, 浅色按钮 |
| 4 | product-grid | 四列商品网格，搭配左对齐标题与简洁商品信息。 | 商品发现, 评分浏览, 颜色选择 | 浅米色商品卡, 畅销标签, 评分信息 |
| 5 | feature-grid | 宽幅横向主题影像，中央叠放文案和探索按钮。 | 专题探索, 系列导流 | 彩色摄影, 居中标题, 浅色行动按钮, 细横线 |
| 6 | feature-grid | 三列合作内容卡片，图片、标题和简介依次排列。 | 浏览合作系列, 查看精选内容 | 合作摄影, 加粗标题, 简短说明, 集合链接 |
| 7 | product-showcase | 多张商品图片与轻量操作项组成横向展示区。 | 商品探索, 快速操作 | 产品图片, 简洁按钮, 轻量文案 |
| 8 | gallery | 多列图片带横向铺陈，图片之间留出清晰间隔。 | 浏览品牌内容, 视觉探索 | 连续图片墙, 轻量操作按钮 |
| 9 | footer | 深棕底色分成订阅区与多列链接区，底部放置品牌装饰字样。 | 邮件订阅, 分类导航, 社交媒体入口 | 深色背景, 邮件输入框, 分组链接, 超大品牌字样 |

## Source CSS custom properties (selected)

```css
--font-body-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-heading-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--font-navigation-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-navigation-size: 12px;
--font-navigation-weight: 400;
--font-button-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-button-size: 12px;
--font-button-baseline: 0rem;
--font-price-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-price-scale: 1.0;
--color-base-text: 33, 35, 38;
--color-base-background: 255, 255, 255;
--color-base-solid-button-labels: 33, 35, 38;
--color-base-outline-button-labels: 26, 27, 24;
--color-base-accent: 250, 234, 161;
--color-base-heading: 26, 27, 24;
--color-base-border: 210, 213, 217;
--color-base-border-strong: 133, 141, 152;
--color-placeholder: 243, 243, 243;
--color-overlay: 33, 35, 38;
--color-keyboard-focus: 135, 173, 245;
--color-shadow: 168, 232, 226;
--shadow-opacity: 1;
--color-background-dark: 235, 235, 235;
--color-price: #1a1b18;
--color-sale-price: rgb(50, 30, 30);
--color-sale-badge-background: #c0270b;
--color-reviews: #ffb503;
--color-critical: #c0270b;
--color-success: #1f7a3a;
--color-accent-strong: 184, 132, 26;
--color-surface-warm: 251, 247, 241;
--color-surface-card: 239, 230, 220;
--color-warning: 168, 107, 0;
```

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