You will assist with UI generation in this conversation.
Follow the design system "自定义" below for ALL visual choices.
When producing a Plan.designTokens, map the YAML front matter fields below
into the schema as follows (omit a target field if the source is missing):
• colors.* (hex) → Plan.designTokens.colors.{primary|secondary|accent|background|foreground|card|border|muted|success|warning|danger|info}
• brand-secure / inverse-* → Plan.designTokens.surfaces.{base|raised|overlay|modal} or colorRoles meta
• gradients (any list) → Plan.designTokens.gradients[] (use full CSS gradient string)
• hover/active/focus/disabled colors → Plan.designTokens.states.* AND components.button.variants.primary.{hover|active|focus|disabled}
• typography.{level} {fontFamily,fontSize,fontWeight,lineHeight,letterSpacing}
→ Plan.designTokens.fonts.scale.{display|h1|h2|h3|h4|body|small|caption|button|overline} as { size, weight, lineHeight, letterSpacing }
→ fonts.heading = display/headline fontFamily; fonts.body = body fontFamily; fonts.mono = mono fontFamily if any
• rounded.{sm|md|lg|xl} → Plan.designTokens.radius.*
• shadow / elevation → Plan.designTokens.shadow.* and elevation map
• spacing scale (4/8/12...) → Plan.designTokens.spacing.tokens (number[])
• description / overview → Plan.designTokens.style.{mood, philosophy, density, keywords[]}
• do/don't list (if present) → Plan.rules.{dos[], donts[]}
• breakpoints / touch target → Plan.designTokens.breakpoints / touchTarget
Hard rules:
1. Translate every visual choice through Tailwind utility classes when generating HTML/JSX.
2. Do NOT call get_design_system; the system below is authoritative.
3. If the design system contradicts the user request, prefer the design system.
--- DESIGN.md (自定义) ---
version: alpha
name: Seeyon
description: "致远互联（Seeyon）协同运营中台的企业级设计系统。以致远蓝 (#0066CC) 为主品牌色，搭配科技蓝辅助色和活力橙强调色，营造专业、可靠、高效的企业协同办公氛围。采用无衬线字体系统，保守的圆角设计（4-8px），清晰的信息层级和充足的留白空间。适用于协同办公、数智化管理、企业中台等 B2B SaaS 场景。"
colors:
primary: "#0066CC"
primary-light: "#3385D6"
primary-dark: "#004C99"
primary-hover: "#0052A3"
primary-pressed: "#003D7A"
on-primary: "#FFFFFF"
secondary: "#00A0E9"
secondary-hover: "#0080BA"
accent-orange: "#FF6B35"
accent-orange-hover: "#E65A2E"
success: "#52C41A"
success-bg: "rgba(82, 196, 26, 0.1)"
success-border: "rgba(82, 196, 26, 0.3)"
warning: "#FAAD14"
warning-bg: "rgba(250, 173, 20, 0.1)"
warning-border: "rgba(250, 173, 20, 0.3)"
error: "#F5222D"
error-bg: "rgba(245, 34, 45, 0.1)"
error-border: "rgba(245, 34, 45, 0.3)"
info: "#1890FF"
info-bg: "rgba(24, 144, 255, 0.1)"
canvas: "#FFFFFF"
surface: "#F5F5F5"
surface-soft: "#FAFAFA"
surface-elevated: "#FFFFFF"
hairline: "#D9D9D9"
hairline-light: "#F0F0F0"
hairline-strong: "#BDBDBD"
ink: "#212121"
ink-secondary: "#616161"
ink-tertiary: "#9E9E9E"
ink-disabled: "#BDBDBD"
ink-inverse: "#FFFFFF"
gray-50: "#FAFAFA"
gray-100: "#F5F5F5"
gray-200: "#EEEEEE"
gray-300: "#E0E0E0"
gray-400: "#BDBDBD"
gray-500: "#9E9E9E"
gray-600: "#757575"
gray-700: "#616161"
gray-800: "#424242"
gray-900: "#212121"
overlay: "rgba(0, 0, 0, 0.45)"
typography:
display-xl:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 38px
fontWeight: 600
lineHeight: 1.15
letterSpacing: -0.5px
display-lg:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 30px
fontWeight: 600
lineHeight: 1.20
letterSpacing: -0.3px
heading-1:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 24px
fontWeight: 600
lineHeight: 1.30
heading-2:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 20px
fontWeight: 600
lineHeight: 1.35
heading-3:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 18px
fontWeight: 600
lineHeight: 1.40
heading-4:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 16px
fontWeight: 600
lineHeight: 1.45
body-lg:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 18px
fontWeight: 400
lineHeight: 1.75
body:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 16px
fontWeight: 400
lineHeight: 1.75
body-sm:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 14px
fontWeight: 400
lineHeight: 1.70
caption:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 12px
fontWeight: 400
lineHeight: 1.65
button:
fontFamily: "PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif"
fontSize: 14px
fontWeight: 500
lineHeight: 1.40
rounded:
xs: 2px
sm: 4px
md: 6px
lg: 8px
xl: 12px
xxl: 16px
full: 9999px
spacing:
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
xxxl: 64px
section: 96px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.sm}"
padding: 8px 24px
height: 40px
button-primary-hover:
backgroundColor: "{colors.primary-hover}"
textColor: "{colors.on-primary}"
button-primary-pressed:
backgroundColor: "{colors.primary-pressed}"
textColor: "{colors.on-primary}"
button-secondary:
backgroundColor: transparent
textColor: "{colors.primary}"
typography: "{typography.button}"
rounded: "{rounded.sm}"
padding: 8px 24px
height: 40px
border: "1px solid {colors.primary}"
button-secondary-hover:
backgroundColor: "rgba(0, 102, 204, 0.05)"
textColor: "{colors.primary-hover}"
border: "1px solid {colors.primary-hover}"
button-text:
backgroundColor: transparent
textColor: "{colors.primary}"
typography: "{typography.button}"
rounded: "{rounded.sm}"
padding: 8px 16px
button-text-hover:
backgroundColor: "rgba(0, 102, 204, 0.05)"
card-base:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
padding: 24px
border: "1px solid {colors.hairline-light}"
card-elevated:
backgroundColor: "{colors.surface-elevated}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
padding: 24px
shadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
input-text:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.sm}"
padding: 8px 12px
height: 40px
border: "1px solid {colors.hairline}"
input-text-focus:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
border: "1px solid {colors.primary}"
shadow: "0 0 0 2px rgba(0, 102, 204, 0.1)"
table-header:
backgroundColor: "{colors.gray-50}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
fontWeight: 600
padding: 12px 16px
height: 48px
border: "1px solid {colors.hairline-light}"
table-row:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
padding: 12px 16px
height: 48px
border: "1px solid {colors.hairline-light}"
table-row-hover:
backgroundColor: "{colors.gray-50}"
table-row-selected:
backgroundColor: "rgba(0, 102, 204, 0.05)"
tag-default:
backgroundColor: "{colors.gray-100}"
textColor: "{colors.ink-secondary}"
typography: "{typography.caption}"
rounded: "{rounded.sm}"
padding: 0px 8px
height: 24px
tag-primary:
backgroundColor: "rgba(0, 102, 204, 0.1)"
textColor: "{colors.primary}"
typography: "{typography.caption}"
rounded: "{rounded.sm}"
padding: 0px 8px
height: 24px
tag-success:
backgroundColor: "{colors.success-bg}"
textColor: "{colors.success}"
typography: "{typography.caption}"
rounded: "{rounded.sm}"
padding: 0px 8px
height: 24px
badge:
backgroundColor: "{colors.error}"
textColor: "{colors.on-primary}"
typography: "{typography.caption}"
fontWeight: 600
rounded: "{rounded.full}"
minWidth: 20px
height: 20px
padding: 0px 6px
nav-bar:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
height: 64px
border: "0 0 1px {colors.hairline-light} solid"
shadow: "0 2px 4px rgba(0, 0, 0, 0.08)"
sidebar:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
width: 240px
border: "0 1px 0 0 {colors.hairline-light} solid"
sidebar-collapsed:
width: 64px
--- END DESIGN.md ---