---
name: Smilingwolf
description: "This site is a perfect example of a high-end, photography-driven portfolio that uses restraint, generous whitespace, and a refined typographic hierarchy to let the work speak for itself."
version: alpha

colors:
  background: "#F7F3F0"
  primary: "#131713"
  secondary: "rgba(19,23,19,0.5)"
  neutral: "rgba(19,23,19,0.5)"
  line: "rgba(19,23,19,0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 59px
    lineHeight: 1.0
    fontWeight: 520
    letterSpacing: "-1.18px"
  body:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.38
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 10.4px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "1.04px"
  mono:
    fontFamily: geometric-sans
    fontSize: 10px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.9px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px

---

## Overview

A premium brand and digital agency portfolio with large photography and clean typography.

*a high-end photography gallery meets a Swiss-design studio*

## Colors

Warm off-white backgrounds with near-black ink, relying entirely on photography for color.

- **Background (`#F7F3F0`)** — uses `bg` token
- **Primary text (`#131713`)** — uses `ink` token
- **Secondary text (`rgba(19,23,19,0.5)`)** — uses `ink-soft` token
- **Muted (`rgba(19,23,19,0.5)`)** — uses `muted` token
- **Borders (`rgba(19,23,19,0.15)`)** — uses `line` token

## Typography

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

- Use monospaced uppercase for navigation and tags
- Display titles use a tight tracking and a serif face
- Geometric sans is the primary workhorse for body copy

## Layout

A clean, single-column layout for the main portfolio list with full-width images and generous vertical spacing.

*Rhythm:* A mix of tight 10-20px gutters and large 60px spacers to create generous breathing room between major content blocks.

## Elevation & Depth

- Borders: Thin 1px lines in rgba(19,23,19,0.15) are used sparingly for dividers and subtle tag outlines.

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Inline text links with thin 1px borders and uppercase monospaced text.
- **card:** Portfolio items consist of a large image, uppercase monospaced tags, a large serif title, and a sans-serif subtitle.
- **chip:** Small uppercase monospaced tags with thin 1px borders and 4px radius.
- **input:** Not visible in the provided screenshot.
- **hero:** A full-width photographic background image with no text overlay, followed by the agency name and navigation.

## Do's and Don'ts

**Don't:**
- Don't use bright, synthetic accent colors — screenshot shows a neutral palette where images provide all color.
- Don't use rounded corners on major containers — screenshot shows sharp 4px or 0px edges.
- Don't use drop shadows on cards or containers — screenshot shows completely flat surfaces.
- Don't use sans-serif for all text — screenshot shows a mix of serif for large titles and monospaced for UI.
- Don't pack the layout with dense information — screenshot shows generous whitespace and a single-column flow.
- Don't use heavy border weights — screenshot shows very thin, subtle dividers and outlines.

---

## System Prompt (paste into AI agent)

```
A premium brand and digital agency portfolio site. The design DNA is defined by warm off-white backgrounds (#F7F3F0) and near-black text (#131713), relying entirely on large, high-quality photography for visual interest. The typography system uses a mix of a transitional serif for display titles, a geometric sans-serif for body copy, and a monospaced uppercase style for navigation and tags. Key colors are a warm off-white (#F7F3F0) and near-black (#131713). Critical design constraints include: avoid synthetic accent colors and rely on photography for chromatic variation; avoid rounded corners or drop shadows on containers to maintain a flat, architectural feel; and avoid dense, cluttered layouts, instead using generous whitespace and a strict single-column grid to let the work breathe. The overall aesthetic is understated, sophisticated, and highly refined, prioritizing the visual impact of the portfolio projects themselves.
```