creative gradient
本地来源：Knowledge/World/设计配色/creative-gradient.txt
# Style Pack: Creative Gradient Studio
# 来源: DESGIN.md Style Pack 8
# 适用: 创意工具、AI 图像/音频应用、作品集、代理商、发布微型站
# 情绪: 表现力、流动感、精炼、视觉化、现代
# 主题: 浅色 (Light)
---
## 配色 Token (Colors)
---
--bg: #FBFAFF
--bg-raised: #FFFFFF
--bg-elevated: #F2EEFF
--fg: #13111C
--fg-muted: #635A7A
--fg-secondary: #4A4260
--border: #D7CDF5
--border-soft: #EAE4FF
--accent: #6D5EF6
--accent-hover: #5849DF
--accent-fg: #FFFFFF
--accent-soft: rgba(109,94,246,0.1)
--accent-glow: rgba(109,94,246,0.2)
--success: #4CAF84
--warning: #E5A43A
--danger: #E5554A
# 渐变色彩 (仅用于 Hero 视觉、CTA 背景或一个主要过渡带)
--gradient-primary: linear-gradient(135deg, #6D5EF6 0%, #9B6DFF 50%, #C084FC 100%)
--gradient-subtle: linear-gradient(135deg, #F2EEFF 0%, #EAE4FF 100%)
---
## 字体 (Typography)
---
--font-display: "Inter", "Space Grotesk", "Manrope", ui-sans-serif, sans-serif
--font-size-display: clamp(3rem, 7vw, 6rem)
--font-weight-display: 680
--line-height-display: 0.9
--letter-spacing-display: -0.05em
--font-size-h1: clamp(2.5rem, 5vw, 4.5rem)
--font-weight-h1: 650
--line-height-h1: 0.95
--letter-spacing-h1: -0.04em
--font-size-h2: clamp(1.75rem, 3vw, 3rem)
--font-weight-h2: 620
--line-height-h2: 1.02
--letter-spacing-h2: -0.03em
--font-sans: "Inter", "Space Grotesk", ui-sans-serif, system-ui, sans-serif
--font-size-body: 1rem
--font-weight-body: 400
--line-height-body: 1.65
--letter-spacing-body: -0.008em
--font-size-label: 0.78rem
--font-weight-label: 650
--line-height-label: 1
--letter-spacing-label: 0.06em
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
--font-size-mono: 0.875rem
--font-weight-mono: 500
--line-height-mono: 1.5
---
## 圆角 (Border Radius)
---
--radius-none: 0px
--radius-sm: 6px
--radius-md: 10px
--radius-lg: 20px
--radius-xl: 24px
--radius-full: 999px
---
## 间距 (Spacing)
---
--space-xxs: 4px
--space-xs: 8px
--space-sm: 12px
--space-md: 16px
--space-lg: 24px
--space-xl: 32px
--space-2xl: 48px
--space-3xl: 64px
--space-4xl: 96px
--space-5xl: 128px
---
## 阴影 (Shadows)
---
--shadow-none: none
--shadow-sm: 0 1px 3px rgba(109,94,246,0.06)
--shadow-md: 0 4px 16px rgba(109,94,246,0.1)
--shadow-lg: 0 8px 24px rgba(109,94,246,0.12)
---
## 布局 (Layout)
---
--max-width-desktop: 1280px
--content-padding-desktop: 48px
--content-padding-tablet: 32px
--content-padding-mobile: 20px
--nav-height-desktop: 72px
--nav-height-mobile: 56px
--section-gap-desktop: 96px
--section-gap-mobile: 64px
--grid-columns-desktop: 12
--grid-columns-tablet: 6
--grid-columns-mobile: 4
---
## 组件规格 (Component Tokens)
---
# 主按钮 (Primary Button) — 紫色填充 Pill
--btn-primary-bg: var(--accent)
--btn-primary-fg: var(--accent-fg)
--btn-primary-hover-bg: var(--accent-hover)
--btn-primary-radius: var(--radius-full)
--btn-primary-padding-x: 18px
--btn-primary-padding-y: 12px
--btn-primary-font-weight: 600
--btn-primary-glow: 0 4px 16px var(--accent-glow)
# 次按钮 (Secondary Button)
--btn-secondary-bg: transparent
--btn-secondary-fg: var(--fg)
--btn-secondary-border: var(--border)
--btn-secondary-hover-bg: var(--border-soft)
--btn-secondary-radius: var(--radius-full)
--btn-secondary-padding-x: 18px
--btn-secondary-padding-y: 12px
# 卡片 (Card) — 白色或薰衣草色
--card-bg: var(--bg-raised)
--card-fg: var(--fg)
--card-border: var(--border)
--card-radius: var(--radius-xl)
--card-padding: 24px
--card-shadow: var(--shadow-sm)
--card-lavender-bg: var(--border-soft)
# 输入框 (Input)
--input-bg: var(--bg-raised)
--input-fg: var(--fg)
--input-placeholder: var(--fg-muted)
--input-border: var(--border)
--input-radius: var(--radius-md)
--input-padding-x: 14px
--input-padding-y: 12px
--input-focus-ring: 0 0 0 2px var(--accent-glow)
--input-height: 44px
# 徽章 (Badge)
--badge-bg: var(--border-soft)
--badge-fg: var(--accent)
--badge-radius: var(--radius-full)
--badge-padding-x: 10px
--badge-padding-y: 6px
--badge-font-size: 0.75rem
--badge-font-weight: 600
# 导航 (Navigation)
--nav-bg: rgba(251,250,255,0.9)
--nav-backdrop: blur(10px)
--nav-border: var(--border)
--nav-link-fg: var(--fg-muted)
--nav-link-hover-fg: var(--fg)
---
## 动效 (Motion)
---
--duration-fast: 150ms
--duration-normal: 220ms
--duration-slow: 350ms
--duration-reveal: 500ms
--duration-gradient-shift: 6000ms
--easing-default: cubic-bezier(0.4, 0, 0.2, 1)
# 渐变流动动画 (用于 Hero 背景)
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
---
## 设计铁律 (Design Locks)
---
1. 颜色锁定：唯一主强调色紫罗兰 #6D5EF6
2. 形状锁定：表现力柔软 (expressive soft)，按钮 full pill，卡片 24px
3. 主题锁定：干净白薰衣草底 (#FBFAFF)
4. 字体锁定：Inter/Space Grotesk/Manrope，标题可大面积造型，正文保持扎实可读
5. 渐变规则：整个页面最多 1 个标志性渐变时刻，不处处渐变
6. 媒体承载能量：让图片/视频/作品说话
---
## 布局家族 (Layout Families)
---
1. 画廊网格 (Gallery Grid): 项目平铺
2. 交错卡片 (Staggered Cards): 不等大错位排列
3. 分割英雄区 (Split Hero): 文案 + 大视觉
4. 轮播 (Carousel): 项目轮播
5. 项目平铺 (Project Tiles): 作品缩略图
6. 工具预览面板 (Tool Preview Panel): 产品功能截图
7. 前后对比 (Before-After): 创作前后
---
## PC端布局规范
---
- 最大内容宽度: 1280px
- 内容区内边距: 48px
- 段落垂直间距: 96px
---
## 移动端布局规范 (<768px)
---
- 内容区内边距: 20px
- 段落垂直间距: 64px
---
## 组件状态 (Component States)
---
- hover: 紫色加深 + 辉光
- focus-visible: 2px 紫色光晕
- active: 轻微缩放
- disabled: 40% 不透明度
- loading: 紫色 shimmer
---
## 使用提示词模板 (Prompt Template)
---
使用 Creative Gradient Studio 风格。
项目：
- 产品：[名称]
- 受众：[目标用户]
- 页面类型：[creative / portfolio / launch]
- 转化目标：[目标 CTA]
要求：
- 干净白薰衣草底 (#FBFAFF)，一个受控紫色强调 (#6D5EF6)
- 艺术指导的渐变时刻，媒体优先的创意布局
- 避免通用网格 blob 背景、避免低对比薰衣草文字、避免装饰性重叠图形
---
## 禁止清单 (Anti-Slop Ban List)
---
- 不要使用通用网格 blob 渐变背景
- 不要使用低对比薰衣草文字
- 不要使用无目的装饰性重叠图形
- 不要在每个区域使用渐变
- 不要使用多彩色 CTA
- 不要使用三个相同功能卡片
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-creative-gradient-ab9576.txt（仅本地保留，不入库不部署）