介绍
CBTIS Design System 是 CBTIS 各前端项目共用的设计规范与组件样例库，从官网 www.globalcbtis.com（cbtis-homepage-v2）提炼并规范化而来。
包含什么
| 内容 | 位置 | 说明 |
|---|---|---|
| 设计变量 | src/styles/tokens.css | 颜色、字体、圆角。Tailwind CSS v4 的 @theme 写法 |
| 基础样式 | src/styles/base.css | 全局默认值、深蓝网格背景、动画 |
| 组件样例 | examples/**/*.html | 纯 HTML + Tailwind 类名，复制即用 |
| 交互脚本 | src/js/*.js | 对话框、标签页、下拉选择、日期选择、验证码输入、上传、Toast 等，零依赖 |
| 文档站 | docs/ | 本站，VitePress |
| 独立示例页 | dist/examples/ | 构建后生成，不启动服务直接用浏览器打开 |
不包含什么
- Vue / React 组件：组件以 HTML 类名的形式提供。Vue 项目按类名自行封装，交互状态用框架管理即可
- 暗色模式
- 设计稿（Figma）
- 业务组件：支付二维码、钱包选择、KYC 表单配置等留在各业务项目中
设计原则
- 可信、克制——作为持牌金融与企业服务机构，界面以标准色深蓝为主，少用装饰，靠留白与描边建立层次
- 信息优先——牌照、费用、流程、状态必须清楚可见；数字与编号使用等宽字体
- 多语言友好——同一套界面承载简体、繁体、英文；布局不依赖文案长度（见文案与多语言）
- 原生优先——能用原生 HTML 元素（
<dialog>、<select>、<input type="radio">）就不用 JS 模拟，无障碍能力随之而来
与 v2 的关系
设计系统以 v2 为基础做了规范化（统一控件高度、焦点样式、错误状态等）。v2 本身暂不修改，差异汇总在规范化对照，每个组件页底部也有对应的「与 v2 的差异」。今后 v2 或新项目改造时，以本站为准。