{
  "$schema": "web-standards/design-system@2",
  "version": "2.0.0",
  "brand": {
    "name": "Gạch Xanh",
    "shortName": "Gạch Xanh",
    "legalName": "Văn phòng Kiến trúc Gạch Xanh (giả lập)",
    "tagline": "Nhà mát hơn, hoá đơn điện nhẹ hơn",
    "description": "Văn phòng kiến trúc xanh (giả lập): nhà ở tiết kiệm năng lượng, vật liệu địa phương, tư vấn cải tạo nhà cũ.",
    "url": "https://gachxanh.vn",
    "locale": "vi_VN",
    "locales": [
      "vi_VN"
    ],
    "voice": [
      "đo trước khi hứa",
      "chân chất, gần gũi",
      "rõ ràng",
      "tôn trọng cái cũ"
    ],
    "social": {
      "facebook": "https://www.facebook.com/gachxanh.demo",
      "instagram": "https://www.instagram.com/gachxanh.demo",
      "youtube": "https://www.youtube.com/@gachxanh-demo",
      "linkedin": "https://www.linkedin.com/company/gachxanh-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",
    "minSize": "24px (mark) · 96px (primary)"
  },
  "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": "#1E5B3A",
    "backgroundColor": "#F6F3EC"
  },
  "og": {
    "defaultImage": "social/og-default.png",
    "imageAlt": "Gạch Xanh — Nhà mát hơn, hoá đơn điện nhẹ hơn",
    "titleSuffix": " · Gạch Xanh",
    "template": "social/templates/post-square.html",
    "type": "website"
  },
  "color": {
    "light": {
      "primary": "#1E5B3A",
      "onPrimary": "#FFFFFF",
      "secondary": "#B44D27",
      "onSecondary": "#FFFFFF",
      "bg": "#F6F3EC",
      "surface": "#FCFAF5",
      "fg": "#17241C",
      "muted": "#4A5A50",
      "border": "#D9D3C5",
      "success": "#2F6B3F",
      "warning": "#8A5A00",
      "danger": "#A8321E",
      "info": "#1F5F80",
      "focus": "#1E5B3A"
    },
    "dark": {
      "primary": "#7CC495",
      "onPrimary": "#0B1A10",
      "secondary": "#E07A4F",
      "onSecondary": "#0B1A10",
      "bg": "#101A14",
      "surface": "#18251D",
      "fg": "#EEF2EC",
      "muted": "#A9B8AE",
      "border": "#2A3A30",
      "success": "#8FD3A2",
      "warning": "#E8B23A",
      "danger": "#F08A6E",
      "info": "#7CC0E0",
      "focus": "#7CC495"
    }
  },
  "mode": "light",
  "brandColors": [
    {
      "name": "Vôi",
      "hex": "#F6F3EC",
      "role": "Nền trang như tường quét vôi",
      "use": [
        "nền trang",
        "nền ảnh isometric"
      ],
      "never": [
        "chữ",
        "viền mảnh trên nền trắng"
      ],
      "share": 46
    },
    {
      "name": "Mực rêu",
      "hex": "#17241C",
      "role": "Chữ và nét",
      "use": [
        "chữ thân bài",
        "icon nghỉ",
        "nét vẽ"
      ],
      "never": [
        "nền lớn ở chế độ sáng"
      ],
      "share": 14
    },
    {
      "name": "Xanh rêu",
      "hex": "#1E5B3A",
      "role": "Hành động chính và mặt trái khối",
      "use": [
        "nút chính",
        "liên kết",
        "mặt trái khối isometric"
      ],
      "never": [
        "chữ nhỏ trên nền rêu sẫm"
      ],
      "share": 16
    },
    {
      "name": "Rêu sẫm",
      "hex": "#143F28",
      "role": "Mặt tối của khối (bóng)",
      "use": [
        "mặt phải khối isometric",
        "chân trang"
      ],
      "never": [
        "chữ",
        "nút"
      ],
      "share": 8
    },
    {
      "name": "Lá non",
      "hex": "#8DBF5A",
      "role": "Mặt đỉnh khối, cây xanh",
      "use": [
        "mặt đỉnh khối",
        "mầm cây",
        "biểu đồ tích cực"
      ],
      "never": [
        "chữ",
        "nền chữ nhỏ"
      ],
      "share": 8
    },
    {
      "name": "Gạch nung",
      "hex": "#B44D27",
      "role": "Điểm nhấn duy nhất mỗi màn",
      "use": [
        "huy hiệu",
        "dấu ạ trong wordmark",
        "mái nhà isometric"
      ],
      "never": [
        "nền lớn",
        "nút thứ hai"
      ],
      "share": 4
    },
    {
      "name": "Mật ong",
      "hex": "#E8B23A",
      "role": "Nắng và năng lượng (nhân vật Ong)",
      "use": [
        "tia nắng",
        "pin mặt trời",
        "nhân vật Ong Thợ"
      ],
      "never": [
        "chữ trên nền sáng"
      ],
      "share": 2
    },
    {
      "name": "Nước mưa",
      "hex": "#3A8FB7",
      "role": "Nước và gió mát (nhân vật Giọt)",
      "use": [
        "giọt nước",
        "luồng gió",
        "nhân vật Giọt Mưa"
      ],
      "never": [
        "chữ nhỏ"
      ],
      "share": 2
    }
  ],
  "palettes": [
    {
      "id": "gx-voi-reu",
      "name": "Vôi & Rêu (chính)",
      "light": {
        "primary": "#1E5B3A",
        "onPrimary": "#FFFFFF",
        "secondary": "#B44D27",
        "onSecondary": "#FFFFFF",
        "bg": "#F6F3EC",
        "surface": "#FCFAF5",
        "fg": "#17241C",
        "muted": "#4A5A50",
        "border": "#D9D3C5",
        "success": "#2F6B3F",
        "warning": "#8A5A00",
        "danger": "#A8321E",
        "info": "#1F5F80",
        "focus": "#1E5B3A"
      },
      "dark": {
        "primary": "#7CC495",
        "onPrimary": "#0B1A10",
        "secondary": "#E07A4F",
        "onSecondary": "#0B1A10",
        "bg": "#101A14",
        "surface": "#18251D",
        "fg": "#EEF2EC",
        "muted": "#A9B8AE",
        "border": "#2A3A30",
        "success": "#8FD3A2",
        "warning": "#E8B23A",
        "danger": "#F08A6E",
        "info": "#7CC0E0",
        "focus": "#7CC495"
      }
    },
    {
      "id": "gx-gach-nung",
      "name": "Gạch nung",
      "light": {
        "primary": "#9A3F1E",
        "onPrimary": "#FFFFFF",
        "secondary": "#1E5B3A",
        "onSecondary": "#FFFFFF",
        "bg": "#F7EFE6",
        "surface": "#FDF8F2",
        "fg": "#17241C",
        "muted": "#4A5A50",
        "border": "#E2D3C3",
        "success": "#2F6B3F",
        "warning": "#8A5A00",
        "danger": "#A8321E",
        "info": "#1F5F80",
        "focus": "#9A3F1E"
      },
      "dark": {
        "primary": "#E07A4F",
        "onPrimary": "#0B1A10",
        "secondary": "#7CC495",
        "onSecondary": "#0B1A10",
        "bg": "#1A1310",
        "surface": "#241B16",
        "fg": "#EEF2EC",
        "muted": "#A9B8AE",
        "border": "#3A2C24",
        "success": "#8FD3A2",
        "warning": "#E8B23A",
        "danger": "#F08A6E",
        "info": "#7CC0E0",
        "focus": "#E07A4F"
      }
    },
    {
      "id": "gx-mua-xanh",
      "name": "Mưa xanh",
      "light": {
        "primary": "#1F5F80",
        "onPrimary": "#FFFFFF",
        "secondary": "#B44D27",
        "onSecondary": "#FFFFFF",
        "bg": "#F1F5F4",
        "surface": "#FAFCFB",
        "fg": "#17241C",
        "muted": "#4A5A50",
        "border": "#CFDCDA",
        "success": "#2F6B3F",
        "warning": "#8A5A00",
        "danger": "#A8321E",
        "info": "#1F5F80",
        "focus": "#1F5F80"
      },
      "dark": {
        "primary": "#7CC0E0",
        "onPrimary": "#0B1A10",
        "secondary": "#E07A4F",
        "onSecondary": "#0B1A10",
        "bg": "#0E171B",
        "surface": "#152229",
        "fg": "#EEF2EC",
        "muted": "#A9B8AE",
        "border": "#25363F",
        "success": "#8FD3A2",
        "warning": "#E8B23A",
        "danger": "#F08A6E",
        "info": "#7CC0E0",
        "focus": "#7CC0E0"
      }
    }
  ],
  "chart": [
    "#1E5B3A",
    "#E8B23A",
    "#3A8FB7",
    "#B44D27",
    "#8DBF5A"
  ],
  "typography": {
    "families": {
      "display": "Lexend, system-ui, sans-serif",
      "sans": "Be Vietnam Pro, system-ui, sans-serif",
      "mono": "JetBrains Mono, ui-monospace, monospace"
    },
    "supportsVietnamese": true,
    "roles": [
      {
        "family": "Lexend",
        "role": "Tiêu đề",
        "weight": 600,
        "vietnamese": true,
        "sample": "Đón gió xuyên phòng, mái hắt chắn nắng chiều — nhà mát mà vẫn sáng sủa."
      },
      {
        "family": "Be Vietnam Pro",
        "role": "Thân bài",
        "weight": 400,
        "vietnamese": true,
        "sample": "Ô thoáng cầu thang giúp khí nóng thoát lên; tường hướng tây dùng gạch lỗ, đỡ hấp nhiệt buổi chiều. Đừng ngại hỏi thợ đã quen tay."
      },
      {
        "family": "JetBrains Mono",
        "role": "Số liệu / mã (mono)",
        "weight": 500,
        "vietnamese": true,
        "sample": "Nhiệt độ ước tính: 31,5 °C → 29,0 °C · Điện điều hoà: −18 %/tháng · Mã hồ sơ GX-2026-Đ01"
      }
    ],
    "effects": [
      {
        "id": "stack-up",
        "name": "Xếp gạch",
        "description": "Từng chữ trồi lên như xếp từng viên gạch",
        "durationMs": 600,
        "reducedMotion": "off"
      },
      {
        "id": "sprout",
        "name": "Nảy mầm",
        "description": "Gạch chân mọc dài ra như mầm cây",
        "durationMs": 800,
        "reducedMotion": "off"
      },
      {
        "id": "breeze",
        "name": "Gió lùa",
        "description": "Chữ nghiêng nhẹ 2° rồi về chỗ",
        "durationMs": 900,
        "reducedMotion": "off"
      }
    ],
    "scale": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "30px",
      "4xl": "38px",
      "5xl": "52px"
    },
    "lineHeight": {
      "tight": 1.2,
      "normal": 1.6,
      "relaxed": 1.75
    },
    "weights": [
      400,
      500,
      600,
      700
    ]
  },
  "space": {
    "0": "0",
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "6": "24px",
    "8": "32px",
    "12": "48px",
    "16": "64px"
  },
  "radius": {
    "sm": "4px",
    "md": "6px",
    "lg": "10px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "2px 2px 0 rgb(20 63 40 / .18)",
    "md": "4px 4px 0 rgb(20 63 40 / .16)",
    "lg": "8px 8px 0 rgb(20 63 40 / .14)"
  },
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  },
  "motion": {
    "durations": {
      "fast": "150ms",
      "base": "260ms",
      "slow": "600ms"
    },
    "easing": "cubic-bezier(.2,.8,.2,1)",
    "respectsReducedMotion": true,
    "pauseOffscreen": true,
    "signature": [
      "khối trồi lên theo trục đứng isometric",
      "mầm cây nảy khi hoàn thành",
      "gió lùa nghiêng nhẹ"
    ]
  },
  "icons": {
    "path": "icons/",
    "grid": 24,
    "stroke": 1.75,
    "states": [
      "rest",
      "active",
      "animated"
    ],
    "construction": "isometric-block-line",
    "set": "gx-isometric-block-line",
    "sizes": [
      16,
      20,
      24,
      32,
      48
    ],
    "rules": [
      "Mọi cạnh chéo theo góc trục đo 30° (độ dốc 0.577) hoặc thẳng đứng",
      "Khối hộp vẽ 3 mặt bằng nét, mặt đỉnh là vùng tô khi bật đèn",
      "Đầu nét và khớp tròn",
      "Tối đa 1 motif brand mỗi icon",
      "Khoảng hở giữa 2 nét ≥ 1.5 px"
    ]
  },
  "mascots": [
    {
      "id": "gach-cu"
    },
    {
      "id": "cay-me"
    },
    {
      "id": "ong-tho"
    },
    {
      "id": "giot-mua"
    }
  ],
  "imagery": {
    "illustrationStyle": "isometric-lowpoly",
    "mascot3d": "lowpoly",
    "photoStyle": "không dùng ảnh chụp trong kit giả lập"
  },
  "components": {
    "minTouchPx": 44,
    "material": "khối isometric: bo 6px, bóng đổ cứng lệch 4px màu rêu sẫm, bấm thì khối lún xuống đúng độ lệch bóng",
    "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": [
        "info",
        "caution",
        "success",
        "note",
        "system"
      ],
      "character": true,
      "characterMap": {
        "info": "giot-mua",
        "caution": "ong-tho",
        "success": "cay-me",
        "note": "gach-cu",
        "system": "gach-cu"
      }
    },
    "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,
      "example": {
        "label": "Diện tích sàn (m²)",
        "help": "Tính cả tầng lửng, không tính sân",
        "error": "Nhập một số, ví dụ: 64"
      }
    },
    "progress": {
      "types": [
        "bar",
        "steps",
        "ring"
      ]
    },
    "verdict": {
      "types": [
        "correct",
        "wrong"
      ],
      "stamp": true,
      "labels": {
        "correct": "Đạt — phương án mát hơn",
        "wrong": "Chưa đạt — xem lại hướng nắng"
      }
    },
    "streak": {
      "days": 7,
      "label": "ngày theo dõi hoá đơn điện"
    },
    "roadmap": {
      "interactive": true,
      "states": [
        "default",
        "hover",
        "focusVisible",
        "active",
        "disabled",
        "locked",
        "done"
      ],
      "steps": [
        "Khảo sát nắng gió",
        "Phương án sơ bộ",
        "Bản vẽ thi công",
        "Giám sát",
        "Đo lại sau 3 tháng"
      ]
    }
  },
  "themes": [
    "sa-ban"
  ],
  "sources": {
    "tokens": "themes/sa-ban/tokens.css",
    "docs": "guideline/index.html"
  },
  "approvedAt": "2026-10-25",
  "approvedBy": "auto-approved (fictional demo brand, approved by Dac Nguyen in chat)"
}