# DIA Studio · Design system migration spec

> Source: https://dia.tv  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The system is conceived as a curated gallery, where the architecture of the interface recedes to foreground the work itself. Its identity is built on a strict editorial framework, using typography and grid as the primary tools of composition and navigation. This results in a space that feels both structured and dense, where the design supports the content without asserting its own presence.

**One-liner:** A design and innovation studio presenting its work through a high-contrast, grid-based editorial interface.
**Keywords:** design · research · innovation · studio · curated · editorial
**Analogy:** A curated gallery of design work in a refined, typographically-driven space.

## 2. Color

The palette is a deliberate exercise in restraint, using only the highest contrast values of black and white to define the space. A single neutral gray provides subtle hierarchy without introducing hue, ensuring the visual field remains a neutral stage for the photographic portfolio.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#EEEEEE` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#949494` | secondary text |
| `--muted` | `#949494` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict monochrome palette prioritizing maximum contrast and neutral presentation for the work.

The principle is one of absolute neutrality, where color serves only the legibility and presentation of the work.

## 3. Typography

The typographic voice is exclusively serif, using JJannon to establish a formal, traditional tone throughout the interface. Tight line-heights create a compact, dense texture that mirrors the packed grid layout below.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Large display headings and category labels. |
| body | 16px | 1.125 | 450 | 0px | Primary interface text, navigation, and descriptions. |

**Type rules:**
- 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.

## 4. Spacing

The vertical rhythm is tight and grid-aligned, prioritizing information density over generous whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight, grid-aligned spacing with minimal vertical padding, prioritizing density.

## 5. Surfaces

Surfaces are defined entirely by the grid and the contrast between content and background, with no shadows or borders to create artificial depth. Separation is achieved through precise whitespace and alignment, maintaining a flat, two-dimensional plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible UI borders; separation is achieved through whitespace, color contrast, and grid alignment.

## 6. Layout

The layout skeleton is a strict masonry grid that packs photographic thumbnails of varying aspect ratios into a continuous, borderless mosaic. This grid structure begins at the very top of the viewport and extends downward, replacing a traditional hero section with an immediate presentation of the work.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 16px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and functional, serving only to signal interactivity without distraction. The philosophy is one of stillness, where movement is a subtle cue rather than a narrative device.

- **Durations:** micro 0ms · small 200ms · medium 0ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - opacity fade on hover for gallery items

- **Hover:** Subtle opacity change on image thumbnails to indicate interactivity.
- **Click:** Direct navigation to project pages or category views.
- **Transition:** Opacity transitions over 0.2s.
- **Keyboard:** Standard browser tab navigation.

## 8. Voice & Don'ts

The voice is professional and reserved, with declarative headlines set in the system serif and calls to action presented as plain text in square brackets. The tone avoids all playfulness and marketing language, maintaining a consistently direct and formal register.

- **Tone:** Professional, confident, and reserved.
- **Headline style:** Declarative and direct, using a classic serif font.
- **CTA style:** Subtle and typographic, using square brackets instead of traditional buttons.
- **Avoid:** Playful language / Loud marketing copy / Excessive capitalization / Emoji or visual decorators

### Don'ts
- ❌ 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.

The system deliberately forgoes rounded corners, accent colors, buttons, shadows, and sans-serif type to preserve its strict editorial discipline.

## System Prompt (paste into AI tool)

```
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.
```