{
  "$schema": "web-standards/design-system@2",
  "version": "1.0.0",
  "brand": {
    "name": "Lụa Phố",
    "shortName": "Lụa Phố",
    "legalName": "Lụa Phố (giả lập)",
    "tagline": "Áo dài lụa, mặc được mỗi ngày",
    "description": "Thời trang lụa Việt hiện đại: áo dài cách tân, khăn lụa, xưởng may đo và lớp nhuộm thủ công cuối tuần.",
    "url": "https://luapho.vn",
    "domain": "luapho.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN"
    ],
    "voice": [
      "tỉ mỉ",
      "đương đại",
      "ân cần",
      "mộc mạc"
    ],
    "social": {
      "facebook": "https://facebook.com/luapho.demo",
      "instagram": "https://instagram.com/luapho.demo",
      "youtube": "https://youtube.com/@luapho.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 14/48 màu đỏ son; một dải lụa vàng lá uốn hai vòng thành chữ L mềm, đầu dải cắt xiên như mép lụa; wordmark nét đều 4/56, đầu nét tròn"
  },
  "favicon": {
    "themeColor": "#8A2B22",
    "backgroundColor": "#F8F2E7",
    "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": "#8A2B22",
      "onPrimary": "#FFFFFF",
      "secondary": "#C8962E",
      "onSecondary": "#1E1815",
      "bg": "#F8F2E7",
      "surface": "#FFFDF8",
      "fg": "#1E1815",
      "muted": "#5E524A",
      "border": "#DDD2C0",
      "success": "#2F6B3A",
      "warning": "#8A5A00",
      "danger": "#A3271B",
      "info": "#2C4A6E",
      "focus": "#2C4A6E"
    },
    "dark": {
      "primary": "#E89A8A",
      "onPrimary": "#15110F",
      "secondary": "#DDB04F",
      "onSecondary": "#15110F",
      "bg": "#15110F",
      "surface": "#211B18",
      "fg": "#F5EDDF",
      "muted": "#BDB1A3",
      "border": "#3A302A",
      "success": "#8FCB8A",
      "warning": "#E8C16A",
      "danger": "#F08A7E",
      "info": "#9DB8DA",
      "focus": "#9DB8DA"
    }
  },
  "brandColors": [
    {
      "name": "Giấy lụa",
      "hex": "#F8F2E7",
      "role": "Nền đọc — khoảng thở như tấm lụa mộc",
      "use": [
        "nền trang",
        "nền thẻ sản phẩm",
        "mặt sau phiếu số đo"
      ],
      "never": [
        "chữ",
        "nền nút"
      ],
      "share": 50
    },
    {
      "name": "Sơn then",
      "hex": "#1E1815",
      "role": "Chữ và nền sơn mài",
      "use": [
        "chữ thân bài",
        "tiêu đề",
        "nền ảnh sơn mài"
      ],
      "never": [
        "nền lớn ở theme sáng ngoài ảnh"
      ],
      "share": 18
    },
    {
      "name": "Đỏ son",
      "hex": "#8A2B22",
      "role": "Nhận diện và nút chính",
      "use": [
        "ô logo",
        "nút chính",
        "ánh màu dưới lớp sơn"
      ],
      "never": [
        "chữ dài trên nền tối",
        "cảnh báo lỗi"
      ],
      "share": 16
    },
    {
      "name": "Chàm",
      "hex": "#2C4A6E",
      "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í lớn"
      ],
      "share": 6
    },
    {
      "name": "Khói chỉ",
      "hex": "#DDD2C0",
      "role": "Đường kẻ, viền",
      "use": [
        "viền thẻ",
        "đường chia",
        "khung ảnh"
      ],
      "never": [
        "chữ"
      ],
      "share": 4
    },
    {
      "name": "Vàng lá",
      "hex": "#C8962E",
      "role": "Điểm sáng duy nhất mỗi màn — chỉ vàng sơn mài",
      "use": [
        "dải lụa trong logo",
        "viền chỉ vàng",
        "huy hiệu lớp nhuộm"
      ],
      "never": [
        "chữ nhỏ trên nền sáng",
        "nền lớn",
        "nút chính"
      ],
      "share": 6
    }
  ],
  "palettes": [
    {
      "id": "lua-son",
      "name": "Lụa son",
      "note": "Bảng chính: giấy lụa, đỏ son sơn mài, vàng lá",
      "light": {
        "primary": "#8A2B22",
        "onPrimary": "#FFFFFF",
        "secondary": "#C8962E",
        "bg": "#F8F2E7",
        "fg": "#1E1815"
      },
      "dark": {
        "primary": "#E89A8A",
        "onPrimary": "#15110F",
        "secondary": "#DDB04F",
        "bg": "#15110F",
        "fg": "#F5EDDF"
      }
    },
    {
      "id": "cham-nhuom",
      "name": "Chàm nhuộm",
      "note": "Lớp nhuộm chàm: xanh chàm làm chủ, đỏ son phụ",
      "light": {
        "primary": "#2C4A6E",
        "onPrimary": "#FFFFFF",
        "secondary": "#8A2B22",
        "bg": "#F8F2E7",
        "fg": "#1E1815"
      },
      "dark": {
        "primary": "#9DB8DA",
        "onPrimary": "#15110F",
        "secondary": "#E89A8A",
        "bg": "#15110F",
        "fg": "#F5EDDF"
      }
    },
    {
      "id": "cu-nau",
      "name": "Củ nâu",
      "note": "Khăn nhuộm củ nâu: nâu đất làm chủ, chàm phụ",
      "light": {
        "primary": "#6B3A1F",
        "onPrimary": "#FFFFFF",
        "secondary": "#2C4A6E",
        "bg": "#F8F2E7",
        "fg": "#1E1815"
      },
      "dark": {
        "primary": "#D9A27A",
        "onPrimary": "#15110F",
        "secondary": "#9DB8DA",
        "bg": "#15110F",
        "fg": "#F5EDDF"
      }
    }
  ],
  "chart": [
    "#8A2B22",
    "#2C4A6E",
    "#C8962E",
    "#6B3A1F",
    "#2F6B3A"
  ],
  "print": {
    "cmyk": {
      "#8A2B22": "C24 M90 Y88 K22",
      "#1E1815": "C60 M68 Y70 K82",
      "#C8962E": "C20 M40 Y92 K4",
      "#F8F2E7": "C2 M4 Y9 K0",
      "#2C4A6E": "C88 M66 Y30 K14"
    }
  },
  "typography": {
    "families": {
      "sans": "Mulish, system-ui, sans-serif",
      "display": "Playfair Display, Georgia, serif",
      "serif": "Playfair Display, Georgia, serif",
      "mono": "IBM Plex Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "role": "tiêu đề",
        "family": "Playfair Display",
        "weight": 600,
        "vietnamese": true,
        "sample": "Đường may vừa vặn, tà áo nhẹ như gió phố"
      },
      {
        "role": "kể chuyện",
        "family": "Playfair Display",
        "weight": 400,
        "vietnamese": true,
        "sample": "Những dải lụa phơi trong hẻm nhỏ, ửng đỏ dưới ánh đèn lồng mỗi chiều."
      },
      {
        "role": "thân bài",
        "family": "Mulish",
        "weight": 400,
        "vietnamese": true,
        "sample": "Lụa tơ tằm Nha Xá 16 momme, giặt tay dưới 30 °C; số đo được ghi lại để lần sau bạn đặt may khỏi phải đo lại."
      },
      {
        "role": "số/mã (mono)",
        "family": "IBM Plex Mono",
        "weight": 500,
        "vietnamese": true,
        "sample": "Vai 37 cm · Eo 68 cm · Thử áo ngày 30/10 — Đã nhận số đo"
      }
    ],
    "effects": [
      {
        "id": "wave-in",
        "name": "Lụa bay",
        "durationMs": 900,
        "reducedMotion": "off",
        "use": "tiêu đề hero"
      },
      {
        "id": "typewriter",
        "name": "Đường may chạy",
        "durationMs": 1200,
        "reducedMotion": "off",
        "use": "số đo, mã đơn may"
      }
    ],
    "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": "4px",
    "md": "8px",
    "lg": "14px",
    "xl": "24px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px rgb(30 24 21 / .07)",
    "md": "0 6px 18px rgb(30 24 21 / .10)",
    "lg": "0 18px 44px rgb(30 24 21 / .14)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1200px"
  },
  "motion": {
    "fast": "160ms",
    "base": "280ms",
    "slow": "520ms",
    "durations": {
      "fast": 160,
      "base": 280,
      "slow": 520,
      "steep": 900
    },
    "easing": "cubic-bezier(.3,.6,.25,1)",
    "easings": {
      "drape": "cubic-bezier(.3,.6,.25,1)",
      "flutter": "cubic-bezier(.45,0,.2,1)"
    },
    "principle": "Như lụa rủ: chuyển động trượt mềm rồi lắng xuống, gợn nhẹ ở cuối, không nảy cứng.",
    "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": "md",
      "note": "Nút chính đỏ son; loading = sợi chỉ chạy vòng; done = mũi chỉ tích"
    },
    "chip": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled"
      ],
      "use": "lọc cỡ áo, chất lụa, chọn lịch lớp nhuộm"
    },
    "callout": {
      "types": [
        "info",
        "tip",
        "success",
        "warning",
        "danger"
      ],
      "character": true,
      "note": "Lời nhân vật: Tằm Tơ kể về chất lụa, Kim Chỉ nhắc số đo"
    },
    "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": "Vòng eo (cm)",
      "help": "Đo sát người, qua rốn, thở bình thường",
      "error": "Số đo cần từ 50 đến 120 cm — ví dụ: 68"
    },
    "progress": {
      "kinds": [
        "bar",
        "steps",
        "ring"
      ],
      "example": "Bước 2/4: cắt lụa theo rập"
    },
    "verdict": {
      "kinds": [
        "vừa",
        "cần chỉnh"
      ],
      "stamp": "con dấu tròn chỉ vàng",
      "example": "Vai vừa — chỉ cần nới eo 1 cm"
    },
    "streak": {
      "unit": "ngày mặc lụa",
      "icon": "flame",
      "example": "5 ngày liên tiếp mặc áo dài đi làm"
    },
    "roadmap": {
      "steps": [
        "Chọn lụa",
        "Lấy số đo",
        "Thử áo",
        "Nhận áo"
      ],
      "example": "Lộ trình may đo 5 ngày"
    }
  },
  "icons": {
    "path": "icons/",
    "sprite": "icons/sprite.svg",
    "grid": 24,
    "stroke": 1.75,
    "linecap": "round",
    "linejoin": "round",
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "silk-ribbon-flow",
    "constructionRules": "Nét 1.75 đều như sợi chỉ; mọi đường thẳng dài được uốn nhẹ như dải lụa rủ (cong 0.4–0.8 px), mỗi icon có một đuôi dải lụa nhỏ cuộn lơi ở một góc; góc bo r 1.5; tô lòng khi bật bằng đỏ son nhạt, quầng vàng lá.",
    "vars": [
      "--icon-fill",
      "--icon-glow"
    ],
    "set": "lua-pho/silk-ribbon-flow"
  },
  "mascots": [
    {
      "id": "tam-to",
      "name": "Tằm Tơ",
      "main": true
    },
    {
      "id": "kim-chi",
      "name": "Kim Chỉ"
    },
    {
      "id": "den-hoa",
      "name": "Đèn Hoa"
    },
    {
      "id": "ong-chi",
      "name": "Ống Chỉ"
    }
  ],
  "imagery": {
    "illustrationStyle": "lacquer-modern",
    "photoStyle": "ảnh thật chụp ánh chiều trong xưởng, chất lụa rõ thớ, không lọc màu",
    "mascot3d": "felt"
  },
  "approvedAt": "2026-10-25",
  "approvedBy": "auto-approved (fictional demo brand, approved by Dac Nguyen in chat)",
  "og": {
    "defaultImage": "social/og-default.png",
    "imageAlt": "Lụa Phố — Áo dài lụa, mặc được mỗi ngày",
    "template": "social/templates/thumbnail.html",
    "titleSuffix": " · Lụa Phố",
    "twitterSite": "",
    "type": "website"
  },
  "sources": {
    "tokens": "themes/son-mai-pho/tokens.css",
    "docs": "guideline/index.html"
  },
  "themes": [
    "son-mai-pho"
  ]
}