---
name: Buck
description: "This site is a masterclass in agency minimalism, using extreme typographic restraint and whitespace to highlight high-end creative work."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#F4C054"
  neutral: "#9CA3AF"
  bg-soft: "#F2F4F8"
  line: "rgba(226, 232, 240, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 100
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 21px
    lineHeight: 1.4
    fontWeight: 100
    letterSpacing: "0"

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

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

---

## Overview

A minimalist, high-contrast portfolio designed to let large-format creative work take center stage.

*A high-end creative agency portfolio showcasing large-scale motion and brand work.*

## Colors

Extreme minimalism with a strict black-and-white canvas, using vibrant project imagery as the only source of color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#F4C054`)** — uses `accent` token
- **Muted (`#9CA3AF`)** — uses `muted` token
- **Borders (`rgba(226, 232, 240, 1)`)** — uses `line` token

## Typography

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

- The primary typeface (Mabry) is used exclusively across all elements.
- Headings and body text both utilize an ultra-light weight (100).
- Text transforms to uppercase are frequently applied for project categories.

## Layout

A loose, masonry-like grid where project cards of varying sizes are placed with wide gutters.

*Rhythm:* Asymmetric, with large generous padding around project thumbnails and a clear vertical flow.

## Elevation & Depth

- Borders: Extremely thin 1px solid borders used sparingly, primarily for structural separators or interactive elements.

## Shapes

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

## Components

- **button:** Minimalist text-based buttons, often in uppercase, relying on thin weights for elegance.
- **card:** A clean container holding a large full-bleed image followed by structured text metadata (Category, Title, Description).
- **chip:** Uppercase text labels used to categorize work without traditional box or pill styling.
- **input:** Search functionality likely uses a minimalist icon-triggered input or full-screen overlay.
- **hero:** A bold, large-scale typography block that states the company's mission in a single continuous flow.

## Do's and Don'ts

**Don't:**
- Don't use bold weights for headings — screenshot shows ultra-light (100) weights for all primary text.
- Don't add drop shadows to project cards — screenshot shows completely flat, clean surfaces.
- Don't use a colorful background — screenshot shows a strictly pure white (#FFFFFF) canvas.
- Don't use rounded corners on containers — screenshot shows sharp, rectangular thumbnails.
- Don't use decorative borders — screenshot shows clear separation through whitespace and minimal line weight.
- Don't use complex, multi-layered grid layouts — screenshot shows a relatively simple, staggered 2-column flow.

---

## System Prompt (paste into AI agent)

```
BUCK is a global creative agency portfolio. The design DNA is extreme minimalism, utilizing a pure white (#FFFFFF) background and black (#000000) text to ensure the vibrant project imagery is the focal point. Typography is a clean geometric-sans (Mabry) used consistently at an ultra-light weight (100), creating a sophisticated, airy feel. Key colors are limited to the site's stark black-and-white contrast, with a singular warm gold accent (#F4C054) occasionally used for highlights. Critical constraints: do not use bold font weights for headlines, do not add shadows or complex borders to cards, and do not use multi-column text layouts; always prioritize generous whitespace and let the work speak for itself.
```