---
name: Stephaniespecht
description: "This site is a great example of a 'work-first' portfolio where the interface intentionally steps back to let diverse, experimental design projects speak for themselves."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.6)"
  neutral: "#B0B0B0"
  bg-soft: "#FEFEFE"
  bg-quiet: "#E6E6E6"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "normal"
  title:
    fontFamily: humanist-sans
    fontSize: 25px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 5px
  md: 5px
  lg: 0px
  pill: 999px

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

---

## Overview

A raw, project-focused portfolio that lets diverse design work speak for itself.

*A digital exhibition space for a graphic design studio*

## Colors

Strict monochromatic base to let the colorful project imagery dominate.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.6)`)** — uses `ink-soft` token
- **Muted (`#B0B0B0`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-sans

- Default font stack is 'Helvetica Neue', Arial, sans-serif
- Strict adherence to 400 and 700 font weights
- Minimalist typography to avoid competing with project visuals

## Layout

A dense, masonry-style grid that adapts from single column to multi-column.

*Rhythm:* Consistent padding of 24px used in project containers and navigation.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 1px 3px 0px
- Borders: Subtle 1px borders or bottom-borders for separation

## Shapes

- `sm`: 5px
- `md`: 5px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based navigation links with hover states
- **card:** Full-bleed image containers representing individual projects
- **chip:** Colored tags or small labels within project imagery
- **input:** Minimal or hidden
- **hero:** Large, immersive project imagery that takes up the full viewport width.

## Do's and Don'ts

**Don't:**
- Don't use a complex color palette — screenshot shows a strictly monochromatic base (black, white, gray).
- Don't use decorative typography — screenshot shows functional, humanist sans-serif for all interface text.
- Don't add heavy shadows or glows — screenshot shows only a very subtle, single-pixel drop shadow on some elements.
- Don't use rounded corners on project images — screenshot shows sharp edges on the main content grid.
- Don't clutter the interface with icons or badges — screenshot shows a minimal header with just text links.
- Don't create a multi-layered navigation system — screenshot shows a flat, horizontal top-level menu.

---

## System Prompt (paste into AI agent)

```
This is a design studio portfolio site for Specht Studio. The design DNA is rooted in a raw, experimental aesthetic that prioritizes project imagery over interface decoration. The core palette is strictly monochromatic, using white (#FFFFFF) for the background, black (#000000) for ink, and a light gray (#E6E6E6) for secondary surfaces. The typography relies on a standard humanist-sans stack (Helvetica Neue, Arial, sans-serif), using bold weights only for the studio name and a regular weight for all navigation and body text. The layout is a dense, masonry-like grid of full-bleed project images. Critical constraints: 1) Never introduce a dominant accent color; let the work provide all chromatic variation. 2) Never use decorative typography or complex font pairings; keep the interface strictly functional. 3) Avoid adding heavy UI elements like large buttons or complex cards; the work should be the primary focus.
```