---
name: Obys Agency
description: "This site is a definitive example of avant-garde digital design, pushing the boundaries of web aesthetics through brutalist principles and complex motion."
version: alpha

colors:
  background: "#000000"
  primary: "#000000"
  secondary: "#c9c9c9"
  neutral: "#c9c9c9"
  bg-soft: "#ffffff"
  bg-quiet: "#c9c9c9"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.4px"
  body:
    fontFamily: didone-serif
    fontSize: 11px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.11px"

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

spacing:
  xs: 1px
  sm: 5px
  md: 10px
  lg: 30px
  xl: 80px

---

## Overview

An avant-garde digital agency portfolio that relies on massive typography, extreme whitespace, and complex cursor-driven parallax to create a sense of mystery.

*A high-fashion editorial magazine brought to life with brutalist digital motion.*

## Colors

Strict, high-contrast monochrome palette relying on black, white, and a single neutral gray to create a stark, dramatic visual field.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#c9c9c9`)** — uses `ink-soft` token
- **Muted (`#c9c9c9`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** didone-serif

- Maintain a strict two-tier typographic hierarchy using the primary serif family.
- Utilize tight letter-spacing for large display text to create a dense, editorial feel.
- Keep body text at a small, uniform size to maximize negative space.

## Layout

A minimalist, single-column-heavy layout that utilizes extreme vertical spacing and centered elements.

*Rhythm:* A loose, experimental rhythm driven by massive amounts of negative space and precise micro-spacing for UI elements.

## Elevation & Depth

- 0px 0px 0px 0px rgba(0,0,0,0)
- Borders: 1px solid black and 1px solid white used primarily for sharp UI elements and masking.

## Shapes

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

## Components

- **button:** Minimal, text-based interactions with pointer cursors, often accompanied by custom dynamic cursors.
- **card:** Content is primarily displayed through full-width, large-scale imagery and text blocks rather than traditional cards.
- **hero:** A dramatic, often minimal hero section featuring massive, tightly tracked typography and cinematic transitions.

## Do's and Don'ts

**Don't:**
- Don't use color accents — the screenshot shows a strict black and white palette.
- Don't use rounded corners — the screenshot shows entirely sharp, unrounded geometric elements.
- Don't use playful, rounded sans-serif fonts — the screenshot displays a sharp, editorial serif.
- Don't use dense, multi-column layouts — the screenshot shows vast amounts of negative space and vertical stacking.
- Don't use standard, cluttered UI components — the screenshot shows a minimalist, custom approach.
- Don't use bright, cheerful imagery — the screenshot features dark, moody, and abstract visuals.

---

## System Prompt (paste into AI agent)

```
This system defines an avant-garde, brutalist digital agency portfolio. It relies on a stark monochrome palette (#000000, #ffffff) and a sharp didone-serif typography category for massive, tightly tracked display text. The layout is defined by extreme vertical spacing, minimalist UI, and complex motion-driven interactions using cubic-bezier(0.16, 1, 0.3, 1) for clip-path and transform animations. Critical constraints: maintain a strict monochrome palette, avoid all rounded corners, and never use standard, cluttered UI components. The design must feel like a high-fashion editorial brought to life with experimental digital motion.
```