知识库首页 知识库-世界 forest-instrument.txt

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(仅本地保留,不入库不部署)