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

# Wallpaper Projects · Design System

> Artful wallpaper, presented like an editorial portfolio

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

Wallpaper Projects pairs a warm, restrained canvas with oversized editorial typography and expressive interior imagery. Its homepage moves from an immersive wallpaper-led hero through studio process and project galleries to a dark contact footer.

## North star

Let warm negative space, expressive room photography, and contrasting editorial type make every wallpaper project feel like a curated portfolio.

## Overview

The page is built around a warm off-white canvas (#fbf9f3) that gives the interior photographs room to carry color and texture. Near-black (#1e1e1e) anchors most copy and buttons, then becomes a full-width contrast field in the closing contact area; white is reserved for reversed text, fine marks, and controls over dark or photographic backgrounds. Typography is the main brand signature: elegant Cardinal Fruit serif headlines alternate with highly legible, compact Soehne Mono Buch copy and restrained Soehne Breit Buch labels. Large editorial statements are interspersed with small uppercase captions. The layout avoids a uniform catalog grid: project images vary in scale and position, with generous blank intervals and occasional centered collaborator or press callouts. Photography shows wallpaper in finished rooms, so the patterns are understood in context. Rounded capsule CTAs provide the clearest interface affordance, while captions and directional arrows make image links feel like a carefully typeset portfolio.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ink | `#1e1e1e` | `--color-gallery-ink` | brand | Primary text and dark capsule CTAs; fills the full-width closing contact section with reversed white copy. |
| Warm Paper | `#fbf9f3` | `--color-warm-paper` | surface | Main page canvas and background across the studio, process, portfolio, press, and collection sections. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Reversed text, subtle marks, and light capsule controls over dark or photographic areas; also measured on borders. |

### Semantic aliases

`--color-canvas` → `#fbf9f3` (Warm Paper) · `--color-surface` → `#1e1e1e` (Gallery Ink) · `--color-text` → `#1e1e1e` (Gallery Ink) · `--color-text-muted` → `#ffffff` (Studio White) · `--color-border` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e1e` | `#fbf9f3` | 15.83:1 | AAA |
| `#ffffff` | `#fbf9f3` | 1.05:1 | fail |
| `#ffffff` | `#1e1e1e` | 16.67:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne Mono Buch | `--font-mono` | webfont | 400 | Body copy, navigation, captions, and compact project details | Space Mono |
| Cardinal Fruit | `--font-display` | webfont | 400 | Display headlines and editorial section headings | Cormorant Garamond |
| Soehne Breit Buch | `--font-soehne-breit-buch` | webfont | 400, 600 | Uppercase eyebrows, small labels, and button text | Montserrat |

- **Soehne Mono Buch:** Monospaced texture; body copy is compact with slightly tight tracking, while navigation stays small and understated.
- **Cardinal Fruit:** Expressive high-contrast serif; large headlines and section titles create a fashion-editorial counterpoint to the mono copy.
- **Soehne Breit Buch:** Clean sans-serif for uppercase captions and concise controls; measured weights are 400 and 600.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 180px | 400 | 1 | -0.025em | — | Cardinal Fruit | Oversized serif brand title in the photographic hero. |
| h1 | 80px | 400 | 1 | 0 | uppercase | Soehne Breit Buch | Large uppercase studio or campaign headline where used. |
| h2 | 48px | 400 | 1.24 | -0.02em | — | Cardinal Fruit | Editorial section headings, including process and statement blocks. |
| h3 | 36px | 400 | 1 | -0.025em | — | Cardinal Fruit | Smaller serif titles introducing project and collection content. |
| body | 14px | 400 | 1.3 | -0.02em | — | Soehne Mono Buch | Studio descriptions, process explanations, and supporting copy. |
| caption | 12px | 400 | 1.5 | 0.1em | uppercase | Soehne Breit Buch | Uppercase micro-labels and project or image captions. |
| button | 14px | 400 | 1.5 | 0 | — | Soehne Breit Buch | Short CTA labels such as project exploration. |
| nav | 12px | 400 | 1.5 | 0 | — | Soehne Mono Buch | Compact menu and navigation labels. |
| eyebrow | 12px | 400 | 1.5 | 0.1em | uppercase | Soehne Breit Buch | Uppercase section introductions and contact prompts. |
| code | 14px | 400 | 1.3 | -0.02em | — | Soehne Mono Buch | No code UI; use this measured mono style for compact supporting text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 7, 8, 10, 12, 15, 16, 20, 24, 25, 40, 50, 60, 80, 100 px.
- Section rhythm 40px · element gap 60px · card padding — · max content width 1400px.

Use a spacious page canvas capped at the measured 1400px maximum width, with broad image-led areas and relatively few visible containers. The page alternates full-bleed hero imagery, two-column studio content, centered process and editorial callouts, and asymmetrically positioned portfolio images. Keep section transitions calm and open; measured spacing uses a 4px base with a 40px section gap and 60px element gap. Align small captions to their associated image or text rather than imposing a dense uniform grid.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The design is predominantly flat: measured data reports no shadows or gradients. Separate areas with whitespace and image placement rather than card chrome. Use dark and light section contrast sparingly, especially for the closing contact area, and keep controls as simple capsule shapes without visible shadow.

## Imagery

Use large, polished interior photographs showing custom wallpaper installed in homes, retail spaces, and hospitality settings. The hero treats a softly colored wallpaper image as a full-viewport backdrop beneath white display type. Portfolio imagery varies in scale and placement, with concise serif captions and directional arrow marks. Let photographic palettes supply visual variety; the brand UI itself remains restrained.

## Components

### Immersive hero

Full-bleed wallpaper photography carries the opening brand statement; white serif display text, small white brand mark, menu icon, scroll cue, and a light capsule wallpaper CTA sit over the image.

### Capsule CTA

Use fully rounded buttons. The measured dark version pairs #1e1e1e with white text; the light version reverses those colors over imagery.

### Editorial intro split

Place a concise studio description and CTA beside or above supporting interior imagery on the warm paper canvas.

### Process steps

Present four numbered stages in an open two-column composition, using oversized outlined numerals, uppercase micro-labels, and compact mono descriptions.

### Project gallery

Arrange room photography in an intentionally uneven portfolio layout with short project captions and fine directional arrow marks.

### Editorial callout

Center a small uppercase label over a large serif collaborator or publication name, leaving generous open space around the pairing.

### Contact footer

Switch to a near-black (#1e1e1e) band with white copy, a prominent serif invitation, capsule CTA, newsletter input, and compact grouped links.

### Measured component styles

- **Primary button** (“EXPLORE ALL”): background #1e1e1e · text #ffffff · radius 20px · padding 8px 16px 7px 16px · 400 10px Soehne Breit Buch
- **Secondary button** (“SWAP WALLPAPER”): background #ffffff · text #1e1e1e · border 1px solid · radius 20px · padding 8px 16px 7px 16px · 400 10px Soehne Breit Buch
- **Link** (“2023 Louis Vuitton, The Wynn, LV”): transparent background · text #1e1e1e · radius 0px · padding 0px · 400 10px Soehne Breit Buch
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Soehne Mono Buch
- **Navigation item** (“Shop Collections Projects About Press PU”): background #1e1e1e · text #ffffff · radius 0px · padding 40px · 400 10px Soehne Breit Buch

## Do

- Use #fbf9f3 as the dominant canvas.
- Reserve #1e1e1e for copy, dark CTAs, and the closing contact band.
- Set prominent statements in an expressive editorial serif.
- Keep supporting copy and small navigation labels compact.
- Show wallpaper installed in real interior environments.
- Vary image sizes and positions to create an asymmetrical portfolio rhythm.
- Separate content with generous whitespace instead of card chrome.

## Don't

- Do not introduce unmeasured brand colors into the interface.
- Do not turn the portfolio into a uniform grid of identical cards.
- Do not add shadows or gradients to otherwise flat UI.
- Do not use oversized sans-serif type as the dominant headline style.
- Do not crowd captions, process steps, or image links.
- Do not place the main content inside heavy bordered panels.

## Agent prompt

Build a new page in the Wallpaper Projects visual language. Use Warm Paper (#fbf9f3) as the main canvas, Gallery Ink (#1e1e1e) for type, dark CTAs, and a possible closing contact band, and Studio White (#ffffff) for reversed text and light controls. Pair dramatic Cardinal Fruit-style serif statements with compact Soehne Mono Buch-style body copy and restrained Soehne Breit Buch uppercase labels. Compose spacious editorial sections with asymmetric, varied-scale interior photography rather than repeated cards. Show wallpaper in finished rooms and let the image supply color. Use concise image captions, fine directional cues, and fully rounded capsule CTAs. Keep surfaces flat, avoid shadows and gradients, and preserve generous gaps between blocks. Make the page feel like a curated design-studio portfolio, not a dense retail catalog.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport photographic hero with overlaid brand title, compact menu, scroll cue, and capsule CTA. | scroll cue, swap wallpaper CTA | full-bleed photography, serif display title, white overlay controls |
| 2 | feature-split | Two-column studio introduction with supporting interior images. | studio introduction, contact CTA | warm canvas, serif heading, interior photography |
| 3 | how-it-works | Centered serif heading followed by four numbered process steps in two columns. | four-step process, numbered stages | oversized numerals, uppercase labels, mono descriptions |
| 4 | gallery | Asymmetric portfolio gallery with varied image sizes, captions, arrows, and a brief introduction. | project browsing, explore all CTA | uneven image placement, serif captions, directional arrows |
| 5 | other | Centered editorial text treatment naming featured collaborators. | collaborator discovery | uppercase eyebrow, large serif name, open whitespace |
| 6 | product-grid | Short collection introduction paired with an asymmetrical gallery of installed wallpaper designs. | browse collections, explore all CTA | room photography, image captions, open gallery spacing |
| 7 | logo-cloud | Centered press heading and prominent publication name. | press recognition | small uppercase label, editorial serif name |
| 8 | feature-split | Two-column block pairing product photography with a concise shop introduction and link. | visit shop | product photograph, compact mono copy, capsule CTA |
| 9 | contact | Dark contact band with lead text and CTA above an image, newsletter field, and grouped footer links. | start a project, newsletter signup, footer navigation | near-black surface, white type, capsule CTA, compact link groups |

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