# Design System: Sino-MCI 消息中台

## 1. Visual Theme & Atmosphere

A modern, high-density administration dashboard with a calm, professional atmosphere. The interface feels like a precision cockpit: information-dense but breathable, predictable but polished. Visual hierarchy is established through restrained color, generous whitespace in headers, and tight data grids in tables. The personality is trustworthy and operational — no marketing fluff, no decorative gradients, no visual noise.

- **Density:** 7/10 — Cockpit-dense tables and forms, airy page headers.
- **Variance:** 3/10 — Predictable, symmetric layouts for operational efficiency.
- **Motion:** 4/10 — Fluid, purposeful micro-interactions; no cinematic delays.

## 2. Color Palette & Roles

- **Canvas White** (#F8FAFC) — Primary background surface behind all content.
- **Pure Surface** (#FFFFFF) — Cards, modals, drawers, table rows, input backgrounds.
- **Charcoal Ink** (#0F172A) — Primary text, headings, key labels.
- **Muted Steel** (#64748B) — Secondary text, placeholders, metadata, disabled states.
- **Whisper Border** (#E2E8F0) — 1px structural borders, table dividers, section separators.
- **Soft Tint** (#F1F5F9) — Hover backgrounds, zebra striping, subtle section fills.
- **Signal Blue** (#2563EB) — Single accent for primary buttons, active nav items, focus rings, links, status "online".
- **Signal Red** (#DC2626) — Destructive actions, errors, failed status.
- **Signal Green** (#16A34A) — Success states, sent/delivered status.
- **Signal Amber** (#D97706) — Warnings, pending status, cautions.

No neon glows, no purple accents, no gradient text, no pure black.

## 3. Typography Rules

- **Display / Headlines:** `Geist, "Noto Sans SC", system-ui, sans-serif` — tight tracking, weight-driven hierarchy. H1 24px/700, H2 20px/600, H3 16px/600.
- **Body:** `Geist, "Noto Sans SC", system-ui, sans-serif` — 14px/1.6 line-height for Chinese readability, max 65ch in prose.
- **Mono / Data:** `"Geist Mono", "JetBrains Mono", "SF Mono", monospace` — timestamps, IDs, counts, JSON preview. 13px.
- **Banned:** Inter as the primary font, generic serifs, decorative display fonts.

Numbers in tables and metrics use monospace for alignment.

## 4. Component Stylings

### Buttons
- **Primary:** Signal Blue fill (#2563EB), white text, 6px border-radius, 32px height, 12px horizontal padding. Active: -1px translateY, darker fill (#1D4ED8). No outer glow.
- **Secondary:** White fill, Whisper Border, Charcoal Ink text. Hover: Soft Tint background.
- **Danger:** Signal Red fill or ghost style depending on context.
- **Text/Link buttons:** Signal Blue text, no underline, hover underline.

### Cards / Sections
- White surface, 1px Whisper Border, 8px border-radius, subtle shadow `0 1px 3px rgba(15, 23, 42, 0.06)`.
- Used to group related controls (filter bar, stats row, form sections).
- In high-density tables, replace nested cards with border-top dividers.

### Inputs / Forms
- Label above input, 12px/500 Muted Steel.
- Input height 32px, 6px border-radius, Whisper Border, focus ring 2px Signal Blue at 20% opacity.
- Error text below input in Signal Red, 12px.
- No floating labels, no placeholder-only inputs.

### Tables
- Header: Soft Tint background, 13px/600 Muted Steel uppercase tracking.
- Rows: White, 44px min-height, hover Soft Tint.
- Cell padding: 12px 16px.
- Status tags: small rounded pills with tinted backgrounds.
- Row actions: icon buttons or link buttons grouped at right.

### Navigation
- Left sidebar: 220px width, White surface, Whisper Border right.
- Menu items: 40px height, 12px/14px text, Signal Blue left-border active indicator, Soft Tint active background.
- Submenu: indented 16px, lighter Muted Steel.
- Top header: 56px height, White surface, bottom Whisper Border, page title left, global search + user avatar right.

### Drawers / Modals
- Drawer: 560px width from right, White surface, Whisper Border left, 16px padding.
- Modal: 520px max-width, 8px border-radius, centered, backdrop rgba(15,23,42,0.4).
- Close icon top-right.

### Tags / Pills
- Small rounded pills (12px height, 4px radius) with tinted background.
- Examples: blue tint for active, gray tint for default, green tint for success, red tint for error.

### Empty States
- Centered composed illustration + headline + single CTA.
- No generic "No data" alone; explain what to do next.

## 5. Layout Principles

- **Sidebar + Main:** Fixed left sidebar, main content scrolls. Main has 24px padding.
- **Page Header:** H1 page title + short description + top-right primary action button.
- **Filter Bar:** Collapsible card directly below header; inline form items with 12px gaps.
- **Data Table:** Full-width card below filter bar.
- **Max Width:** None for tables (fluid); prose max-width 720px.
- **Grid:** Use CSS Grid for dashboard cards; tables are full-width.
- **Responsive:** Below 768px, sidebar collapses to hamburger, tables horizontal-scroll with sticky first column, drawers become full-screen.
- **Spacing Scale:** 4px base. Common: 8, 12, 16, 24, 32, 48.

## 6. Motion & Interaction

- **Spring default:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for UI transitions; 150ms for hovers, 200ms for drawer/modal open.
- **Micro-interactions:**
  - Buttons: -1px lift on hover, press-down on active.
  - Table rows: background-color transition on hover.
  - Status dots: subtle pulse when in "sending" / "online" state.
  - Drawers: slide from right with backdrop fade.
- **Loading:** Skeleton shimmer matching exact row dimensions in tables; no generic spinners.
- **Performance:** Animate only `transform` and `opacity`.

## 7. Anti-Patterns (Banned)

- No emojis in UI copy or icons.
- No Inter as the primary typeface.
- No pure black (#000000).
- No neon/outer glow shadows.
- No gradient text or hero gradients.
- No 3-column equal feature cards.
- No centered hero sections.
- No AI copywriting clichés: "Seamless", "Elevate", "Unleash", "Next-Gen".
- No filler text like "Scroll to explore" or bouncing arrows.
- No fabricated metrics or fake statistics.
- No overlapping elements — every component has clear spatial separation.
- No custom mouse cursors.
- No broken Unsplash links — use abstract SVG patterns or neutral placeholders.