# Style Pack: Industrial Swiss # 来源: UNIVERSAL_DESIGN.md Style Pack 6 # 适用: 工程作品集、技术代理商、硬件工具、重数据编辑、需要机械严肃感的产品 # 情绪: 原始、网格化、纪律性、印刷感 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #F4F4F0 --bg-raised: #EAE8E3 --bg-elevated: #FFFFFF --fg: #111111 --fg-muted: #5F5F58 --fg-secondary: #3A3A35 --border: #1A1A1A --border-strong: #111111 --accent: #D71920 --accent-hover: #B3131A --accent-fg: #FFFFFF --accent-soft: rgba(215,25,32,0.08) --success: #1D7A3A --warning: #C47A12 --danger: #CC1A1A --- ## 字体 (Typography) --- --font-display: "Archivo Black", "Monument Extended", "Neue Haas Grotesk Black", sans-serif --font-size-display: clamp(3rem, 6vw, 6rem) --font-weight-display: 800 --line-height-display: 0.88 --letter-spacing-display: -0.04em --text-transform-display: uppercase --font-size-h1: clamp(2.5rem, 4.5vw, 4.5rem) --font-weight-h1: 750 --line-height-h1: 0.92 --font-size-h2: clamp(1.75rem, 3vw, 3rem) --font-weight-h2: 700 --line-height-h2: 0.96 --font-sans: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif --font-size-body: 0.938rem --font-weight-body: 400 --line-height-body: 1.55 --font-size-label: 0.688rem --font-weight-label: 700 --line-height-label: 1 --letter-spacing-label: 0.1em --text-transform-label: uppercase --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace --font-size-mono: 0.75rem --font-weight-mono: 600 --line-height-mono: 1.35 --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-xs: 2px --radius-sm: 3px --radius-md: 4px --radius-lg: 6px --- ## 间距 (Spacing) --- --space-xs: 4px --space-sm: 8px --space-md: 16px --space-lg: 24px --space-xl: 40px --space-2xl: 56px --space-section: 96px --space-gap: 1px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-hard: 4px 4px 0 #111111 --- ## 布局 (Layout) --- --max-width-desktop: 1200px --content-padding-desktop: 40px --content-padding-tablet: 28px --content-padding-mobile: 16px --nav-height-desktop: 56px --nav-height-mobile: 48px --section-gap-desktop: 80px --section-gap-mobile: 48px --- ## 组件规格 (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-xs) --btn-primary-padding-x: 16px --btn-primary-padding-y: 10px --btn-primary-font-weight: 700 --btn-primary-font-size: 0.813rem --btn-primary-text-transform: uppercase --btn-primary-letter-spacing: 0.06em # 次按钮 (Secondary Button) --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border) --btn-secondary-hover-bg: var(--fg) --btn-secondary-hover-fg: var(--bg) --btn-secondary-radius: var(--radius-xs) # 卡片 (Card) — 尖锐矩形 + 可见边框 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-border-width: 1px --card-radius: var(--radius-none) --card-padding: 20px --card-shadow: none # 表格 (Table) --table-header-bg: var(--fg) --table-header-fg: var(--bg) --table-cell-padding: 8px 14px # 输入框 (Input) --input-bg: var(--bg-elevated) --input-fg: var(--fg) --input-border: var(--border) --input-radius: var(--radius-none) --input-padding-x: 12px --input-padding-y: 10px --input-focus-ring: 0 0 0 2px var(--accent) --input-height: 42px # 导航 (Navigation) — 紧凑大写 --nav-bg: var(--bg) --nav-border: var(--border) --nav-link-fg: var(--fg) --nav-link-hover-fg: var(--accent) --nav-link-text-transform: uppercase --nav-link-letter-spacing: 0.08em --nav-link-font-size: 0.75rem # 徽章 (Badge) --badge-bg: var(--fg) --badge-fg: var(--bg) --badge-radius: var(--radius-none) --badge-font-size: 0.625rem --badge-font-weight: 700 --badge-text-transform: uppercase # 超大数字 (Oversized Numerals) --big-num-font: var(--font-display) --big-num-size: 6rem --big-num-fg: var(--fg) --big-num-line-height: 0.85 --- ## 动效 (Motion) --- --duration-fast: 80ms --duration-normal: 150ms --easing-default: cubic-bezier(0.2, 0, 0, 1) # 极小动效——悬停状态锋利且实用 --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：红色 #D71920 2. 形状锁定：方形或 2px 圆角，完全无圆角 3. 阴影锁定：硬阴影或无阴影，不使用模糊阴影 4. 主题锁定：工业灰画布 (#F4F4F0) 5. 字体锁定：Archivo Black/Monument Extended 做大标题，IBM Plex Sans 做正文 6. 间距锁定：4, 8, 16, 24, 40, 56, 96 --- ## 布局家族 (Layout Families) --- 1. 巨大大写标题英雄区 (Massive Uppercase Headline Hero): 严格网格 2. 模块化网格 (Modular Grid): 可见列线 3. 规格分组瓷砖 (Specs as Grouped Tiles) 4. 超大数字 (Oversized Numerals) 5. 原始分隔线 (Raw Dividers) 6. 对比表格 (Comparison Table) --- ## PC端布局规范 --- - 最大内容宽度: 1200px - 内容区内边距: 40px - 导航高度: 56px (紧凑) - 段落垂直间距: 80px - 可见网格 --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 16px - 导航高度: 48px - 段落垂直间距: 48px --- ## 使用提示词模板 (Prompt Template) --- 使用 Industrial Swiss 风格。 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要混合柔和渐变 - 不要使用圆角 pill 按钮 - 不要过度使用 CRT 扫描线（除非明确要求） - 不要使用软阴影 - 不要使用柔和颜色 - 不要使用大圆角
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-industrial-swiss-bd3577.txt（仅本地保留，不入库不部署）