---
name: Parker Studio
description: "This site is an excellent example of a high-end creative portfolio, demonstrating how to blend playful brand elements with a refined, architectural layout to showcase diverse work effectively."
version: alpha

colors:
  background: "#B7E3B6"
  primary: "#000000"
  secondary: "#A5A5A5"
  bg-soft: "#FFFFFF"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 43px
    lineHeight: 1.09
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

A refined design studio portfolio balancing high-contrast imagery with elegant typography and playful accents.

*A modern gallery space showcasing diverse creative projects with distinct visual identities.*

## Colors

High-contrast palette with soft mint and pure white backgrounds, using black ink for maximum legibility.

- **Background (`#B7E3B6`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#A5A5A5`)** — uses `ink-soft` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- Mix transitional-serif for project headings with a clean grotesque-sans for navigation.
- Maintain tight line heights for large display text.
- Use uppercase transforms for consistent navigation styling.

## Layout

Asymmetric, editorial layout with large, immersive imagery and generous whitespace.

*Rhythm:* Generous vertical spacing creates a sense of openness and highlights the visual work.

## Elevation & Depth

- 0px 4px 4px rgba(0, 0, 0, 0.25)
- Borders: 1px solid rgba(0,0,0,1)

## Shapes

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

## Components

- **button:** Minimal, text-based navigation with simple transitions.
- **card:** Large, immersive project cards that often span the full width.
- **hero:** Full-bleed, image-driven hero sections that set a distinct visual tone for each project.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing background colors — screenshot shows a clean, focused use of soft mint, white, or black per section.
- Don't apply heavy drop shadows to all elements — screenshot shows them used sparingly, mainly for depth on specific objects.
- Don't center all text content — screenshot shows left-aligned navigation and headings to create a clear visual hierarchy.
- Don't use a sans-serif for all headings — screenshot distinctly uses a transitional serif for project titles like 'Architecture'.
- Don't use low-contrast text for navigation — screenshot shows high-contrast black or white text against its background.
- Don't use rounded corners universally — screenshot shows primarily sharp edges on images and layout containers.

---

## System Prompt (paste into AI agent)

```
Parker Studio is a refined design agency portfolio showcasing diverse, high-quality projects. The design relies on a clean palette of soft mint, pure white, and solid black, creating high contrast and readability. Typography mixes transitional-serif for expressive headings with a clean grotesque-sans for navigation and UI elements. Key hex values include #B7E3B6, #FFFFFF, and #000000. Critical design principles include generous whitespace, high-contrast text, and immersive, image-driven layouts. Important constraints: do not use multiple competing background colors, do not apply heavy drop shadows universally, and do not center all text content. The overall feel is architectural yet playful, emphasizing the quality of the showcased work.
```