---
name: 账号与域名资产管理台
description: 面向数字资产管理员的专业后台工作台
colors:
  page-bg: "#f4f7fb"
  surface: "#ffffff"
  surface-soft: "#fafcff"
  surface-muted: "#f3f6fb"
  line: "#e7edf6"
  line-strong: "#d9e2f2"
  text-main: "#1f2a44"
  text-strong: "#101828"
  text-sub: "#667085"
  text-soft: "#98a2b3"
  brand: "#2563eb"
  brand-deep: "#1d4ed8"
  brand-soft: "#eef3ff"
  success: "#22c55e"
  success-soft: "#ecfdf3"
  warning: "#ff8a00"
  warning-soft: "#fff6ea"
  danger: "#ef4444"
  danger-soft: "#fff2f3"
  purple: "#7c4dff"
  purple-soft: "#f3efff"
  nav-start: "#071224"
  nav-end: "#0b162d"
  nav-active: "#4271d5"
typography:
  headline:
    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 1.2
  title:
    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "16px"
    fontWeight: 700
    lineHeight: 1.35
  body:
    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "\"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: 1.4
rounded:
  sm: "8px"
  md: "10px"
  lg: "12px"
  xl: "16px"
  panel: "20px"
spacing:
  xs: "8px"
  sm: "10px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.brand}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "0 16px"
    height: "42px"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-main}"
    rounded: "{rounded.md}"
    padding: "0 16px"
    height: "42px"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-main}"
    rounded: "{rounded.xl}"
    padding: "16px 18px"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-main}"
    rounded: "{rounded.md}"
    padding: "0 12px"
    height: "40px"
  nav-item-active:
    backgroundColor: "{colors.nav-active}"
    textColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: "0 14px"
    height: "50px"
---

# Design System: 账号与域名资产管理台

## 1. Overview

**Creative North Star: "稳态运营驾驶舱"**

这个系统的视觉基调来自典型运营后台，但刻意压低了展示欲，强调的是一眼读懂、快速定位、持续处理。页面以浅色主工作区、深色侧边导航、清晰边界和规则卡片密度为主，目的是让管理员把注意力稳定放在资产状态、异常记录、筛选结果和详情面板上，而不是被装饰性视觉带走。

它的设计哲学是“专业先于新奇，秩序先于表演”。品牌蓝只承担主操作、当前选中和重点状态提示，不负责渲染气氛；卡片、表格、筛选区和详情面板共用一套近似组件语法，让多模块切换时没有陌生成本。这个系统明确拒绝营销官网式大标题宣传感，也拒绝炫技数据大屏式夸张视觉噪声。

**Key Characteristics:**
- 信息密度中高，但通过稳定栅格和分区边界保持可扫读。
- 主色克制，只在关键动作、选中项和重点提示上发声。
- 导航、表格、筛选、详情采用统一组件词汇，避免“每块都像不同系统”。
- 风险状态通过颜色加文本共同表达，不把识别责任压给颜色本身。

## 2. Colors

这套配色属于典型产品后台的 restrained（克制型配色，白话：以中性色为主，只保留一个明确主色）的策略，重点是稳定和可信，而不是制造气氛。

### Primary
- **运营蓝** (`#2563eb`): 用于主按钮、激活标签、链接、选中态和关键数字，是全局最明确的操作颜色。
- **深运营蓝** (`#1d4ed8`): 用于需要更强确认感的文字强调和深一层品牌动作，避免所有蓝色都停留在同一层级。

### Secondary
- **风险橙** (`#ff8a00`): 用于待处理、即将到期、提醒类状态，承担“需要看一眼但还不是事故”的语义。
- **异常红** (`#ef4444`): 用于失败、异常、危险动作和到期警示，是最高风险层级颜色。
- **状态绿** (`#22c55e`): 用于正常、成功、已启用、可外呼等正向状态反馈。
- **辅助紫** (`#7c4dff`): 仅出现在个别统计卡和辅助分类中，用来区分信息簇，不承担主流程动作。

### Neutral
- **页面底灰** (`#f4f7fb`): 作为整体页面底色，给工作区提供柔和但不发黄的背景层。
- **主表面白** (`#ffffff`): 作为卡片、表格、详情抽屉和输入框的主承载面。
- **浅表面蓝灰** (`#fafcff`, `#f3f6fb`): 用于层级较轻的辅助表面、标签背景和局部区块。
- **分隔线灰** (`#e7edf6`, `#d9e2f2`): 用于边框、表格分隔和输入控件描边，保证结构清楚但不过度抢眼。
- **正文深墨** (`#1f2a44`, `#101828`): 主正文、标题和关键数字的基准文字颜色。
- **辅助文字灰** (`#667085`, `#98a2b3`): 用于说明、次要字段、占位和不应抢主焦点的文字。

### Named Rules
**The One Accent Rule.** 主品牌蓝只用于主动作、当前选择和关键提示，不能把整屏 inactive（未激活，白话：用户当前没在操作、没被选中的元素）内容都刷成蓝色。

**The No Showroom Rule.** 不允许把异常红、风险橙、品牌蓝同时大面积铺满同一屏；后台页面的颜色任务是分级，不是表演。

## 3. Typography

**Display Font:** `Segoe UI, PingFang SC, Microsoft YaHei, sans-serif`
**Body Font:** `Segoe UI, PingFang SC, Microsoft YaHei, sans-serif`
**Label/Mono Font:** 无独立字体，继续沿用同一套无衬线系统字栈

**Character:** 这套排版没有做品牌展示型字体表演，而是选择 Windows 与中文后台环境里稳定、清楚、熟悉的系统字路线。它追求的是长期阅读不累、字段扫描不乱、不同模块之间视觉语气统一。

### Hierarchy
- **Headline** (`700`, `24px`, `1.2`): 用在页面主标题、详情主标题和关键页面头部，负责定义当前工作上下文。
- **Title** (`700`, `16px`, `1.35`): 用在卡片标题、分区标题、侧栏标题和详情小节标题，承担模块内层级组织。
- **Body** (`400`, `14px`, `1.5`): 用在表格主体、详情字段、说明内容和普通交互文本，是系统的主阅读层。
- **Label** (`600`, `13px`, `1.4`): 用在筛选标签、状态说明、辅助标题、次级字段名和按钮文案，承担短文本识别任务。

### Named Rules
**The No Hero Rule.** 这是后台，不是营销官网；不使用夸张展示级标题，不引入 fluid typography（流体字级，白话：会跟着屏幕尺寸明显变化的标题尺寸）来制造戏剧性。

**The Scan First Rule.** 表格、筛选和详情字段优先保证扫读效率，字号和字重变化必须服务层级，不允许为了“设计感”牺牲字段清晰度。

## 4. Elevation

这套系统采用轻量阴影加边框的混合层级。深度表达不是靠强烈漂浮感，而是靠白色表面、细边框、浅阴影和背景层对比共同完成。侧边导航和主内容区通过底色与边界自然分层，详情抽屉再用轻微横向阴影补一层结构感。

### Shadow Vocabulary
- **常规卡片阴影** (`0 12px 32px rgba(13, 44, 100, 0.07)`): 用于常规卡片、筛选区、表格容器和空态容器，提供轻微浮起感。
- **轻量控件阴影** (`0 4px 14px rgba(13, 44, 100, 0.05)`): 用于指标卡、输入框等更轻层级部件，避免内容看上去贴死在背景上。
- **抽屉侧阴影** (`-10px 0 28px rgba(15, 23, 42, 0.03)`): 用于右侧详情面板，强调它是辅助阅读层，不是新的主页面。

### Named Rules
**The Border Before Shadow Rule.** 先依赖边框和表面层级表达结构，再用浅阴影补充，不允许用厚重阴影去假装高级感。

## 5. Components

### Buttons
- **Shape:** 中等圆角（`10px`），既保留工具型后台的利落感，又避免过硬。
- **Primary:** 品牌蓝渐变底（核心值为 `#2563eb`）配白字，高度固定 `42px`，用于新增、确认、批量主操作等高优先级动作。
- **Hover / Focus:** 现有样式主要通过边框、底色和阴影轻微加强，不依赖夸张位移动效。
- **Secondary / Ghost:** 白底描边按钮与主按钮同高同圆角，负责次级操作、导出、重置、展开等动作。

### Chips
- **Style:** 状态标签采用浅底色加深色文字加细边框的组合，圆角 `8px`，尺寸紧凑，适合在表格和详情里高频重复。
- **State:** success / warning / danger / neutral 四类语义稳定复用，不允许每个模块私自造新颜色系统。

### Cards / Containers
- **Corner Style:** 大部分业务卡片使用 `16px` 圆角，局部小容器和控件退到 `10px` 到 `12px`。
- **Background:** 主承载面统一为白色，局部通过浅蓝灰背景做轻分层。
- **Shadow Strategy:** 轻阴影配细边框，不追求漂浮悬空感。
- **Border:** 默认使用 `#e7edf6` 或 `#d9e2f2` 描边，既分隔内容，也让后台结构足够规整。
- **Internal Padding:** 以 `16px` 到 `24px` 为主，保证表格、详情、卡片之间有稳定呼吸感。

### Inputs / Fields
- **Style:** 白底、细描边、`10px` 圆角、高度 `40px`，用统一字段外观支撑筛选区的高频使用。
- **Focus:** 当前代码以边框和轻阴影为主，后续可补更明确 focus（焦点态，白话：键盘或当前激活输入框的高亮状态）规则，但不能破坏整体克制气质。
- **Error / Disabled:** 应继续沿用风险色和弱化文字处理，不能只改占位符或只改背景色。

### Navigation
- **Style:** 深色侧边导航配浅色主内容区，是这个系统最强的结构识别点。
- **Typography:** 导航标签使用 `14px` 到 `15px`、中高字重，确保收起前后都易识别。
- **Default / Hover / Active:** 默认透明，hover 与 active 使用半透明蓝色底和轻边框，让当前所在模块被稳定看见，但不过度发光。
- **Mobile Treatment:** 小屏下直接隐藏侧栏，优先保住主内容阅读区。

### Tables
- **Style:** 表格头使用非常浅的蓝灰底，正文保持白底，通过细边框和选中态内阴影区分记录。
- **State:** 选中行使用浅蓝背景和内描边强调，不用整行重色块压住文本。
- **Behavior:** 表格与右侧详情形成“列表看全局，抽屉看细节”的双栏工作方式，是系统的核心交互骨架。

## 6. Do's and Don'ts

### Do:
- **Do** 保持后台工具式层级，让筛选、表格、状态标签、详情抽屉形成稳定阅读顺序。
- **Do** 用品牌蓝集中表达主动作、激活项和关键链接，不把它扩散成整屏装饰色。
- **Do** 让异常、待处理、即将到期这类状态同时依赖文字和颜色表达，避免只靠色块传递风险。
- **Do** 在不同模块里复用同一套按钮、筛选框、状态标签、卡片和表格语言，保证切换成本低。
- **Do** 把圆角控制在当前尺度附近（`8px` 到 `20px`），维持稳重、专业的产品界面气质。

### Don't:
- **Don't** 做成营销官网，不要加入大段宣传式文案、超大英雄标题、强情绪氛围背景或展示型首屏。
- **Don't** 做成炫技数据大屏，不要使用大面积深色底、强发光、夸张渐变、赛博风图表或秀场式大数字。
- **Don't** 做得太花哨，不要让装饰优先级高过数据、筛选、状态和处理动作。
- **Don't** 把 inactive（未激活，白话：当前不是重点的元素）按钮、标签、卡片也做成高饱和强对比，那会破坏后台的稳态阅读节奏。
- **Don't** 发明过于奇怪的按钮、输入框、标签和弹层样式；这类后台产品应以熟悉、可信的组件词汇优先。
