По одному цвету в строке — видно реальную востребованность каждого токена. «Used by» считается автоматически: grep var(--color-…) по src/components, src/layouts, src/pages и src/styles/*.css (кроме самого tokens.css и этой страницы). Пустой список — токен ничей, кандидат на удаление.

• --color-bg #EEF2F3 Page background — cool light grey

  14× ArticleCard, BeforeAfter, Callout, CaseCard, Header, KitLayout, NavTabs, Placeholder, ProjectCard, Summary, Toc, YearBlock, global.css, longread.css

• --color-bg-elevated #ffffff Cards, elevated surfaces

  10× ArticleCard, Callout, CaseCard, KitLayout, NavTabs, Placeholder, ProjectCard, Summary, Toc, longread.css

• --color-bg-deep #ddccba Deeper beige (sparingly)

  1× Toc

• --color-text #2a2e36 Primary text (cool-tinted, never #000)

  31× ArticleCard, BeforeAfter, Button, Callout, CaseCard, CaseMeta, CaseTile, CasesSection, CollapsibleSection, Footer, Header, Hero, Insights, KitLayout, Lightbox, NavTabs, Placeholder, PlaySection, ProjectCard, Quote, ResultsBlock, SectionHeading, Spec, Stat, Summary, Tag, Toc, WritingSection, YearBlock, global.css, longread.css

• --color-heading #152242 Deep navy — all headings

  14× ArticleCard, CaseMeta, CaseTile, Header, Hero, Insights, KitLayout, NavTabs, PlaySection, TalksSection, Toc, WritingSection, about, longread.css

• --color-text-secondary #585c66 Secondary text

  9× ArticleCard, BeforeAfter, Button, CaseCard, KitLayout, ProjectCard, SectionHeading, Stat, Tag

• --color-text-muted #9a9588 Meta, eyebrows

  17× ArticleCard, BeforeAfter, CaseCard, CasesSection, Footer, KitLayout, Placeholder, ProjectCard, Quote, ResultsBlock, SectionHeading, Spec, Stat, Summary, Toc, WritingSection, longread.css

• --color-caption #ACACAC Image caption — cool grey

  2× CaseTile, Image

• --color-text-inverted #ffffff White text on dark surfaces (buttons, selection, nav pills)

  6× Button, CaseTile, KitLayout, Lightbox, NavTabs, global.css

• --color-border #ede7de Dividers, card borders

  19× ArticleCard, BeforeAfter, Button, CaseCard, CaseMeta, CaseTile, Footer, Image, Insights, KitLayout, Placeholder, ProjectCard, SectionHeading, Spec, Stat, Summary, Tag, Toc, longread.css

• --color-border-strong #ddccba Hover/strong border

  4× ArticleCard, ProjectCard, Toc, longread.css

• --color-border-cool #D7D7D7 Cool grey border — media frames

  1× CaseTile

• --color-accent #c8553d Accent (terracotta)

  16× ArticleCard, BeforeAfter, Button, Callout, CaseCard, CaseTile, CollapsibleSection, KitLayout, ProjectCard, Quote, SectionHeading, Stat, Summary, YearBlock, global.css, longread.css

• --color-accent-hover #a94632 Accent hover

  Not used anywhere — candidate for removal

• --color-positive #2f7a4e Growth / success metric

  2× CaseMeta, ResultsBlock

• --color-overlay rgba(0, 0, 0, 0.85) Modal backdrop, overlays

  1× Lightbox

• --color-bg-glass color-mix(in srgb, var(--color-bg) 75%, transparent) Sticky frosted surfaces (header, kit chrome)

  2× Header, KitLayout

Inter Variable (display + body) · system mono

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

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)

Container max-widths for different page types.

• --width-prose 42.5rem (680px) Long-form reading column
• --width-text 47.5rem (760px) 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)
• --sticky-offset 120px Sticky-header clearance for anchors + panels

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

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

Frosted-glass surfaces — sticky-шапка и kit chrome. Скролль страницу: под шапкой контент размывается через backdrop-filter.

• --blur-glass 12px backdrop-filter blur radius
• --color-bg-glass --color-bg @ 75% translucent surface tint (см. в Colors)

Inline-иконка компании с автоматическим скейлом по высоте текста. Реестр в src/data/brands.ts; SVG-файлы в public/brands/. Два режима: только иконка (<Brand name="cian"/>) или иконка+текст в обёртке (<Brand name="cian">Циан</Brand>).

Плитка кейса в секции «Проекты» на главной. Заголовок + год справа, cover (или placeholder), и dark-pill CTA «Раскрыть кейс →». Карточка целиком — одна ссылка; кнопка — визуальный Button в режиме as="span".

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

Pill-метка с моноширинным капсом. Используется в карточках статей и кейсов. Filled — заливка фоном; subtle — полупрозрачный вариант для перегруженных контекстов.

Карточка в листинге статей. Внутри — title, опциональный source (для external), excerpt, теги и дата. Справа thumbnail (если указан в frontmatter), иначе placeholder.

Internal article example — written here

Internal articles live in the repo as markdown. They render at /writing/[slug]. Thumbnail задаётся явно в frontmatter, выбирается осмысленный кадр из /public/articles/<slug>/.

• ux-research
• ab-testing
• conversion

сентябрь 2025 г.

External article example — link to Medium

Medium

External articles list a link out instead of an internal page. Frontmatter sets externalUrl и source — отображается лого+имя источника под заголовком.

• ux-research
• ai

апрель 2024 г.

Internal article without thumbnail (placeholder fallback)

Если thumbnail не указан, карточка не падает и не скрывается — рендерится плоский placeholder.

• design

июнь 2023 г.

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

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

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

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

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

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

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

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

Astro <Image> wrapper with caption + optional fullbleed. Проп zoomable включает зум-модалку и курсор-лупу — кликни по второму примеру.

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

Объединённый блок «Коротко + Результаты». Ставится под hero-медиа кейса, ширина — текстовой колонки.

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

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

Финальные инсайты кейса. Тот же визуальный паттерн, что и Case meta: лейбл слева, тезисы справа, разделители между.

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

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

Интерактивный переключатель «было / стало». Проп zoomable добавляет зум-модалку для текущей выбранной вкладки.

До После

Sticky-сайдбар «Содержание» для страницы кейса. Появляется при viewport ≥1280px, активный пункт обновляется через IntersectionObserver. H3-сабтайтлы видны только у активного H2. В демо ниже компонент принудительно показан в статическом виде — активный пункт зашит вручную для иллюстрации.

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

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