Skip to content

Latest commit

 

History

History
194 lines (187 loc) · 7.2 KB

geist-design-reference.md

File metadata and controls

194 lines (187 loc) · 7.2 KB

Geist 色阶与文案参考

本文仅保留 Geist 10 阶色板(sRGB 与 Display P3)及通用界面英文文案参考(如 Bot 首字母强调色取色等场景)。

注意:原 Geist 的字体(Geist Sans)、40px 默认控件尺寸、旧圆角/阴影/动效数值,以及旧 OKLCH 暗色体系均已被 Molibot 的 macOS 产品设计层替代并移除。当前界面的权威设计规范见 DESIGN.md,macOS 暗色语义角色见 design.dark.md,实际 token 定义见 apps/desktop/src/styles.css 与 apps/desktop/src/themes/。

1. 10 阶色板参考 (Light sRGB & P3)

每个非背景色阶包含 10 个梯度(100–1000),阶数表达语义意图而非单纯明度:

  • 100 默认背景 · 200 悬停背景 · 300 激活背景
  • 400 默认边框 · 500 悬停边框 · 600 激活边框
  • 700 高对比度实心填充 · 800 实心填充悬停
  • 900 次级文本与图标 · 1000 主文本与图标
name: Geist Color Scales Reference
description: Light sRGB and Display P3 color scales retained as palette reference only.
colors:
  primary: "#171717"
  secondary: "#4d4d4d"
  tertiary: "#006bff"
  neutral: "#f2f2f2"
  background-100: "#ffffff"
  background-200: "#fafafa"
  gray-100: "#f2f2f2"
  gray-200: "#ebebeb"
  gray-300: "#e6e6e6"
  gray-400: "#eaeaea"
  gray-500: "#c9c9c9"
  gray-600: "#a8a8a8"
  gray-700: "#8f8f8f"
  gray-800: "#7d7d7d"
  gray-900: "#4d4d4d"
  gray-1000: "#171717"
  gray-alpha-100: "#0000000d"
  gray-alpha-200: "#00000015"
  gray-alpha-300: "#0000001a"
  gray-alpha-400: "#00000014"
  gray-alpha-500: "#00000036"
  gray-alpha-600: "#0000003d"
  gray-alpha-700: "#00000070"
  gray-alpha-800: "#00000082"
  gray-alpha-900: "#000000b3"
  gray-alpha-1000: "#000000e8"
  blue-100: "#f0f7ff"
  blue-200: "#e9f4ff"
  blue-300: "#dfefff"
  blue-400: "#cae7ff"
  blue-500: "#94ccff"
  blue-600: "#48aeff"
  blue-700: "#006bff"
  blue-800: "#0059ec"
  blue-900: "#005ff2"
  blue-1000: "#002359"
  red-100: "#ffeeef"
  red-200: "#ffe8ea"
  red-300: "#ffe3e4"
  red-400: "#ffd7d6"
  red-500: "#ffb1b3"
  red-600: "#ff676d"
  red-700: "#fc0035"
  red-800: "#ea001d"
  red-900: "#d8001b"
  red-1000: "#47000c"
  amber-100: "#fff6de"
  amber-200: "#fff4cf"
  amber-300: "#fff1c1"
  amber-400: "#ffdc73"
  amber-500: "#ffc543"
  amber-600: "#ffa600"
  amber-700: "#ffae00"
  amber-800: "#ff9300"
  amber-900: "#aa4d00"
  amber-1000: "#561900"
  green-100: "#ecfdec"
  green-200: "#e5fce7"
  green-300: "#d3fad1"
  green-400: "#b9f5bc"
  green-500: "#82eb8d"
  green-600: "#4ce15e"
  green-700: "#28a948"
  green-800: "#279141"
  green-900: "#107d32"
  green-1000: "#003a00"
  teal-100: "#defffb"
  teal-200: "#ddfef6"
  teal-300: "#ccf9f1"
  teal-400: "#b1f7ec"
  teal-500: "#52f0db"
  teal-600: "#00e3c4"
  teal-700: "#00ac96"
  teal-800: "#00927f"
  teal-900: "#007f70"
  teal-1000: "#003f34"
  purple-100: "#faf0ff"
  purple-200: "#f9f0ff"
  purple-300: "#f6e8ff"
  purple-400: "#f2d9ff"
  purple-500: "#dfa7ff"
  purple-600: "#c979ff"
  purple-700: "#a000f8"
  purple-800: "#8500d1"
  purple-900: "#7d00cc"
  purple-1000: "#2f004e"
  pink-100: "#ffe8f6"
  pink-200: "#ffe8f3"
  pink-300: "#ffdfeb"
  pink-400: "#ffd3e1"
  pink-500: "#fdb3cc"
  pink-600: "#f97ea7"
  pink-700: "#f22782"
  pink-800: "#e4106e"
  pink-900: "#c41562"
  pink-1000: "#460523"
  # Wide-gamut accent variants in oklch for P3 displays
  blue-100-p3: "oklch(97.32% 0.0141 251.56)"
  blue-200-p3: "oklch(96.29% 0.0195 250.59)"
  blue-300-p3: "oklch(94.58% 0.0293 249.84870859673202)"
  blue-400-p3: "oklch(91.58% 0.0473 245.11621922481282)"
  blue-500-p3: "oklch(82.75% 0.0979 248.48)"
  blue-600-p3: "oklch(73.08% 0.1583 248.133320980386)"
  blue-700-p3: "oklch(57.61% 0.2508 258.23)"
  blue-800-p3: "oklch(51.51% 0.2399 257.85)"
  blue-900-p3: "oklch(53.18% 0.2399 256.9900584162342)"
  blue-1000-p3: "oklch(26.67% 0.1099 254.34)"
  red-100-p3: "oklch(96.5% 0.0223 13.09)"
  red-200-p3: "oklch(95.41% 0.0299 14.252646656611997)"
  red-300-p3: "oklch(94.33% 0.0369 15.011509923860523)"
  red-400-p3: "oklch(91.51% 0.0471 19.8)"
  red-500-p3: "oklch(84.47% 0.1018 17.71)"
  red-600-p3: "oklch(71.12% 0.1881 21.22)"
  red-700-p3: "oklch(62.56% 0.2524 23.03)"
  red-800-p3: "oklch(58.19% 0.2482 25.15)"
  red-900-p3: "oklch(54.99% 0.232 25.29)"
  red-1000-p3: "oklch(24.8% 0.1041 18.86)"
  amber-100-p3: "oklch(97.48% 0.0331 85.79)"
  amber-200-p3: "oklch(96.81% 0.0495 90.24227879900472)"
  amber-300-p3: "oklch(95.93% 0.0636 90.52)"
  amber-400-p3: "oklch(91.02% 0.1322 88.25)"
  amber-500-p3: "oklch(86.55% 0.1583 79.63)"
  amber-600-p3: "oklch(80.25% 0.1953 73.59)"
  amber-700-p3: "oklch(81.87% 0.1969 76.46)"
  amber-800-p3: "oklch(77.21% 0.1991 64.28)"
  amber-900-p3: "oklch(52.79% 0.1496 54.65)"
  amber-1000-p3: "oklch(30.83% 0.099 45.48)"
  green-100-p3: "oklch(97.59% 0.0289 145.42)"
  green-200-p3: "oklch(96.92% 0.037 147.15)"
  green-300-p3: "oklch(94.6% 0.0674 144.23)"
  green-400-p3: "oklch(91.49% 0.0976 146.24)"
  green-500-p3: "oklch(85.45% 0.1627 146.3)"
  green-600-p3: "oklch(80.25% 0.214 145.18)"
  green-700-p3: "oklch(64.58% 0.1746 147.27)"
  green-800-p3: "oklch(57.81% 0.1507 147.5)"
  green-900-p3: "oklch(51.75% 0.1453 147.65)"
  green-1000-p3: "oklch(29.15% 0.1197 147.38)"
  teal-100-p3: "oklch(97.72% 0.0359 186.7)"
  teal-200-p3: "oklch(97.06% 0.0347 180.66)"
  teal-300-p3: "oklch(94.92% 0.0478 182.07)"
  teal-400-p3: "oklch(92.76% 0.0718 183.78)"
  teal-500-p3: "oklch(86.88% 0.1344 182.42)"
  teal-600-p3: "oklch(81.5% 0.161 178.96)"
  teal-700-p3: "oklch(64.92% 0.1572 181.95)"
  teal-800-p3: "oklch(57.53% 0.1392 181.66)"
  teal-900-p3: "oklch(52.08% 0.1251 182.93)"
  teal-1000-p3: "oklch(32.11% 0.0788 179.82)"
  purple-100-p3: "oklch(96.65% 0.0244 312.1890119359961)"
  purple-200-p3: "oklch(96.73% 0.0228 309.8)"
  purple-300-p3: "oklch(94.85% 0.0364 310.15)"
  purple-400-p3: "oklch(91.77% 0.0614 312.82)"
  purple-500-p3: "oklch(81.26% 0.1409 310.8)"
  purple-600-p3: "oklch(72.07% 0.2083 308.19)"
  purple-700-p3: "oklch(55.5% 0.3008 306.12)"
  purple-800-p3: "oklch(48.58% 0.2638 305.73)"
  purple-900-p3: "oklch(47.18% 0.2579 304)"
  purple-1000-p3: "oklch(23.96% 0.13 305.66)"
  pink-100-p3: "oklch(95.69% 0.0359 344.6218910697224)"
  pink-200-p3: "oklch(95.71% 0.0321 353.14)"
  pink-300-p3: "oklch(93.83% 0.0451 356.29)"
  pink-400-p3: "oklch(91.12% 0.0573 358.82)"
  pink-500-p3: "oklch(84.28% 0.0915 356.99)"
  pink-600-p3: "oklch(74.33% 0.1547 0.24)"
  pink-700-p3: "oklch(63.52% 0.238 1.01)"
  pink-800-p3: "oklch(59.51% 0.2339 4.21)"
  pink-900-p3: "oklch(53.5% 0.2058 2.84)"
  pink-1000-p3: "oklch(26% 0.0977 359)"

2. 界面文案简洁约定 (Voice & Content)

  • 按钮命名:采用“动词 + 名词”(如 Delete Member / 移除成员),避免仅写 OK、Confirm 或孤立动词。
  • 错误文案:说明“发生了什么 + 下一步怎么处理”,而非内部异常栈。
  • 轻提示 (Toast):直呼发生变更的对象,不加句号,不写冗余的 Successfully(如写 Project deleted 而非 Successfully deleted the project.)。
  • 空状态:一句话说明当前为空,并指向第一个可执行操作。
  • 进行中状态:英文使用现在分词加省略号字符(Saving…),中文使用“正在…”或明确阶段名称。