{
  "$schema": "web-standards/design-system@2",
  "version": "1.0.0",
  "brand": {
    "name": "Trà Sương",
    "shortName": "Trà Sương",
    "legalName": "Trà Sương (giả lập)",
    "tagline": "Pha một ấm trà Việt, đúng bốn phút",
    "description": "Tiệm trà và lớp pha trà Việt: trà Shan tuyết, trà sen ướp, workshop pha trà cuối tuần.",
    "url": "https://trasuong.vn",
    "domain": "trasuong.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN"
    ],
    "voice": [
      "chậm rãi",
      "tỉ mỉ",
      "ấm áp",
      "mộc"
    ],
    "social": {
      "facebook": "https://facebook.com/trasuong.demo",
      "instagram": "https://instagram.com/trasuong.demo",
      "youtube": "https://youtube.com/@trasuong.demo"
    }
  },
  "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 (24/48 lưới mark)",
    "minSize": "mark 16px · logo đầy đủ 120px ngang",
    "construction": "Ô vuông bo 12/48, ấm trà nét cọ mảnh 3.5/48, sợi hơi nước hình chữ S (Sương) bốc từ núm nắp; wordmark nét đều 4/56 đầu tròn"
  },
  "favicon": {
    "themeColor": "#3D5A36",
    "backgroundColor": "#FAF6EC",
    "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"
  },
  "color": {
    "light": {
      "primary": "#3D5A36",
      "onPrimary": "#FFFFFF",
      "secondary": "#A4482A",
      "onSecondary": "#FFFFFF",
      "bg": "#FAF6EC",
      "surface": "#FFFFFF",
      "fg": "#1F2A22",
      "muted": "#5A5F55",
      "border": "#D9D3C2",
      "success": "#2F6B3A",
      "warning": "#8A5A00",
      "danger": "#A3271B",
      "info": "#2B5F55",
      "focus": "#2B5F55"
    },
    "dark": {
      "primary": "#9CC28E",
      "onPrimary": "#141A15",
      "secondary": "#D98A6C",
      "onSecondary": "#141A15",
      "bg": "#141A15",
      "surface": "#1D251E",
      "fg": "#F3EFE4",
      "muted": "#B4B7A8",
      "border": "#334036",
      "success": "#8FCB8A",
      "warning": "#E8C16A",
      "danger": "#F08A7E",
      "info": "#8FC7B8",
      "focus": "#8FC7B8"
    }
  },
  "brandColors": [
    {
      "name": "Giấy dó",
      "hex": "#FAF6EC",
      "role": "Nền đọc — khoảng giấy thở",
      "use": [
        "nền trang",
        "nền ảnh màu nước",
        "mặt sau thẻ cách pha"
      ],
      "never": [
        "chữ",
        "nền nút"
      ],
      "share": 52
    },
    {
      "name": "Mực trà",
      "hex": "#1F2A22",
      "role": "Chữ",
      "use": [
        "chữ thân bài",
        "tiêu đề",
        "wordmark"
      ],
      "never": [
        "nền lớn ở theme sáng"
      ],
      "share": 14
    },
    {
      "name": "Lá trà",
      "hex": "#3D5A36",
      "role": "Nhận diện và nút chính",
      "use": [
        "ô logo",
        "nút chính",
        "vệt màu nước chủ đạo"
      ],
      "never": [
        "chữ nhỏ dưới 14px trên nền tối"
      ],
      "share": 16
    },
    {
      "name": "Rêu sương",
      "hex": "#2B5F55",
      "role": "Liên kết, thông tin, focus",
      "use": [
        "liên kết",
        "vòng focus",
        "hộp thông tin"
      ],
      "never": [
        "nút chính",
        "trang trí"
      ],
      "share": 6
    },
    {
      "name": "Khói sương",
      "hex": "#D9D3C2",
      "role": "Đường kẻ, viền",
      "use": [
        "viền thẻ",
        "đường chia",
        "khung ảnh"
      ],
      "never": [
        "chữ"
      ],
      "share": 8
    },
    {
      "name": "Đất nung",
      "hex": "#A4482A",
      "role": "Điểm ấm duy nhất mỗi màn",
      "use": [
        "huy hiệu workshop",
        "vệt màu nước ấm",
        "một chỗ nhấn mỗi màn"
      ],
      "never": [
        "nền lớn",
        "chữ dài",
        "nút chính"
      ],
      "share": 4
    }
  ],
  "palettes": [
    {
      "id": "suong-som",
      "name": "Sương sớm",
      "note": "Bảng chính: giấy dó, lá trà, đất nung",
      "light": {
        "primary": "#3D5A36",
        "onPrimary": "#FFFFFF",
        "secondary": "#A4482A",
        "bg": "#FAF6EC",
        "fg": "#1F2A22"
      },
      "dark": {
        "primary": "#9CC28E",
        "onPrimary": "#141A15",
        "secondary": "#D98A6C",
        "bg": "#141A15",
        "fg": "#F3EFE4"
      }
    },
    {
      "id": "tra-sen",
      "name": "Trà sen",
      "note": "Mùa sen Tây Hồ: tím sen làm chủ, lá trà phụ",
      "light": {
        "primary": "#7A3B4F",
        "onPrimary": "#FFFFFF",
        "secondary": "#3D5A36",
        "bg": "#FAF6EC",
        "fg": "#1F2A22"
      },
      "dark": {
        "primary": "#E8A3B5",
        "onPrimary": "#141A15",
        "secondary": "#9CC28E",
        "bg": "#141A15",
        "fg": "#F3EFE4"
      }
    },
    {
      "id": "shan-tuyet",
      "name": "Shan tuyết",
      "note": "Trà cổ thụ Hà Giang: nâu hổ phách, rêu sương",
      "light": {
        "primary": "#6A4A1E",
        "onPrimary": "#FFFFFF",
        "secondary": "#2B5F55",
        "bg": "#FAF6EC",
        "fg": "#1F2A22"
      },
      "dark": {
        "primary": "#D9B26A",
        "onPrimary": "#141A15",
        "secondary": "#8FC7B8",
        "bg": "#141A15",
        "fg": "#F3EFE4"
      }
    }
  ],
  "chart": [
    "#3D5A36",
    "#A4482A",
    "#2B5F55",
    "#D9B26A",
    "#7A3B4F"
  ],
  "print": {
    "cmyk": {
      "#3D5A36": "C62 M31 Y78 K40",
      "#1F2A22": "C72 M52 Y70 K74",
      "#A4482A": "C22 M80 Y94 K14",
      "#FAF6EC": "C1 M2 Y7 K0"
    }
  },
  "typography": {
    "families": {
      "sans": "Be Vietnam Pro, system-ui, sans-serif",
      "display": "Lora, Georgia, serif",
      "serif": "Lora, Georgia, serif",
      "mono": "JetBrains Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "role": "tiêu đề",
        "family": "Lora",
        "weight": 600,
        "vietnamese": true,
        "sample": "Đợi nước nguội xuống 85 độ, rồi mới rót vào ấm"
      },
      {
        "role": "kể chuyện",
        "family": "Lora",
        "weight": 400,
        "vietnamese": true,
        "sample": "Sương còn đọng trên búp trà cổ thụ ở Tà Xùa, những lá chè bạc trắng như phủ tuyết."
      },
      {
        "role": "thân bài",
        "family": "Be Vietnam Pro",
        "weight": 400,
        "vietnamese": true,
        "sample": "Mỗi người tự pha ấm của mình; nhiệt kế, ấm và chén đều được chuẩn bị sẵn, kể cả những chiếc chén mỏng như vỏ trứng."
      },
      {
        "role": "số/mã (mono)",
        "family": "JetBrains Mono",
        "weight": 500,
        "vietnamese": true,
        "sample": "5 g · 150 ml · 85 °C · hãm 40 giây — Đã sẵn sàng"
      }
    ],
    "effects": [
      {
        "id": "wave-in",
        "name": "Hơi nước bốc",
        "durationMs": 900,
        "reducedMotion": "off",
        "use": "tiêu đề hero"
      },
      {
        "id": "typewriter",
        "name": "Đếm giờ hãm",
        "durationMs": 1200,
        "reducedMotion": "off",
        "use": "đồng hồ hãm trà"
      }
    ],
    "scale": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "19px",
      "xl": "22px",
      "2xl": "26px",
      "3xl": "32px",
      "4xl": "40px",
      "5xl": "52px"
    },
    "lineHeight": {
      "tight": 1.2,
      "normal": 1.6,
      "relaxed": 1.75
    },
    "weights": [
      400,
      500,
      600
    ]
  },
  "space": {
    "0": "0",
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px",
    "12": "48px",
    "16": "64px",
    "24": "96px"
  },
  "radius": {
    "sm": "6px",
    "md": "10px",
    "lg": "16px",
    "xl": "28px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px rgb(31 42 34 / .06)",
    "md": "0 6px 16px rgb(31 42 34 / .08)",
    "lg": "0 16px 40px rgb(31 42 34 / .12)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1200px"
  },
  "motion": {
    "fast": "160ms",
    "base": "260ms",
    "slow": "480ms",
    "durations": {
      "fast": 160,
      "base": 260,
      "slow": 480,
      "steep": 900
    },
    "easing": "cubic-bezier(.25,.7,.3,1)",
    "easings": {
      "pour": "cubic-bezier(.25,.7,.3,1)",
      "steam": "cubic-bezier(.4,0,.2,1)"
    },
    "principle": "Chậm như rót trà: chuyển động mềm, không nảy mạnh; hơi nước bay lên rồi tan.",
    "respectsReducedMotion": true,
    "pauseOffscreen": true
  },
  "components": {
    "minTouchPx": 44,
    "button": {
      "interactive": true,
      "levels": [
        "primary",
        "secondary",
        "ghost",
        "danger"
      ],
      "sizes": [
        "sm",
        "md",
        "lg"
      ],
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "loading",
        "done"
      ],
      "emphasisMaxPerPage": 1,
      "radius": "full",
      "note": "Nút chính màu lá trà; loading = vòng hơi nước quay; done = dấu tích nét cọ"
    },
    "chip": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled"
      ],
      "use": "lọc loại trà, chọn lịch workshop"
    },
    "callout": {
      "types": [
        "info",
        "tip",
        "success",
        "warning",
        "danger"
      ],
      "character": true,
      "note": "Lời nhân vật: Ấm Sương nói mẹo pha, Lá Non nhắc nhiệt độ"
    },
    "toast": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled"
      ],
      "timerMs": 5000,
      "pauseOnHover": true,
      "ariaLive": "polite"
    },
    "dialog": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled"
      ],
      "escCloses": true,
      "returnsFocus": true
    },
    "input": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled"
      ],
      "label": "Số người tham gia",
      "help": "Mỗi lớp tối đa 8 người",
      "error": "Lớp chỉ còn 3 chỗ — ví dụ: nhập 2 hoặc 3"
    },
    "progress": {
      "kinds": [
        "bar",
        "steps",
        "ring"
      ],
      "example": "Bước 2/4: tráng ấm"
    },
    "verdict": {
      "kinds": [
        "ngon",
        "cần chỉnh"
      ],
      "stamp": "con dấu tròn nét cọ",
      "example": "Ấm này ngọt hậu — giữ 85 °C lần sau"
    },
    "streak": {
      "unit": "ngày pha trà",
      "icon": "flame",
      "example": "7 ngày liên tiếp pha một ấm"
    },
    "roadmap": {
      "steps": [
        "Làm quen",
        "Pha trà xanh",
        "Pha Shan tuyết",
        "Ướp trà sen"
      ],
      "example": "Lộ trình 4 buổi workshop"
    }
  },
  "icons": {
    "path": "icons/",
    "sprite": "icons/sprite.svg",
    "grid": 24,
    "stroke": 1.6,
    "linecap": "round",
    "linejoin": "round",
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "ink-brush-thin",
    "constructionRules": "Nét cọ mảnh 1.6 đều, đầu nét tròn như đầu bút lông; đường cong mở (không khép kín hết), mỗi icon có một khe hở nhỏ như nét cọ nhấc lên; bo góc r 2; tô lòng khi bật bằng màu lá trà nhạt.",
    "vars": [
      "--icon-fill",
      "--icon-glow"
    ],
    "set": "tra-suong/ink-brush-thin"
  },
  "mascots": [
    {
      "id": "am-suong",
      "name": "Ấm Sương",
      "main": true
    },
    {
      "id": "la-non",
      "name": "Lá Non"
    },
    {
      "id": "may-hoi",
      "name": "Mây Hơi"
    },
    {
      "id": "chen-nho",
      "name": "Chén Nhỏ"
    }
  ],
  "imagery": {
    "illustrationStyle": "watercolor-bloom",
    "photoStyle": "ảnh thật chụp ánh sáng cửa sổ, không lọc màu",
    "mascot3d": "carved-wood"
  },
  "approvedAt": "2026-10-25",
  "approvedBy": "auto-approved (fictional demo brand, approved by Dac Nguyen in chat)",
  "og": {
    "defaultImage": "social/og-default.png",
    "imageAlt": "Trà Sương — Pha một ấm trà Việt, đúng bốn phút",
    "template": "social/templates/thumbnail.html",
    "titleSuffix": " · Trà Sương",
    "twitterSite": "",
    "type": "website"
  },
  "sources": {
    "tokens": "themes/suong-som/tokens.css",
    "docs": "guideline/index.html"
  },
  "themes": [
    "suong-som"
  ]
}