---
name: Wallpaperprojects
description: "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."
version: alpha

colors:
  background: "#FBF9F3"
  primary: "#1E1E1E"
  line: "rgba(30, 30, 30, 1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 180px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-4.5px"
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.2px"
  body:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "1.2px"

rounded:
  sm: 4px
  md: 20px
  lg: 20px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist, high-art digital portfolio for visual design projects.

*A high-end design magazine's digital exhibition space.*

## Colors

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

- **Background (`#FBF9F3`)** — uses `bg` token
- **Primary text (`#1E1E1E`)** — uses `ink` token
- **Borders (`rgba(30, 30, 30, 1.0)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A generous, spacious layout with large, clear zones and significant padding between major content blocks.

## Elevation & Depth

- Borders: Minimal, 1px solid lines used sparingly for UI elements like the scroll indicator and menu icon.

## Shapes

- `sm`: 4px
- `md`: 20px
- `lg`: 20px
- `pill`: 9999px

## Components

- **button:** A pill-shaped button with uppercase geometric sans-serif text, used for primary actions.
- **card:** A simple, borderless container for a project image and its associated serif title.
- **hero:** A full-bleed, visually dominant section featuring a large, abstract image and a massive typographic title.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```