---
name: Stinkstudios
description: "The site is worth including as a prime example of a minimalist, photography-driven agency portfolio that prioritizes massive, tightly-tracked typography over complex UI components."
version: alpha

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

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-3px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-2.08px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 300
    letterSpacing: "1.4px"

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

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

---

## Overview

A premium creative studio portfolio characterized by bold typography, cinematic photography, and a stark black-and-white palette.

*A cinematic gallery showcasing large-scale creative work with high-contrast typography.*

## Colors

High-contrast monochrome foundation to let cinematic project photography serve as the primary visual focus.

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

## Typography

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

- Use Helvetica, sans-serif as the primary typeface.
- Maintain extremely tight negative letter-spacing on large display text.
- All UI text should be lightweight (300 weight).

## Layout

Full-bleed hero imagery followed by a mixed grid of large and small project cards.

*Rhythm:* Generous padding around large visual elements with tighter, consistent gaps in navigation and lists.

## Elevation & Depth

- Borders: Thin 1px solid white or black lines used primarily for separation and underlines.

## Shapes

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

## Components

- **button:** Simple text-based links with underline or hover opacity changes.
- **card:** Edge-to-edge photographic thumbnails with minimal text overlays below or beside them.
- **chip:** Small, uppercase, spaced-out monospaced text for categories like 'ADVERTISING'.
- **input:** Minimal, likely appearing as simple text fields with bottom borders.
- **hero:** Full-viewport immersive video or image background with massive, tightly-tracked display typography.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — screenshot shows a clean, geometric grotesque sans-serif across all UI and display text.
- Don't add drop shadows to UI elements — screenshot shows completely flat surfaces with no elevation effects.
- Don't use vibrant, high-chroma accent colors — screenshot shows a strict monochrome palette (black, white, muted gray).
- Don't use centered text alignment for navigation — screenshot shows right-aligned navigation links at the bottom of the hero.
- Don't use heavy font weights for body text — screenshot shows predominantly lightweight (300) text for a refined feel.
- Don't use rounded corners on primary cards — screenshot shows sharp edges on project imagery, with only small 10px radius on minor elements.

---

## System Prompt (paste into AI agent)

```
Design a premium creative agency portfolio with a high-contrast, cinematic aesthetic. Use a strict monochrome palette with a #000000 background and #FFFFFF text. Use a geometric grotesque-sans font (like Helvetica) at a lightweight (300) weight for a refined, modern feel. Ensure massive display typography has tight negative letter-spacing (e.g., -3px). Critical don'ts: never use decorative serifs, avoid drop shadows, and do not use vibrant accent colors. The UI should feel like a quiet, professional gallery that lets large-scale photography and video be the primary focus.
```