# Style Pack: Swiss Brutalist Utility # 来源: DESGIN.md Style Pack 4 # 适用: 目录、工具、开源项目、计算器、文档、更新日志、研究索引、有态度的发布页 # 情绪: 直接、锐利、原始、可信、机械 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #F4F4EF --bg-raised: #FFFFFF --bg-elevated: #F9F9F6 --fg: #090909 --fg-muted: #55554D --border: #141414 --border-soft: #E2E2DA --accent: #FF4D00 --accent-hover: #D93D00 --accent-fg: #000000 --accent-warm: #FF4D00 --success: #1A8C4A --warning: #C47A12 --danger: #CC3333 --- ## 字体 (Typography) --- --font-display: "Helvetica Neue", "Arial", "Inter", "Neue Haas Grotesk", sans-serif --font-size-display: clamp(3rem, 7vw, 6rem) --font-weight-display: 750 --line-height-display: 0.9 --letter-spacing-display: -0.05em --font-size-h1: clamp(2.5rem, 5vw, 4.5rem) --font-weight-h1: 700 --line-height-h1: 0.95 --letter-spacing-h1: -0.045em --font-size-h2: clamp(1.75rem, 3vw, 3rem) --font-weight-h2: 680 --line-height-h2: 1 --letter-spacing-h2: -0.035em --font-sans: "Helvetica Neue", "Arial", "Inter", ui-sans-serif, system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.6 --letter-spacing-body: -0.008em --font-size-label: 0.75rem --font-weight-label: 700 --line-height-label: 1 --letter-spacing-label: 0.08em --text-transform-label: uppercase --font-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-sm: 4px --radius-md: 6px --radius-lg: 8px --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 --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-hard-sm: 2px 2px 0 #141414 --shadow-hard-md: 4px 4px 0 #141414 --shadow-hard-lg: 6px 6px 0 #141414 --- ## 布局 (Layout) --- --max-width-desktop: 1200px --content-padding-desktop: 48px --content-padding-tablet: 32px --content-padding-mobile: 20px --nav-height-desktop: 64px --nav-height-mobile: 52px --section-gap-desktop: 80px --section-gap-mobile: 56px --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(--fg) --btn-primary-hover-fg: var(--bg) --btn-primary-radius: var(--radius-sm) --btn-primary-padding-x: 18px --btn-primary-padding-y: 12px --btn-primary-font-weight: 700 --btn-primary-text-transform: uppercase --btn-primary-letter-spacing: 0.04em # 次按钮 (Secondary Button) — 黑色边框透明 --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border) --btn-secondary-border-width: 2px --btn-secondary-hover-bg: var(--fg) --btn-secondary-hover-fg: var(--bg) --btn-secondary-radius: var(--radius-sm) --btn-secondary-padding-x: 18px --btn-secondary-padding-y: 12px # 卡片 (Card) — 硬边框 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-border-width: 2px --card-radius: var(--radius-sm) --card-padding: 24px --card-shadow: var(--shadow-hard-sm) # 输入框 (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: 12px --input-padding-y: 12px --input-focus-ring: 0 0 0 2px var(--accent) --input-height: 44px # 表格 (Table) --table-header-bg: var(--fg) --table-header-fg: var(--bg) --table-row-border: var(--border-soft) --table-cell-padding: 12px 16px # 徽章 (Badge) --badge-bg: var(--fg) --badge-fg: var(--bg) --badge-radius: var(--radius-sm) --badge-padding-x: 10px --badge-padding-y: 4px --badge-font-size: 0.688rem --badge-font-weight: 700 --badge-text-transform: uppercase # 导航 (Navigation) --nav-bg: var(--bg) --nav-border: var(--border) --nav-border-width: 0 0 2px 0 --nav-link-fg: var(--fg) --nav-link-hover-fg: var(--accent) --nav-link-active-fg: var(--accent) --nav-link-text-transform: uppercase --nav-link-letter-spacing: 0.06em # 分割线 (Divider) --divider-color: var(--border) --divider-width: 2px --- ## 动效 (Motion) --- --duration-fast: 100ms --duration-normal: 180ms --duration-slow: 300ms --easing-default: cubic-bezier(0.2, 0, 0, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色橙色 #FF4D00，黑白为主 2. 形状锁定：尖角或极小圆角 (sharp or tiny)，按钮 4px，卡片 4px 3. 阴影锁定：硬边偏移阴影或无阴影，不使用模糊阴影 4. 主题锁定：淡米白画布 (#F4F4EF)，黑字 5. 字体锁定：Helvetica/Arial/Inter，大字重，紧凑间距，强层级 6. 间距锁定：4, 8, 12, 16, 24, 32, 48, 64, 96, 128 --- ## 布局家族 (Layout Families) --- 1. 搜索优先 (Search First): 搜索/输入在首屏顶部 2. 非对称特征块 (Asymmetric Feature Blocks): 不等大布局 3. 密集列表 (Dense List): 强大标题行，干净行分离 4. 对比表格 (Comparison Table): 强大表头 5. 网格/目录视图 (Grid/Directory): 排序网格 6. 过滤器芯片 (Filter Chips): 可见筛选器 7. 详情预览 (Detail Preview): 紧凑预览面板 --- ## PC端布局规范 --- - 最大内容宽度: 1200px - 内容区内边距: 48px - 导航高度: 64px - 段落垂直间距: 80px - 12列网格，可见网格/分隔线 --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 导航高度: 52px - 段落垂直间距: 56px - 4列网格 --- ## 组件状态 (Component States) --- - hover: 颜色反色 (黑底橙字 / 橙底黑字) - focus-visible: 2px 橙色实线光环 - active: 无过渡直接状态切换 - disabled: 去色+线框 - loading: 极简黑色旋转指示器 --- ## 使用提示词模板 (Prompt Template) --- 使用 Swiss Brutalist Utility 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[directory / tool / docs / launch] - 转化目标：[目标 CTA] 要求： - 米白画布 (#F4F4EF)，黑网格，唯一橙色强调 (#FF4D00) - 尖锐排版，非对称布局，直接实用感 - 避免柔和粉彩、避免过分圆角 pill、避免装饰渐变 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用柔和粉彩 - 不要使用过分圆角 pill - 不要使用装饰性渐变 - 不要使用玻璃态 - 不要使用模糊阴影 - 不要使用多彩颜色系统 - 不要使用三个相同功能卡片
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-swiss-brutalist-70bf23.txt（仅本地保留，不入库不部署）