{
  "$schema": "web-standards/design-system@2",
  "version": "1.0.0",
  "brand": {
    "name": "Kho Âm",
    "shortName": "Kho Âm",
    "legalName": "Kho Âm (giả lập)",
    "tagline": "12 buổi tập, một đêm lên sân khấu",
    "description": "Trường dạy guitar, trống, thanh nhạc và sản xuất nhạc trên máy cho teen và người đi làm — lớp tối đa 6 người, mỗi khoá kết thúc bằng một đêm diễn.",
    "url": "https://khoam.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN",
      "en_US"
    ],
    "social": {
      "facebook": "https://www.facebook.com/khoam.demo",
      "instagram": "https://www.instagram.com/khoam.demo",
      "tiktok": "https://www.tiktok.com/@khoam.demo",
      "youtube": "https://www.youtube.com/@khoam.demo"
    },
    "voice": [
      "sôi nổi",
      "cụ thể",
      "khích lệ",
      "gần gũi"
    ]
  },
  "color": {
    "light": {
      "primary": "#5B2BD9",
      "onPrimary": "#FFFFFF",
      "secondary": "#FF3EA5",
      "onSecondary": "#120B24",
      "bg": "#F7F5FF",
      "surface": "#FFFFFF",
      "fg": "#120B24",
      "muted": "#4E4670",
      "border": "#C9CEDB",
      "success": "#0F7B5A",
      "warning": "#8A5A00",
      "danger": "#B42318",
      "info": "#1F5FA8",
      "focus": "#5B2BD9"
    },
    "dark": {
      "primary": "#22E1F0",
      "onPrimary": "#120B24",
      "secondary": "#FF3EA5",
      "onSecondary": "#120B24",
      "bg": "#120B24",
      "surface": "#1E1538",
      "fg": "#F7F5FF",
      "muted": "#C4BEDD",
      "border": "#3A2E5C",
      "success": "#4ADE9B",
      "warning": "#F5C451",
      "danger": "#FF8A8A",
      "info": "#8DC2FF",
      "focus": "#FF3EA5"
    }
  },
  "mode": "dark",
  "brandColors": [
    {
      "name": "Đêm phòng thu",
      "hex": "#120B24",
      "role": "Nền tối của sân khấu — mọi trang chế độ tối, chân trang, ảnh social",
      "use": [
        "nền trang tối",
        "nền social",
        "chữ thân ở theme sáng"
      ],
      "never": [
        "chữ trên nền tối",
        "viền mảnh"
      ],
      "share": 45
    },
    {
      "name": "Trắng sân khấu",
      "hex": "#F7F5FF",
      "role": "Chữ trên nền tối và nền theme sáng",
      "use": [
        "chữ thân trên nền tối",
        "nền theme sáng",
        "lõi sáng của ống neon"
      ],
      "never": [
        "nút chính",
        "điểm nhấn"
      ],
      "share": 18
    },
    {
      "name": "Tím mic",
      "hex": "#5B2BD9",
      "role": "Hành động chính trên nền sáng và ống neon của logo bản sáng",
      "use": [
        "nút chính theme sáng",
        "ống neon logo trên nền sáng",
        "liên kết"
      ],
      "never": [
        "nền toàn trang",
        "chữ trên nền tối"
      ],
      "share": 12
    },
    {
      "name": "Cyan neon",
      "hex": "#22E1F0",
      "role": "Hành động chính trên nền tối — ống neon chính",
      "use": [
        "nút chính theme tối",
        "ống neon logo trên nền tối",
        "icon trạng thái bật"
      ],
      "never": [
        "chữ trên nền sáng",
        "nền lớn"
      ],
      "share": 10
    },
    {
      "name": "Hồng đèn sân khấu",
      "hex": "#FF3EA5",
      "role": "Điểm nhấn duy nhất — cột sóng âm trong logo, huy hiệu, đêm diễn",
      "use": [
        "cột sóng âm logo",
        "huy hiệu đêm diễn",
        "focus trên nền tối"
      ],
      "never": [
        "chữ dài",
        "nền toàn trang",
        "hai điểm nhấn trên một màn"
      ],
      "share": 8
    },
    {
      "name": "Crôm",
      "hex": "#C9CEDB",
      "role": "Viền, đường kẻ và dải kim loại crôm",
      "use": [
        "viền thẻ theme sáng",
        "dải crôm trên panel",
        "đường chia"
      ],
      "never": [
        "chữ trên nền sáng"
      ],
      "share": 7
    }
  ],
  "palettes": [
    {
      "id": "dem-dien",
      "name": "Đêm diễn (chính)",
      "light": {
        "primary": "#5B2BD9",
        "onPrimary": "#FFFFFF",
        "secondary": "#FF3EA5",
        "onSecondary": "#120B24",
        "bg": "#F7F5FF",
        "surface": "#FFFFFF",
        "fg": "#120B24",
        "muted": "#4E4670",
        "border": "#C9CEDB",
        "success": "#0F7B5A",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#1F5FA8",
        "focus": "#5B2BD9"
      },
      "dark": {
        "primary": "#22E1F0",
        "onPrimary": "#120B24",
        "secondary": "#FF3EA5",
        "onSecondary": "#120B24",
        "bg": "#120B24",
        "surface": "#1E1538",
        "fg": "#F7F5FF",
        "muted": "#C4BEDD",
        "border": "#3A2E5C",
        "success": "#4ADE9B",
        "warning": "#F5C451",
        "danger": "#FF8A8A",
        "info": "#8DC2FF",
        "focus": "#FF3EA5"
      }
    },
    {
      "id": "phong-thu",
      "name": "Phòng thu tím",
      "light": {
        "primary": "#120B24",
        "onPrimary": "#F7F5FF",
        "secondary": "#FF3EA5",
        "onSecondary": "#120B24",
        "bg": "#FFFFFF",
        "surface": "#F7F5FF",
        "fg": "#120B24",
        "muted": "#4E4670",
        "border": "#C9CEDB",
        "success": "#0F7B5A",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#1F5FA8",
        "focus": "#5B2BD9"
      },
      "dark": {
        "primary": "#FF3EA5",
        "onPrimary": "#120B24",
        "secondary": "#22E1F0",
        "onSecondary": "#120B24",
        "bg": "#120B24",
        "surface": "#1E1538",
        "fg": "#F7F5FF",
        "muted": "#C4BEDD",
        "border": "#3A2E5C",
        "success": "#4ADE9B",
        "warning": "#F5C451",
        "danger": "#FF8A8A",
        "info": "#8DC2FF",
        "focus": "#22E1F0"
      }
    },
    {
      "id": "bang-cassette",
      "name": "Băng cassette",
      "light": {
        "primary": "#1F5FA8",
        "onPrimary": "#FFFFFF",
        "secondary": "#FF3EA5",
        "onSecondary": "#120B24",
        "bg": "#F7F5FF",
        "surface": "#FFFFFF",
        "fg": "#120B24",
        "muted": "#4E4670",
        "border": "#C9CEDB",
        "success": "#0F7B5A",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#1F5FA8",
        "focus": "#1F5FA8"
      },
      "dark": {
        "primary": "#F5C451",
        "onPrimary": "#120B24",
        "secondary": "#FF3EA5",
        "onSecondary": "#120B24",
        "bg": "#1E1538",
        "surface": "#120B24",
        "fg": "#F7F5FF",
        "muted": "#C4BEDD",
        "border": "#3A2E5C",
        "success": "#4ADE9B",
        "warning": "#F5C451",
        "danger": "#FF8A8A",
        "info": "#8DC2FF",
        "focus": "#22E1F0"
      }
    }
  ],
  "typography": {
    "families": {
      "display": "Unbounded, Be Vietnam Pro, system-ui, sans-serif",
      "sans": "Be Vietnam Pro, system-ui, sans-serif",
      "mono": "JetBrains Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "family": "Unbounded",
        "role": "Tiêu đề poster, tên khoá học, tên đêm diễn (600–800)",
        "weight": 700,
        "vietnamese": true,
        "sample": "Đêm diễn tháng Mười — ẫm ĩ, rực rỡ và đủ dũng khí"
      },
      {
        "family": "Be Vietnam Pro",
        "role": "Thân bài, lịch học, giao diện đăng ký và nhận xét bài tập",
        "weight": 400,
        "vietnamese": true,
        "sample": "Tuần này bạn giữ nhịp ổn ở 80 bpm. Đợt sau thử tăng lên 90, nhớ thả lỏng cổ tay nhé, Đức ơi — ỡm ờ không được đâu!"
      },
      {
        "family": "JetBrains Mono",
        "role": "Số và mã (mono): bpm, thời lượng, mã lớp, học phí",
        "weight": 400,
        "vietnamese": true,
        "sample": "90 bpm · 4/4 · 03:42 · Lớp GT-07 · 2.400.000đ/12 buổi · ự"
      }
    ],
    "effects": [
      {
        "id": "neon-flicker",
        "name": "Chữ neon chập chờn rồi sáng",
        "durationMs": 900,
        "reducedMotion": "off"
      },
      {
        "id": "beat-in",
        "name": "Chữ nảy theo phách",
        "durationMs": 600,
        "reducedMotion": "off"
      },
      {
        "id": "chrome-sweep",
        "name": "Vệt crôm lướt qua",
        "durationMs": 1100,
        "reducedMotion": "off"
      }
    ],
    "scale": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "32px",
      "4xl": "44px",
      "5xl": "60px"
    },
    "lineHeight": {
      "tight": 1.1,
      "normal": 1.6,
      "relaxed": 1.75
    },
    "weights": [
      400,
      500,
      700,
      800
    ]
  },
  "space": {
    "0": "0",
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px",
    "12": "48px",
    "16": "64px"
  },
  "radius": {
    "sm": "8px",
    "md": "14px",
    "lg": "20px",
    "xl": "32px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 0 0 1px rgb(34 225 240 / .35), 0 0 8px rgb(34 225 240 / .25)",
    "md": "0 0 0 1px rgb(34 225 240 / .4), 0 0 18px rgb(34 225 240 / .3), 0 10px 24px rgb(18 11 36 / .4)",
    "lg": "0 0 0 1px rgb(255 62 165 / .45), 0 0 28px rgb(255 62 165 / .35), 0 16px 36px rgb(18 11 36 / .5)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "motion": {
    "durations": {
      "fast": "150ms",
      "base": "240ms",
      "slow": "480ms"
    },
    "easing": "cubic-bezier(.2,.9,.3,1.2)",
    "respectsReducedMotion": true,
    "pauseOffscreen": true,
    "signature": [
      "ống neon bật sáng chập chờn",
      "cột sóng âm nhảy theo phách",
      "vệt crôm lướt qua mặt chữ"
    ]
  },
  "icons": {
    "path": "icons/",
    "grid": 24,
    "stroke": 1.75,
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "neon-tube-glow",
    "constructionRules": "Ống neon liền mạch: nét 1.75 đầu tròn khớp tròn, ưu tiên một nét liền như uốn ống thủy tinh; bo góc ≥ 2.5 px (ống không gập góc nhọn); mảng tô (class f) là lòng ống nhạt bên trong hình kín; trạng thái bật thêm quầng sáng; mỗi icon tối đa một 'chân ống' hở như đèn neon thật; lỗ hở ≥ 1.5 px",
    "set": "kho-am",
    "stateLook": {
      "rest": "ống neon tắt — nét Trắng sân khấu/Đêm phòng thu",
      "active": "ống bật: lòng Hồng đèn sân khấu mờ, quầng Cyan neon",
      "animated": "chuyển động riêng: nảy theo phách, rung dây, quay đĩa"
    }
  },
  "mascots": [
    {
      "id": "phim-gay"
    },
    {
      "id": "trong"
    },
    {
      "id": "not-nhac"
    },
    {
      "id": "loa"
    }
  ],
  "components": {
    "minTouchPx": 44,
    "material": "sân khấu neon: nút viền ống neon phát sáng, bấm thì sáng đặc; thẻ như mặt máy mix có dải crôm trên đầu",
    "catalog": [
      "Button",
      "Link",
      "Input",
      "Select",
      "Checkbox",
      "Radio",
      "Switch",
      "Textarea",
      "Card",
      "Modal",
      "Toast",
      "Tabs",
      "Badge",
      "Avatar",
      "Table",
      "Navbar",
      "Footer",
      "Breadcrumb",
      "Pagination",
      "EmptyState",
      "Skeleton"
    ],
    "button": {
      "interactive": true,
      "levels": [
        "primary",
        "secondary",
        "ghost",
        "danger"
      ],
      "sizes": [
        "sm",
        "md",
        "lg"
      ],
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "loading",
        "done"
      ],
      "emphasisMaxPerPage": 1
    },
    "chip": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "selected"
      ]
    },
    "callout": {
      "types": [
        "tip",
        "caution",
        "done",
        "note",
        "stage"
      ],
      "character": true,
      "characterLines": {
        "tip": "Pích: Thả lỏng cổ tay, gảy từ khuỷu xuống là đỡ mỏi.",
        "caution": "Bum Bum: Tập trống nhớ đeo nút tai nhé!",
        "stage": "Loa Lớn: Còn 12 ngày nữa là đêm diễn rồi đó."
      }
    },
    "toast": {
      "timer": true,
      "pauseOnHover": true,
      "ariaLive": "polite"
    },
    "dialog": {
      "focusTrap": true,
      "escCloses": true,
      "returnFocus": true
    },
    "input": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "error"
      ],
      "label": true,
      "help": true,
      "errorWithExample": true,
      "errorExample": "Số điện thoại cần 10 số, ví dụ 0912 345 678"
    },
    "progress": {
      "types": [
        "bar",
        "steps",
        "ring"
      ]
    },
    "verdict": {
      "types": [
        "correct",
        "wrong"
      ],
      "stamp": true,
      "labels": {
        "correct": "Chuẩn nhịp!",
        "wrong": "Lệch nhịp — thử lại chậm hơn"
      }
    },
    "streak": {
      "days": 7,
      "label": "ngày tập liên tiếp"
    },
    "roadmap": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "locked",
        "done"
      ]
    }
  },
  "logo": {
    "primary": "logo/primary.svg",
    "mark": "logo/mark.svg",
    "wordmark": "logo/wordmark.svg",
    "mono": "logo/mono.svg",
    "onDark": "logo/on-dark.svg",
    "clearSpace": "0.5 × chiều cao mark",
    "minSize": "mark 16px · logo đầy đủ 100px ngang",
    "construction": "Lưới 48: phím gảy bo tròn là một ống neon nét 4.5 khớp tròn; bên trong ba cột sóng âm Hồng đèn sân khấu cao 10/18/6; bản tối thêm lõi sáng Trắng sân khấu 1.2; wordmark đơn nét 5 đầu tròn như chữ uốn ống neon, mũ chữ Â là một dấu ^ riêng"
  },
  "favicon": {
    "svg": "favicon/favicon.svg",
    "ico": "favicon/favicon.ico",
    "appleTouch": "favicon/apple-touch-icon.png",
    "png192": "favicon/icon-192.png",
    "png512": "favicon/icon-512.png",
    "maskable512": "favicon/icon-maskable-512.png",
    "manifest": "favicon/site.webmanifest",
    "themeColor": "#120B24",
    "backgroundColor": "#F7F5FF"
  },
  "og": {
    "defaultImage": "social/og-default.png",
    "imageAlt": "Kho Âm — 12 buổi tập, một đêm lên sân khấu",
    "titleSuffix": " · Kho Âm",
    "type": "website"
  },
  "imagery": {
    "illustrationStyle": "neon-y2k-chrome",
    "photoStyle": "ảnh sân khấu nhỏ ánh đèn hồng–cyan, không khói thuốc, không rượu bia",
    "mascots": [
      "phim-gay",
      "trong",
      "not-nhac",
      "loa"
    ]
  },
  "sources": {
    "tokens": "themes/san-khau-neon/tokens.css",
    "docs": "guideline/index.html",
    "note": "fictional demo brand — demo.conan1.com Phase 2"
  },
  "approvedAt": "2026-10-25",
  "approvedBy": "auto-approved (fictional demo brand, approved by Dac Nguyen in chat)"
}