Roman Sadovnikov · Design System ← Portfolio

/ kit

Design System Kit

Витрина токенов и компонентов. Источник правды — src/styles/tokens.css + файлы в src/components/. Любое новое значение идёт сюда.

Не индексируется поисковиками. Не линкуется из публичной навигации.

01 / Tokens

Colors

--color-bg #EEF2F3 Page background — cool light grey
--color-bg-elevated #F7F5EC Cards, hover surfaces
--color-bg-deep #ddccba Deeper beige (sparingly)
--color-text #2a2e36 Primary text (cool-tinted, never #000)
--color-heading #152242 Deep navy — all headings
--color-text-secondary #585c66 Secondary text
--color-text-muted #9a9588 Captions, meta
--color-text-inverse #FBEFDE Text on dark
--color-border #ede7de Dividers, card borders
--color-border-strong #ddccba Hover/strong border
--color-accent #c8553d Accent (terracotta)
--color-accent-hover #a94632 Accent hover
--color-positive #2f7a4e Growth / success metric

02 / Tokens

Typography

Inter Variable (display + body) · system mono

Display
token
--type-display
size
56→104px
use
Display (page-level)
Heading 1
token
--type-h1
size
40→64px
use
Page title
Привет, я — Роман
token
--type-hero-title
size
44px
use
Hero title (fixed)
Heading 2
token
--type-h2
size
28→40px
use
Section
Lead — крупный лид-абзац в Hero.
token
--type-lead
size
24px
use
Lead paragraph, Hero body
Heading 3
token
--type-h3
size
20→26px
use
Sub-section
Body text. Текст. Lorem ipsum.
token
--type-body
size
18px
use
Body / reading
Small text · 14px
token
--type-small
size
14px
use
Meta, caption
TINY MONO 12PX
token
--type-tiny
size
12px
use
Mono labels, eyebrows

03 / Tokens

Spacing

4px base. Use as var(--space-N). Rendered widths below.

  • --space-1 0.25rem 4px
  • --space-2 0.5rem 8px
  • --space-3 0.75rem 12px
  • --space-4 1rem 16px
  • --space-5 1.25rem 20px
  • --space-6 1.5rem 24px
  • --space-7 1.75rem 28px
  • --space-8 2rem 32px
  • --space-10 2.5rem 40px
  • --space-12 3rem 48px
  • --space-13 3.25rem 52px
  • --space-16 4rem 64px
  • --space-24 6rem 96px
  • --space-32 8rem 128px
  • --space-48 12rem 192px

04 / Tokens

Radii

Border-radius. Used everywhere from chips to hero card.

  • --radius-sm 6px Small inputs, code chips
  • --radius-md 10px Cards, sample frames
  • --radius-lg 16px Big cards, callouts
  • --radius-card 20px Hero card, primary surfaces
  • --radius-pill 999px Pills, round buttons (TG)

05 / Tokens

Layout widths

Container max-widths for different page types.

  • --width-prose 42.5rem (680px) Long-form reading column
  • --width-text 54rem (864px) Case page text column
  • --width-content 60rem (960px) Standard pages
  • --width-wide 75rem (1200px) Home grid
  • --gutter clamp(1rem, 4vw, 3rem) Container side gutter (fluid)

06 / Tokens

Motion

Durations + a single easing curve. Hover the swatches to feel the timing.

  • --duration-fast 120ms Hover/focus state transitions
  • --duration-normal 240ms Standard transitions
  • --duration-slow 480ms Slow reveals
  • --easing-default cubic-bezier(0.2, 0.8, 0.2, 1) All easing
120ms
240ms
480ms

07 / Tokens

Z-index

Layer scale. Anything higher than overlay is a code smell.

  • --z-base 1 Default content stack
  • --z-sticky 10 Sticky header, sticky-year
  • --z-overlay 100 Modal, tooltip overlays

08 / Components

Buttons

Primary

Secondary

Ghost

External link

View on example.com

09 / Components

Section heading

03 / Section

Section title example

Все →

10 / Components

Case card

Item in the homepage cases list. Hover for accent underline + nudge.

01

Sample case title — refined product redesign

One- to two-sentence teaser. Refined product redesign that increased conversion by something measurable.

Клиент
ACME Inc.
Роль
Senior Product Designer
  • b2b
  • redesign
 02

Sample case under NDA ·

Same shape, but the case is gated behind a password — used for current-employer NDA work.

Клиент
ACME Inc.
Роль
Senior Product Designer
Доступ
под NDA
  • b2b
  • ai

11 / Components

Project card

Card in the Play section. External-link by default.

Figma · plugin 2025

Sample plugin

A short description of what the plugin does and why it exists.

Открыть
tool 2024

Sample tool

Another card to illustrate the grid layout in two.

Открыть

12 / Components

Article list item

Row item in the Writing section. External link variant has external icon.

Internal article example — written here

Internal articles live in the repo as markdown. They render at /writing/[slug].

  • design
  • process

External article example — link to Medium / Substack

External articles list a link out instead of an internal page. Frontmatter sets externalUrl.

  • ai

13 / Components

Nav tabs

Pill-навигация для шапки. Активный пункт считается по Astro.url.pathname. Используется в Header.astro. На этой странице второй пример включает ссылку на /kit — она подсвечена как активная.

Без активного пункта (ни один href не совпадает с /kit)

С активным пунктом (href совпадает с /kit)

14 / Layout

Header

Sticky-шапка сайта. Аватар + имя слева, pill-навигация по центру, соцссылки справа. В демо отключаю position: sticky, чтобы не липла к окну кита.

Роман Садовников

15 / Layout

Footer

Подвал сайта.

16 / Page-level

Hero

Главный экран. Inline-рендер прямо из компонента — обновляется синхронно с кодом.

Привет, я — Роман Ведущий продуктовый дизайнер в 

Отвечаю за дизайн в команде, которая делает все передовые сервисы для агентов недвижимости. Делаю сайд-проекты. В прошлом стартап-фаундер, закрыл pre-seed раунд.

17 / Page-level

Year block (sticky-year cases grid)

Контекстный компонент — sticky-год прилипает пока скроллишь его кейсы. Эффект работает на всю страницу; здесь показан в уменьшённом виде.

2025

01

Sample case 2025 — first

Текст-телогрейка для проверки. Скролль внутри блока, чтобы увидеть как 2025 прилипает.

Клиент
ACME
Роль
Senior Product Designer
  • b2b
 02

Sample case 2025 — second

Ещё один кейс того же года, чтобы grid встал на сетку.

Клиент
ACME
Роль
Senior Product Designer
  • b2b
  • ai

2024

03

Sample case 2024

Кейс предыдущего года. Год 2024 заменит 2025 в sticky-позиции, когда доскроллишь.

Клиент
OldCorp
Роль
Senior Product Designer
  • b2c

18 / Case page

Quote

Pulled quote inside a case body. Optional attribution + role.

Идея была в том, чтобы дать агенту видимость своего процесса для собственника — и снизить тревогу обеих сторон.
Анна Соловьёва Менеджер продукта, ProApp

19 / Case page

Stat

Big metric. Variants: up (accent color), down (muted), neutral (default).

+12%

Conversion lift

A/B-тест на 4 недели, доля выкупов из лида.

3 мес.

Duration

От ресёрча до выката на 100% аудитории.

−18%

Time on task

Сценарий «связаться с агентом», med.

20 / Case page

Image with caption

Astro <Image> wrapper with caption + optional fullbleed.

Demo placeholder
Подпись · 14px моно, верхний регистр, серый

21 / Case page

Compare

Before/after image pair, side-by-side. Labels customizable.

До До
После После
Редизайн карточки агента — компактнее, без потери конверсии

22 / Case page

Spec

Key/value table for case meta — кому, когда, что использовали.

Клиент
ЦИАН
Команда
ProApp · 3 продуктовых дизайнера, 8 инженеров, 1 PM
Роль
Senior Product Designer · ведущий дизайнер фичи
Длительность
3 месяца от ресёрча до выката
Инструменты
Figma, Notion, Amplitude, A/B-платформа ЦИАН

23 / Case page

Case meta

Двухколоночный summary + период вверху страницы кейса.

Кратко
Редизайн раздела «Сделки» — новая воронка, прозрачность статусов, экономия 3+ часов в неделю на агента.
Когда делали
Q1 2025 · 3 месяца

24 / Case page

Summary

Краткие тезисы кейса. Принимает либо массив points, либо slot.

Кратко

  • Перевели агентов на новую воронку сделок за 4 спринта
  • Conversion lift +12% на ключевом шаге
  • Сэкономили 3+ часа в неделю на агента, измерено в Amplitude

25 / Case page

Results block

Финальная плашка с метриками — крупно, в конце кейса.

Результаты проекта

+12% Conversion lift
−18% Time on task
3 мес. Duration

26 / Case page

Callout

Замечание в тексте кейса. Варианты: note, insight, warn.

27 / Case page

Dropdown

Тонкий раскрывающийся блок — для деталей, которые опциональны.

Что мы пробовали и отбросили

Текст внутри раскрытого dropdown. Здесь живут детали, которые не главное, но кому-то могут быть интересны.

Технические ограничения

Этот dropdown открыт по умолчанию через проп open.

28 / Case page

Collapsible section

Крупный сворачиваемый блок с заголовком — для отдельных глав кейса.

Контекст и задача

Содержимое главы. Здесь длинный текст про предысторию проекта.

Процесс

Этот блок открыт через проп open. Внутри — process steps, скриншоты, и т.д.

29 / Case page

Before / After (tabs)

Интерактивный переключатель «было / стало» — таб-интерфейс. Отличается от Compare (он показывает обе картинки сразу).

Карточка сделки — было/стало

30 / Helpers

Placeholder

SVG-болванка для прототипов и кита. Прозрачный фон, dashed border, диагонали.

16:9 1:1 4:3

31 / Coming

To be added

  • 404 page
  • SEO meta block
  • Form input + textarea (when contact form added)
  • Reading-progress bar (case page)