qihuaiflow/design-system/MASTER.md

Design System Master File

LOGIC: When building a specific page, first check design-system/pages/[page-name].md. If that file exists, its rules override this Master file. If not, strictly follow the rules below.

---

Project: 七虎AI Generated: 2026-07-13 09:07:15 Category: AI PaaS Platform / Developer Console

---

Global Rules

Color Palette

Role	Hex	CSS Variable
Primary	#5B5FED	--color-primary
Secondary	#3B82F6	--color-secondary
CTA/Accent	#5B5FED	--color-cta
Background	#F8F9FB	--color-background
Text	#101214	--color-text

Color Notes: Indigo #5B5FED is the single brand hue. Success #219B5E / Warning #E8922C / Error #D9383A / Info #3B82F6 are semantic only. Do not introduce extra brand colors.

Typography

• Heading Font: Inter
• Body Font: Inter
• Mood: neutral, precise, technical
• Google Fonts: Inter + Inter

CSS Import:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

Spacing Variables

Token	Value	Usage
--space-xs	4px / 0.25rem	Tight gaps
--space-sm	8px / 0.5rem	Icon gaps, inline spacing
--space-md	16px / 1rem	Standard padding
--space-lg	24px / 1.5rem	Section padding
--space-xl	32px / 2rem	Large gaps
--space-2xl	48px / 3rem	Section margins
--space-3xl	64px / 4rem	Hero padding

Shadow Depths

Level	Value	Usage
--shadow-sm	0 1px 2px rgba(0,0,0,0.05)	Subtle lift
--shadow-md	0 4px 6px rgba(0,0,0,0.1)	Cards, buttons
--shadow-lg	0 10px 15px rgba(0,0,0,0.1)	Modals, dropdowns
--shadow-xl	0 20px 25px rgba(0,0,0,0.15)	Hero images, featured cards

---

Component Specs

Buttons

/* Primary Button */
.btn-primary {
  background: #5B5FED;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #5B5FED;
  border: 2px solid #5B5FED;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

Cards

.card {
  background: #F8F9FB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

Inputs

.input {
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 200ms ease;
}

.input:focus {
  border-color: #5B5FED;
  outline: none;
  box-shadow: 0 0 0 3px #5B5FED20;
}

Modals

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 90%;
}

---

Style Guidelines

Style: Warm Tech Minimalism

Keywords: clean, precise, data-dense, soft surfaces, indigo accent, generous whitespace

Best For: AI PaaS consoles, developer platforms, agent/workflow editors

Key Effects: Subtle hover lift (translateY -1 to -2px), 150-300ms ease transitions, soft shadow escalation, skeleton shimmer for loading, fade/slide micro-entrances.

Page Pattern

Pattern Name: App Shell + Dashboard Grid

• Conversion Strategy: Core value shown immediately via workspace/chat; primary action (新建对话/部署) persistent in header and sidebar.
• CTA Placement: Sticky header + sidebar primary action; contextual CTAs inside cards.
• Section Order: Sidebar > Workspace(Chat/Agents/Skills/MCP) > Main content grid > Detail drawer

---

Anti-Patterns (Do NOT Use)

• ❌ Ornate decoration
• ❌ Low contrast text
• ❌ Missing focus states
• ❌ Emojis as icons
• ❌ Layout-shifting scale hovers
• ❌ Instant state changes

Additional Forbidden Patterns

• ❌ Emojis as icons — Use SVG icons (Heroicons, Lucide, Simple Icons)
• ❌ Missing cursor:pointer — All clickable elements must have cursor:pointer
• ❌ Layout-shifting hovers — Avoid scale transforms that shift layout
• ❌ Low contrast text — Maintain 4.5:1 minimum contrast ratio
• ❌ Instant state changes — Always use transitions (150-300ms)
• ❌ Invisible focus states — Focus states must be visible for a11y

---

Pre-Delivery Checklist

Before delivering any UI code, verify:

• No emojis as icons (use SVG: Heroicons/Lucide)
• cursor-pointer on all clickable elements
• Hover states with smooth transitions (150-300ms)
• Light mode: text contrast 4.5:1 minimum
• Focus states visible for keyboard nav
• prefers-reduced-motion respected
• Responsive: 375px, 768px, 1024px, 1440px
• No content hidden behind fixed navbars
• No horizontal scroll on mobile