---
name: Kevinbrenkman
description: "A masterclass in restrained, typography-driven portfolio design where the framework intentionally disappears to elevate the showcased work."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#3B3B3B"
  neutral: "#DFDFDF"
  bg-soft: "#F8F8F8"
  muted-soft: "rgba(59, 59, 59, 0.3)"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.25px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.25px"

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

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

---

## Overview

A design-led web development practice for creative partners.

*A refined, minimal studio portfolio that lets the work speak for itself.*

## Colors

High-contrast monochrome foundation that defers entirely to the project imagery.

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

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Use grotesque-sans for all primary text.
- Maintain uniform font weight of 400 across all elements.
- Apply consistent letter spacing of 0.25px for all body and display text.

## Layout

Full-width, edge-to-edge layout with project images spanning the entire viewport width and text constrained to a comfortable reading measure.

*Rhythm:* Strict 4px base unit with tight, consistent padding around text elements.

## Elevation & Depth

- none
- Borders: Thin 1px solid borders using rgba(59, 59, 59, 0.3) for subtle separation.

## Shapes

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

## Components

- **button:** Minimal inline text links with a 2px border radius and subtle hover states.
- **card:** Full-bleed project entries consisting of a title, category, description, and a large hero image.
- **chip:** Small, pill-shaped tags with a subtle background fill for categories.
- **input:** Not present in the provided screenshot.
- **hero:** Full-width project imagery without traditional padding or framing.

## Do's and Don'ts

**Don't:**
- Don't use bright accent colors — screenshot shows a strictly monochrome palette with no dominant high-chroma colors.
- Don't use heavy font weights — screenshot shows a uniform font weight of 400 across all text.
- Don't use complex shadows or depth — screenshot shows flat, borderless or subtly bordered layouts.
- Don't use rounded corners extensively — screenshot shows sharp, minimal 2px border radii.
- Don't use aggressive calls to action — screenshot shows subtle, inline text links instead of prominent buttons.
- Don't use decorative typography — screenshot shows a clean, consistent grotesque sans-serif font.

---

## System Prompt (paste into AI agent)

```
Design a clean, professional portfolio website for a creative studio. Use a high-contrast monochrome palette with a white background (#FFFFFF), black text (#000000), and subtle grays (#F8F8F8, #DFDFDF). Set the primary typography to a grotesque sans-serif category with a uniform weight of 400 and consistent letter spacing of 0.25px. The layout should be full-width and edge-to-edge, with project imagery taking center stage and minimal, restrained UI elements. Critical donts: never use bright, saturated accent colors; never use bold or heavy font weights; never add complex shadows or decorative UI elements; never use aggressive calls to action; never use rounded corners beyond a minimal 2px radius; never use decorative typography.
```