Roman Sadovnikov · Design System ← Portfolio

/ kit

Design System Kit

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

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

01 / Tokens

Colors

--color-bg #FBEFDE Page background — warm cream
--color-bg-elevated #F7F5EC Cards, hover surfaces
--color-bg-deep #ddccba Deeper beige (sparingly)
--color-text #2a2e36 Primary text (cool-tinted)
--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

02 / Tokens

Typography

Geologica Variable (display) · IBM Plex Sans Variable (body) · system mono

Display
token
--type-display
size
56→104px
use
Hero
Heading 1
token
--type-h1
size
40→64px
use
Page title
Heading 2
token
--type-h2
size
28→40px
use
Section
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-8 2rem 32px
  • --space-10 2.5rem 40px
  • --space-12 3rem 48px
  • --space-16 4rem 64px
  • --space-24 6rem 96px
  • --space-32 8rem 128px

04 / Components

Buttons

Primary

Secondary

Ghost

External link

View on example.com

05 / Components

Section Heading

03 / Section

Section title example

Все →

06 / 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

07 / 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.

Открыть

08 / 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

09 / Case page

Quote

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

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

10 / 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.

11 / Case page

Image with caption

Astro <Image> wrapper with caption + optional fullbleed.

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

12 / Case page

Compare

Before/after image pair. Labels customizable.

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

13 / Case page

Spec

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

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

14 / 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

15 / Page-level

Hero

Главный экран. Используется только на главной — здесь embed для референса. См. реальный на uxdriven.ru.

16 / Helpers

Placeholder

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

16:9 1:1 4:3

17 / Coming

To be added

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