Импорт бренд-кита

Что такое бренд-кит

Бренд-кит в tikento — это набор визуальных настроек вашей организации: палитра цветов, назначение цветов ролям (primary, accent, success и т.д.) и типографика. Эти настройки применяются к виджету регистрации, шаблонам писем и лендингам мероприятий.

Вместо ручной настройки каждого цвета вы можете импортировать готовый файл из вашей дизайн-системы.

Как импортировать

1. Откройте Настройки → Бренд.
2. В разделе палитры нажмите Импорт из бренд-кита.
3. Выберите файл — формат определится автоматически.
4. После успешного импорта вы увидите сообщение с количеством загруженных цветов.

Поддерживаемые форматы

DTCG (W3C Design Tokens)

Стандарт W3C для описания дизайн-токенов. Используется Tokens Studio, Supernova, Style Dictionary v4.

{
  "palette": {
    "brand-blue": { "$type": "color", "$value": "#4F46E5" },
    "brand-amber": { "$type": "color", "$value": "#F59E0B" }
  },
  "roles": {
    "primary": { "$type": "color", "$value": "{palette.brand-blue}" }
  }
}

Как определяется палитра: все объекты с $type: "color" внутри ключа palette.

Как определяются роли: ключи primary, secondary, tertiary, accent, success, warning, error, info внутри roles. Ссылки вида {palette.xxx} автоматически разрешаются в HEX-значения.

Style Dictionary

Формат Amazon Style Dictionary (без префикса $). Широко распространён в существующих дизайн-системах.

{
  "color": {
    "primary": {
      "600": { "value": "#4F46E5", "type": "color" }
    }
  }
}

Палитра: рекурсивный обход вложенной структуры color.* — все объекты с ключом value, содержащим HEX.

Tokens Studio (Figma-плагин)

Экспорт из плагина Tokens Studio for Figma. Может содержать несколько token sets (core, light, dark) и мета-секции $themes, $metadata.

{
  "$themes": [...],
  "core": {
    "colors": {
      "indigo": {
        "600": { "$value": "#4F46E5", "$type": "color" }
      }
    }
  }
}

Палитра: рекурсивный обход всех token sets (кроме $themes и $metadata).

Роли: из секций role / roles внутри любого token set. Ссылки {core.colors.indigo.600} разрешаются.

Figma Variables API

JSON-ответ Figma REST API (GET /v1/files/:key/variables/local). Цвета хранятся как RGBA с компонентами 0–1.

{
  "variables": {
    "VariableID:1": {
      "name": "primary/600",
      "resolvedType": "COLOR",
      "valuesByMode": {
        "Mode:1": { "r": 0.31, "g": 0.27, "b": 0.9, "a": 1 }
      }
    }
  }
}

Палитра: все переменные с resolvedType: "COLOR" — RGBA конвертируется в HEX. Берутся значения из первого mode.

CSS Custom Properties

Обычный CSS-файл с переменными в :root.

:root {
  --primary-600: #4F46E5;
  --accent-500: #F59E0B;
  --font-sans: 'Geist', system-ui, sans-serif;
}

Палитра: все значения переменных, совпадающие с форматом #RRGGBB.

Типографика: переменные с именем font-sans, font-display, font-mono.

Tailwind CSS config

JavaScript-конфиг темы Tailwind.

module.exports = {
  colors: {
    primary: { 600: '#4F46E5' },
    accent: { 500: '#F59E0B' },
  },
  fontFamily: {
    sans: ['Geist', 'sans-serif'],
  },
};

Палитра: рекурсивный обход объекта colors.

Типографика: из объекта fontFamily — ключи sans, display, mono.

Что импортируется

Экспорт

Экспорт выгружает текущие настройки бренда в формате DTCG (W3C Design Tokens). Этот файл можно импортировать обратно в tikento или использовать в Style Dictionary, Tokens Studio и других инструментах.

Нажмите Экспорт как JSON в разделе палитры.