# Style Pack: Editorial Stone # 来源: UNIVERSAL_DESIGN.md Style Pack 2 # 适用: AI 研究、教育工具、写作工具、哲学产品、通讯、知识产品、高级个人站 # 情绪: 智慧、文学性、冷静、学院派 # 主题: 浅色 (Light) + 深色段落切换 --- ## 配色 Token (Colors) --- --bg: #FAF9F5 --bg-raised: #F0EEE6 --bg-deep: #141413 --fg: #141413 --fg-muted: #6F6D67 --fg-secondary: #4A4842 --border: #D8D4C8 --border-strong: #C4C0B4 --accent: #D97757 --accent-hover: #C56848 --accent-fg: #141413 --accent-soft: rgba(217,119,87,0.1) --success: #4A8C5C --warning: #C49A3F --danger: #C4554A --- ## 字体 (Typography) --- --font-display: "Newsreader", "Tiempos", "Cormorant Garamond", serif --font-size-display: clamp(2.75rem, 5.5vw, 5rem) --font-weight-display: 400 --line-height-display: 1.05 --font-style-display: normal --font-size-h1: clamp(2.25rem, 4vw, 3.5rem) --font-weight-h1: 400 --line-height-h1: 1.08 --font-size-h2: clamp(1.5rem, 2.5vw, 2.25rem) --font-weight-h2: 500 --line-height-h2: 1.12 --font-sans: "Geist", "Satoshi", system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.7 --letter-spacing-body: -0.006em --font-serif-display: var(--font-display) --font-size-serif-quote: 1.25rem --font-weight-serif-quote: 400 --line-height-serif-quote: 1.5 --font-style-serif-quote: italic --font-size-label: 0.75rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.06em --font-mono: "IBM Plex Mono", "Geist Mono", 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: 12px --radius-xl: 16px --radius-full: 999px --- ## 间距 (Spacing) --- --space-xs: 4px --space-sm: 8px --space-md: 16px --space-lg: 24px --space-xl: 40px --space-2xl: 56px --space-section: 96px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-card: 0 1px 0 var(--border) --shadow-deep-section: none --- ## 布局 (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-sm) --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-sm) # 卡片 (Card) — 大编辑卡片 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-md) --card-padding: 28px --card-shadow: var(--shadow-card) # 编辑卡片 (Editorial Card) --editorial-bg: var(--bg-raised) --editorial-title-font: var(--font-display) --editorial-body-font: var(--font-sans) # 深色段落 (Deep Section) --dark-section-bg: var(--bg-deep) --dark-section-fg: var(--bg) --dark-section-accent: var(--accent) # 引用块 (Blockquote) --blockquote-border: var(--accent) --blockquote-font: var(--font-serif-display) --blockquote-font-style: italic # 分割线 (Divider) --divider-color: var(--border) --divider-width: 1px # 输入框 (Input) --input-bg: var(--bg) --input-fg: var(--fg) --input-border: var(--border-strong) --input-radius: var(--radius-sm) --input-padding-x: 14px --input-padding-y: 12px --input-height: 44px # 导航 (Navigation) --nav-bg: rgba(250,249,245,0.9) --nav-backdrop: blur(8px) --nav-border: var(--border) # 标签 (Tag) --tag-bg: var(--bg-raised) --tag-fg: var(--fg-muted) --tag-radius: var(--radius-sm) --tag-padding-x: 8px --tag-padding-y: 3px --- ## 动效 (Motion) --- --duration-fast: 150ms --duration-normal: 220ms --duration-slow: 350ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一暖陶土色 #D97757 2. 形状锁定：简单矩形或软 8px，少圆角 3. 主题锁定：羊皮纸底色 (#FAF9F5)，可选近黑段落 (#141413) 4. 字体锁定：有根据时使用衬线 (Newsreader/Tiempos)，正文和 UI 用 Geist 5. 装饰系统：下划线、间距、排版，不是渐变 6. 间距：4, 8, 16, 24, 40, 56, 96 --- ## 布局家族 (Layout Families) --- 1. 文章式标题块 (Article Title Block): 英雄区像文章标题 2. 交替羊皮纸/近黑带 (Alternating Parchment/Deep Bands) 3. 全宽引用 (Full-Width Quote): 衬线大引用 4. 散文区 (Essay Section): 长文排版 5. 案例研究卡 (Case-Study Card): 大编辑卡 6. 定价/申请 (Pricing/Application) 7. FAQ --- ## PC端布局规范 --- - 最大内容宽度: 1180px - 内容区内边距: 48px - 正文最大宽度: 65ch - 段落垂直间距: 96px --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 段落垂直间距: 64px --- ## 使用提示词模板 (Prompt Template) --- 使用 Editorial Stone 风格。 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要为显得高级而滥用衬线体 - 不要使用太多颜色 - 不要使用假诗意文案 - 不要使用渐变 - 不要使用重阴影 - 不要使用彩色标签
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-editorial-stone-1cac3e.txt（仅本地保留，不入库不部署）