Design System

/* CSS-переменные из components.css */
:root {
  --duration-fast:  100ms;
  --duration-base:  150ms;
  --duration-slow:  250ms;
  --easing-default: ease;
}

/* Применение */
.btn {
  transition: background var(--duration-base) var(--easing-default),
              border-color var(--duration-base) var(--easing-default);
}

.cd__option {
  transition: background var(--duration-fast) var(--easing-default);
}

<!-- 1. Токены и базовые стили -->
<link rel="stylesheet" href="/shared/base.css">

<!-- 2. Компоненты -->
<link rel="stylesheet" href="/shared/components.css">

<!-- 3. Шрифты -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<!-- Primary -->
<button class="btn btn--primary">Оформить заказ</button>

<!-- Secondary -->
<button class="btn btn--secondary">Подробнее</button>

<!-- Ghost -->
<button class="btn btn--ghost">Отмена</button>

<!-- Danger -->
<button class="btn btn--danger">Удалить</button>

<!-- Размеры: добавь btn--sm или btn--lg -->
<button class="btn btn--primary btn--sm">Маленькая</button>
<button class="btn btn--primary btn--lg">Большая</button>

<!-- Ширина 100% -->
<button class="btn btn--primary btn--full">Рассчитать стоимость</button>

<span class="badge badge--production">Production</span>
<span class="badge badge--prototype">Prototype</span>
<span class="badge badge--wip">In Progress</span>
<span class="badge badge--concept">Concept</span>
<span class="badge badge--error">Error</span>

<!-- Поле с лейблом -->
<div class="field">
  <label class="field__label">Тираж</label>
  <input class="input" type="text" placeholder="Например, 500 шт.">
  <span class="field__hint">Минимум 50 штук</span>
</div>

<!-- Select -->
<div class="field">
  <label class="field__label">Формат</label>
  <select class="select">
    <option>A4 (210 × 297 мм)</option>
    <option>A5 (148 × 210 мм)</option>
  </select>
</div>

<!-- Ошибка -->
<div class="field">
  <label class="field__label">Email</label>
  <input class="input input--error" type="email">
  <span class="field__hint field__hint--error">Введите корректный email</span>
</div>

<div class="card">
  <div class="card__name">Визитки</div>
  <div class="card__desc">Офсетная печать, от 50 шт.</div>
  <div class="card__footer">
    <span class="badge badge--production">В наличии</span>
  </div>
</div>

<!-- Grid из 3 карточек -->
<div class="dates-grid">
  <div class="date-card selected">
    <span class="date-card__price">4 500 <span class="date-card__price-curr">₽</span></span>
    <span class="date-card__when">За 1 час</span>
  </div>
  <div class="date-card">
    <span class="date-card__price">3 800 <span class="date-card__price-curr">₽</span></span>
    <span class="date-card__when">Завтра</span>
    <span class="date-card__badge">−15%</span>
  </div>
  <div class="date-card">
    <span class="date-card__price">2 900 <span class="date-card__price-curr">₽</span></span>
    <span class="date-card__when">18 марта</span>
  </div>
</div>

<div class="stepper">
  <button class="stepper__btn" onclick="this.nextElementSibling.stepDown()">−</button>
  <input class="stepper__val" type="number" value="500" min="1">
  <button class="stepper__btn" onclick="this.previousElementSibling.stepUp()">+</button>
</div>

<div class="addon addon--add">
  <span class="addon__icon">+</span>
  <span class="addon__label">Ламинация матовая</span>
  <span class="addon__price">+320 ₽</span>
</div>

<!-- Добавлено -->
<div class="addon addon--active">
  <span class="addon__icon">✓</span>
  <span class="addon__label">Ламинация матовая</span>
  <span class="addon__price">+320 ₽</span>
</div>