---
name: Oker
description: "This site is a great example of minimalist editorial design, effectively using scale and whitespace to create a premium, gallery-like feel."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#A0A0A0"
  neutral: "#808080"
  bg-soft: "#101010"
  bg-quiet: "#F5F5F5"
  line: "rgba(160, 160, 160, 1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.6px"
  title:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.64px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.16px"
  caption:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-0.16px"

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

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

---

## Overview

A minimalist design studio portfolio characterized by a monochrome palette, refined typography, and generous whitespace.

*A quiet, refined gallery of creative work with a focus on typography and large imagery.*

## Colors

Strict monochrome foundation with stark high-contrast modes (black/white) for focus.

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

## Typography

- **Display:** transitional-serif
- **Body:** transitional-serif

## Layout

Large full-bleed imagery separated by generous black or white padding.

*Rhythm:* Consistent use of 8px and 16px increments for padding and alignment.

## Elevation & Depth

- Borders: 1px solid rgb(160, 160, 160) for subtle horizontal dividers.

## Shapes

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

## Components

- **button:** Simple text links with color transitions, no visible button shapes.
- **card:** No traditional cards; content presented as large standalone images with typography.
- **chip:** No chips observed.
- **input:** No form inputs observed.
- **hero:** Full-viewport large-scale illustration or photography, often edge-to-edge.

## Do's and Don'ts

**Don't:**
- Don't use sans-serif display fonts — screenshot shows transitional-serif for all headings.
- Don't use rounded buttons — screenshot shows text-only links with no button containers.
- Don't use colorful accent palettes — screenshot shows a strict monochrome foundation.
- Don't use heavy drop shadows — screenshot shows completely flat imagery and typography.
- Don't use complex multi-column grids for text — screenshot shows generous single-column whitespace.
- Don't use busy decorative patterns — screenshot shows large, clean photographic or illustrative areas.

---

## System Prompt (paste into AI agent)

```
Studio Oker is a minimalist design studio portfolio with a refined, editorial aesthetic. The design relies on a strict monochrome palette, primarily using #000000 and #FFFFFF, complemented by #A0A0A0 and #808080 for secondary text and borders. The typography uses transitional-serif font categories with tight letter-spacing (-1.6px for display). The layout features large, full-bleed imagery separated by generous black or white padding. Key constraints include: strictly monochrome colors only, avoid rounded UI elements or heavy shadows, and maintain generous whitespace around large typography and imagery. The interaction style is subtle, using smooth opacity and color transitions with a custom cubic-bezier easing.
```