Illustrated Enterprise AI SaaS

# Illustrated Enterprise AI SaaS## UsageUse this DESIGN.md as a reusable design brief for an AI coding agent. Apply it when building a new page, restyling an existing interface, or keeping multiple screens visually consistent.## Design IntentYou are implementing an interface using the **Illustrated Enterprise AI SaaS** design language. 以可信的企业级 SaaS 页面骨架承载产品能力，用数字同事角色、黑白手绘线稿和克制的蓝青点色建立品牌记忆；真正的说服力来自产品界面、流程与状态证据，而不是大面积卡通装饰。Treat information architecture, scan paths, and component grouping as the main design material.## Aliases- 企业 AI SaaS 插画风- 数字员工产品官网- StaffDeck-style## Category- 布局与信息组织## Target Platforms- 移动端- PC 端## Summary以可信的企业级 SaaS 页面骨架承载产品能力，用数字同事角色、黑白手绘线稿和克制的蓝青点色建立品牌记忆；真正的说服力来自产品界面、流程与状态证据，而不是大面积卡通装饰。## Visual DNA- 黑白手绘线稿- 数字同事角色- 产品界面主叙事- 克制蓝青点色- 插画与 UI 混合构图- 可信企业感## Best Use Cases- 数字员工平台- 企业级 AI Agent 官网- AI SaaS 产品介绍- 智能工作流平台- B2B 产品发布页## Avoid When高频操作的密集后台、只需要长文阅读的内容站、强调奢侈或极端极简的品牌，以及没有真实产品能力可展示却依赖插画制造繁荣感的页面。## Anatomy首屏采用左侧价值主张、右侧数字同事与产品 UI 组合的双栏结构；角色使用略带抖动感的黑色粗线、大片留白、简化五官和工作语义道具，控制在视觉面积的 15%-30%，承担识别和情绪，不替代产品证据。后续以真实界面、能力卡、流程节点和可信指标交替展开；暖白/浅灰作为大画布，Cobalt Blue 是唯一主操作色，Cyan 和 Soft Violet 只用于状态与极少量插画点色。卡片使用 16-24px 圆角、低对比边界和克制环境色阴影，避免 3D 卡通人物、整页毛玻璃与蓝紫霓虹堆叠。## Color SystemUse a Seed → Map → Semantic → Alias token architecture. Components must consume named tokens instead of hard-coded colors.### Reference Palette- **cloud-canvas** `#f7f8fa`- **paper-surface** `#ffffff`- **cobalt-wash** `#eef3ff`- **workforce-blue** `#315efe`- **signal-cyan** `#00cfe8`- **soft-violet** `#8b7cf6`- **enterprise-ink** `#101828`### Seed Tokens- **colorBgBase** `#f7f8fa` - 企业产品页的浅灰大画布.- **colorBgContainer** `#ffffff` - 产品截图、内容卡片与高可读容器.- **colorFillSecondary** `#eef3ff` - 角色舞台、次级模块与蓝色浅背景.- **colorPrimary** `#315efe` - 唯一主操作色与关键产品信号.- **colorTextBase** `#101828` - 标题、正文和企业级高对比信息.### Primary Scale- **primary-1** `#eef3ff`- **primary-2** `#dfe8ff`- **primary-3** `#c7d5ff`- **primary-4** `#a5baff`- **primary-5** `#7894ff`- **primary-6** `#315efe`- **primary-7** `#2850df`- **primary-8** `#203fb8`- **primary-9** `#192f8f`- **primary-10** `#122366`### Neutral Scale- **neutral-1** `#ffffff`- **neutral-2** `#f7f8fa`- **neutral-3** `#eef0f4`- **neutral-4** `#dfe3eb`- **neutral-5** `#c5cad5`- **neutral-6** `#98a2b3`- **neutral-7** `#667085`- **neutral-8** `#475467`- **neutral-9** `#344054`- **neutral-10** `#101828`### Semantic Tokens- **colorSuccess** `#00a878` - 在线、已就绪、已完成.- **colorSuccessBg** `#e8f8f2` - 成功与可持续运行的浅背景.- **colorWarning** `#c97716` - 待确认、需要人工介入.- **colorWarningBg** `#fff4df` - 警告与 approval 浅背景.- **colorError** `#d14d5b` - 失败、阻断与高风险状态.- **colorErrorBg** `#fff0f1` - 错误状态浅背景.- **colorInfo** `#00a9c1` - 运行中、知识连接与辅助信息.- **colorInfoBg** `#e8fbfe` - Cyan 信息浅背景.### Alias Tokens- **colorBgLayout** `#f7f8fa` - 整页浅灰画布.- **colorBgElevated** `#ffffff` - 产品卡片、导航与浮层.- **colorBgSpotlight** `#101828` - Tooltip 与强提示.- **colorBorder** `#dfe3eb` - 卡片、控件和截图容器边界.- **colorBorderSecondary** `#eef0f4` - 卡片内部轻分隔.- **colorText** `#101828` - 一级标题与正文.- **colorTextSecondary** `#475467` - 说明、摘要与次级标签.- **colorTextTertiary** `#667085` - 辅助信息.- **colorTextDisabled** `#98a2b3` - 禁用与弱化文本.- **colorPrimaryHover** `#2850df` - 主操作 Hover.- **colorPrimaryActive** `#203fb8` - 主操作 Active.- **colorPrimaryBorder** `#a5baff` - 主色控件边界.- **colorPrimaryBg** `#eef3ff` - 角色舞台与主色浅背景.- **colorAccentCyan** `#00a9c1` - 运行、连接和轻科技信号.- **colorAccentViolet** `#8b7cf6` - 插画层次与低频品牌记忆点.- **colorLink** `#315efe` - 链接与可跳转文本.- **colorFocus** `#7894ff` - 键盘焦点环.- **colorMask** `#101828` - Modal 遮罩基础色.Color rules:- Use the palette as design tokens, not random decorative swatches.- Keep primary text and primary actions at accessible contrast.- Use primary-1 through primary-10 for interaction states instead of inventing new brand colors.- Use semantic tokens consistently for success, warning, error, and info; pair color with iconography or text.- Map component styles to Alias Tokens so theme changes do not require component-level color edits.## Typography- Use a modern neutral sans-serif with confident product headlines and compact UI labels; the tone should feel enterprise-ready, not playful.- Keep hero headlines to 2-4 short lines with tight tracking, while body copy stays 15-18px with a 1.55-1.7 line-height.- Use weight, size, and restrained cobalt emphasis to create hierarchy; do not turn every label into a colorful badge.## Layout And Spacing- Build the hero as a balanced two-column composition: value proposition on the left, digital colleague plus product UI evidence on the right; stack these regions on mobile.- Use a 4px micro-grid and an 8px layout base, with 16-24px card padding and 56-96px separation between major landing-page chapters.- Alternate product screenshots, capability cards, workflow steps, and trust evidence so the page tells a product story instead of becoming a gallery of illustrations.- Recommended radius: 16-24px for major cards and illustration stages, 10-14px for controls, and full pills only for compact status labels.- Elevation and shadow: Use restrained cobalt- or cyan-tinted ambient shadows on hero and product-evidence panels. Keep routine cards nearly flat with a low-contrast border; avoid stacking glass blur, neon glow, and heavy shadow on the same surface.## Component Rules- Treat the digital colleague portrait as an identity component with role, status, skills, and responsibility; do not present it as a decorative mascot without product meaning.- Use large product-evidence panels for real interfaces, workflow progress, knowledge grounding, execution status, and audit traces.- Capability cards should explain one outcome each with a small icon or illustration cue, a precise title, one supporting sentence, and an optional status or proof point.- Primary CTAs use solid cobalt; secondary actions use white surfaces with low-contrast borders. Keep inputs, tabs, and navigation visually quieter than the evidence panels.- Loading, approval, error, recovery, and handoff states must remain explicit; friendly illustration never replaces operational clarity.## Interaction And Motion- Use 160-240ms easing for cards, tabs, and buttons; reserve slower 400-700ms motion for the digital colleague entering or floating evidence modules connecting.- Animate status and workflow transitions to explain what the digital colleague is doing, not to create continuous ambient spectacle.- Keep product screenshots and readable copy stable, and provide a reduced-motion mode that removes floating and parallax effects.## Implementation Recipe1. Start with the real user workflow and page structure; do not make a generic landing page unless explicitly requested.2. Establish layout zones first: navigation, content, controls, feedback, and primary action.3. Apply the color tokens to semantic roles: canvas, surface, text, border, accent, danger, and success.4. Build reusable components that express this style: buttons, cards, inputs, tabs, filters, modals, empty states, and status badges.5. Verify mobile and desktop breakpoints before adding decorative polish.6. Check that the final screen still communicates 黑白手绘线稿, 数字同事角色, 产品界面主叙事 without relying on a single color or effect.## Quality Checklist- The screen is immediately recognizable as **Illustrated Enterprise AI SaaS**, not a generic Tailwind layout.- The design uses surface, spacing, typography, and component shape together; it does not rely only on colors.- Primary actions and navigation are clear on both mobile and desktop.- Text is readable, controls are stable, and content does not overlap or shift unexpectedly.- Empty, loading, hover, focus, selected, disabled, success, and error states are styled in the same language.- The implementation avoids the known failure mode: 高频操作的密集后台、只需要长文阅读的内容站、强调奢侈或极端极简的品牌，以及没有真实产品能力可展示却依赖插画制造繁荣感的页面。## Anti-Patterns- Do not paste this palette onto an unrelated layout and call it finished.- Do not overuse decorative effects where the user needs to read, compare, or act quickly.- Do not mix this style with unrelated visual languages unless the product explicitly requires a hybrid.- Do not hide important state behind low contrast, blur, tiny text, or animation.## Keywords- illustrated ai saas- enterprise ai- digital employee- 数字员工- staffdeck- hand-drawn line art- product-led landing- character illustration- b2b saas- cobalt- cyan## Agent Prompt SnippetImplement the UI in the **Illustrated Enterprise AI SaaS** design language. Prioritize 黑白手绘线稿, 数字同事角色, 产品界面主叙事. Use the color roles, typography guidance, spacing rules, component rules, and anti-patterns from this DESIGN.md as hard constraints. The result should feel purpose-built for 数字员工平台, 企业级 AI Agent 官网, AI SaaS 产品介绍, while avoiding: 高频操作的密集后台、只需要长文阅读的内容站、强调奢侈或极端极简的品牌，以及没有真实产品能力可展示却依赖插画制造繁荣感的页面。