---
name: Perkybros
description: "This site is a perfect example of a modern, typography-focused agency portfolio that relies on craft and restraint rather than flashy effects."
version: alpha

colors:
  background: "#F5F1E7"
  primary: "#1E1F20"
  neutral: "#9E9A91"
  line: "rgba(30,31,32,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  headline:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: transitional-serif
    fontSize: 18px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A clean, typography-driven agency portfolio with a warm, neutral background.

*A modern, craft-focused design studio portfolio that emphasizes clarity and bold typography.*

## Colors

High-contrast monochromatic core with a warm, off-white background.

- **Background (`#F5F1E7`)** — uses `bg` token
- **Primary text (`#1E1F20`)** — uses `ink` token
- **Muted (`#9E9A91`)** — uses `muted` token
- **Borders (`rgba(30,31,32,0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** transitional-serif

- Headlines use a geometric sans in uppercase.
- Body text uses a transitional serif.
- Small labels use a geometric sans in uppercase.

## Layout

Flexible grid with large, unstructured image areas.

*Rhythm:* Consistent base-4 scaling for tight, deliberate spatial relationships.

## Elevation & Depth

- Borders: Subtle 1px bottom borders for interactive elements and dividers.

## Shapes

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

## Components

- **button:** Text-based navigation with uppercase styling and subtle hover transitions.
- **card:** Simple layout consisting of a large image followed by text labels.
- **chip:** Minimalist text-only indicators (e.g., '03 of 06').
- **input:** None visible.
- **hero:** Full-width photographic presentation with overlaid navigation.

## Do's and Don'ts

**Don't:**
- don't use drop shadows — screenshot shows completely flat design.
- don't use rounded corners — screenshot shows all edges are sharp.
- don't use complex gradients — screenshot shows solid, flat color fills.
- don't use dense text blocks — screenshot shows wide margins and large typography.
- don't use vibrant neon colors — screenshot shows muted earth tones and high-contrast monochrome.
- don't use generic sans-serif body text — screenshot shows a transitional serif for descriptions.

---

## System Prompt (paste into AI agent)

```
Perky Bros is a branding and design agency portfolio. It uses a warm off-white background (#F5F1E7) and high-contrast dark ink (#1E1F20) for a clean, sophisticated look. The typography combines a geometric sans for uppercase headlines and navigation with a transitional serif for body copy. Layouts are spacious and grid-based, featuring large photographic content. Critical donts: 1) Do not use rounded corners; the design uses sharp, 0-radius edges. 2) Do not use drop shadows; the surfaces are completely flat. 3) Do not use complex gradients; stick to solid color fills. 4) Do not use dense text layouts; maintain generous padding and margins.
```