---
name: Opx Studio
description: "Worth including as an example of minimalist, typography-driven agency portfolio design that relies on bold visual statements rather than complex UI patterns."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  neutral: "#9b9b9b"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.02em"
  heading:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.01em"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

A minimalist creative agency portfolio with a bold, black-and-white typographic identity.

*A high-end creative agency showcasing bold typography and minimalist presentation to demonstrate design expertise.*

## Colors

High-contrast, monochromatic palette using pure black and white for dramatic impact, with neutral grays for subtle secondary elements.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Muted (`#9b9b9b`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

- Display typography uses tight letter-spacing and large sizes for visual impact.
- Body text maintains generous line-height for readability.
- Font weight stays consistent at 400 for a clean, uniform appearance.

## Layout

Full-width hero sections with centered content, transitioning to image-focused project grids with generous spacing.

*Rhythm:* Generous white space with large padding values (50px horizontal, 99px vertical) creating breathing room around elements.

## Elevation & Depth

- Borders: Minimal 1px borders in white or dark gray, used sparingly for subtle separation.

## Shapes

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

## Components

- **button:** Minimal text-based buttons with padding (7px 30px), likely with hover transitions.
- **card:** Project cards featuring large imagery with minimal framing, relying on typography for labeling.
- **chip:** No visible chips in the provided screenshots.
- **input:** No visible input fields in the provided screenshots.
- **hero:** Large, full-viewport typographic hero section with bold headline centered on black background.

## Do's and Don'ts

**Don't:**
- Don't use multiple accent colors — screenshot shows strict monochromatic black-and-white palette.
- Don't use serif typography — screenshot shows clean sans-serif display and body fonts.
- Don't create cluttered layouts — screenshot shows generous white space and minimal elements.
- Don't use decorative borders or shadows — screenshot shows minimal, clean edges.
- Don't use small display typography — screenshot shows large, impactful headline sizes (80px).
- Don't use inconsistent font weights — screenshot shows consistent 400 weight throughout.

---

## System Prompt (paste into AI agent)

```
This is a creative agency/studio portfolio website with a minimalist, high-contrast black-and-white design. The identity centers on bold typography and generous white space to showcase design expertise. Key colors are pure black (#000000) background with white (#ffffff) text and neutral gray (#9b9b9b) for secondary elements. Typography features grotesque-sans for display and humanist-sans for body text at 400 weight. Critical design principles: maintain high contrast, use generous spacing, keep typography clean and impactful. Avoid colored accents, cluttered layouts, serif fonts, decorative elements, small typography, and inconsistent weights. The design relies on the strength of typography and photography rather than complex UI patterns.
```