Дизайн

1618/brand-guidelines

Применяет фирменный стиль 1618 с тёплой оливково-терракотовой палитрой и кириллическими шрифтами к веб-страницам, документам, презентациям и виджетам для создания гармоничного и читаемого дизайна. Полезен при оформлении материалов в едином стиле с поддержкой русского языка и соблюдением пропорций золотого сечения.

← Все навыки

Оцените навык первым

SKILL.md

Перевод инструкции, которую получает агент при подключении навыка. Агент всегда использует оригинал.

1618 Brand Guidelines (Фирменный стиль n1618.ru)

Обзор

Этот навык задаёт визуальные стандарты экосистемы 1618 (Nous 1618 / n1618.ru): гармонию золотого сечения (1.618), тёплую натуральную палитру (молочная олива + терракота + графит), элегантную антикву и выверенную гротескную типографику с безупречной поддержкой кириллицы (русского языка).

Используй этот стиль для оформления:

  • Любых веб-страниц, лендингов и HTML-артефактов
  • Интерактивных виджетов (widget.html, дашборды, карусели)
  • Презентаций (HTML, PPTX)
  • Документов, отчётов, КП и памяток (DOCX, PDF)
  • Графиков и визуализаций D3/SVG

1. Цветовая палитра 1618

В основе стилей n1618.ru лежит природная, тёплая гамма: оттенки натуральной бумаги/оливы (olive) и благородная тёплая терракота (terracotta).

Базовая шкала Olive (Фон, текст, границы)

Имя OKLCH HEX Применение
olive-50 oklch(98.8% 0.003 106.5) #FBFBF9 Основной чистый фон страниц, карточки
olive-100 oklch(96.6% 0.005 106.5) #F4F4F0 Тёплый фоновый оттенок n1618 (Canvas / Body BG)
olive-150 oklch(94.8% 0.006 106.5) #EEEEEA Подложка под элементы, ховеры карточек
olive-200 oklch(93.0% 0.007 106.5) #E8E8E3 Тонкие разделители, рамки (Borders)
olive-300 oklch(88.0% 0.011 106.6) #D8D8D0 Активные границы, иконки в неактивном состоянии
olive-400 oklch(73.7% 0.021 106.9) #ABAB9C Второстепенные плейсхолдеры, деактивированный текст
olive-500 oklch(58.0% 0.031 107.3) #7C7C67 Приглушённый текст (Muted / Subtitles)
olive-600 oklch(46.6% 0.025 107.3) #5B5B4B Вторичный текст, метаданные, лейблы
olive-700 oklch(39.4% 0.023 107.4) #474739 Тёмный вторичный текст
olive-800 oklch(28.6% 0.016 107.4) #2B2B22 Заголовки в тёмных блоках
olive-900 oklch(22.8% 0.013 107.4) #1D1D16 Основной текст (Primary Text) в светлой теме
olive-950 oklch(15.3% 0.006 107.1) #0C0C09 Фон тёмной темы n1618 (Dark Body BG)

Акцентная шкала Terracotta (Кнопки, бейджи, фокусы)

Имя OKLCH HEX Применение
terracotta-50 oklch(97.8% 0.012 72.0) #FDF7EF Нежный фон для бейджей, тегов и плашек
terracotta-100 oklch(94.6% 0.028 71.0) #FAEBD9 Подсветка строк, выделение блоков
terracotta-200 oklch(89.5% 0.052 70.0) #F3D7B8 Бордюры терракотовых бейджей
terracotta-300 oklch(82.8% 0.082 69.0) #EABE8D Вторичный терракотовый акцент
terracotta-400 oklch(75.2% 0.110 67.9) #DDA15E Светлый тёплый акцент, графики
terracotta-500 oklch(66.5% 0.125 63.0) #C98137 Главный брендовый акцент 1618 (CTA кнопки, ссылки)
terracotta-600 oklch(57.5% 0.130 55.0) #B2611C Ховер кнопок, активное состояние
terracotta-700 oklch(49.0% 0.118 48.0) #944819 Тёмный акцент, текст терракотовых ссылок

2. Типографика с поддержкой кириллицы (Русские шрифты)

В дизайне 1618 ключевую роль играет контраст изысканной антиквы (Serif) и технологичного, чистого гротеска (Sans). Все шрифты обязаны идеально рендерить русские буквы без артефактов и рассинхронизации начертаний.

Заголовки и крупные дисплейные фразы (Display & Headings)

  • Первый выбор: Instrument Serif, serif
    • Подключение из Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
    • Характер: аристократичный, вытянутый, книжный стиль золотого сечения.
  • Кириллические альтернативы (Serif Fallbacks):
    • PT Serif, Literata, Prata, Old Standard TT, Georgia, serif
    • Для кириллического акцентного заголовка: "Instrument Serif", "PT Serif", "Literata", Georgia, serif;

Основной текст, таблицы, кнопки и UI (Body & Interface)

  • Первый выбор: Inter, system-ui, sans-serif
    • Подключение из Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  • Отечественные и кириллические альтернативы:
    • Golos Text (современный, великолепно читается в интерфейсах и отчётах)
    • PT Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
    • Стек для CSS: font-family: "Inter", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

Код, цифры и моноширинный текст (Mono & Numbers)

  • Стек: font-family: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    • Превосходная кириллица для формул, логов, табличных финансовых данных.

3. Принципы вёрстки и пропорции 1618

  1. Золотое сечение (1.618):
    • Соотношения отступов: 8px, 13px, 21px, 34px, 55px, 89px.
    • Межстрочный интервал (Line Height): 1.618 для длинных текстовых блоков, 1.15–1.25 для крупных заголовков.
  2. Скругления (Border Radius):
    • Кнопки, теги, бейджи: rounded-full (капсулы 9999px) или rounded-lg (10px–12px).
    • Карточки, модальные окна, панели: rounded-2xl (16px–20px).
    • Изображения и превью: rounded-xl (12px–16px).
  3. Границы и тени:
    • Тонкие изящные рамки: 1px solid rgba(43, 43, 34, 0.08) (или #E8E8E3).
    • Мягкие, рассеянные тени: box-shadow: 0 4px 20px -2px rgba(29, 29, 22, 0.05);. Никаких черных глубоких теней.

4. Готовые CSS-переменные для вставки в артефакты

:root {
  /* n1618 Palette */
  --n1618-bg: #F4F4F0;              /* oklch(96.6% 0.005 106.5) */
  --n1618-card: #FFFFFF;
  --n1618-card-subtle: #FBFBF9;
  --n1618-border: #E8E8E3;
  --n1618-border-strong: #D8D8D0;
  
  --n1618-text: #1D1D16;            /* oklch(22.8% 0.013 107.4) */
  --n1618-text-muted: #7C7C67;      /* oklch(58.0% 0.031 107.3) */
  --n1618-text-soft: #ABAB9C;
  
  --n1618-accent: #C98137;          /* terracotta-500: oklch(66.5% 0.125 63) */
  --n1618-accent-hover: #B2611C;    /* terracotta-600 */
  --n1618-accent-light: #FDF7EF;    /* terracotta-50 */
  --n1618-accent-border: #F3D7B8;   /* terracotta-200 */

  /* Typography */
  --font-display: "Instrument Serif", "PT Serif", "Literata", Georgia, serif;
  --font-sans: "Inter", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark theme (по желанию) */
[data-theme="dark"], .dark {
  --n1618-bg: #0C0C09;              /* oklch(15.3% 0.006 107.1) */
  --n1618-card: #1D1D16;
  --n1618-card-subtle: #2B2B22;
  --n1618-border: #2B2B22;
  --n1618-border-strong: #474739;
  --n1618-text: #F4F4F0;
  --n1618-text-muted: #ABAB9C;
  --n1618-accent-light: #33150B;
}

5. Примеры компонентов

Кнопка действия (Primary CTA)

<button style="
  background-color: #C98137;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(201, 129, 55, 0.25);
  transition: background-color 0.2s ease, transform 0.1s ease;
">
  Создать документ
</button>

Бейдж / Тег 1618

<span style="
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background-color: #FDF7EF;
  color: #944819;
  border: 1px solid #F3D7B8;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
">
  ✨ Версия 1618
</span>

Карточка (Card)

<div style="
  background: #FFFFFF;
  border: 1px solid #E8E8E3;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px -2px rgba(29, 29, 22, 0.04);
">
  <h3 style="
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: #1D1D16;
    margin: 0 0 12px 0;
  ">Эстетика и точность</h3>
  <p style="
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: #5B5B4B;
    margin: 0;
  ">Вся среда n1618 выстроена вокруг спокойной концентрации, гармонии типографики и безупречной работы с русскоязычным контентом.</p>
</div>

6. Чек-лист проверки соответствия стилю 1618

  • [ ] Заголовки оформлены антиквой с поддержкой кириллицы (Instrument Serif / PT Serif).
  • [ ] Основной текст набран чистым кириллическим гротеском (Inter / Golos Text).
  • [ ] Фон имеет тёплый оттенок бумаги (#F4F4F0 / #FBFBF9), а не слепящий холодный #FFFFFF.
  • [ ] Основной текст — графитово-оливковый (#1D1D16), а не жёсткий #000000.
  • [ ] Акцентные элементы используют терракотовую палитру (#C98137 / #DDA15E).
  • [ ] Кнопки и бейджи имеют закруглённые края (капсулы rounded-full или мягкие углы 12-16px).
  • [ ] Все кириллические символы отображаются нативно, без системной замены на случайные шрифты.