Dmitrii Ive. Design System v 1.0.

/ 01 / цвета

Десять токенов. Одна точка света.

Каждая роль закреплена за CSS-переменной. Переключение тем через data-theme="dark|light" на <html>. Янтарный акцент применяется только к одной вещи на блок.

Dark

основная тема · espresso

--bgОсновной фон

#0d0c0a

--bg-elevКарточки, поднятые секции

#131210

--inkОсновной текст

#efe7d8

--ink-dimВторичный текст, цитаты

#b9b0a0

--ink-muteМетки, метаданные

#7c7466

--lineБордеры, разделители

#2a2620

--line-softВнутренние линии

#1c1a16

--accentЯнтарный акцент

#e9a85b

--accent-deepТёмный янтарь, ховеры

#c97f2e

--highlightКремовый, селекшн

#f5ecd9

Light

альтернатива · cream paper

--bgКремовый фон

#f6f1e6

--bg-elevКарточки

#ece5d4

--inkОсновной текст

#1a160e

--ink-dimВторичный текст

#4d4537

--ink-muteМетки

#857a64

--lineБордеры

#c9bfa6

--line-softВнутренние линии

#ddd4ba

--accentТёплая umber, для светлого фона

#b46a1d

--accent-deepГлубокий акцент

#8b4d10

--highlightБумажный кремовый

#fff9e8

Тени с акцентом делаются через color-mix(in srgb, var(--accent) 55%, transparent). Так свечение точки автоматически работает в обеих темах без дублирования значений.

/ 02 / типографика

Три семьи. У каждой одна роль.

Cormorant Garamond — для всего, что должно звучать. Geist Sans — для всего, что должно читаться. JetBrains Mono — для всего, что должно быть данными.

Display · Cormorant Garamond · 400 + 300 italic hero h1

Дмитрий Сергеев

Section · Cormorant Garamond · 400 section h2

Маркетинг, продукт и продажи. Одна система.

Body · Inter Tight / Geist Sans · 16/18px paragraph

Строю SaaS с 2015. Поднял Carrot Quest с нуля до $3M ARR. Без инвесторов, +35% в год, всё ещё растём.

Label · JetBrains Mono · 11px · uppercase metadata

/ 04 / артефакты · belgrade · since 2009

Роль	Размер	Tracking · Leading	Использование
Hero	clamp(56px, 11vw, 180px)	−0.035em · 0.92	Имя автора, главный заголовок страницы
Section H2	clamp(32px, 5vw, 56px)	−0.02em · 1.05	Открытие секции, манифест блока
H3 / Card	22–30px	−0.015em · 1.1	Заголовки карточек, ролей, артефактов
Body large	18px	−0.005em · 1.55	Параграфы в bio, основной текст
Body	14–16px	0 · 1.5	Описания, summary карточек
Label	11px, uppercase	+0.18em	Метки секций, периоды, CTA

/ 03 / компоненты

Шесть кирпичей. Складывается всё.

Полная карточка ролей, big number, карточка-артефакт, метка, точка, линк. Из этих шести строятся все секции сайта.

component / dot

Точка-пульсар

PERSONAL SITE · 2026 EDITION

background: var(--accent); box-shadow: 0 0 24px color-mix(...); animation: pulse 3.6s infinite;

component / label

Мета-метка

/ 04 / артефакты

font: 11px JetBrains Mono; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute);

component / link

Линк с подчёркиванием

Carrot Quest

underline opacity: 0.35 hover → color: var(--accent) hover → scaleX(1.04), 320ms

component / role row

Карточка роли

2024 → now Founder & CEO · Dashly.io AI SDR · $252K ARR

2009 → 2015 CEO · Anivers Studio Enterprise: Сбер, Rosneft

border-top: 1px solid var(--line); hover → title becomes accent .card::before gradient on hover

component / big number

Большое число

02

$3M

ARR Carrot Quest

0 → 1000+ клиентов, без инвесторов, +35% в год.

number: Cormorant 56–96px label: uppercase, tracking 0.16 hover → number turns accent

component / grid divider

Сетка карточек без бордеров

01 · AI Card one

02 · Product Card two

03 · Marketing Card three

04 · CEO Card four

parent: gap-px + bg var(--line) children: bg var(--bg) = идеальные 1px-разделители

/ 04 / сетка

12 колонок. Журнальное поле.

Контейнер max 1440. Сетка на 12 колонок. Стандартный паттерн секции: мета-метка в col-span-3 слева, контент в col-span-8 со сдвигом col-start-5. Между ними поле — характерная редакционная пустота.

структура секции

·

5

6

7

8

9

10

11

12

Янтарь = sidebar (col-span-3): метка + микро-заголовок. Тёмный = контент (col-start-5, col-span-8). Четвёртая колонка остаётся пустой — это поле.

        jsx · паттерн секции
        
      
// Стандартная секция с журнальным полем
<section className="mx-auto max-w-[1440px] px-6 md:px-12 py-24 md:py-32">
  <div className="grid grid-cols-12 gap-6">
    <div className="col-span-12 md:col-span-3">
      <p className="label">/ 04 / артефакты</p>
      <p className="font-display text-3xl">Микро-заголовок.</p>
    </div>
    <div className="col-span-12 md:col-span-8 md:col-start-5">
      /* контент */
    </div>
  </div>
</section>

Container · max-w-[1440px]

Все секции живут в одном контейнере с горизонтальными отступами px-6 на mobile и px-12 на desktop.

Section padding · py-24 / py-32

96px между секциями на mobile, 128px на desktop. Не меньше. Воздух здесь главный материал.

/ 05 / атмосфера

Два слоя поверх. Без них сайт не работает.

Тёмная палитра в чистом виде = чёрный квадрат. Жизнь добавляют два слоя на body: радиальные янтарные пятна и плёночное зерно.

Радиальные пятна

Две тёплые подсветки сверху-слева и справа. Едва заметные, делают фон не плоским.

background-image: radial-gradient(1200px 600px at 15% −10%, rgba(233,168,91,0.06), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(201,127,46,0.05), transparent 60%); background-attachment: fixed;

Плёночное зерно

SVG turbulence на body::before с mix-blend-mode overlay. Opacity 0.06.

body::before { position: fixed; inset: 0; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml, <svg ...><feTurbulence ... /></svg>"); z-index: 100; pointer-events: none; }

/ 06 / движение

Четыре анимации. Никаких библиотек.

Только CSS. Easing cubic-bezier(0.2, 0.7, 0.2, 1) — мягкое замедление. На Hero stagger делается через inline animation-delay в шаге 60–120ms.

rise

opacity 0→1 · translateY 14px → 0 · blur 8 → 0 · 900ms

Anchor sample

draw

scaleX 0 → 1 · transform-origin left · 1100ms

pulse

box-shadow дышит · 3.6s · infinite

fade-in

opacity 0 → 1 · 800ms

Soft entrance

/ 07 / голос

Текст это часть системы. Не украшение.

Полные правила лежат в моей памяти как feedback-human-voice-site-copy. Здесь короткая выжимка. Каждое слово на сайте проходит этот фильтр.

Что работает

Sentence case. Только первое слово с заглавной.

Заголовки 2–5 слов. «Семнадцать лет. Одна линия.»

Точки вместо тире. Em dashes читаются как AI.

Outcome → Mechanism → Proof. Что улучшается, как, с какими цифрами.

Глаголы вместо стека существительных. «route, qualify, book» лучше «workflow optimization».

Контракции и разговорный регистр. «I'm building» лучше «I am building».

Что выкидывать

Fluff adjectives. seamless, robust, powerful, cutting-edge, game-changing.

AI-signature openings. «Let's dive in», «In today's fast-paced world», «Moreover».

Template rhetoric. «It's not just X. It's Y.» «Whether you're X or Y.»

Канцеляризмы. «в связи с», «осуществлять», «реализация», «функционал».

Balanced essay hedging. «It's important to note», «While X is important, Y is also important».

Title Case в заголовках. Только sentence case.

/ 08 / starter

Копируешь, и поехали. Один блок CSS.

Это весь дизайн-фундамент. Подключи три семьи шрифтов через next/font или link rel, вставь блок ниже в globals.css, и у нового проекта есть та же палитра, та же типографика, тот же воздух.

        app/globals.css · ядро
        
      
/* CSS-токены: переключаются через data-theme на html */
:root, :root[data-theme="dark"] {
  --bg: #0d0c0a;       --bg-elev: #131210;
  --ink: #efe7d8;      --ink-dim: #b9b0a0;
  --ink-mute: #7c7466;
  --line: #2a2620;    --line-soft: #1c1a16;
  --accent: #e9a85b;  --accent-deep: #c97f2e;
  --highlight: #f5ecd9;
}
:root[data-theme="light"] {
  --bg: #f6f1e6;      --bg-elev: #ece5d4;
  --ink: #1a160e;     --ink-dim: #4d4537;
  --ink-mute: #857a64;
  --line: #c9bfa6;    --line-soft: #ddd4ba;
  --accent: #b46a1d;  --accent-deep: #8b4d10;
}

/* Шрифты */
.font-display {
  font-family: var(--font-display), ui-serif, Georgia, serif;
  letter-spacing: -0.018em;
  font-feature-settings: "liga", "dlig", "kern";
}
.label {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Точка-пульсар */
.dot {
  display: inline-block; width: 0.55em; height: 0.55em;
  border-radius: 999px; background: var(--accent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 4px  color-mix(in srgb, var(--accent) 90%, transparent);
}

/* Анимации */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.rise { animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

        app/layout.tsx · шрифты через next/font
        
      
import { Geist, Geist_Mono, Cormorant_Garamond } from "next/font/google";

const display = Cormorant_Garamond({
  variable: "--font-display",
  subsets: ["latin", "cyrillic"],
  weight: ["300", "400", "500", "600", "700"],
  style: ["normal", "italic"],
});

/ 09 / чек-лист

Перед тем как залить любую страницу.

Восемь вопросов. Если на каждый «да», это твой сайт.

Контейнер. max-w-[1440px], mx-auto, px-6 md:px-12.
Мета-метка. На каждую секцию есть label в левой колонке.
Заголовок. Serif, 2–5 слов, sentence case, без тире.
Янтарь один. Не больше одного янтарного акцента на блок.
Stagger в hero. .rise со step 60–120ms через inline animation-delay.
Воздух между секциями. py-24 md:py-32. Не меньше.
Обе темы. Тёмная и светлая проверены, ничего не сломалось.
Em dashes равны нулю. Точки или мидоты.

Design System. Refined editorial minimalism.