CURATED · OPEN · FREE

Leonidkostetskyi

A typographic personal portfolio emphasizing bold, geometric display text and generous whitespace.

PortfolioTypographyCleanRefinedStudio

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://leonidkostetskyi.com

📦 Browse pack contents →

Identity DNA

Creative DirectorPersonal BrandMinimalistTypography-drivenPremium

A high-end design studio portfolio or monograph.

Color

#472425Ink

#F2EFE9BG

#EAE7E1BG soft

#6B6B6BMuted

rgba(71, 36, 37, 0.1)Line

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

Typography

geometric-sans

display-hero165px · 400
display-large142px · 400
body-sm12px · 400

All text is uppercase · Display text uses tight tracking (-3.3px to -4.125px) · Body text uses standard tracking

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

225px

Generous whitespace with massive vertical gaps (225px padding) between sections.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Subtle 1px borders used sparingly, mostly for hover states or small dividers.

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

500mssmall

800msmedium

cubic-bezier(0.16, 1, 0.3, 1)easing

Smooth color and background-color transitions for theme switching · Transform transitions for interactive elements

Dotted underline appears below navigation items. · Smooth transition to new section or state.

Components

button Minimalist text links with dotted underline hover states.
card No traditional cards; content is presented as large typographic blocks.
chip Small circular dots used for theme toggling.
input Not visible in the provided screenshots.
hero A massive typographic composition using two large blocks of text ('LEONID KOSTETSKYI' and 'CREATIVE DIRECTOR') balanced diagonally across the screen.

Voice & Don'ts

Tone Confident, sophisticated, and understated.
Headlines Massive, uppercase, geometric sans-serif display type.
CTAs Small, uppercase, monospaced or sans-serif text links.

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)
Avoid: Avoid cluttered layouts or excessive imagery
Avoid: Avoid bright, high-chroma accent colors
Avoid: Avoid decorative serif fonts
Avoid: Avoid drop shadows or complex gradients
Avoid: Avoid lowercase display text
Avoid: Avoid centered text blocks

Inside the pack — real screenshots

Leonidkostetskyi — 桌面首屏（hero） — 桌面首屏（hero）

Leonidkostetskyi — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko