creem neo brutalist dark
本地来源：Knowledge/World/设计配色/creem-neo-brutalist-dark.txt
# Style Pack: Creem Neo-Brutalist Dark # 来源: clone-creem.io # 适用: SaaS 计费平台、开发者工具、现代商业产品 # 情绪: 大胆、现代、硬核、俏皮 # 主题: 暗色 (Dark) --- ## 配色 Token (Colors) --- --bg: #151617 --bg-deep: #0a0a0a --bg-raised: #1a1b1c --bg-elevated: #242528 --fg: #ffffff --fg-secondary: rgba(255,255,255,0.7) --fg-muted: rgba(255,255,255,0.45) --border: rgba(255,255,255,0.1) --border-strong: rgba(255,255,255,0.15) --accent: #ffbe98 --accent-hover: #e8a87d --accent-fg: #0a0a0a --accent-soft: rgba(255,190,152,0.15) --accent-strong: rgba(255,190,152,0.2) --brand-violet: #b09cfb --brand-violet-hover: #9a86f0 --brand-violet-fg: #ffffff --brand-violet-soft: rgba(176,156,251,0.15) --success: #4ecb71 --success-soft: rgba(78,203,113,0.12) --danger: #ef4444 --danger-soft: rgba(239,68,68,0.12) --warning: #f59e0b --- ## 字体 (Typography) --- # Display / 品牌标题 --font-display: "Gasoek One", "Impact", system-ui, sans-serif --font-size-display: clamp(3.5rem, 7vw, 5.5rem) --font-weight-display: 700 --line-height-display: 0.92 --letter-spacing-display: -0.04em # H1 --font-size-h1: clamp(2.25rem, 4.5vw, 3.75rem) --font-weight-h1: 700 --line-height-h1: 0.96 --letter-spacing-h1: -0.03em # H2 --font-size-h2: clamp(1.75rem, 3vw, 2.5rem) --font-weight-h2: 650 --line-height-h2: 1.05 --letter-spacing-h2: -0.025em # H3 --font-size-h3: clamp(1.25rem, 2vw, 1.5rem) --font-weight-h3: 600 --line-height-h3: 1.15 # Body / 正文 --font-sans: "Geist Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.65 --letter-spacing-body: -0.011em # Label / 标签 --font-size-label: 0.875rem --font-weight-label: 600 --line-height-label: 1 --letter-spacing-label: 0.02em --text-transform-label: uppercase # Small / 小字 --font-size-sm: 0.75rem --font-weight-sm: 500 --line-height-sm: 1.4 # Mono / 代码 --font-mono: "Geist 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-xs: 2px --radius-sm: 4px --radius-md: 10px --radius-lg: 16px --radius-xl: 20px --radius-2xl: 24px --radius-3xl: 40px --radius-full: 999px --- ## 间距 (Spacing) --- --space-0: 0px --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px --space-5: 20px --space-6: 24px --space-8: 32px --space-10: 40px --space-12: 48px --space-16: 64px --space-20: 80px --space-24: 96px --space-32: 128px --- ## 阴影 (Shadows) — Neo-Brutalist 硬阴影系统 --- # 硬阴影 (Hard Shadow) — 核心特征 --shadow-sm: 2px 2px 0 0 var(--shadow-color) --shadow-md: 3px 3px 0 0 var(--shadow-color) --shadow-lg: 4px 4px 0 0 var(--shadow-color) --shadow-xl: 6px 6px 0 0 var(--shadow-color) --shadow-color: rgba(0,0,0,0.3) # 品牌紫色硬阴影 --shadow-violet: 3px 3px 0 0 #b09cfb # 默认无软阴影 —— 核心原则是硬边偏移阴影，杜绝 box-shadow 模糊 --shadow-none: none --- ## 布局 (Layout) --- # 桌面端 --max-width: 1200px --content-padding-desktop: 48px --nav-height: 64px --section-gap-desktop: 80px --grid-columns-desktop: 12 # 平板端 (<1024px) --content-padding-tablet: 32px --nav-height-tablet: 56px --section-gap-tablet: 56px --grid-columns-tablet: 6 # 移动端 (<768px) --content-padding-mobile: 20px --nav-height-mobile: 52px --section-gap-mobile: 48px --grid-columns-mobile: 4 --- ## 组件规格 (Component Tokens) --- # 主按钮 (Primary Button) --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: 24px --btn-primary-padding-y: 12px --btn-primary-font-size: 0.938rem --btn-primary-font-weight: 600 --btn-primary-shadow: var(--shadow-md) --btn-primary-hover-shadow: var(--shadow-sm) # 次按钮 (Secondary Button) --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border-strong) --btn-secondary-hover-bg: rgba(255,255,255,0.05) --btn-secondary-radius: var(--radius-full) --btn-secondary-padding-x: 24px --btn-secondary-padding-y: 12px # 幽灵按钮 (Ghost Button) --btn-ghost-bg: transparent --btn-ghost-fg: var(--fg-secondary) --btn-ghost-hover-bg: rgba(255,255,255,0.06) --btn-ghost-hover-fg: var(--fg) # 卡片 (Card) --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-lg) --card-padding: 24px --card-shadow: none --card-hover-shadow: var(--shadow-md) # 输入框 (Input) --input-bg: var(--bg-deep) --input-fg: var(--fg) --input-placeholder: var(--fg-muted) --input-border: var(--border-strong) --input-radius: var(--radius-md) --input-padding-x: 16px --input-padding-y: 12px --input-focus-border: var(--accent) --input-focus-ring: 0 0 0 2px rgba(255,190,152,0.25) --input-height: 44px # 徽章 (Badge) --badge-bg: var(--accent-soft) --badge-fg: var(--accent) --badge-radius: var(--radius-full) --badge-padding-x: 12px --badge-padding-y: 4px --badge-font-size: 0.75rem --badge-font-weight: 600 # 导航 (Navigation) --nav-bg: rgba(21,22,23,0.85) --nav-backdrop: blur(12px) --nav-border: var(--border) --nav-link-fg: var(--fg-secondary) --nav-link-hover-fg: var(--fg) --nav-link-active-fg: var(--accent) # 分割线 (Divider) --divider-color: var(--border) --divider-width: 1px # 表格 (Table) --table-header-bg: rgba(255,255,255,0.04) --table-row-hover-bg: rgba(255,255,255,0.03) --table-border: var(--border) --table-cell-padding: 12px 16px # 模态框 (Modal) --modal-bg: var(--bg-raised) --modal-backdrop: rgba(0,0,0,0.6) --modal-backdrop-blur: blur(4px) --modal-radius: var(--radius-xl) --modal-padding: 32px --modal-shadow: var(--shadow-xl) # 提示工具 (Tooltip) --tooltip-bg: var(--fg) --tooltip-fg: var(--bg) --tooltip-radius: var(--radius-sm) --tooltip-padding: 8px 12px --tooltip-shadow: var(--shadow-md) --- ## 动效 (Motion) --- --duration-fast: 120ms --duration-normal: 200ms --duration-slow: 350ms --duration-reveal: 500ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1) --easing-spring: cubic-bezier(0.5, 1.8, 0.8, 0.8) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色 #ffbe98（暖桃色），紫色 #b09cfb 仅作辅助品牌色，绿色 #4ecb71 用于成功状态 2. 形状锁定：按钮全圆角 (pill)，卡片 16-24px 圆角，输入框 10px 圆角 3. 阴影系统：硬边偏移阴影为核心特征（如 3px 3px 0 0），不使用模糊阴影 4. 主题锁定：纯暗色主题，不使用浅色段落 5. 字体锁定：Display 用 Gasoek One，Body 用 Geist Sans，代码用 Geist Mono 6. 间距锁定：4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 --- ## 布局家族 (Layout Families) --- 1. 分割英雄区 (Split Hero): 左文案右产品截图，6/6 列 2. 硬卡网格 (Hard Card Grid): 带硬阴影的卡片网格 3. 代码展示带 (Code Showcase Strip): 代码或产品 UI 预览 4. 指标条 (Metrics Strip): 数字 KPI 横排展示 5. 非对称 Bento (Asymmetric Bento): 不等大卡片混合布局 6. Logo 墙 (Logo Wall): 客户品牌展示 7. 定价对比 (Pricing Comparison): 推荐方案用硬阴影突出 --- ## PC端布局规范 --- - 最大内容宽度: 1200px - 内容区内边距: 48px - 导航高度: 64px - 段落垂直间距: 80px 至 128px - 12列网格系统 - Hero 标题最多 2 行，副标题不超过 24 字 - 主要 CTA 必须在首屏可见 - 导航不超过 5 个主链接 --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 导航高度: 52px - 段落垂直间距: 48px 至 64px - 4列网格系统 - 卡片全宽堆叠 - 按钮全宽或最少 44px 触摸目标 - 汉堡菜单折叠导航 --- ## 平板端布局规范 (768px-1024px) --- - 内容区内边距: 32px - 导航高度: 56px - 段落垂直间距: 56px 至 80px - 6列网格系统 --- ## 组件状态 (Component States) --- 每个交互元素必须有完整状态： - hover（悬停）: 颜色加深 / 阴影缩小 - focus-visible（聚焦）: 2px 强调色光环 - active（按下）: 阴影消失 - disabled（禁用）: 40% 透明度 - loading（加载中）: 骨架屏或旋转指示器 --- ## 使用提示词模板 (Prompt Template) --- 使用 Creem Neo-Brutalist Dark 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[landing / dashboard / pricing] - 转化目标：[目标 CTA] 要求： - 暗色背景 (#151617)，硬边阴影 (3px 3px 0 0) - 主强调色暖桃色 (#ffbe98)，辅助品牌色淡紫 (#b09cfb) - Display 字体 Gasoek One，正文字体 Geist Sans - 避免模糊阴影、避免软渐变、避免柔和卡片 - Neo-brutalist 风格但保持专业可用性 - 至少 4 种布局家族防止重复感 - 移动端响应式折叠 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用模糊 box-shadow（这个风格的核心就是硬边阴影） - 不要使用渐变背景 - 不要使用玻璃态 (glassmorphism) - 不要使用多彩图标 - 不要使用圆形的软卡片 - 不要使用紫色的 AI 网格背景 - 不要使用三个相同大小的功能卡片排成一行 - 不要使用伪终端/伪仪表盘装饰
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-creem-neo-brutalist-dark-d36b12.txt（仅本地保留，不入库不部署）