---
name: Gretel
description: "A masterclass in restraint, this site is worth including as a benchmark for premium, typography-driven portfolios."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1D1D1D"
  line: "rgba(29, 29, 29, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 75px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.25px"
  heading:
    fontFamily: humanist-sans
    fontSize: 39px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.975px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.7
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

A high-end design studio portfolio defined by stark contrast, generous whitespace, and large-scale typography.

*A minimalist gallery that lets the work breathe and speak for itself.*

## Colors

Strict monochrome to ensure maximum focus on photography and typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1D1D1D`)** — uses `ink` token
- **Borders (`rgba(29, 29, 29, 0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use tight, negative letter spacing for large display text.
- Maintain high line height (1.7) for small body text for readability.
- Avoid bold weights; rely on size and weight variations of a single family.

## Layout

Asymmetric grid with left-aligned text columns and right-aligned full-bleed or inset imagery.

*Rhythm:* 8px base rhythm with expansive vertical margins between major sections.

## Elevation & Depth

- Borders: No visible UI borders; separation is handled purely through whitespace.

## Shapes

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

## Components

- **button:** Minimalist text links with subtle opacity or color transitions.
- **card:** Gallery-style project cards with large typography and edge-to-edge imagery.
- **hero:** Large-scale left-aligned typography statement dominating the viewport with substantial top/bottom padding.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows — screenshot shows completely flat surfaces with no elevation.
- Don't add decorative borders — screenshot shows separation purely through whitespace.
- Don't center-align large body copy — screenshot shows strong left-aligned reading gravity.
- Don't use colorful accents — screenshot shows a strict black-and-white palette.
- Don't use rounded corners — screenshot shows sharp, 90-degree corners or edge-to-edge images.
- Don't use heavy font weights — screenshot shows regular weight (400) dominating the entire UI.

---

## System Prompt (paste into AI agent)

```
This is a premium design studio portfolio for Gretel, emphasizing strategic clarity and high-end aesthetics. The design DNA is defined by a strict monochrome palette (#FFFFFF background, #1D1D1D ink) and a single humanist-sans typeface (Akkurat) used at massive scales with tight negative tracking. Layouts are asymmetric, featuring large left-aligned text blocks paired with edge-to-edge photography. Critical donts include: never use drop shadows or elevated surfaces, never center-align large text blocks, and never introduce decorative colors. Interactions are limited to subtle opacity and transform transitions using cubic-bezier easing, maintaining a calm and sophisticated user experience that prioritizes the work.
```