Dima Kutsenko

# Dima Kutsenko — Style Reference
> Midnight gallery wall.

**Theme:** dark

Dmitrkutsenko.com uses a muted, high-contrast dark aesthetic that highlights content through stark value differences rather than color. The design feels photographic, focusing on bold typography and subtle interactive elements against a deep gray canvas. White is reserved primarily for high-impact headlines and functional UI elements, creating a clear visual hierarchy. Interactions are minimal, often relying on border changes or text color shifts to signify state.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Obsidian Slate | `#1d1d1f` | `--color-obsidian-slate` | Page background, card background for dark-themed elements |
| Ghost White | `#f1f1f1` | `--color-ghost-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Muted Ash | `#656565` | `--color-muted-ash` | Secondary text, subtle borders, helper text |

## Tokens — Typography

### Greycliff — Headlines and prominent display text, using a wide letter-spacing for impact and a modern, angular feel. · `--font-greycliff`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 24px, 75px
- **Line height:** 0.95
- **Letter spacing:** -0.0200em
- **Role:** Headlines and prominent display text, using a wide letter-spacing for impact and a modern, angular feel.

### Arial — Minimal functional text, typically for small auxiliary information like labels or navigation hints. · `--font-arial`
- **Substitute:** Helvetica Neue
- **Weights:** 400
- **Sizes:** 14px
- **Line height:** 1.39
- **Letter spacing:** normal
- **Role:** Minimal functional text, typically for small auxiliary information like labels or navigation hints.

### Corradine — Body text and less prominent headlines, providing contrast to the display font with its slightly more traditional character. · `--font-corradine`
- **Substitute:** Georgia
- **Weights:** 400
- **Sizes:** 20px, 32px
- **Line height:** 0.95, 1.20
- **Letter spacing:** normal
- **Role:** Body text and less prominent headlines, providing contrast to the display font with its slightly more traditional character.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.39 | — | `--text-caption` |
| body | 20px | 0.95 | — | `--text-body` |
| subheading | 24px | 0.95 | -0.48px | `--text-subheading` |
| heading | 32px | 1.2 | — | `--text-heading` |
| display | 75px | 0.95 | -1.5px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 7 | 7px | `--spacing-7` |

### Border Radius

| Element | Value |
|---------|-------|
| circular | 100% |

### Layout

- **Card padding:** 0px
- **Element gap:** 7px

## Components

### Dark Circular Card
**Role:** Decorative card container

A circular card with an Obsidian Slate (#1d1d1f) background and no box shadow, borders, or internal padding. Primarily used for visual separation.

### Light Circular Card
**Role:** Decorative card container

A circular card with a Ghost White (#f1f1f1) background and no box shadow, borders, or internal padding. Used for visual contrast in specific areas.

### Primary Display Text
**Role:** Main page headlines and focal points

Text rendered in Greycliff, weight 400, color Ghost White (#f1f1f1), with sizes 75px and letter-spacing -0.0200em, line-height 0.95. Used for impactful, large headings.

### Secondary Body Text
**Role:** General content and supporting copy

Text rendered in Corradine, weight 400, color Ghost White (#f1f1f1), with sizes 20px and 32px, and line-heights 0.95 and 1.20. Provides clear, readable content.

### Auxiliary Label
**Role:** Small, functional labels

Text rendered in Arial, weight 400, color Muted Ash (#656565), size 14px, line-height 1.39. Used for navigation hints or secondary information.

### Outline Ghost Button
**Role:** Subtle interactive element

A button with a Ghost White (#f1f1f1) border, transparent background, and Ghost White (#f1f1f1) text. Text is in Arial, 14px. Used only for discrete actions like navigation or 'click to continue' prompts.

## Do's and Don'ts

### Do
- Always use Obsidian Slate (#1d1d1f) as the primary background color for pages and dark-themed components.
- Reserve Ghost White (#f1f1f1) for primary text, interactive states, and outlined borders to ensure high contrast.
- For display text and large headlines, use Greycliff at 75px, 400 weight, with a line-height of 0.95 and letter-spacing of -0.0200em.
- Apply Muted Ash (#656565) for secondary text and subtle navigational or informational elements.
- Utilize circular shapes (100% border-radius) for decorative card elements, creating soft visual accents.
- Maintain a compact layout, prioritizing content density while providing sufficient visual breathing room through minimal element spacing (e.g. 7px for tight groups).

### Don't
- Do not introduce additional saturated colors; the palette is strictly achromatic with high contrast.
- Avoid using box shadows for elevation; rely on color contrast and direct sizing for visual hierarchy.
- Do not break away from the defined typefaces (Greycliff, Arial, Corradine) or their specified sizes and weights.
- Do not use large, prominent buttons with solid backgrounds; interactive elements should be minimal, often text-based or ghost-bordered.
- Avoid decorative gradients; the visual system is flat and relies on solid color blocks.
- Do not over-space elements; the design emphasizes a compact and focused presentation.

## Imagery

No direct imagery or photography is shown in the provided context, suggesting a UI-heavy or content-dominant approach where imagery might appear within content sections rather than as part of the core UI. If imagery were to be introduced, it would likely be full-bleed, high-contrast photography to align with the stark, minimalist aesthetic, or tight product crops.

## Layout

The page exhibits a full-bleed structure with a dark background, establishing a vast canvas. The hero section features a centered, high-impact headline using large, bold typography. Navigation elements are minimal and positioned discretely in the top right, creating an uncluttered and focused visual field. Content is arranged either in a large, centered block for textual emphasis or within subtle geometric shapes (circular cards) that act as visual anchors.

## Agent Prompt Guide

Quick Color Reference: text: #f1f1f1, background: #1d1d1f, border: #f1f1f1, accent: no distinct accent color, primary action: no distinct CTA color

Example Component Prompts:
1. Create a full-page dark canvas with a main headline: background Obsidian Slate (#1d1d1f). Headline 'A UKRAINIAN FASHION PHOTOGRAPHER' using Greycliff, 400 weight, 75px size, -0.0200em letter-spacing, color Ghost White (#f1f1f1), centered horizontally and vertically.
2. Design a subtle navigation item: text 'MENU W.' using Arial, 400 weight, 14px size, color Ghost White (#f1f1f1). This text should have an invisible 7px spacing around it, on an Obsidian Slate (#1d1d1f) background. When hovered, the text color changes to Muted Ash (#656565).
3. Create a 'CLICK ANYWHERE TO CONTINUE' prompt: text 'CLICK ANYWHERE TO CONTINUE' using Arial, 400 weight, 14px size, color Muted Ash (#656565), positioned at the bottom right of the screen with slight padding from the edge. When clicked, it has an outline of Ghost White (#f1f1f1) and its text changes to Ghost White (#f1f1f1).
4. Design a decorative circular element with a light background: a perfect circle with background color Ghost White (#f1f1f1) and 0px padding. This element should implicitly stand out against the Obsidian Slate page background.

## Similar Brands

- **Aytm.com** — Shares a monochromatic dark theme with bold white typography for headlines and minimal use of color for functional elements.
- **Squarespace (certain portfolio templates)** — Uses large, impactful typography, often monochrome, against dark or light canvases, focusing on content showcase.
- **B&O (Bang & Olufsen)** — Employs a minimalist, high-contrast aesthetic, prioritizing product visuals and bold type over excessive UI elements or vibrant colors.
- **Acme.com** — Features a strong emphasis on typography as a primary design element within a stark, dark-mode environment.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian-slate: #1d1d1f;
  --color-ghost-white: #f1f1f1;
  --color-muted-ash: #656565;

  /* Typography — Font Families */
  --font-greycliff: 'Greycliff', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-corradine: 'Corradine', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.39;
  --text-body: 20px;
  --leading-body: 0.95;
  --text-subheading: 24px;
  --leading-subheading: 0.95;
  --tracking-subheading: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-display: 75px;
  --leading-display: 0.95;
  --tracking-display: -1.5px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-7: 7px;

  /* Layout */
  --card-padding: 0px;
  --element-gap: 7px;

  /* Named Radii */
  --radius-circular: 100%;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian-slate: #1d1d1f;
  --color-ghost-white: #f1f1f1;
  --color-muted-ash: #656565;

  /* Typography */
  --font-greycliff: 'Greycliff', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-corradine: 'Corradine', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.39;
  --text-body: 20px;
  --leading-body: 0.95;
  --text-subheading: 24px;
  --leading-subheading: 0.95;
  --tracking-subheading: -0.48px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-display: 75px;
  --leading-display: 0.95;
  --tracking-display: -1.5px;

  /* Spacing */
  --spacing-7: 7px;
}
```