# Wallpaperprojects · Design system migration spec

> Source: https://wallpaperprojects.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using restraint and typography to create a premium, high-end feel, making it an excellent reference for editorial and portfolio design.

## 1. Identity DNA

This system operates as a high-end design magazine's digital exhibition space, where the architecture of the page serves the curation of the work. It is a minimalist, high-art digital portfolio for visual design projects, built on the principle that the container must never compete with the contained. Like a pristine gallery, its power lies in deliberate absence.

**One-liner:** A minimalist, high-art digital portfolio for visual design projects.
**Keywords:** gallery · curatorial · design-focused · visual-culture
**Analogy:** A high-end design magazine's digital exhibition space.

## 2. Color

The color system is a strict, two-tone palette: a warm off-white canvas and dark ink text. This monochromatic rigor ensures that all chromatic energy comes from the project photography itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBF9F3` | main background |
| `--ink` | `#1E1E1E` | body text |
| `--line` | `rgba(30, 30, 30, 1.0)` | divider |

**Color principle:** A strict monochromatic palette with a warm off-white background, allowing project imagery to provide all color.

The governing principle is restraint; the palette creates a high-contrast, gallery-like stage, never a distraction.

## 3. Typography

The typographic voice is split between two distinct roles. Display text employs a high-contrast transitional serif to make bold visual statements, while all functional UI text uses a wide, geometric sans-serif for clarity and structure.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 180px | 1.0 | 400 | -4.5px | Main hero title |
| display | 48px | 1.0 | 400 | -1.2px | Section headings |
| body | 12px | 1.25 | 400 | 1.2px | UI labels, buttons, and small text |

**Type rules:**
- All display text is set in a high-contrast transitional serif with tight tracking.
- All UI and functional text is set in a wide, geometric sans-serif.
- Uppercase is used for navigation and small labels, not for main headings.

## 4. Spacing

The spatial rhythm is one of generous generosity, creating large, clear zones with significant padding between major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 100 px
- **Rhythm:** A generous, spacious layout with large, clear zones and significant padding between major content blocks.

## 5. Surfaces

Surfaces are defined by absence, relying on the warm background canvas rather than applied depth. Borders are minimal, appearing only as sparse, 1px solid lines for essential UI markers.

- **Radius:** sm 4px · md 20px · lg 20px · pill 9999px
- **Borders:** Minimal, 1px solid lines used sparingly for UI elements like the scroll indicator and menu icon.

## 6. Layout

The foundational layout is a clean, single-column skeleton that prioritizes large, immersive imagery and typography. A fixed header anchors the experience, while the content flows in a spacious, editorial sequence.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, single-column layout that prioritizes large, immersive imagery and typography, with a fixed header.

## 7. Motion & Interaction

Motion philosophy is one of subtle guidance, using smooth, decelerating transitions and opacity fades. The goal is to inform state changes without drawing attention to the mechanism itself.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Smooth, decelerating transitions for most state changes (0.2s and 0.5s durations).
  - Opacity fades for content appearing and disappearing.

- **Hover:** Cursor changes to a pointer for interactive elements; subtle opacity or color transitions.
- **Click:** No distinct click state shown, likely relying on the same transition as hover.
- **Transition:** All interactive elements use smooth cubic-bezier easing for state changes.
- **Keyboard:** Standard focusable elements, but no custom keyboard styles are visible.

## 8. Voice & Don'ts

The editorial voice is sophisticated, understated, and confident, expressed through large serif headlines and clean, all-caps sans-serif calls to action. It avoids visual clutter, loud colors, and complex navigation.

- **Tone:** Sophisticated, understated, and confident.
- **Headline style:** Large, expressive serif typography that makes a bold visual statement.
- **CTA style:** Clean, all-caps geometric sans-serif within a contained pill shape.
- **Avoid:** Visual clutter or unnecessary decorative elements. / Loud, high-chroma accent colors. / Complex, multi-element navigation. / Rigid, grid-heavy layouts.

### Don'ts
- ❌ Don't use a pure white (#FFFFFF) background — the screenshot shows a warm, off-white (#FBF9F3) canvas instead.
- ❌ Don't apply bold weight to the main serif display font — the screenshot shows it consistently at a regular weight (400).
- ❌ Don't use tight, centered layouts — the screenshot shows expansive, often left-aligned or full-bleed compositions.
- ❌ Don't introduce multiple accent colors — the screenshot shows a strict monochromatic scheme with color coming only from photography.
- ❌ Don't use rounded rectangles for buttons — the screenshot shows a fully pill-shaped button with a high border-radius.
- ❌ Don't stack the logo vertically in the header — the screenshot shows it on a single line in the top left.

What the system deliberately omits—pure white, bold weights, tight grids, and chromatic accents—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
This is a premium, gallery-style editorial website for a design studio. It uses a very warm, off-white background (#FBF9F3) with dark, near-black text (#1E1E1E). The typography pairs a large, high-contrast transitional serif for display headlines with a wide, geometric sans-serif for UI elements, often set in uppercase. The layout is minimalist and spacious, focusing on large, immersive imagery and typography. Critical design rules: 1) Do not use pure white backgrounds; use the warm off-white tone. 2) Do not use bold weights for the main serif display font; keep it regular. 3) Do not introduce loud accent colors; let project photography provide all chromatic variation. 4) Maintain generous spacing and a single-column flow to preserve the editorial, gallery feel.
```