---
version: alpha
name: Artem Yavorovskyi
description: Editorial portfolio minimalism — an oversized grotesk display set on a warm off-white canvas, near-black ink, generous gallery whitespace, hairline dividers, and a single restrained graphite accent. Type and negative space carry the entire system.

colors:
  # Canvas + ink
  background: "#f6f5f1"
  surface: "#ffffff"
  surface-soft: "#efede7"
  ink: "#16161a"
  ink-pure: "#000000"

  # Secondary / muted ink
  ink-secondary: "#55554f"
  ink-muted: "#86857c"

  # Accent — restrained graphite
  primary: "#2b2b30"
  accent: "#3a3a40"

  # Interactive
  link: "#16161a"
  link-hover: "#55554f"

  # Hairlines + dividers
  border: "#dedbd2"
  border-soft: "#e7e5dd"

  # On-color
  on-primary: "#f6f5f1"
  on-ink: "#f6f5f1"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  overline:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1.2px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px
  5xl: 200px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  link-text:
    textColor: "{colors.link}"
    typography: "{typography.body-medium}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.overline}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border-soft}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 24px 40px

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
    width: 100%

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
---

# Artem Yavorovskyi Design System

## Overview

Artem Yavorovskyi's portfolio is a study in editorial restraint — the kind of personal site where typography and whitespace do all the talking and chrome is almost entirely absent. The canvas is a warm off-white (`{colors.background}`) rather than clinical pure white, lending the page a paper-like, gallery quality. Against it, near-black ink (`{colors.ink}`) carries text with a faint warmth that keeps the contrast from feeling harsh.

The defining move is scale. An oversized condensed grotesk display face (Anton-class) sets the name and section openers at billboard sizes with tight negative tracking, so the headline reads as a graphic object first and a word second. Beneath it, a clean neutral sans (Inter-class) handles every supporting role — project titles, body copy, captions, navigation. The two-tier pairing keeps the loud display moments rare and the reading experience calm.

There is essentially no color in the system. The palette runs from off-white through a single warm-gray surface tint to near-black, with a graphite accent (`{colors.primary}`) reserved for the dark CTA. Separation between sections comes from hairline dividers (`{colors.border}`) and enormous vertical whitespace rather than boxes, fills, or shadows. The result feels less like a product UI and more like a printed monograph.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) instead of pure white — paper, not screen
- Oversized condensed grotesk display (Anton-class) with tight negative tracking for hero/section openers
- Inter-class neutral sans for all supporting text — quiet, legible, role-driven
- Near-monochrome palette: off-white → warm gray → near-black, single graphite accent
- Hairline dividers and gallery-scale whitespace instead of cards, fills, or shadows
- Uppercase tracked overlines for metadata and labels
- Pill-shaped dark CTA as the only filled interactive element

## Colors

### Canvas & Ink
- **Off-White Canvas** (`{colors.background}`): The warm paper background behind everything.
- **Surface** (`{colors.surface}`): Pure white used for the rare elevated card.
- **Surface Soft** (`{colors.surface-soft}`): Warm-gray tint for project tiles and badges.
- **Ink** (`{colors.ink}`): Near-black primary text and headings — warm, not harsh.
- **True Black** (`{colors.ink-pure}`): Reserved for maximum-contrast moments.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, hover state.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, placeholders.

### Accent
- **Graphite** (`{colors.primary}`): The dark CTA fill and emphasis — restrained, near-neutral.
- **Accent** (`{colors.accent}`): Slightly lighter graphite for secondary emphasis.

### Interactive
- **Link** (`{colors.link}`): Inline links, set in ink with an underline on hover.
- **Link Hover** (`{colors.link-hover}`): Muted hover color for links and nav items.

### Hairlines
- **Border** (`{colors.border}`): Section dividers and outlines — the primary separation tool.
- **Border Soft** (`{colors.border-soft}`): Lighter hairline for card and tile edges.

## Typography

### Font Family
- **Display**: `Anton`, condensed grotesk, with fallbacks `Arial Narrow, sans-serif` — used only at large sizes for name and section openers.
- **Text**: `Inter`, with fallbacks `Arial, sans-serif` — every supporting role.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 96px condensed display — name, hero opener |
| `display` | 64px condensed display — section openers |
| `section-heading` | 40px Inter — feature/section titles |
| `sub-heading` | 28px Inter — sub-sections |
| `card-title` | 22px Inter — project titles |
| `body-large` | 20px Inter — intros, lead paragraphs |
| `body` | 17px Inter — standard reading text |
| `body-medium` | 16px Inter — nav, emphasized links |
| `caption` | 13px Inter — image captions, metadata |
| `overline` | 12px tracked uppercase — labels, eyebrows |
| `button-ui` | 15px Inter — buttons |

### Principles
- **Two tiers, strict roles**: The condensed display face appears only at large sizes; everything functional is Inter. The contrast between the two is the system.
- **Negative tracking scales with size**: -2px at 96px, -1.2px at 40px, neutral at body sizes.
- **Tracked uppercase overlines**: Metadata and eyebrows use 12px Inter with +1.2px tracking — the one place letters spread out.
- **Quiet body**: Inter at 17px with 1.55 line-height for comfortable long-form reading.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, but the scale stretches far at the top (`{spacing.4xl}` 120px, `{spacing.5xl}` 200px) to support gallery-scale section gaps.

### Grid & Container
- Generous max content width with wide outer margins
- Hero: single large condensed headline, left-aligned, with massive top and bottom padding
- Project list: single-column or simple 2-column tiles, image-led
- Hairline dividers separate major sections edge to edge

### Whitespace Philosophy
- **Gallery emptiness**: Vertical gaps between sections reach `{spacing.4xl}`–`{spacing.5xl}`. Empty space is the layout.
- **Hairlines over boxes**: Sections are divided by 1px `{colors.border}` rules, never filled containers.
- **Loud type, calm space**: Oversized display moments are balanced by surrounding stillness.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text, dividers |
| Hairline | 1px `{colors.border}` | Section dividers, card edges |
| Tile | `{colors.surface-soft}` fill, no border | Project tiles |

The system avoids shadows almost entirely. Depth is communicated through the warm-gray surface tint and hairline rules, in keeping with the printed-monograph feel.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed images, dividers |
| `xs` | 2px | Inline emphasis |
| `sm` | 4px | Inputs, small controls |
| `md` | 8px | Small cards |
| `lg` | 16px | Project tiles, image containers |
| `pill` | 9999px | CTA buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Ink fill, off-white text, pill radius. The single filled CTA.
- **`button-secondary`** — Off-white surface, hairline border, ink text, pill radius.

### Badges
- **`badge`** — Warm-gray tint, tracked uppercase overline text, pill radius.

### Cards
- **`card`** — White surface with a soft hairline edge, 16px radius.
- **`card-project`** — Warm-gray tile, image-led, zero inner padding so artwork bleeds to the edge.

### Navigation
- **`nav-bar`** — Off-white, no border, 16px Inter weight 500 links. Name left, links right.

### Structure
- **`divider`** — 1px `{colors.border}` rule, full width. The primary section separator.

### Inputs
- **`input`** — White surface, hairline border, 4px radius, 17px Inter.

## Do's and Don'ts

### Do
- Use the warm off-white canvas (`{colors.background}`), not pure white
- Reserve the condensed display face for large hero/section moments only
- Use Inter for every functional and reading role
- Separate sections with hairline `{colors.border}` rules and large whitespace
- Keep the palette near-monochrome — off-white to near-black
- Use tracked uppercase overlines for metadata and labels
- Let project artwork bleed to tile edges (zero inner padding)

### Don't
- Don't introduce saturated brand colors into the chrome
- Don't set the condensed display face at body sizes — it's a display-only face
- Don't add drop shadows — depth comes from tint and hairlines
- Don't box every section in a filled container — dividers and space do the work
- Don't use positive tracking on the condensed display headlines
- Don't crowd sections — the whitespace is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales to ~48–56px |
| Tablet | 600–1024px | 2-column tiles begin, padding expands |
| Desktop | 1024–1440px | Full layout, wide margins |
| Large | >1440px | Centered, generous outer margins |

### Touch Targets
- Pill CTA uses 14px vertical padding for a comfortable tap area
- Nav links spaced generously at 16px

### Collapsing Strategy
- Hero display: 96px → ~48px on mobile, negative tracking preserved proportionally
- Project tiles: 2-column → single column
- Navigation: inline links → minimal stacked menu
- Section spacing: 120–200px → ~64px on mobile

### Image Behavior
- Project artwork fills tile width edge to edge
- Images maintain 16px tile radius where tiled, full-bleed where hero

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Off-White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Divider: `{colors.border}`
- Primary CTA: Ink `{colors.ink}` fill, off-white text, pill radius

### Example Component Prompts
- "Create a hero on off-white `{colors.background}`. Set the name at 96px Anton, line-height 0.95, letter-spacing -2px, color `{colors.ink}`, left-aligned, with 120px top and bottom padding."
- "Build a project tile: warm-gray `{colors.surface-soft}` surface, 16px radius, image bleeding edge to edge with zero padding, title below at 22px Inter weight 600."
- "Add a tracked overline label: 12px Inter weight 500, uppercase, +1.2px letter-spacing, color `{colors.ink-muted}`."
- "Separate two sections with a full-width 1px `{colors.border}` divider and 120px of vertical space on each side."
- "Design the CTA: ink `{colors.ink}` fill, off-white text, pill radius, 14px/28px padding, 15px Inter weight 500."

### Iteration Guide
1. Start with the off-white canvas and near-black ink — get the warmth right before anything else
2. Condensed display for the loud moments only; Inter for everything else
3. Negative tracking scales with size: -2px at 96px, neutral at body
4. Hairlines and whitespace replace boxes and shadows
5. Color stays near-monochrome — graphite accent is the loudest the palette gets

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Artem Yavorovskyi. Brand names and trademarks belong to their respective owners.