{
  "$schema": "web-standards/design-system@2",
  "version": "1.0.0",
  "brand": {
    "name": "Xe Lá",
    "shortName": "Xe Lá",
    "legalName": "Xe Lá (giả lập)",
    "tagline": "Đạp chậm qua phố, dừng ở ngõ quen",
    "description": "Thuê xe đạp theo giờ, xe điện trợ lực và tour đạp xe phố cổ, ngoại ô có hướng dẫn viên đạp cùng — nhóm tối đa tám người.",
    "url": "https://xela.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN",
      "en_US"
    ],
    "voice": [
      "thong thả",
      "rõ ràng",
      "an toàn",
      "tò mò"
    ]
  },
  "color": {
    "light": {
      "primary": "#0E6B5C",
      "onPrimary": "#FFFFFF",
      "secondary": "#FF6B4A",
      "onSecondary": "#1F2A2A",
      "bg": "#F6F1E4",
      "surface": "#FFFFFF",
      "fg": "#1F2A2A",
      "muted": "#5A6461",
      "border": "#DCD3BE",
      "success": "#0E6B5C",
      "warning": "#8A5A00",
      "danger": "#B42318",
      "info": "#2F5D8A",
      "focus": "#2F5D8A"
    },
    "dark": {
      "primary": "#5CC3AE",
      "onPrimary": "#15201E",
      "secondary": "#FF8A6E",
      "onSecondary": "#15201E",
      "bg": "#15201E",
      "surface": "#1E2B28",
      "fg": "#F6F1E4",
      "muted": "#C2CCC8",
      "border": "#3A4A46",
      "success": "#5CC3AE",
      "warning": "#E8B04A",
      "danger": "#F87171",
      "info": "#8DB8D6",
      "focus": "#E8B04A"
    }
  },
  "mode": "light",
  "brandColors": [
    {
      "name": "Giấy riso",
      "hex": "#F6F1E4",
      "role": "Nền giấy in — mọi trang, bản đồ, poster",
      "use": [
        "nền trang",
        "nền bản đồ in",
        "nền poster"
      ],
      "never": [
        "chữ",
        "nền nút"
      ],
      "share": 50
    },
    {
      "name": "Mực than",
      "hex": "#1F2A2A",
      "role": "Chữ và wordmark",
      "use": [
        "chữ thân",
        "tiêu đề",
        "wordmark"
      ],
      "never": [
        "nền lớn ở theme sáng"
      ],
      "share": 14
    },
    {
      "name": "Mực lá",
      "hex": "#0E6B5C",
      "role": "Trống mực A: hành động chính và bánh xe trong logo",
      "use": [
        "nút chính",
        "bánh xe logo",
        "đường tuyến trên bản đồ"
      ],
      "never": [
        "chữ dài",
        "cảnh báo"
      ],
      "share": 12
    },
    {
      "name": "Rơm",
      "hex": "#DCD3BE",
      "role": "Đường kẻ, viền, mép giấy",
      "use": [
        "viền thẻ",
        "đường chia",
        "nền ô nhập"
      ],
      "never": [
        "chữ"
      ],
      "share": 8
    },
    {
      "name": "Cam riso",
      "hex": "#FF6B4A",
      "role": "Trống mực B: điểm nhấn duy nhất — chiếc lá, điểm dừng, huy hiệu",
      "use": [
        "lá trong logo",
        "ghim điểm dừng",
        "nút phụ chữ Mực than"
      ],
      "never": [
        "chữ trên nền giấy",
        "nền toàn trang"
      ],
      "share": 8
    },
    {
      "name": "Đêm đê",
      "hex": "#15201E",
      "role": "Nền tối — tour đêm, chân trang",
      "use": [
        "nền theme tối",
        "chân trang"
      ],
      "never": [
        "chữ trên nền tối"
      ],
      "share": 6
    },
    {
      "name": "Lá non",
      "hex": "#5CC3AE",
      "role": "Mực lá trên nền tối",
      "use": [
        "nút chính ở nền tối",
        "bánh xe logo trên nền tối"
      ],
      "never": [
        "chữ trên nền giấy"
      ],
      "share": 2
    }
  ],
  "palettes": [
    {
      "id": "giay-riso",
      "name": "Giấy riso (chính)",
      "light": {
        "primary": "#0E6B5C",
        "onPrimary": "#FFFFFF",
        "secondary": "#FF6B4A",
        "onSecondary": "#1F2A2A",
        "bg": "#F6F1E4",
        "surface": "#FFFFFF",
        "fg": "#1F2A2A",
        "muted": "#5A6461",
        "border": "#DCD3BE",
        "success": "#0E6B5C",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#2F5D8A",
        "focus": "#2F5D8A"
      },
      "dark": {
        "primary": "#5CC3AE",
        "onPrimary": "#15201E",
        "secondary": "#FF8A6E",
        "onSecondary": "#15201E",
        "bg": "#15201E",
        "surface": "#1E2B28",
        "fg": "#F6F1E4",
        "muted": "#C2CCC8",
        "border": "#3A4A46",
        "success": "#5CC3AE",
        "warning": "#E8B04A",
        "danger": "#F87171",
        "info": "#8DB8D6",
        "focus": "#E8B04A"
      }
    },
    {
      "id": "chieu-de",
      "name": "Chiều trên đê",
      "light": {
        "primary": "#1F2A2A",
        "onPrimary": "#F6F1E4",
        "secondary": "#FF6B4A",
        "onSecondary": "#1F2A2A",
        "bg": "#F6F1E4",
        "surface": "#FFFFFF",
        "fg": "#1F2A2A",
        "muted": "#5A6461",
        "border": "#DCD3BE",
        "success": "#0E6B5C",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#2F5D8A",
        "focus": "#0E6B5C"
      },
      "dark": {
        "primary": "#FF8A6E",
        "onPrimary": "#15201E",
        "secondary": "#5CC3AE",
        "onSecondary": "#15201E",
        "bg": "#15201E",
        "surface": "#1E2B28",
        "fg": "#F6F1E4",
        "muted": "#C2CCC8",
        "border": "#3A4A46",
        "success": "#5CC3AE",
        "warning": "#E8B04A",
        "danger": "#F87171",
        "info": "#8DB8D6",
        "focus": "#FF8A6E"
      }
    },
    {
      "id": "pho-dem",
      "name": "Phố đêm",
      "light": {
        "primary": "#2F5D8A",
        "onPrimary": "#FFFFFF",
        "secondary": "#FF6B4A",
        "onSecondary": "#1F2A2A",
        "bg": "#FFFFFF",
        "surface": "#F6F1E4",
        "fg": "#1F2A2A",
        "muted": "#5A6461",
        "border": "#DCD3BE",
        "success": "#0E6B5C",
        "warning": "#8A5A00",
        "danger": "#B42318",
        "info": "#2F5D8A",
        "focus": "#0E6B5C"
      },
      "dark": {
        "primary": "#5CC3AE",
        "onPrimary": "#15201E",
        "secondary": "#FF8A6E",
        "onSecondary": "#15201E",
        "bg": "#1E2B28",
        "surface": "#15201E",
        "fg": "#F6F1E4",
        "muted": "#C2CCC8",
        "border": "#3A4A46",
        "success": "#5CC3AE",
        "warning": "#E8B04A",
        "danger": "#F87171",
        "info": "#8DB8D6",
        "focus": "#E8B04A"
      }
    }
  ],
  "typography": {
    "families": {
      "display": "Bricolage Grotesque, Work Sans, system-ui, sans-serif",
      "sans": "Work Sans, system-ui, sans-serif",
      "mono": "Space Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "family": "Bricolage Grotesque",
        "role": "Tiêu đề poster, tên tour, tiêu đề trang (700–800)",
        "weight": 800,
        "vietnamese": true,
        "sample": "Đạp chậm qua phố cổ — ngõ nhỏ, chè đỗ đen và giếng đá ẫm"
      },
      {
        "family": "Work Sans",
        "role": "Thân bài, chỉ dẫn lộ trình, giao diện đặt xe",
        "weight": 400,
        "vietnamese": true,
        "sample": "Rẽ phải ở ngõ Tạm Thương, dắt xe 50 m. Đừng vội — cuối ngõ có giếng cổ, mình dừng ở đó nhé, Đức ơi."
      },
      {
        "family": "Space Mono",
        "role": "Số liệu chuyến đi (mono): km, phút, giá thuê, mã xe",
        "weight": 400,
        "vietnamese": true,
        "sample": "12,4 km · 2 giờ · 6 điểm dừng · 40.000đ/giờ · Xe #LÁ-07 đã trả ự"
      }
    ],
    "effects": [
      {
        "id": "misregister",
        "name": "Chữ lệch khuôn",
        "durationMs": 700,
        "reducedMotion": "off"
      },
      {
        "id": "pedal-in",
        "name": "Chữ đạp vào",
        "durationMs": 900,
        "reducedMotion": "off"
      },
      {
        "id": "ink-stamp",
        "name": "Chữ in mực",
        "durationMs": 500,
        "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": "6px",
    "md": "12px",
    "lg": "18px",
    "xl": "28px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "2px 2px 0 rgb(14 107 92 / .25)",
    "md": "3px 3px 0 rgb(14 107 92 / .3), 0 8px 20px rgb(31 42 42 / .08)",
    "lg": "5px 5px 0 rgb(255 107 74 / .35), 0 14px 32px rgb(31 42 42 / .12)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "motion": {
    "durations": {
      "fast": "150ms",
      "base": "260ms",
      "slow": "520ms"
    },
    "easing": "cubic-bezier(.25,1.2,.5,1)",
    "respectsReducedMotion": true,
    "pauseOffscreen": true,
    "signature": [
      "bánh xe lăn",
      "lá rơi chao nhẹ",
      "lớp mực lệch khuôn rồi khớp lại"
    ]
  },
  "icons": {
    "path": "icons/",
    "grid": 24,
    "stroke": 1.75,
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "riso-duotone-offset",
    "constructionRules": "Nét tròn 1.75 đầu tròn (trống mực A) + một mảng tô phẳng (trống mực B, class f) lệch khuôn 1.2 px lên-trái như bản in riso; bo góc ≥ 2 px; một mảng tô duy nhất mỗi icon; hình bánh xe là vòng tròn đều; lỗ hở ≥ 1.5 px",
    "set": "xe-la",
    "stateLook": {
      "rest": "nét Mực than, mảng lệch khuôn mờ 0",
      "active": "mảng Cam riso lệch khuôn hiện ra, quầng Mực lá",
      "animated": "chuyển động riêng: lăn, chao lá, lắc chuông"
    }
  },
  "mascots": [
    {
      "id": "xe-dap"
    },
    {
      "id": "chuong"
    },
    {
      "id": "la"
    },
    {
      "id": "ban-do"
    }
  ],
  "components": {
    "minTouchPx": 44,
    "material": "giấy in riso: nút có bóng mực lệch khuôn 3 px (Mực lá), bấm thì khớp khuôn; thẻ như vé tour có mép răng cưa",
    "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",
        "route"
      ],
      "character": true,
      "characterLines": {
        "tip": "Bé Lá: Chỉnh yên ngang hông là đạp nhẹ nhất đó.",
        "caution": "Leng Keng: Ngõ hẹp, mình dắt xe và rung chuông nhẹ nhé.",
        "route": "Cô Bản Đồ: Còn 1,2 km nữa tới điểm dừng chè."
      }
    },
    "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": "Đúng rồi, lên xe!",
        "wrong": "Dừng lại xem lại nhé"
      }
    },
    "streak": {
      "days": 7,
      "label": "chuyến đạ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 đủ 96px ngang",
    "construction": "Lưới 48: hai bánh xe vòng r 7.5 nét 4.5 tâm cách 24; chiếc lá Cam riso là khung xe nối trục sau lên góc phải trên, gân lá nét 2.6 màu giấy; bản Mực lá lệch khuôn 1.6 xuống-phải sau lá; wordmark đơn nét 5, đầu tròn"
  },
  "favicon": {
    "themeColor": "#0E6B5C",
    "backgroundColor": "#F6F1E4",
    "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)"
}