{
  "$schema": "web-standards/design-system@2",
  "version": "1.0.0",
  "brand": {
    "name": "Nụ Cười Xinh",
    "shortName": "Nụ Cười Xinh",
    "legalName": "Nụ Cười Xinh (giả lập)",
    "tagline": "Cả nhà khám răng, không ai sợ",
    "description": "Phòng khám nha khoa gia đình: khám định kỳ 6 tháng, niềng răng cho tuổi teen, nha khoa trẻ em không sợ hãi.",
    "url": "https://nucuoixinh.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN"
    ],
    "voice": [
      "dịu dàng",
      "rõ ràng",
      "vui tươi",
      "đáng tin"
    ]
  },
  "color": {
    "light": {
      "primary": "#0B6B73",
      "onPrimary": "#FFFFFF",
      "secondary": "#A8443A",
      "onSecondary": "#FFFFFF",
      "bg": "#F5FAF9",
      "surface": "#FFFFFF",
      "fg": "#12324A",
      "muted": "#46606F",
      "border": "#D3E6E4",
      "success": "#1E7A4C",
      "warning": "#8A5A00",
      "danger": "#B3261E",
      "info": "#2B5C8A",
      "focus": "#2B5C8A"
    },
    "dark": {
      "primary": "#7DDCD3",
      "onPrimary": "#0D2233",
      "secondary": "#FF9F90",
      "onSecondary": "#0D2233",
      "bg": "#0D2233",
      "surface": "#15314A",
      "fg": "#F2FAF9",
      "muted": "#A8C4CC",
      "border": "#2C4C63",
      "success": "#7FD6A5",
      "warning": "#F0B44C",
      "danger": "#FF8A80",
      "info": "#93C0EA",
      "focus": "#F0B44C"
    }
  },
  "mode": "light",
  "brandColors": [
    {
      "name": "Trắng men",
      "hex": "#F5FAF9",
      "role": "Nền đọc — sạch như men răng",
      "use": [
        "nền trang",
        "nền thẻ hồ sơ"
      ],
      "never": [
        "chữ",
        "nền nút"
      ],
      "share": 50
    },
    {
      "name": "Xanh biển sâu",
      "hex": "#12324A",
      "role": "Chữ và wordmark",
      "use": [
        "chữ thân",
        "tiêu đề",
        "wordmark"
      ],
      "never": [
        "nền lớn ở theme sáng"
      ],
      "share": 16
    },
    {
      "name": "Bạc hà đậm",
      "hex": "#0B6B73",
      "role": "Hành động chính và chiếc răng trong logo",
      "use": [
        "nút chính",
        "logo mark",
        "liên kết đang chọn"
      ],
      "never": [
        "chữ dài",
        "nền toàn trang"
      ],
      "share": 12
    },
    {
      "name": "Kính bạc hà",
      "hex": "#9FE3D8",
      "role": "Lòng kính mờ của icon, mascot và mảng nền phụ",
      "use": [
        "vùng tô icon is-active",
        "thân kính mascot",
        "nền huy hiệu"
      ],
      "never": [
        "chữ",
        "viền ô nhập"
      ],
      "share": 10
    },
    {
      "name": "Sương phòng khám",
      "hex": "#D3E6E4",
      "role": "Đường kẻ, viền, nền ô nhập",
      "use": [
        "viền thẻ",
        "đường chia",
        "nền ô nhập"
      ],
      "never": [
        "chữ"
      ],
      "share": 6
    },
    {
      "name": "Hồng san hô",
      "hex": "#FF8F7E",
      "role": "Điểm vui duy nhất — tia lấp lánh, sao biển, khen ngợi",
      "use": [
        "tia lấp lánh trong logo",
        "huy hiệu khen",
        "má hồng nhân vật"
      ],
      "never": [
        "chữ trên nền sáng",
        "nền nút",
        "cảnh báo"
      ],
      "share": 6
    }
  ],
  "palettes": [
    {
      "id": "bien-sang",
      "name": "Biển sáng (chính)",
      "light": {
        "primary": "#0B6B73",
        "onPrimary": "#FFFFFF",
        "secondary": "#A8443A",
        "onSecondary": "#FFFFFF",
        "bg": "#F5FAF9",
        "surface": "#FFFFFF",
        "fg": "#12324A",
        "muted": "#46606F",
        "border": "#D3E6E4",
        "success": "#1E7A4C",
        "warning": "#8A5A00",
        "danger": "#B3261E",
        "info": "#2B5C8A",
        "focus": "#2B5C8A"
      },
      "dark": {
        "primary": "#7DDCD3",
        "onPrimary": "#0D2233",
        "secondary": "#FF9F90",
        "onSecondary": "#0D2233",
        "bg": "#0D2233",
        "surface": "#15314A",
        "fg": "#F2FAF9",
        "muted": "#A8C4CC",
        "border": "#2C4C63",
        "success": "#7FD6A5",
        "warning": "#F0B44C",
        "danger": "#FF8A80",
        "info": "#93C0EA",
        "focus": "#F0B44C"
      }
    },
    {
      "id": "san-ho-am",
      "name": "San hô ấm",
      "light": {
        "primary": "#A8443A",
        "onPrimary": "#FFFFFF",
        "secondary": "#0B6B73",
        "onSecondary": "#FFFFFF",
        "bg": "#F5FAF9",
        "surface": "#FFFFFF",
        "fg": "#12324A",
        "muted": "#46606F",
        "border": "#D3E6E4",
        "success": "#1E7A4C",
        "warning": "#8A5A00",
        "danger": "#B3261E",
        "info": "#2B5C8A",
        "focus": "#0B6B73"
      },
      "dark": {
        "primary": "#FF9F90",
        "onPrimary": "#0D2233",
        "secondary": "#7DDCD3",
        "onSecondary": "#0D2233",
        "bg": "#0D2233",
        "surface": "#15314A",
        "fg": "#F2FAF9",
        "muted": "#A8C4CC",
        "border": "#2C4C63",
        "success": "#7FD6A5",
        "warning": "#F0B44C",
        "danger": "#FF8A80",
        "info": "#93C0EA",
        "focus": "#7DDCD3"
      }
    },
    {
      "id": "dem-yen",
      "name": "Đêm yên giấc",
      "light": {
        "primary": "#12324A",
        "onPrimary": "#F5FAF9",
        "secondary": "#A8443A",
        "onSecondary": "#FFFFFF",
        "bg": "#FFFFFF",
        "surface": "#F5FAF9",
        "fg": "#12324A",
        "muted": "#46606F",
        "border": "#D3E6E4",
        "success": "#1E7A4C",
        "warning": "#8A5A00",
        "danger": "#B3261E",
        "info": "#2B5C8A",
        "focus": "#2B5C8A"
      },
      "dark": {
        "primary": "#9FE3D8",
        "onPrimary": "#0D2233",
        "secondary": "#FF9F90",
        "onSecondary": "#0D2233",
        "bg": "#15314A",
        "surface": "#0D2233",
        "fg": "#F2FAF9",
        "muted": "#A8C4CC",
        "border": "#2C4C63",
        "success": "#7FD6A5",
        "warning": "#F0B44C",
        "danger": "#FF8A80",
        "info": "#93C0EA",
        "focus": "#F0B44C"
      }
    }
  ],
  "typography": {
    "families": {
      "sans": "Be Vietnam Pro, system-ui, sans-serif",
      "display": "Baloo 2, Be Vietnam Pro, system-ui, sans-serif",
      "mono": "JetBrains Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "family": "Baloo 2",
        "role": "Tiêu đề trang, tên chương trình, lời nhân vật (700–800)",
        "weight": 800,
        "vietnamese": true,
        "sample": "Bé Răng Xinh đã sẵn sàng — mình cùng đếm răng nhé!"
      },
      {
        "family": "Be Vietnam Pro",
        "role": "Thân bài, hướng dẫn chăm sóc, giao diện đặt lịch",
        "weight": 400,
        "vietnamese": true,
        "sample": "Bước 2: Chải mặt trong của răng hàm, mỗi vùng 10 giây. Đừng chải quá mạnh — nướu sẽ ửng đỏ đấy, Đức ơi."
      },
      {
        "family": "JetBrains Mono",
        "role": "Số liệu (mono): giờ hẹn, phút khám, giai đoạn niềng, giá mẫu",
        "weight": 500,
        "vietnamese": true,
        "sample": "08:30 · 30 phút · Giai đoạn 3/8 · ~350.000đ (giá mẫu) · Đã nhắc ự"
      }
    ],
    "effects": [
      {
        "id": "sparkle-in",
        "name": "Chữ lấp lánh",
        "durationMs": 700,
        "reducedMotion": "off"
      },
      {
        "id": "bubble-rise",
        "name": "Chữ bong bóng kem",
        "durationMs": 900,
        "reducedMotion": "off"
      },
      {
        "id": "smile-draw",
        "name": "Nét cười vẽ dần",
        "durationMs": 1100,
        "reducedMotion": "off"
      }
    ],
    "scale": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "32px",
      "4xl": "40px",
      "5xl": "56px"
    },
    "lineHeight": {
      "tight": 1.15,
      "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": "10px",
    "md": "16px",
    "lg": "24px",
    "xl": "36px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px rgb(18 50 74 / .08)",
    "md": "0 8px 24px rgb(18 50 74 / .10), inset 0 1px 0 rgb(255 255 255 / .6)",
    "lg": "0 18px 44px rgb(18 50 74 / .16)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "motion": {
    "durations": {
      "fast": "150ms",
      "base": "260ms",
      "slow": "520ms"
    },
    "easing": "cubic-bezier(.2,.9,.3,1.2)",
    "respectsReducedMotion": true,
    "pauseOffscreen": true,
    "signature": [
      "tia lấp lánh khi hoàn thành",
      "bong bóng kem nổi lên",
      "nút nhún như bàn chải lông mềm"
    ]
  },
  "icons": {
    "path": "icons/",
    "grid": 24,
    "stroke": 1.75,
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "soft-glass-outline",
    "constructionRules": "Nét tròn 1.75 đầu tròn khớp tròn; mọi góc bo ≥ 2.5 px (hình viên kẹo); is-active tô lòng kính bạc hà (class f) + một vệt sáng cong ngắn ở góc trên-trái (class g, nét 1.25 trắng) như mặt kính mờ; tối đa 1 motif nha khoa mỗi icon; lỗ hở ≥ 1.5 px",
    "set": "nu-cuoi-xinh",
    "stateLook": {
      "rest": "nét xanh biển sâu, không tô",
      "active": "lòng kính bạc hà + vệt sáng, quầng san hô",
      "animated": "chuyển động riêng: lấp lánh, nhún, chải qua lại"
    }
  },
  "mascots": [
    {
      "id": "rang-xinh"
    },
    {
      "id": "ban-chai"
    },
    {
      "id": "sao-bien"
    },
    {
      "id": "kem-bong"
    }
  ],
  "components": {
    "minTouchPx": 44,
    "material": "kính mờ: thẻ nền trắng men có viền sáng 1 px phía trên và bóng mềm; nút bo tròn như viên kẹo bạc hà, bấm thì lún 1 px",
    "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",
        "care"
      ],
      "character": true,
      "characterLines": {
        "tip": "Răng Xinh: Chải theo vòng tròn nhỏ, như vẽ bong bóng ấy.",
        "care": "Sao Biển: Bé thấy mỏi thì giơ tay nhé, cả phòng sẽ chờ bé."
      }
    },
    "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": "Sạch bóng!",
        "wrong": "Chải thêm chút nữa"
      }
    },
    "streak": {
      "days": 7,
      "label": "ngày chải răng đủ 2 phút"
    },
    "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 đủ 120px ngang",
    "construction": "Lưới 48: chiếc răng hai chân bo tròn rộng 38, nét cười trắng men 3.5 (= 1/14 chiều cao) cắt ngang thân, tia lấp lánh san hô 4 cánh tách khỏi răng 2 đơn vị ở góc trên phải; wordmark đơn nét 5 đầu tròn, dấu tiếng Việt cùng nét"
  },
  "favicon": {
    "themeColor": "#0B6B73",
    "backgroundColor": "#F5FAF9",
    "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"
  },
  "sources": [
    "fictional demo brand — demo.conan1.com Phase 2"
  ],
  "approvedAt": "2026-10-25",
  "approvedBy": "auto-approved (fictional demo brand, approved by Dac Nguyen in chat)"
}