企业级 SaaS（移动）Enterprise SaaS (Mobile)
靛蓝到紫的渐变主色、白卡片 + 极浅彩色投影、底部全宽 CTA 与骨架屏。专业、稳重，强调流程完整性。
典型场景企业移动办公 · CRM · 审批流
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
靛蓝到紫的渐变主色、白卡片 + 极浅彩色投影、底部全宽 CTA 与骨架屏。专业、稳重，强调流程完整性。
关键词
效果与动效
Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse
设计系统变量
--bg#F8FAFC--surface#FFFFFF--text#0F172A--muted#64748B--primary#4F46E5--secondary#7C3AED--success#10B981--border#E2E8F0--radius-card16px--radius-pill999px--radius-input8px--shadow-cardrgba(79,70,229,0.08)--fontPlus Jakarta Sans配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Indigo #4F46E5, Violet #7C3AED
辅色 / Secondary
Slate 50 #F8FAFC, White #FFFFFF, Slate 900 #0F172A, Slate 500 #64748B, Emerald #10B981, Slate 200 #E2E8F0
强调色在页面底色上的对比度约 6.0:1，可用于正文与图标。
适用场景
适合 / Best For
- B2B backend management
- productivity tools
- government and finance mobile apps
- SaaS companion apps
- enterprise dashboards
避开 / Do Not Use For
- Pure consumer entertainment
- Gen-Z youth apps
- gaming UI
- ultra-minimal editorial
框架兼容
能力矩阵
实现要点
落地清单
- Background #F8FAFC applied,
- Indigo→Violet gradient on primary CTA,
- Colored card shadows (not gray),
- Plus Jakarta Sans typography,
- Floating label inputs with Indigo focus,
- Scale 0.97 press with haptic Medium,
- Bottom Tab Navigation implemented,
- Safe Area strict compliance,
- Skeletal loading placeholders,
- Reduced Motion fallback
CSS / 技术关键词
backgroundColor: '#F8FAFC', surfaceBg: '#FFFFFF', textPrimary: '#0F172A', textMuted: '#64748B', primary: '#4F46E5', secondary: '#7C3AED', success: '#10B981', border: '#E2E8F0', radiusCard: 16, radiusButton: 999, radiusInput: 8, shadowCard: 'rgba(79,70,229,0.08)', gradientPrimary: ['#4F46E5', '#7C3AED'], screenPadding: 20
AI 提示词
Design a Enterprise SaaS (Mobile) mobile interface using enterprise, saas, b2b, professional, indigo, violet, gradient, polished. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.