---
title: "Leonid Kostetskyi design system"
variant: extended
source: https://leonidkostetskyi.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/leonidkostetskyi-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Leonid Kostetskyi · Design System

> Oversized type, quiet space, confident creative direction

**Theme:** light · **Industry:** portfolio · **Source:** https://leonidkostetskyi.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A minimalist portfolio homepage built around oversized uppercase typography and a warm, nearly white canvas. Compact navigation and a small introduction balance the dramatic name and creative-director statement.

## North star

Let oversized wine-brown typography define the composition, and preserve generous, quiet space around every supporting element.

## Overview

The first viewport is a quiet, full-bleed canvas: measured data specifies #ffffff, while the screenshot renders it as a subtly warm off-white texture. Keep the measured palette strictly to #ffffff and #472425; the latter is the defining dark, wine-brown ink for the oversized name, role statement, and compact copy. Typography carries the page: a very large, uppercase display headline occupies the upper-left, with a second oversized statement anchored toward the lower-right. Small uppercase introductory copy sits low on the left, while a narrow vertical navigation and theme toggle stay near the upper-right. The composition is intentionally asymmetric, with broad open areas separating these elements. Use NeueHaasDisplay for the display voice and SFUIDisplay for supporting text. The screenshot shows no photography; a delicate radial starburst is a minor decorative mark. Avoid adding unmeasured colors, gradients, shadows, or card treatments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Measured canvas and button border; the screenshot suggests a softly warm white page field. |
| Wine Ink | `#472425` | `--color-wine-ink` | brand | Primary text and navigation color, used for the oversized name, creative-director statement, and links. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#472425` (Wine Ink) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#472425` | `#ffffff` | 13.57:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SFUIDisplay | `--font-body` | webfont | 400, 300 | Navigation, body copy, captions, buttons, and links | Inter |
| NeueHaasDisplay | `--font-display` | webfont | 400 | Oversized display name and statement | Inter |

- **SFUIDisplay:** Use regular and light weights; supporting copy is predominantly uppercase, with compact, unembellished navigation.
- **NeueHaasDisplay:** Regular weight, uppercase, tightly tracked, and set with a compressed line height for stacked headline lines.

### Type scale — Custom (ratio ≈ 8.684, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 165px | 400 | 0.86 | -0.025em | uppercase | NeueHaasDisplay | Oversized uppercase name and creative-director headline |
| body | 19px | 400 | 1 | 0 | uppercase | SFUIDisplay | Short uppercase introduction and supporting statements |
| caption | 12px | 400 | 1 | 0 | uppercase | SFUIDisplay | Small uppercase utility labels and minor copy |
| button | 12px | 400 | 1 | 0 | uppercase | SFUIDisplay | Compact uppercase theme controls |
| nav | 12px | 400 | 1 | 0 | — | SFUIDisplay | Small, vertically arranged page navigation |
| link | 19px | 400 | 1 | 0 | uppercase | SFUIDisplay | Uppercase text links and portfolio navigation |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 6, 9, 58, 71, 113, 125 px.
- Section rhythm 58px · element gap — · card padding — · max content width 1299px.

The measured page max width is 1299px, with a comfortable density and a section gap of 58px. In the screenshot, the opening viewport reads as a full-bleed composition: the name starts at the upper-left, navigation is tucked into the upper-right, a small introduction sits lower-left, and the oversized role statement occupies the lower-right. Maintain this offset, asymmetric arrangement and broad open field rather than forcing content into cards or centered columns.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The measured design has no shadows or gradients and no card surfaces. Keep the page visually flat: the white canvas meets text directly, with no layered panels. The measured border color is white and appears on small circular controls; avoid inventing visible separators or elevation effects.

## Imagery

The measured section reports no image or video elements in the opening viewport. The screenshot is predominantly typography and open canvas, with a small fine-line radial starburst near the lower-left. Treat this mark as understated decoration, not as a photography or illustration system; do not introduce product mockups or prominent imagery.

## Components

### Vertical page navigation

A compact stack of Home, About, Projects, Awards, and Contacts near the upper-right, set in restrained dark text.

### Display name

A two-line, uppercase personal name in oversized NeueHaasDisplay, aligned to the upper-left and colored #472425.

### Role statement

A large, two-line uppercase creative-director statement anchored toward the lower-right, visually balancing the name.

### Introductory copy

A small uppercase service statement positioned low on the left, separate from the main display typography.

### Theme toggle

Small uppercase DARK THEME and LIGHT THEME text controls placed below the right-side navigation.

### Decorative starburst

A restrained radial line ornament near the lower-left; it remains secondary to the typography.

### Measured component styles

- **Primary button**: background #000000 · text #000000 · border 1px solid #ffffff · radius 50% · padding 0px · 400 13.3333px Arial
- **Secondary button**: transparent background · text #000000 · border 1px solid #ffffff · radius 50% · padding 0px · 400 13.3333px Arial
- **Link** (“L. K.”): transparent background · text #472425 · radius 0px · padding 0px · 400 18.7573px SFUIDisplay · uppercase
- **Navigation item** (“Home About Awards Projects Contacts”): transparent background · text #472425 · radius 0px · padding 0px · 400 12px SFUIDisplay · uppercase

## Do

- Use #ffffff as the measured page canvas.
- Set primary typography in #472425.
- Make the display headline oversized and uppercase.
- Preserve the asymmetric left-right composition.
- Keep navigation and utility copy compact.
- Leave broad areas of uncluttered negative space.

## Don't

- Do not add colors outside the measured palette.
- Do not center every element into a uniform column.
- Do not add cards, shadows, or gradients.
- Do not let decorative graphics compete with the headline.
- Do not enlarge navigation to display scale.
- Do not fill the open canvas with unmeasured imagery.

## Agent prompt

Build a new portfolio page in this visual language. Use Gallery White (#ffffff) for the full-page canvas and Wine Ink (#472425) for the main text, links, and navigation. Make the design typography-led: use an oversized uppercase display headline with tight tracking and compressed line spacing, then balance it with a second large statement offset toward the opposite side. Arrange compact navigation at the upper-right and a small uppercase introduction toward the lower-left. Preserve broad negative space and an intentionally asymmetric composition. Use NeueHaasDisplay or a close free sans-serif substitute for display text, and SFUIDisplay or Inter for utility text. Keep the surface flat, with no cards, shadows, gradients, or invented palette colors. Any ornament should remain delicate and secondary.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed asymmetric hero with upper-left name, upper-right vertical navigation, lower-left intro, and lower-right role statement. | anchor navigation, theme toggle, portfolio links | oversized typography, open canvas, radial line ornament |

## Source CSS custom properties (selected)

```css
--bg: #fdfaf3;
--accent: #000;
--fg: #472425;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/leonidkostetskyi-com