---
name: DIA Studio
description: "The site is a masterclass in minimalist editorial design, using a strict serif typeface and a grid-based mosaic to create a highly professional and curated presentation of creative work."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#949494"
  neutral: "#949494"
  bg-quiet: "#EEEEEE"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.125
    fontWeight: 450
    letterSpacing: "0px"

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

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

---

## Overview

A design and innovation studio presenting its work through a high-contrast, grid-based editorial interface.

*A curated gallery of design work in a refined, typographically-driven space.*

## Colors

Strict monochrome palette prioritizing maximum contrast and neutral presentation for the work.

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

## Typography

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

- Use a serif typeface (JJannon) for all UI elements.
- Maintain tight line-heights (approx 1.1) for a compact, dense typographic feel.
- Use square brackets as standard UI delimiters for actions and filters.

## Layout

A strict, dense masonry grid layout with images of varying aspect ratios fitted tightly together.

*Rhythm:* Tight, grid-aligned spacing with minimal vertical padding, prioritizing density.

## Elevation & Depth

- Borders: No visible UI borders; separation is achieved through whitespace, color contrast, and grid alignment.

## Shapes

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

## Components

- **button:** No traditional buttons; interactions are handled via plain text links enclosed in square brackets.
- **card:** Project cards are purely photographic thumbnails presented in a dense, borderless grid without overlays.
- **chip:** Category filters are text-based list items enclosed in square brackets.
- **input:** Search is represented by a simple text prompt enclosed in square brackets.
- **hero:** The hero section is not a single large image, but rather a continuous, unbroken mosaic grid of work extending from the top of the viewport.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — the UI is strictly sharp and rectangular.
- Don't use a strong accent color — the site relies entirely on a monochrome palette.
- Don't use button components — interactions are text links in square brackets.
- Don't use drop shadows — the UI is completely flat.
- Don't use sans-serif typography — the site is strictly serif-based.
- Don't create a masonry grid with large vertical gaps — the grid is tightly packed.

---

## System Prompt (paste into AI agent)

```
This site is a design studio portfolio using a strict monochrome palette (#000000 ink on #FFFFFF and #EEEEEE backgrounds). The typography is exclusively transitional serif (JJannon) with tight line-heights. The layout is a dense, borderless masonry grid of photographic work. Interactions use square-bracketed text links rather than traditional buttons. Key hex colors are #000000 for text/borders and #FFFFFF for the background. Critical donts: avoid any rounded corners, never use sans-serif fonts, and do not introduce any accent colors. The design prioritizes a refined, editorial feel that lets the work speak for itself through high contrast and a grid-based structure.
```