# Leonidkostetskyi · Design system migration spec

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

> An excellent example of typographic minimalism, demonstrating how scale and whitespace can create a premium, editorial feel without imagery.

## 1. Identity DNA

The system operates like a high-end design monograph: a single, powerful typographic statement against a textured ground. Every element is subservient to the bold, geometric letterforms of the display type.

**One-liner:** A typographic personal portfolio emphasizing bold, geometric display text and generous whitespace.
**Keywords:** Creative Director · Personal Brand · Minimalist · Typography-driven · Premium
**Analogy:** A high-end design studio portfolio or monograph.

## 2. Color

The palette is a strict two-tone study in contrast. A warm off-white ground meets deep brown ink, a choice that reads more as texture than color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2EFE9` | main background |
| `--bg-soft` | `#EAE7E1` | card background |
| `--ink` | `#472425` | body text |
| `--muted` | `#6B6B6B` | placeholder |
| `--line` | `rgba(71, 36, 37, 0.1)` | divider |

**Color principle:** High contrast between a massive dark brown display type and a warm, textured off-white background.

The principle is absolute restraint: chromatic variation is achieved only through the massive weight of the type itself.

## 3. Typography

All type is set in uppercase, giving the geometric sans-serif a monumental, architectural presence. The display face uses tight tracking to lock the letters into a dense, graphic unit.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display-hero | 165px | 0.86 | 400 | -3.3px | Main name and title display text |
| display-large | 142.5px | 0.86 | 400 | -4.125px | Secondary large display text |
| body-sm | 12px | 1.0 | 400 | 0px | Small descriptive copy and navigation links |

**Type rules:**
- All text is uppercase
- Display text uses tight tracking (-3.3px to -4.125px)
- Body text uses standard tracking

## 4. Spacing

The rhythm is defined by absence. Generous vertical gaps, measured in hundreds of pixels, create a sense of deliberate, expansive pause.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 225 px
- **Rhythm:** Generous whitespace with massive vertical gaps (225px padding) between sections.

## 5. Surfaces

Surfaces are flat and tactile, eschewing digital shadows for a physical, print-like quality. Depth is implied solely through the stark value contrast between ink and paper.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Subtle 1px borders used sparingly, mostly for hover states or small dividers.

## 6. Layout

The layout is a full-screen typographic composition, not a grid. Large blocks of text are anchored to opposing corners of the viewport, balancing the negative space between them.

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

**Skeleton:** A full-screen, high-contrast typographic hero layout with large blocks of text anchored to specific corners.

## 7. Motion & Interaction

Motion is functional and smooth, limited to state changes. Transitions are extended to 0.8 seconds, allowing color shifts to feel like a slow, deliberate print run.

- **Durations:** micro 220ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth color and background-color transitions for theme switching
  - Transform transitions for interactive elements

- **Hover:** Dotted underline appears below navigation items.
- **Click:** Smooth transition to new section or state.
- **Transition:** 0.5s to 0.8s transitions for color and background properties.
- **Keyboard:** Standard focus navigation (inferred from accessibility standards).

## 8. Voice & Don'ts

The voice is confident and understated, letting the scale of the typography do the communicating. It avoids clutter and decoration, favoring the clarity of a single, powerful message.

- **Tone:** Confident, sophisticated, and understated.
- **Headline style:** Massive, uppercase, geometric sans-serif display type.
- **CTA style:** Small, uppercase, monospaced or sans-serif text links.
- **Avoid:** Avoid cluttered layouts or excessive imagery / Avoid bright, high-chroma accent colors / Avoid decorative serif fonts / Avoid drop shadows or complex gradients / Avoid lowercase display text / Avoid centered text blocks

### Don'ts
- ❌ Don't use lowercase for display text — screenshot shows all text is uppercase
- ❌ Don't use decorative or script fonts — screenshot shows a clean geometric sans-serif
- ❌ Don't add bright or neon accent colors — screenshot uses a muted, monochromatic palette of brown and off-white
- ❌ Don't use heavy drop shadows — screenshot shows a flat, texture-based design without shadows
- ❌ Don't use complex grid layouts with many columns — screenshot shows a spacious, asymmetric layout
- ❌ Don't use small, cramped typography — screenshot features massive display sizes (up to 165px)

It deliberately avoids imagery, drop shadows, complex grids, and any typographic flourish that might distract from the core typographic statement.

## System Prompt (paste into AI tool)

```
This is a premium creative director portfolio site characterized by massive, geometric sans-serif typography and a minimalist, high-contrast palette. The design uses a warm off-white background (#F2EFE9) paired with deep brown ink (#472425) for a sophisticated, understated look. The layout relies on extreme whitespace and large typographic blocks rather than imagery. Navigation is handled via small, uppercase text links with subtle dotted underlines. Key constraints: maintain all text in uppercase, avoid high-chroma accents, and preserve the massive scale of the display type. Do not introduce cluttered grids, decorative fonts, or complex gradients.
```