# Style Pack: Obsidian Luxury # 来源: DESGIN.md Style Pack 7 # 适用: 高价产品、奢侈品、高级社区、高管咨询、电影感作品集、高客单价落地页 # 情绪: 稀有、克制、戏剧性、昂贵、自信 # 主题: 暗色 (Dark) --- ## 配色 Token (Colors) --- --bg: #050505 --bg-raised: #0E0D0B --bg-elevated: #181610 --fg: #F4EFE5 --fg-secondary: #A8A094 --fg-muted: #7A7468 --border: #3A3325 --border-soft: #242017 --accent: #D4A84F --accent-hover: #E5C46D --accent-fg: #050505 --accent-soft: rgba(212,168,79,0.1) --accent-glow: rgba(212,168,79,0.15) --success: #4A8C5C --warning: #C49A3F --danger: #C4554A --- ## 字体 (Typography) --- --font-display: "Inter", "Neue Haas Grotesk", "Satoshi", ui-sans-serif, sans-serif --font-size-display: clamp(3rem, 7vw, 6rem) --font-weight-display: 700 --line-height-display: 0.9 --letter-spacing-display: -0.05em --font-size-h1: clamp(2.5rem, 5vw, 4.5rem) --font-weight-h1: 680 --line-height-h1: 0.95 --letter-spacing-h1: -0.04em --font-size-h2: clamp(1.75rem, 3vw, 3rem) --font-weight-h2: 640 --line-height-h2: 1 --letter-spacing-h2: -0.03em --font-sans: "Inter", "Neue Haas Grotesk", ui-sans-serif, system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.7 --letter-spacing-body: -0.006em --font-serif: "Newsreader", "Tiempos", "Cormorant Garamond", serif --font-size-serif-display: clamp(2rem, 3.5vw, 3rem) --font-weight-serif: 400 --line-height-serif: 1.15 --font-style-serif: italic --font-size-label: 0.72rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.1em --text-transform-label: uppercase --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace --font-size-mono: 0.813rem --font-weight-mono: 500 --line-height-mono: 1.45 --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-sm: 4px --radius-md: 8px --radius-lg: 10px --radius-xl: 28px --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 --space-6xl: 160px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-gold-sm: 0 0 0 1px rgba(212,168,79,0.15) --shadow-gold-md: 0 0 0 1px rgba(212,168,79,0.25), 0 0 20px rgba(212,168,79,0.05) --- ## 布局 (Layout) --- --max-width-desktop: 1280px --max-width-cinematic: 1440px --content-padding-desktop: 56px --content-padding-tablet: 36px --content-padding-mobile: 24px --nav-height-desktop: 72px --nav-height-mobile: 56px --section-gap-desktop: 128px --section-gap-mobile: 80px --grid-columns-desktop: 12 --grid-columns-tablet: 6 --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-sm) --btn-primary-padding-x: 22px --btn-primary-padding-y: 14px --btn-primary-font-weight: 600 --btn-primary-font-size: 0.938rem --btn-primary-letter-spacing: 0.02em # 次按钮 (Secondary Button) — 奶油色轮廓 --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--fg-secondary) --btn-secondary-hover-bg: rgba(244,239,229,0.06) --btn-secondary-hover-border: var(--fg) --btn-secondary-radius: var(--radius-sm) --btn-secondary-padding-x: 22px --btn-secondary-padding-y: 14px # 卡片 (Card) — 暗面 + 金色边框 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-lg) --card-padding: 32px --card-shadow: var(--shadow-none) --card-hover-border: rgba(212,168,79,0.3) # 输入框 (Input) --input-bg: var(--bg-raised) --input-fg: var(--fg) --input-placeholder: var(--fg-muted) --input-border: var(--border) --input-radius: var(--radius-sm) --input-padding-x: 16px --input-padding-y: 14px --input-focus-border: var(--accent) --input-focus-ring: 0 0 0 1px var(--accent) --input-height: 48px # 徽章 (Badge) --badge-bg: var(--border-soft) --badge-fg: var(--fg-secondary) --badge-radius: var(--radius-sm) --badge-padding-x: 10px --badge-padding-y: 5px --badge-font-size: 0.688rem --badge-font-weight: 600 --badge-letter-spacing: 0.06em --badge-text-transform: uppercase # 导航 (Navigation) --nav-bg: rgba(5,5,5,0.9) --nav-backdrop: blur(12px) --nav-border: none --nav-link-fg: var(--fg-secondary) --nav-link-hover-fg: var(--fg) --nav-link-active-fg: var(--accent) # 图片 (Image) --image-radius: var(--radius-sm) --image-min-height: 400px --- ## 动效 (Motion) --- --duration-fast: 180ms --duration-normal: 280ms --duration-slow: 450ms --duration-reveal: 700ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --easing-luxury: cubic-bezier(0.25, 0.1, 0.15, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色金色 #D4A84F，不使用其他彩色 CTA 2. 形状锁定：尖锐高级 (sharp premium)，按钮 4px，卡片 10px 3. 主题锁定：近黑画布 (#050505)，暖象牙文字 (#F4EFE5) 4. 字体锁定：精确无衬线为主，可选衬线仅限一个编辑大标题或引用 5. 间距锁定：更宽松，4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160 6. 产品通过"拒绝呐喊"显得昂贵 --- ## 布局家族 (Layout Families) --- 1. 电影感英雄区 (Cinematic Hero): 极少文字+大图+克制 CTA 2. 可信度条 (Credibility Strip): Logo 或数据 3. 案例研究 (Case Study): 大卡+细节 4. 评价引用 (Testimonial Quote): 大幅引用+署名 5. 问题叙述 (Problem Narrative): 故事线区块 6. 过程展示 (Process): 编号步骤 7. 报价堆叠 (Offer Stack): 高价方案+银色描边 --- ## PC端布局规范 --- - 最大内容宽度: 1280px (标准) / 1440px (电影感) - 内容区内边距: 56px (非常宽松) - 段落垂直间距: 128px (非常宽松) --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 24px - 段落垂直间距: 80px --- ## 组件状态 (Component States) --- - hover: 金色发光 + 微妙金色描边 - focus-visible: 1px 金色光环 - active: 稍暗 - disabled: 35% 不透明度 - loading: 金色微闪 --- ## 使用提示词模板 (Prompt Template) --- 使用 Obsidian Luxury 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[landing / service / portfolio] - 转化目标：[目标 CTA] 要求： - 近黑画布 (#050505)，暖象牙文字 (#F4EFE5) - 克制金色强调 (#D4A84F) - 电影感间距，高级高客单价自信 - 避免廉价金色渐变、避免过多图标、避免过多动画 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用廉价金色渐变 - 不要使用过多图标 - 不要使用过多动画 - 不要使用小缩略图 (图片要大幅高质量) - 不要使用多彩色 - 不要使用软阴影 - 不要使用大圆角
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-obsidian-luxury-13c333.txt（仅本地保留，不入库不部署）