---
name: Leonidkostetskyi
description: "An excellent example of typographic minimalism, demonstrating how scale and whitespace can create a premium, editorial feel without imagery."
version: alpha

colors:
  background: "#F2EFE9"
  primary: "#472425"
  neutral: "#6B6B6B"
  bg-soft: "#EAE7E1"
  line: "rgba(71, 36, 37, 0.1)"

typography:
  display-hero:
    fontFamily: geometric-sans
    fontSize: 165px
    lineHeight: 0.86
    fontWeight: 400
    letterSpacing: "-3.3px"
  display-large:
    fontFamily: geometric-sans
    fontSize: 142.5px
    lineHeight: 0.86
    fontWeight: 400
    letterSpacing: "-4.125px"
  body-sm:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A typographic personal portfolio emphasizing bold, geometric display text and generous whitespace.

*A high-end design studio portfolio or monograph.*

## Colors

High contrast between a massive dark brown display type and a warm, textured off-white background.

- **Background (`#F2EFE9`)** — uses `bg` token
- **Primary text (`#472425`)** — uses `ink` token
- **Muted (`#6B6B6B`)** — uses `muted` token
- **Borders (`rgba(71, 36, 37, 0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- All text is uppercase
- Display text uses tight tracking (-3.3px to -4.125px)
- Body text uses standard tracking

## Layout

A full-screen, high-contrast typographic hero layout with large blocks of text anchored to specific corners.

*Rhythm:* Generous whitespace with massive vertical gaps (225px padding) between sections.

## Elevation & Depth

- Borders: Subtle 1px borders used sparingly, mostly for hover states or small dividers.

## Shapes

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

## Components

- **button:** Minimalist text links with dotted underline hover states.
- **card:** No traditional cards; content is presented as large typographic blocks.
- **chip:** Small circular dots used for theme toggling.
- **input:** Not visible in the provided screenshots.
- **hero:** A massive typographic composition using two large blocks of text ('LEONID KOSTETSKYI' and 'CREATIVE DIRECTOR') balanced diagonally across the screen.

## Do's and Don'ts

**Don't:**
- Don't use lowercase for display text — screenshot shows all text is uppercase
- Don't use decorative or script fonts — screenshot shows a clean geometric sans-serif
- Don't add bright or neon accent colors — screenshot uses a muted, monochromatic palette of brown and off-white
- Don't use heavy drop shadows — screenshot shows a flat, texture-based design without shadows
- Don't use complex grid layouts with many columns — screenshot shows a spacious, asymmetric layout
- Don't use small, cramped typography — screenshot features massive display sizes (up to 165px)

---

## System Prompt (paste into AI agent)

```
This is a premium creative director portfolio site characterized by massive, geometric sans-serif typography and a minimalist, high-contrast palette. The design uses a warm off-white background (#F2EFE9) paired with deep brown ink (#472425) for a sophisticated, understated look. The layout relies on extreme whitespace and large typographic blocks rather than imagery. Navigation is handled via small, uppercase text links with subtle dotted underlines. Key constraints: maintain all text in uppercase, avoid high-chroma accents, and preserve the massive scale of the display type. Do not introduce cluttered grids, decorative fonts, or complex gradients.
```