---
phase: 6
slug: quality-and-frontend
status: approved
shadcn_initialized: false
preset: none
created: 2026-03-21
reviewed_at: 2026-03-21
---

# Phase 6 — UI Design Contract

> Visual and interaction contract for frontend phases. Generated by gsd-ui-researcher, verified by gsd-ui-checker.

---

## Design System

| Property | Value |
|----------|-------|
| Tool | none |
| Preset | not applicable |
| Component library | Naive UI (Vue 3) |
| Icon library | Iconify (unplugin-icons) |
| Font | System font (sans-serif) |

---

## Spacing Scale

Declared values (must be multiples of 4):

| Token | Value | Usage |
|-------|-------|-------|
| xs | 4px | Icon gaps, inline padding |
| sm | 8px | Compact element spacing |
| md | 16px | Default element spacing, table cell padding |
| lg | 24px | Section padding |
| xl | 32px | Layout gaps, page margins |
| 2xl | 48px | Major section breaks |
| 3xl | 64px | Page-level spacing |

Exceptions: none

---

## Typography

| Role | Size | Weight | Line Height |
|------|------|--------|-------------|
| Body | 14px | 400 | 1.5 |
| Label | 16px | 600 | 1.5 |
| Heading | 20px | 600 | 1.2 |
| Display | 28px | 600 | 1.2 |

---

## Color

| Role | Value | Usage |
|------|-------|-------|
| Dominant (60%) | #FFFFFF / #18181C | Background, main surfaces (Light/Dark mode) |
| Secondary (30%) | #F3F4F6 / #242428 | Cards, sidebar, modal backgrounds |
| Accent (10%) | #2080F0 | Primary buttons, active links, selected nav items |
| Destructive | #D03050 | Delete buttons, error badges, critical alerts |

Accent reserved for: Primary Call-to-Action buttons (e.g. 触发清洗, 执行任务) and active navigation highlights. Never use for generic background elements.

---

## Copywriting Contract

| Element | Copy |
|---------|------|
| Primary CTA | "刷新数据" (Refresh Data) / "执行清洗" (Execute Cleaning) |
| Empty state heading | "暂无数据" (No data available) |
| Empty state body | "目前没有可显示的爬虫监控数据或待清洗任务" (There are no crawler monitoring data or pending tasks to display) |
| Error state | "数据加载失败: 请检查网络连接或后端服务状态" (Data load failed: Please check network or backend status) |
| Destructive confirmation | "删除": "确定要删除该记录吗？此操作不可恢复。" (Delete: Are you sure you want to delete this record? This cannot be undone.) |

---

## Registry Safety

| Registry | Blocks Used | Safety Gate |
|----------|-------------|-------------|
| shadcn official | none | not required |

---

## Checker Sign-Off

- [x] Dimension 1 Copywriting: PASS
- [x] Dimension 2 Visuals: FLAG (No focal point declared)
- [x] Dimension 3 Color: PASS
- [x] Dimension 4 Typography: PASS
- [x] Dimension 5 Spacing: PASS
- [x] Dimension 6 Registry Safety: PASS

**Approval:** approved 2026-03-21
