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.

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.

6.1 KiB Raw Permalink Blame History