{
  "schemaVersion": 2,
  "generatedAt": "2026-08-06T18:00:00+07:00",
  "title": "Design System: ThaiForTravel Partner Cabinet",
  "extensions": {
    "colorMeta": {
      "sea": {
        "role": "primary",
        "displayName": "Thai Sea",
        "canonical": "#006D79",
        "tonalRamp": ["#173F45", "#005761", "#006D79", "#3C8D94", "#7AB2B4", "#B5D5D3", "#DFF1F1", "#F1F8F6"]
      },
      "sun": {
        "role": "accent",
        "displayName": "Thai Sun",
        "canonical": "#F2C35F",
        "tonalRamp": ["#5A3C00", "#8A5B00", "#B47D20", "#DBA843", "#F2C35F", "#F8DB97", "#FFF4D6", "#FFFBF0"]
      },
      "paper": {
        "role": "neutral",
        "displayName": "Warm Paper",
        "canonical": "#F4F6F2",
        "tonalRamp": ["#263336", "#445255", "#5F6D6F", "#9BAFAC", "#D8E2DF", "#EEF4F1", "#F4F6F2", "#FFFEFA"]
      },
      "ink": {
        "role": "neutral",
        "displayName": "Desk Ink",
        "canonical": "#263336",
        "tonalRamp": ["#173F45", "#263336", "#445255", "#5F6D6F", "#9BAFAC", "#D8E2DF", "#EEF4F1", "#FFFEFA"]
      }
    },
    "typographyMeta": {
      "hero": { "displayName": "Hero", "purpose": "The 47–76px browser sign-in heading." },
      "display": { "displayName": "Display", "purpose": "The 28–36px working-page heading." },
      "title": { "displayName": "Title", "purpose": "Sections, campaigns and results." },
      "body": { "displayName": "Body", "purpose": "Instructions and supporting text." },
      "label": { "displayName": "Label", "purpose": "Buttons, fields, statuses and metric labels." }
    },
    "shadows": [
      { "name": "floating", "value": "0 18px 48px rgba(18, 63, 69, 0.18)", "purpose": "Dialogs, popovers and the welcome image plane only; ordinary workspace regions stay flat." }
    ],
    "motion": [
      { "name": "ease-out", "value": "cubic-bezier(0.2, 0.8, 0.2, 1)", "purpose": "Short route, insert and control feedback without bounce." }
    ],
    "breakpoints": [
      { "name": "mobile", "value": "900px" },
      { "name": "compact-content", "value": "1180px" }
    ]
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary-light",
      "description": "The single high-emphasis action in a working region.",
      "html": "<button class=\"ds-primary-button\">Создать ссылку и QR</button>",
      "css": ".ds-primary-button { min-height: 44px; padding: 0 18px; border: 1px solid #F2C35F; border-radius: 13px; color: #263336; background: #F2C35F; font: 650 15px/1.2 'Golos Text', sans-serif; transition: transform 100ms cubic-bezier(.2,.8,.2,1), background-color 160ms cubic-bezier(.2,.8,.2,1); } .ds-primary-button:hover { background: #DBA843; } .ds-primary-button:active { transform: scale(.98); } .ds-primary-button:focus-visible { outline: 3px solid #006D79; outline-offset: 2px; }"
    },
    {
      "name": "Secondary Button",
      "kind": "button",
      "refersTo": "button-secondary",
      "description": "A Sea outline action for secondary operations.",
      "html": "<button class=\"ds-secondary-button\">Скопировать ссылку</button>",
      "css": ".ds-secondary-button { min-height: 44px; padding: 0 18px; border: 1px solid #006D79; border-radius: 13px; color: #005761; background: #FFFEFA; font: 600 15px/1.2 'Golos Text', sans-serif; transition: color 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms cubic-bezier(.2,.8,.2,1); } .ds-secondary-button:hover { color: #FFFEFA; background: #006D79; } .ds-secondary-button:focus-visible { outline: 3px solid #006D79; outline-offset: 2px; }"
    },
    {
      "name": "Campaign Name Field",
      "kind": "input",
      "refersTo": "input-light",
      "description": "A permanently labeled campaign-name field.",
      "html": "<label class=\"ds-field\"><span>Название кампании</span><input value=\"YouTube: обзор Пхукета\"></label>",
      "css": ".ds-field { display: grid; gap: 8px; color: #263336; font: 600 12px/1.35 'Golos Text', sans-serif; } .ds-field input { min-height: 48px; padding: 0 14px; border: 1px solid #9BAFAC; border-radius: 13px; color: #263336; background: #FFFEFA; font: 450 15px/1.5 'Golos Text', sans-serif; } .ds-field input:focus { border-color: #006D79; outline: 3px solid rgba(0,109,121,.18); outline-offset: 1px; }"
    },
    {
      "name": "Active Navigation Item",
      "kind": "nav",
      "refersTo": "navigation-active",
      "description": "The current workspace section, with one quiet marker and no boxed glyph.",
      "html": "<a class=\"ds-nav-active\" href=\"#\">Создать ссылку и QR</a>",
      "css": ".ds-nav-active { position: relative; display: flex; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 13px; color: #005761; background: #DFF1F1; font: 650 15px/1.2 'Golos Text', sans-serif; text-decoration: none; } .ds-nav-active::after { position: absolute; inset-block: 11px; right: 5px; width: 3px; border-radius: 3px; background: #006D79; content: ''; } .ds-nav-active:focus-visible { outline: 3px solid #006D79; outline-offset: 2px; }"
    },
    {
      "name": "Campaign Surface",
      "kind": "custom",
      "refersTo": "campaign-surface",
      "description": "A flat working surface that keeps link and QR in one campaign context.",
      "html": "<section class=\"ds-campaign\"><strong>Обзор Пхукета</strong><span>YouTube / ссылка + QR</span></section>",
      "css": ".ds-campaign { display: grid; gap: 6px; padding: 20px; border: 1px solid #D8E2DF; border-radius: 20px; color: #263336; background: #FFFEFA; font: 450 15px/1.5 'Golos Text', sans-serif; } .ds-campaign strong { font-weight: 700; } .ds-campaign span { color: #5F6D6F; font-size: 13px; }"
    }
  ],
  "narrative": {
    "northStar": "Тёплый Travel Desk",
    "overview": "Кабинет ощущается как спокойный рабочий стол турагента и владельца: тёплый paper-canvas, Sea для структуры, Sun только для главного действия, оригинальные ThaiForTravel assets и точная кириллическая типографика.",
    "keyCharacteristics": [
      "Sea организует навигацию, focus и secondary actions.",
      "Sun используется только для одного главного действия в рабочем регионе.",
      "Golos Text обслуживает заголовки, текст, числа и контролы.",
      "Agent и admin используют одну систему, но admin получает более плотный evidence-first rhythm.",
      "Интерфейс почти плоский; иерархию создают тональные поверхности, dividers и отступы.",
      "Ссылка и QR всегда воспринимаются как единый комплект кампании."
    ],
    "rules": [
      { "name": "The One Sun Rule", "body": "Sun отмечает единственное главное действие; навигация и выбранное состояние остаются Sea.", "section": "colors" },
      { "name": "The Collection Plane Rule", "body": "Фильтр, summary и список одной задачи живут на единой поверхности, а не в трёх карточках.", "section": "layout" },
      { "name": "The Tonal First Rule", "body": "Сначала используются фон, поверхность, divider и пространство; тень зарезервирована для overlays.", "section": "elevation" }
    ],
    "dos": [
      "Do использовать Sea для структуры и Sun только для primary action.",
      "Do показывать ссылку и QR как два результата одной кампании.",
      "Do сохранять labels sidebar видимыми на desktop от 901px.",
      "Do проверять agent и admin как одну систему с разной плотностью.",
      "Do сохранять белую подложку реального QR-кода."
    ],
    "donts": [
      "Don't использовать Sun для активного пункта меню или больших декоративных полей.",
      "Don't смешивать Golos Text с декоративным display-шрифтом.",
      "Don't собирать page heading, filter и list в отдельные одинаковые карточки.",
      "Don't превращать интерфейс в набор светящихся карточек, boxed glyphs или градиентных панелей."
    ]
  }
}