forest instrument
本地来源:Knowledge/World/设计配色/forest-instrument.txt
# Style Pack: Forest Instrument # 来源: UNIVERSAL_DESIGN.md Style Pack 7 # 适用: 高级消费工具、气候、户外、手工艺、带温度的理财、本地服务产品 # 情绪: 扎根、安静、成熟、温暖但不千篇一律 # 主题: 浅色 (Light) + 深绿段落切换 --- ## 配色 Token (Colors) --- --bg: #F6F4ED --bg-raised: #FFFFFF --bg-deep: #1D2A22 --fg: #182019 --fg-muted: #687064 --fg-secondary: #3E453E --border: #DAD6C9 --border-strong: #C8C4B4 --accent: #A44A3F --accent-hover: #8A3A30 --accent-fg: #FFFFFF --accent-soft: rgba(164,74,63,0.08) --accent-deep: #1D2A22 --accent-deep-fg: #F6F4ED --success: #4A7C5A --warning: #C49A3F --danger: #C44A3F --- ## 字体 (Typography) --- --font-display: "Satoshi", "Cabinet Grotesk", system-ui, sans-serif --font-size-display: clamp(2.5rem, 5vw, 4.5rem) --font-weight-display: 680 --line-height-display: 0.98 --letter-spacing-display: -0.03em --font-size-h1: clamp(2rem, 3.5vw, 3.25rem) --font-weight-h1: 650 --line-height-h1: 1.02 --font-sans: "Geist", system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.68 --font-serif: "Newsreader", "Tiempos", serif --font-size-serif-display: clamp(1.75rem, 3vw, 2.5rem) --font-weight-serif: 400 --line-height-serif: 1.15 --font-size-label: 0.75rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.05em --font-mono: ui-monospace, monospace --font-size-mono: 0.813rem --font-weight-mono: 500 --line-height-mono: 1.4 --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-sm: 4px --radius-md: 10px --radius-lg: 14px --radius-xl: 18px --radius-full: 999px --- ## 间距 (Spacing) --- --space-xs: 4px --space-sm: 8px --space-md: 16px --space-lg: 24px --space-xl: 40px --space-section: 96px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-sm: 0 1px 3px rgba(24,32,25,0.03) --shadow-card: 0 2px 8px rgba(24,32,25,0.04) --- ## 布局 (Layout) --- --max-width-desktop: 1180px --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 --- ## 组件规格 (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-md) --btn-primary-padding-x: 18px --btn-primary-padding-y: 12px --btn-primary-font-weight: 600 # 次按钮 (Secondary Button) --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border-strong) --btn-secondary-hover-bg: var(--bg-raised) --btn-secondary-radius: var(--radius-md) # 卡片 (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) # 材质卡片 (Material Card) --material-card-bg: var(--bg) --material-card-border: var(--border) --material-card-divider: var(--border) # 深绿段落 (Deep Section) --deep-section-bg: var(--bg-deep) --deep-section-fg: var(--bg) --deep-section-accent: var(--accent) # 故事块 (Story Block) --story-padding: 48px --story-title-font: var(--font-display) --story-body-font: var(--font-sans) # 输入框 (Input) --input-bg: var(--bg-raised) --input-fg: var(--fg) --input-border: var(--border-strong) --input-radius: var(--radius-md) --input-padding-x: 14px --input-padding-y: 12px --input-focus-ring: 0 0 0 2px var(--accent-soft) --input-height: 44px # 徽章 (Badge) --badge-bg: var(--bg) --badge-fg: var(--fg-muted) --badge-radius: var(--radius-md) --badge-padding-x: 10px --badge-padding-y: 4px # 导航 (Navigation) --nav-bg: rgba(246,244,237,0.9) --nav-backdrop: blur(8px) --nav-border: none --- ## 动效 (Motion) --- --duration-fast: 150ms --duration-normal: 220ms --duration-slow: 350ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定:砖红色 #A44A3F 为唯一交互强调色 2. 深绿色 (#1D2A22) 用于氛围营造(段落背景),不代表两个强调色 3. 形状锁定:按钮 10-14px,卡片 18px 4. 主题锁定:暖米色画布 (#F6F4ED),可选深绿气氛段落 5. 字体锁定:Satoshi/Cabinet Grotesk + Geist,可选衬线仅限遗产品牌 6. 图片:真实摄影,不是插画 --- ## 布局家族 (Layout Families) --- 1. 编辑产品照英雄区 (Editorial Product Shot Hero): 风景/产品裁图 + 左对齐标题 2. 材质卡片 (Material Cards): 温暖质感 3. 故事块 (Story Blocks): 叙述性排版 4. 分组规格 (Grouped Specs): 简洁规格展示 5. 评价卡片 (Testimonial Cards): 暖色调 6. 深绿气氛段 (Deep Green Atmosphere Section) --- ## PC端布局规范 --- - 最大内容宽度: 1180px - 内容区内边距: 48px - 正文最大宽度: 65ch - 段落垂直间距: 96px --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 段落垂直间距: 64px --- ## 使用提示词模板 (Prompt Template) --- 使用 Forest Instrument 风格。 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用黄铜、牛血红、浓咖啡和米色作为自动高级调色板 - 不要使用假工匠标签 - 不要使用长规格表 - 不要使用黄铜/金色图标套装 - 不要使用大量装饰元素 - 深绿色是气氛,不要替代砖红色作为 CTA
本文档为站内渲染。原始文件本地路径:saas/source/knowledge-world/Knowledge-World-设计配色-forest-instrument-112dd7.txt(仅本地保留,不入库不部署)