# Dmitrkutsenko · Design system migration spec

> Source: https://www.dmitrkutsenko.com  ·  Curated by OpenDesign  ·  en

> An excellent example of using extreme typographic scale and negative space to create a premium, gallery-like atmosphere for a creative portfolio.

## 1. Identity DNA

This system is built as a stark, typographic introduction for a fashion photographer's portfolio—a darkened gallery entrance announcing the artist before a single image is seen.

**One-liner:** A stark, typographic introduction for a fashion photographer's portfolio.
**Keywords:** photography · portfolio · minimal · premium · fashion
**Analogy:** A darkened gallery entrance announcing the artist.

## 2. Color

The palette is a strict, high-contrast monochrome scheme, using a deep charcoal background and crisp white ink to ensure photographic content remains the focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1D1D1F` | main background |
| `--ink` | `#F1F1F1` | body text |
| `--muted` | `#656565` | placeholder |
| `--line` | `rgba(101,101,101,0.2)` | divider |

**Color principle:** High-contrast monochrome to ensure photographic content is the focal point.

The principle is absolute: chromatic distraction is rejected in favor of pure tonal contrast.

## 3. Typography

Typography is the primary structural voice, employing an aggressive, tight-tracked, uppercase treatment for display and interface text to command attention with geometric precision.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 0.95 | 400 | -1.5px | hero headline |
| body | 14px | 1.4 | 400 | 0 | navigation |

**Type rules:**
- Display text is uppercase and tightly tracked.
- Body text is set in uppercase for navigation and interface elements.

## 4. Spacing

All spatial relationships are governed by a disciplined 4px base unit grid, creating a consistent and measurable rhythm throughout the composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit grid.

## 5. Surfaces

Depth is implied purely through spacing and tonal contrast, as the system avoids visible structural borders and shadows for a flat, graphic surface treatment.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible structural borders; relies on spacing and color contrast.

## 6. Layout

The skeletal framework is a minimalist, full-bleed layout. It anchors large typographic elements to the bottom-left corner, using negative space as a primary compositional tool.

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

**Skeleton:** Full-bleed hero with minimal, edge-aligned navigation.

## 7. Motion & Interaction

Motion is reduced to a functional whisper, relying on subtle 0.4-second transitions for state changes. The philosophy is to signal interactivity without disrupting the static, gallery-like focus.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Subtle color transitions on interactive elements.
  - Implied scroll-driven or click-triggered content reveals.

- **Hover:** Subtle background-color or text-color transitions.
- **Click:** Triggers content transition or navigation.
- **Transition:** All elements have a transition property, defaulting to 0.4s background-color.
- **Keyboard:** Standard focus navigation; visible cursor on clickable elements.

## 8. Voice & Don'ts

The editorial voice is authoritative, minimal, and direct, mirroring the starkness of the visual system. Every typographic statement is a deliberate, unadorned announcement.

- **Tone:** Authoritative, minimal, and direct.
- **Headline style:** All-caps, tight-tracking, statement-driven.
- **CTA style:** Small, muted, instructional.
- **Avoid:** Decorative elements / Busy backgrounds / Cluttered navigation

### Don'ts
- ❌ Don't use gradients or complex background patterns — screenshot shows a solid, dark flat background.
- ❌ Don't use rounded corners on primary elements — screenshot shows sharp edges and a full-radius circle for badges only.
- ❌ Don't use bold font weights for display text — screenshot shows a uniform weight of 400 across all text.
- ❌ Don't use a high-chroma accent color — screenshot shows a strict monochrome palette.
- ❌ Don't center-align the main headline — screenshot shows strict left alignment anchored to the bottom-left.
- ❌ Don't use standard sentence casing for navigation — screenshot shows all-caps for menu and CTA elements.

What is deliberately absent is defining: no decorative elements, no busy backgrounds, no cluttered navigation.

## System Prompt (paste into AI tool)

```
This is a minimalist, premium photography portfolio site. The design DNA relies on a stark, high-contrast monochrome palette (#1D1D1F background, #F1F1F1 ink) and aggressive, tight-tracked uppercase typography (Greycliff, geometric-sans) to command attention. The layout is sparse, with a full-bleed hero section anchoring text to the bottom-left corner. Critical constraints: never introduce vibrant accent colors; maintain strict left-alignment for primary headlines; keep all font weights at 400 (regular); and avoid any decorative UI elements that would distract from the photographic content. Interaction is minimal, relying on subtle 0.4s transitions.
```