{
  "meta": {
    "name": "ds-crossplatform",
    "version": "0.1.0",
    "status": "draft",
    "owner": "ui-ux-designer",
    "updatedAt": "2026-11-14",
    "description": "小程序 + Flutter 安卓 App 双端通用 design tokens 草案；只做规范，不含业务页。",
    "designWidthDp": 375,
    "designWidthRpx": 750,
    "rpxPerDp": 2,
    "gridDp": 4,
    "naming": "kebab-case；路径即语义层级；CSS 变量 --ds-<path>，Flutter 生成 Ds* 常量。",
    "sizeFormat": "{ rpx, dp }：小程序取 rpx，Flutter 取 dp，rpx = dp × 2。",
    "colorFormat": "#RRGGBB；带透明度用 { color, alpha }；CSS 用 rgba，Flutter 用 Color(0xAARRGGBB)。",
    "usageRule": "业务代码只用 semantic / component 层，禁止引用 palette 原色阶。"
  },
  "color": {
    "palette": {
      "brand": {
        "0": "#000000",
        "10": "#001A41",
        "20": "#002E6B",
        "30": "#003FA8",
        "40": "#1266D9",
        "50": "#3D84EE",
        "60": "#66A0F5",
        "70": "#93BBFA",
        "80": "#C0D8FF",
        "90": "#DEEAFF",
        "95": "#EFF5FF",
        "99": "#FBFDFF",
        "100": "#FFFFFF"
      },
      "neutral": {
        "0": "#000000",
        "10": "#14171C",
        "20": "#292D34",
        "30": "#3F444C",
        "40": "#575C65",
        "50": "#70757E",
        "60": "#8A8F98",
        "70": "#A5AAB3",
        "80": "#C1C5CD",
        "90": "#DEE1E6",
        "95": "#EDEFF2",
        "99": "#FAFBFC",
        "100": "#FFFFFF"
      },
      "error": {
        "10": "#410002",
        "20": "#690005",
        "30": "#93000A",
        "40": "#BA1A1A",
        "50": "#DE3730",
        "80": "#FFB4AB",
        "90": "#FFDAD6",
        "95": "#FFEDEA"
      },
      "success": {
        "10": "#054D2A",
        "20": "#0B6B3A",
        "40": "#0B7D46",
        "80": "#5FD08A",
        "90": "#E3F6EC"
      },
      "warning": {
        "10": "#4D2D00",
        "20": "#6B4000",
        "40": "#9A5B00",
        "80": "#FFB95C",
        "90": "#FFF1DB"
      }
    },
    "semantic": {
      "light": {
        "background": "#F7F8FA",
        "surface": "#FFFFFF",
        "surface-raised": "#FFFFFF",
        "surface-sunken": "#F2F4F7",
        "surface-pressed": "#EEF1F5",
        "text-primary": "#181B20",
        "text-secondary": "#575C65",
        "text-tertiary": "#8A8F98",
        "text-disabled": "#B4B9C2",
        "text-inverse": "#FFFFFF",
        "primary": "#1266D9",
        "on-primary": "#FFFFFF",
        "primary-pressed": "#0E56C0",
        "primary-container": "#DEEAFF",
        "on-primary-container": "#001A41",
        "success": "#0B7D46",
        "success-container": "#E3F6EC",
        "on-success-container": "#054D2A",
        "warning": "#9A5B00",
        "warning-container": "#FFF1DB",
        "on-warning-container": "#4D2D00",
        "error": "#BA1A1A",
        "on-error": "#FFFFFF",
        "error-container": "#FFDAD6",
        "on-error-container": "#410002",
        "border-subtle": "#E3E6EB",
        "border-strong": "#8A8F98",
        "divider": {
          "color": "#000000",
          "alpha": 0.06
        },
        "overlay": {
          "color": "#000000",
          "alpha": 0.45
        },
        "focus-ring": "#1266D9"
      },
      "dark": {
        "background": "#0F1115",
        "surface": "#171A20",
        "surface-raised": "#1F232B",
        "surface-sunken": "#0B0D11",
        "surface-pressed": "#282D36",
        "text-primary": "#E8EBF0",
        "text-secondary": "#A8AEB8",
        "text-tertiary": "#7C828D",
        "text-disabled": "#555B66",
        "text-inverse": "#14171C",
        "primary": "#93BBFA",
        "on-primary": "#002E6B",
        "primary-pressed": "#B0CFFF",
        "primary-container": "#003FA8",
        "on-primary-container": "#DEEAFF",
        "success": "#5FD08A",
        "success-container": "#0C3B24",
        "on-success-container": "#B7F0CD",
        "warning": "#FFB95C",
        "warning-container": "#4A3200",
        "on-warning-container": "#FFE0AE",
        "error": "#FFB4AB",
        "on-error": "#690005",
        "error-container": "#93000A",
        "on-error-container": "#FFDAD6",
        "border-subtle": "#2C313A",
        "border-strong": "#6B7280",
        "divider": {
          "color": "#FFFFFF",
          "alpha": 0.08
        },
        "overlay": {
          "color": "#000000",
          "alpha": 0.6
        },
        "focus-ring": "#93BBFA"
      }
    },
    "wechat-compat": {
      "note": "仅用于与微信原生控件/品牌场景对齐；普通页面必须用 semantic。绿底 #07C160 与白字对比不足，仅可配深色文字或用品牌场景。",
      "brand": "#07C160",
      "warn": "#FA9D3B",
      "danger": "#FA5151",
      "link": "#576B95",
      "page-bg": "#F7F7F7",
      "cell-bg": "#FFFFFF",
      "divider": "#EDEDED",
      "text-primary": "#181818",
      "text-secondary": "#888888",
      "navbar-bg": "#FFFFFF",
      "navbar-text": "#000000"
    }
  },
  "font": {
    "family": {
      "miniprogram": {
        "value": "-apple-system, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
        "note": "不内嵌字体，跟随系统。"
      },
      "flutter": {
        "value": null,
        "note": "系统默认（Roboto / Noto Sans SC），不打包中文字体以控包体。"
      }
    },
    "size": {
      "display": {
        "rpx": 52,
        "dp": 26,
        "lineHeight": 1.23,
        "weight": 700
      },
      "headline": {
        "rpx": 44,
        "dp": 22,
        "lineHeight": 1.27,
        "weight": 700
      },
      "title-lg": {
        "rpx": 40,
        "dp": 20,
        "lineHeight": 1.3,
        "weight": 600
      },
      "title": {
        "rpx": 36,
        "dp": 18,
        "lineHeight": 1.33,
        "weight": 600
      },
      "body-lg": {
        "rpx": 32,
        "dp": 16,
        "lineHeight": 1.5,
        "weight": 400
      },
      "body": {
        "rpx": 28,
        "dp": 14,
        "lineHeight": 1.45,
        "weight": 400
      },
      "caption": {
        "rpx": 24,
        "dp": 12,
        "lineHeight": 1.33,
        "weight": 400
      },
      "overline": {
        "rpx": 22,
        "dp": 11,
        "lineHeight": 1.27,
        "weight": 500,
        "letterSpacing": 0.5
      }
    },
    "weight": {
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    }
  },
  "space": {
    "2xs": {
      "rpx": 4,
      "dp": 2
    },
    "xs": {
      "rpx": 8,
      "dp": 4
    },
    "sm": {
      "rpx": 16,
      "dp": 8
    },
    "md": {
      "rpx": 24,
      "dp": 12
    },
    "lg": {
      "rpx": 32,
      "dp": 16
    },
    "xl": {
      "rpx": 40,
      "dp": 20
    },
    "2xl": {
      "rpx": 48,
      "dp": 24
    },
    "3xl": {
      "rpx": 64,
      "dp": 32
    },
    "4xl": {
      "rpx": 80,
      "dp": 40
    },
    "5xl": {
      "rpx": 96,
      "dp": 48
    }
  },
  "radius": {
    "none": {
      "rpx": 0,
      "dp": 0
    },
    "xs": {
      "rpx": 8,
      "dp": 4
    },
    "sm": {
      "rpx": 16,
      "dp": 8
    },
    "md": {
      "rpx": 24,
      "dp": 12
    },
    "lg": {
      "rpx": 32,
      "dp": 16
    },
    "xl": {
      "rpx": 48,
      "dp": 24
    },
    "full": {
      "rpx": 1998,
      "dp": 999
    }
  },
  "shadow": {
    "note": "浅色用阴影表达层级；深色用 surface 亮度分层，不加深阴影。阴影色不用纯黑。",
    "sm": {
      "offsetX": {
        "rpx": 0,
        "dp": 0
      },
      "offsetY": {
        "rpx": 2,
        "dp": 1
      },
      "blur": {
        "rpx": 6,
        "dp": 3
      },
      "spread": {
        "rpx": 0,
        "dp": 0
      },
      "color": {
        "color": "#101828",
        "alpha": 0.06
      },
      "elevation": 1,
      "css": "0 1px 3px rgba(16,24,40,0.06)"
    },
    "md": {
      "offsetX": {
        "rpx": 0,
        "dp": 0
      },
      "offsetY": {
        "rpx": 4,
        "dp": 2
      },
      "blur": {
        "rpx": 16,
        "dp": 8
      },
      "spread": {
        "rpx": 0,
        "dp": 0
      },
      "color": {
        "color": "#101828",
        "alpha": 0.08
      },
      "elevation": 3,
      "css": "0 2px 8px rgba(16,24,40,0.08)"
    },
    "lg": {
      "offsetX": {
        "rpx": 0,
        "dp": 0
      },
      "offsetY": {
        "rpx": 16,
        "dp": 8
      },
      "blur": {
        "rpx": 48,
        "dp": 24
      },
      "spread": {
        "rpx": 0,
        "dp": 0
      },
      "color": {
        "color": "#101828",
        "alpha": 0.12
      },
      "elevation": 6,
      "css": "0 8px 24px rgba(16,24,40,0.12)"
    },
    "sheet": {
      "offsetX": {
        "rpx": 0,
        "dp": 0
      },
      "offsetY": {
        "rpx": -16,
        "dp": -8
      },
      "blur": {
        "rpx": 48,
        "dp": 24
      },
      "spread": {
        "rpx": 0,
        "dp": 0
      },
      "color": {
        "color": "#101828",
        "alpha": 0.12
      },
      "elevation": 8,
      "css": "0 -8px 24px rgba(16,24,40,0.12)"
    }
  },
  "motion": {
    "duration": {
      "fast": 120,
      "base": 200,
      "slow": 320
    },
    "easing": {
      "standard": "cubic-bezier(0.2, 0, 0, 1)",
      "enter": "cubic-bezier(0, 0, 0.2, 1)",
      "exit": "cubic-bezier(0.4, 0, 1, 1)"
    },
    "flutter": {
      "standard": "Curves.easeOutCubic",
      "enter": "Curves.easeOut",
      "exit": "Curves.easeIn"
    }
  },
  "layout": {
    "designWidthDp": 375,
    "designWidthRpx": 750,
    "rpxPerDp": 2,
    "minWidthDp": 320,
    "maxContentWidthDp": 600,
    "breakpoints": {
      "compact": "0-599",
      "medium": "600-839",
      "expanded": ">=840"
    },
    "pagePaddingX": {
      "rpx": 32,
      "dp": 16
    },
    "sectionGap": {
      "rpx": 48,
      "dp": 24
    },
    "cardGap": {
      "rpx": 24,
      "dp": 12
    },
    "touchTargetMin": {
      "rpx": 88,
      "dp": 44
    },
    "listItemHeight": {
      "rpx": 112,
      "dp": 56
    },
    "hairline": {
      "rpx": 1,
      "dp": 0.5
    },
    "gridColumns": {
      "compact": 4,
      "medium": 8,
      "expanded": 12
    },
    "safeArea": "小程序 env(safe-area-inset-*)；Flutter SafeArea / MediaQuery.padding"
  },
  "component": {
    "note": "尺寸为默认值；颜色/圆角引用 semantic 与 radius token。",
    "button": {
      "height": {
        "sm": {
          "rpx": 64,
          "dp": 32
        },
        "md": {
          "rpx": 88,
          "dp": 44
        },
        "lg": {
          "rpx": 96,
          "dp": 48
        }
      },
      "paddingX": {
        "sm": {
          "rpx": 24,
          "dp": 12
        },
        "md": {
          "rpx": 32,
          "dp": 16
        },
        "lg": {
          "rpx": 40,
          "dp": 20
        }
      },
      "minWidth": {
        "rpx": 176,
        "dp": 88
      },
      "radius": "radius.md",
      "gap": "space.sm",
      "font": "font.size.body-lg",
      "weight": "font.weight.semibold",
      "loadingSize": {
        "rpx": 32,
        "dp": 16
      },
      "states": [
        "default",
        "pressed",
        "disabled",
        "loading"
      ]
    },
    "input": {
      "height": {
        "rpx": 88,
        "dp": 44
      },
      "paddingX": {
        "rpx": 24,
        "dp": 12
      },
      "radius": "radius.md",
      "borderWidth": {
        "rpx": 2,
        "dp": 1
      },
      "focusBorderWidth": {
        "rpx": 3,
        "dp": 1.5
      },
      "font": "font.size.body-lg",
      "errorGap": {
        "rpx": 8,
        "dp": 4
      },
      "states": [
        "default",
        "focused",
        "disabled",
        "error"
      ]
    },
    "list-item": {
      "height": {
        "rpx": 112,
        "dp": 56
      },
      "paddingX": {
        "rpx": 32,
        "dp": 16
      },
      "iconSize": {
        "rpx": 48,
        "dp": 24
      },
      "chevronSize": {
        "rpx": 32,
        "dp": 16
      },
      "dividerInset": {
        "rpx": 32,
        "dp": 16
      },
      "states": [
        "default",
        "pressed",
        "disabled"
      ]
    },
    "navbar": {
      "height": {
        "rpx": 88,
        "dp": 44
      },
      "font": "font.size.title",
      "states": [
        "default"
      ]
    },
    "tabbar": {
      "height": {
        "rpx": 100,
        "dp": 50
      },
      "iconSize": {
        "rpx": 48,
        "dp": 24
      },
      "font": "font.size.caption",
      "states": [
        "default",
        "selected"
      ]
    },
    "sheet": {
      "radiusTop": "radius.xl",
      "handleWidth": {
        "rpx": 72,
        "dp": 36
      },
      "handleHeight": {
        "rpx": 8,
        "dp": 4
      },
      "itemHeight": {
        "rpx": 112,
        "dp": 56
      }
    },
    "dialog": {
      "maxWidth": {
        "rpx": 640,
        "dp": 320
      },
      "radius": "radius.lg",
      "padding": {
        "rpx": 48,
        "dp": 24
      }
    },
    "toast": {
      "radius": "radius.sm",
      "paddingX": {
        "rpx": 32,
        "dp": 16
      },
      "paddingY": {
        "rpx": 20,
        "dp": 10
      },
      "durationMs": 2000,
      "maxDurationMs": 3000
    },
    "empty-state": {
      "imageSize": {
        "rpx": 240,
        "dp": 120
      },
      "gap": {
        "rpx": 24,
        "dp": 12
      },
      "actionTopGap": {
        "rpx": 48,
        "dp": 24
      }
    },
    "skeleton": {
      "radius": "radius.sm",
      "shimmerDurationMs": 1200
    }
  }
}