Design System · v1

Стихи и Танцы

Единая дизайн-система: все шрифтовые роли, кнопки со всеми состояниями, поля и формы, цвета и токены. Значения берутся из глобальных стилей Тильды, классы действуют на всех страницах (проектный head-code).

01 · Подключение

Как пользоваться

  1. В блоке Тильды просто добавь классы .ds-t-*, .ds-btn, .ds-field — они уже глобальны, импортировать ничего не нужно.
  2. Локально/вне Тильды подключи один файл: <link rel="stylesheet" href="design-system.css">.
  3. Значения (кегли, цвета, веса) меняются в глобальных стилях Тильды — блоки подхватывают автоматически.
  4. Шаблон компонента бери кнопкой «копировать» рядом с образцом.
   <!-- типографика -->
<h2 class="ds-t-h2">История проекта</h2>
<p class="ds-t-body">Основной текст…</p>

<!-- кнопка -->
<a class="ds-btn ds-btn--primary" href="#">Купить билет</a>

<!-- поле -->
<div class="ds-field">
  <label class="ds-field__label" for="f1">Контакт</label>
  <input class="ds-field__input" id="f1" type="email" placeholder="Ваш e-mail">
  <span class="ds-field__hint">Не публикуем</span>
</div>

Токены доступны напрямую:
var(--ds-color-gold), var(--ds-space-6), var(--ds-radius-xs), var(--ds-dur), var(--ds-ease), var(--ds-fs-h1).

Гарнитура антиквы берётся из --t-headline-font (глобальные стили Тильды), с фолбэком Cormorant Garamond. Тонкие веса Onest работают через семейство 'Onest Fix'.

02 · Типографика

10 ролей

Каждая роль показана на тёмном и светлом фоне. Кегли: 1440 → 1200 → 960 → 640 → 480.

Созерцай
Созерцай
Display · Cormorant 400
67.84/59.36/46.64/38.16/31.8 · lh 1.0 · ls 0.005em
.ds-t-display
Авторская драматургия
Авторская драматургия
H1 · Cormorant 500
50.88/44.52/36.04/29.68/25.44 · lh 1.05 · ls 0.004em
.ds-t-h1
История проекта
История проекта
H2 · Cormorant 500
37.44/33.28/28.08/24.96/22.88 · lh 1.12 · ls 0.003em
.ds-t-h2
Пространство как участник
Пространство как участник
H3 · Cormorant 500
28.84/25.75/22.66/20.6/19.57 · lh 1.15 · ls 0.002em
.ds-t-h3
Мы соединяем поэзию и современный танец в единую драматургию.
Мы соединяем поэзию и современный танец в единую драматургию.
Lead · Cormorant 400
21/20/18/18/17 · lh 1.4 · ls 0
.ds-t-lead
Социальное направление
Социальное направление
Eyebrow · Cormorant 600
13/12/12/12/11 · lh 1.4 · ls 0.14em · caps
.ds-t-eyebrow
Поэзия, современный танец и музыка в одной драматургии сезона.
Поэзия, современный танец и музыка в одной драматургии сезона.
Body Large · Onest 200
20/19/18/17/16 · lh 1.6 · ls 0.01em
.ds-t-body-l
Основной текст: Ёё Йй Жж Щщ Ыы — проверка кириллицы и межстрочного ритма в абзаце средней длины.
Основной текст: Ёё Йй Жж Щщ Ыы — проверка кириллицы и межстрочного ритма в абзаце средней длины.
Body · Onest 200
17/16/16/15/15 · lh 1.6 · ls 0.01em
.ds-t-body
Подпись к кадру: летняя гостиная · 2026
Подпись к кадру: летняя гостиная · 2026
Small · Onest 250
15/14/14/14/13 · lh 1.45 · ls 0.01em
.ds-t-small
Купить билет
Купить билет
Button / Nav · Onest 400
15/15/15/14/14 · lh 1.2 · ls 0.01em
.ds-t-label

03 · Кнопки

6 вариантов × 5 состояний

.ds-btn--primary · Primary — Золотая заливка — основное действие

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

.ds-btn--accent · Accent — Терракота — второй акцент

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

.ds-btn--outline · Outline — Контур золотом

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

.ds-btn--ghost · Ghost — Полупрозрачная на тёмном

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

.ds-btn--menu · Menu — Навигация в шапке

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

.ds-btn--link · Link — Текстовая ссылка

DefaultКупить билет
HoverКупить билет
FocusКупить билет
ActiveКупить билет
Disabled

04 · Поля и формы

Типы и состояния

Текстовые поля

Состояния

Неверный формат

Многострочное и список

До 500 символов

Флажки и радио

05 · Цвет

Палитра

Тёплая палитра. Акценты — золото #AD7D2B и бронза #BA9866; длинный текст только цветом --ds-color-muted.

Основной тёмный фон (Deep Theme)--ds-color-bg
#14100D · --uc-color-color-i4HSUqp
Альтернативный глубокий фон--ds-color-bg-deep
#0D0A08
Текст на тёмном--ds-color-text
#FEFEFE
Приглушённый текст (Gray)--ds-color-muted
#C6C9CA · --uc-color-color-eJp5WjU
Вторичный текст (серо-зелёный)--ds-color-secondary
#626D67 · --uc-color-color-t5dnI6vL
Taupe--ds-color-taupe
#544B40 · --uc-color-color-hU8dON
Холодный белый (фон светлый)--ds-color-paper
#FFFFFF · --uc-color-color-ZCEjnvn
Тёплый светлый фон (Warm White)--ds-color-surface
#F8F4EE · --uc-color-color-lu5M9O
Текст на светлом--ds-color-ink
#14100D · --uc-color-color-i4HSUqp
Золото (Old Gold) — акцент--ds-color-gold
#AD7D2B · --uc-color-color-oRPbgx1bU8x
Золото, hover--ds-color-gold-hover
#8F6520
Бронза — канон вёрстки--ds-color-bronze
#BA9866
Светлая бронза--ds-color-bronze-light
#D2B98F
Терракота — акцент 2 / ошибка--ds-color-terra
#A85235 · --uc-color-color-tKyVwXwA5AtO
Терракота, hover--ds-color-terra-hover
#8F442A
Зелёный (вторичный)--ds-color-green
#2E7A56
Граница на тёмном--ds-color-line
#5B4A3B
Мягкая граница (бронза 22%)--ds-color-line-soft
rgba(186,152,102,.22)

06 · Отступы, радиусы, тени, motion

Шкалы

Отступы

--ds-space-14px
--ds-space-28px
--ds-space-312px
--ds-space-416px
--ds-space-520px
--ds-space-624px
--ds-space-832px
--ds-space-1040px
--ds-space-1248px
--ds-space-1664px
--ds-space-2080px
--ds-space-30120px

Радиусы

--ds-radius-xs2px
--ds-radius-sm4px
--ds-radius-md8px
--ds-radius-lg16px
--ds-radius-pill999px

Тени

--ds-shadow-sm
--ds-shadow-md
--ds-shadow-lg

Motion

--ds-easecubic-bezier(0.22, 1, 0.36, 1)
--ds-dur-fast180ms
--ds-dur240ms
--ds-dur-slow320ms
Made on
Tilda