Google给AI编程立了一套设计规范,但不是什么新魔法

colors:  primary: "#6366f1"  surface: "#ffffff"rounded:  md: 8px

## Colors- **Primary** (#6366f1): main actions, active navigation, selected state- **Success** (#18a058): online, enabled, registered, ready- **Error** (#d03050): errors and destructive actions

---name: Admin Console Design Systemcolors:  primary: "#6366f1"  primary-strong: "#4f46e5"  surface: "#ffffff"  background: "#f3f5f7"  text: "#1f2329"  muted: "#6b7280"  border: "#e5e9f0"  success: "#18a058"  warning: "#f0a020"  error: "#d03050"  dark:    surface: "#18181c"    background: "#101014"    text: "#f4f6fb"    muted: "#a6adbb"    border: "#2b2c35"typography:  body:    fontFamily: Manrope    fontSize: 14-16px    fontWeight: 400-500  mono:    fontFamily: IBM Plex Mono    fontSize: 13-14pxrounded:  sm: 6px  md: 8px  lg: 12px---# Design System## OverviewA compact admin operations console.Clean surfaces, high information density, clear device state, and predictable workflows.## Colors- **Primary** (#6366f1): main actions, active navigation, selected state- **Primary Strong** (#4f46e5): emphasized active state and key focus- **Background** (#f3f5f7): page canvas behind cards- **Surface** (#ffffff): cards, dialogs, sidebar, header- **Text** (#1f2329): primary content- **Muted** (#6b7280): hints, helper text, inactive icons- **Border** (#e5e9f0): panels, tables, dividers- **Success** (#18a058): online, enabled, registered, ready- **Warning** (#f0a020): incomplete, degraded, unsupported- **Error** (#d03050): errors and destructive actionsDark mode uses the same hierarchy with `#101014` background, `#18181c` surface, `#f4f6fb` text, and `#2b2c35` borders.## Typography- **Body**: Manrope, regular/medium, 14-16px- **Headlines**: Manrope, bold, 20-24px max for page sections- **Labels**: Manrope, semi-bold, 12-13px- **Badges**: Manrope, semi-bold, 12-13px- **Technical values**: IBM Plex Mono, 13-14px for IDs, serial numbers, ports, technical output## Layout- **Shell**: fixed left sidebar, top header, tab bar, scrollable content- **Sidebar**: 248px expanded, 64px collapsed- **Header**: 56px height- **Content padding**: 16px desktop, 12px mobile- **Cards**: compact headers, subtle border, low shadow- **Forms**: two columns on desktop, one column on mobile- **Dialogs**: max viewport fit; keep footer actions stable## Components- **Buttons**: 8px radius; primary only for the main action in a local context- **Secondary buttons**: refresh, edit, scan, copy, open dialog- **Danger buttons**: destructive data/config actions only- **Inputs**: 1px border, visible labels, no placeholder-only forms- **Cards**: border-first, low elevation, compact vertical spacing- **Tables**: clear row dividers, muted headers, monospace for IDs- **Badges**: pill shape, semantic color, short labels- **Help icons**: gray, no background, `question-circle`, tooltip on hover- **Icon buttons**: use `.soy-icon-button`, always include `aria-label`## Domain Patterns- **Device list**: show status, operator, signal, port, and actions without extra hero height- **Terminal**: dark console, command history below input, common commands in a popover- **Call dialog**: prioritize call state, route, number, and primary call actions- **Settings**: labels first, runtime status as disabled/read-only display, advanced options grouped- **Gateway**: dense two-column forms; help icons inline with labels; route summaries first## Icons- Use Iconify Solar line duotone icons.- Verify icon names before use.- Prefer:  - `solar:sim-card-line-duotone`  - `solar:chat-round-line-duotone`  - `solar:phone-calling-rounded-line-duotone`  - `solar:command-line-duotone`  - `solar:settings-line-duotone`  - `solar:bell-bing-line-duotone`  - `solar:question-circle-line-duotone`## Do's and Don'ts- Do keep screens compact and scannable- Do use existing CSS tokens from `web_src/src/styles/main.css`- Do use Naive UI components before custom controls- Do make read-only data look read-only- Do keep Simplified Chinese complete by default- Do maintain text contrast in light and dark mode- Don't create one-off colors, radii, or shadows- Don't use oversized hero sections- Don't use placeholder-only inputs- Don't add colored backgrounds to neutral help icons- Don't use missing Iconify icon names

npm install -g @google/design.md

https://github.com/google-labs-code/design.md 根据这个设计规范,初始化我们项项目下的 DESIGN.md

Always reference DESIGN.md when generating or modifying UI components.