---
name: Michaelspeichert
description: "This site is a perfect example of how extreme scale and contrast can create a powerful, memorable visual identity without relying on color or decoration."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#FFFFFF"
  line: "rgba(255,255,255,1.0)"

typography:
  display:
    fontFamily: display-sans
    fontSize: 170px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-5.1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 60px
    lineHeight: 1.06
    fontWeight: 300
    letterSpacing: "-0.6px"
  title:
    fontFamily: humanist-sans
    fontSize: 54px
    lineHeight: 1.06
    fontWeight: 500
    letterSpacing: "-1.62px"
  body:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A stark, typographic-first portfolio for a design studio.

*A brutalist art gallery that communicates through aggressive, oversized type and high-contrast graphics.*

## Colors

Strict binary palette relying on extreme contrast and negative space for impact.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#FFFFFF`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

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

- Uppercase is used frequently for emphasis and navigation
- Line heights are tight for a more compact, brutalist feel
- Font weights alternate between light (300) and medium (500) to create strong contrast

## Layout

A grid-based structure that supports large, immersive imagery and massive type blocks.

*Rhythm:* Asymmetric and large to accommodate massive typography

## Elevation & Depth

- 0px 0px 0px 1px rgba(255,255,255,1.0)
- Borders: Sharp 1px white borders are used to frame and separate content blocks

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal, borderless or sharp-cornered, relying on text styling and hover states.
- **card:** High-contrast image containers with bold typography overlays.
- **chip:** Simple text labels with uppercase styling.
- **input:** Clean, minimal fields defined by sharp borders.
- **hero:** A full-screen, immersive area dominated by massive, expressive typography and high-contrast imagery.

## Do's and Don'ts

**Don't:**
- Don't use color gradients — screenshot shows a strict black-and-white palette
- Don't use drop shadows on text — screenshot shows flat, high-contrast type
- Don't center-align all text — screenshot shows a mix of left-aligned and expressive layouts
- Don't use small, delicate typography — screenshot shows massive, bold display type
- Don't use rounded corners extensively — screenshot shows sharp, geometric elements
- Don't use complex, multi-column text blocks — screenshot shows simple, impactful typographic statements

---

## System Prompt (paste into AI agent)

```
This website is a bold, typographic-first portfolio for a design studio. The design is defined by a strict monochromatic palette using pure black (#000000) and pure white (#FFFFFF) for maximum contrast. Typography is the primary design element, using a display sans-serif category at massive scales (up to 170px) with tight tracking and alternating weights. The layout is grid-based but intentionally asymmetric to create a brutalist, experimental feel. Critical constraints include avoiding any use of color, maintaining sharp geometric elements, and keeping layouts simple but impactful. The overall tone is confident, direct, and highly expressive, relying on scale and contrast rather than decoration.
```