Slack

version: alpha name: Slacc-Inspired-design-analysis description: An inspired interpretation of Slacc's design language — a workplace messaging brand built on a deep aubergine primary, with cream-lavender hero gradients, blue inline links, and pill CTAs. The system pairs a proprietary humanist sans for display with a separate utility sans for body, and stages product UI mockups inside soft pastel-mesh hero composites that act as both decoration and feature explanation.

colors: primary: "#4a154b" primary-deep: "#481a54" primary-press: "#611f69" primary-tint: "#592466" on-primary: "#ffffff" ink: "#1d1d1d" ink-mute: "#696969" link-blue: "#1264a3" link-hover: "#3860be" canvas: "#ffffff" canvas-cream: "#f4ede4" canvas-lavender: "#f9f0ff" surface-elev: "#ffffff" surface-aubergine: "#4a154b" hairline: "#e6e6e6" hairline-strong: "#000000" semantic-error: "#cc4117" semantic-success: "#007a5a" on-aubergine-mute: "#d9bdde"

typography: display-xxl: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.12 letterSpacing: -0.768px display-xl: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 58px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.464px display-lg: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 50px fontWeight: 700 lineHeight: 1.12 letterSpacing: -0.6px display-md: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.25 letterSpacing: -0.256px heading-lg: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.33 letterSpacing: -0.096px heading-md: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 heading-sm: fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: -0.0216px body-lg: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: -0.0216px body-md: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-strong: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.16px button-lg: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 button-md: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.38 letterSpacing: 0.2px button-cap: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 14.4px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.144px caption: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0.1px micro-cap: fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.96px

rounded: xs: 2px sm: 4px md: 8px lg: 12px xl: 16px xxl: 48px pill: 90px

spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px xxl: 24px huge: 28px

components: button-primary-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 14px 28px button-primary-pill-pressed: backgroundColor: "{colors.primary-press}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 14px 28px button-secondary-pill: backgroundColor: "{colors.canvas-lavender}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 10px 30px button-outline-aubergine: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 14px 28px button-outline-on-aubergine: backgroundColor: "{colors.surface-aubergine}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 14px 28px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 12px pill-cap-shade: backgroundColor: "{colors.canvas-cream}" textColor: "{colors.ink}" typography: "{typography.micro-cap}" rounded: "{rounded.pill}" padding: 4px 12px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px card-pricing-featured: backgroundColor: "{colors.surface-aubergine}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px card-feature-cream: backgroundColor: "{colors.canvas-cream}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px card-aubergine-band: backgroundColor: "{colors.surface-aubergine}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" rounded: "{rounded.xl}" padding: 48px card-stat: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.display-lg}" rounded: "{rounded.xl}" padding: 32px nav-bar-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.link-blue}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px link-on-aubergine: backgroundColor: "{colors.surface-aubergine}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-aubergine: backgroundColor: "{colors.surface-aubergine}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 32px 24px

概述

Slacc 的设计语言围绕深紫茄色主色（{colors.primary}）展开——这是品牌最持久的视觉资产——被应用为主导按钮颜色、页脚带、特色定价层级和品牌字标。在那抹紫茄色周围，系统搭建了一个异常精致的生态系统：奶油-薰衣草色首屏画布配柔和粉彩网格渐变（桃橙、薰衣草、灰绿），在漂浮的产品 UI 模型后面搏动，实际的界面外壳以精细的细节渲染为 3:2 比例。

字体排版在两个专有的人文无衬线字体族之间分配。展示层级以 700 字重在 32–64px 尺寸下运行，带有负字距，在首屏标题上呈现紧凑的光学密度。UI 层级使用第二个字体族，以 400–700 配合略微放松的行高（1.55）——品牌的正文读起来很安静，不与紫茄色瞬间争抢。

按钮是 90px 圆角的胶囊形，配有不寻常的大量水平内边距（28–30px），给它们一种明显舒适、几乎过度填充的感觉。紫茄色主胶囊是大多数场景下唯一的填充按钮；次级操作使用柔和薰衣草胶囊（{colors.canvas-lavender}），读起来像主表面的更柔和回声。行内链接切换为饱和蓝色（{colors.link-blue}）——品牌在正文字色中唯一与紫茄色-奶油色世界不同的彩色。

关键特征：

• 单一紫茄色主色（{colors.primary}）在 CTA、特色定价层级、页脚带与字标间复用——品牌的色彩一神论。
• 奶油-薰衣草色首屏画布（{colors.canvas-cream} / {colors.canvas-lavender}）配扩散的粉彩网格大气渐变与漂浮的 UI 模型合成。
• 胶囊按钮使用 {rounded.pill}（90px 圆角）配慷慨的 28–30px 水平内边距——按 SaaS 默认标准过度填充，是有意为之。
• 展示尺寸的紧凑负字距（64px 上 -0.768px）营造编辑性密度的标题。
• 蓝色行内链接（{colors.link-blue}）——正文中唯一的非紫茄色彩色强调。
• 粉彩网格渐变大气：每个首屏带都有微妙的桃-薰衣草-灰绿洗色置于其后；产品 UI 位于其上，从不在其内。
• 统计数据卡片以巨型紫茄色展示字号（90% / 43 / 87%）渲染在白色上——纯粹通过尺度实现量化强调。

配色

来源页面： 首页（/）、/features/channels、/pricing、/contact-sales。

品牌与强调色

• Aubergine（{colors.primary} — #4a154b）：品牌的主表面与 CTA 色。深邃、温暖的紫色带一丝宝石红——用于填充按钮、特色定价层级、页脚带与品牌字标。
• Aubergine Deep（{colors.primary-deep} — #481a54）：从不同表面提取的 {colors.primary} 的近乎相同的兄弟；按功能等价处理。
• Aubergine Press（{colors.primary-press} — #611f69）：主色的按下态抬升，略微更亮、更暖。
• Aubergine Tint（{colors.primary-tint} — #592466）：紫茄色-于-紫茄色表面上的边框强调。
• Link Blue（{colors.link-blue} — #1264a3）：行内链接颜色——饱和、略带暖色的蓝色。正文中唯一的紫茄色替代彩色。
• Link Hover（{colors.link-hover} — #3860be）：链接悬停态使用的更饱和的蓝色。

表面

• Canvas White（{colors.canvas} — #ffffff）：默认内容表面。
• Canvas Cream（{colors.canvas-cream} — #f4ede4）：暖色近白色，用于首屏渐变与功能带。增加编辑性温度。
• Canvas Lavender（{colors.canvas-lavender} — #f9f0ff）：淡薰衣草色调，用作次级按钮表面与柔和段带。
• Surface Aubergine（{colors.surface-aubergine} — #4a154b）：主紫茄色复用作表面——特色定价层级、页脚、深色功能带。
• Hairline（{colors.hairline} — #e6e6e6）：卡片上的 1px 边框与表格分隔线。

文本

• Ink（{colors.ink} — #1d1d1d）：浅色表面上的主正文。略低于纯黑。
• Ink Mute（{colors.ink-mute} — #696969）：次级文本、说明、辅助文案。
• On Primary（{colors.on-primary} — #ffffff）：紫茄色表面上的文字与填充 CTA 上的文字。
• On Aubergine Mute（{colors.on-aubergine-mute} — #d9bdde）：紫茄色表面上的次级文本——一种去饱和的紫灰色，读起来像弱化的亮色。

语义色

• Error（{colors.semantic-error} — #cc4117）：表单错误与破坏性操作颜色。
• Success（{colors.semantic-success} — #007a5a）：行内成功指示。

字体排版

字体族

展示层级是 Salesforce Avant Garde——一款专有的人文无衬线字体，带有宽字怀与略微几何化的字符。不可用时回退到系统字体栈（system-ui, -apple-system, BlinkMacSystemFont）。

UI 层级是 Salesforce Sans——一款单独的专有字体，用于正文、说明与按钮标签。相同的回退链。

两款字体都是专有的，不能自由获取。使用 Inter（通过 Google Fonts 开源）以匹配字重替代展示与正文两个层级——Inter 是两个层级最接近的开源对应物。

层级

原则

• 展示尺寸的紧凑字距。 32–64px 尺寸上的负字距；专有字体默认较宽，负字距将其拉入编辑性密度。
• 正文行高 1.55。 略微放松以获得营销可读性，但不跨越到轻盈 / 1.7+ 区间。
• 大写小标签。 所有小标签使用大写并根据尺寸配正字距 0.96–0.144px。

字体替代说明

Inter（开源 Google Fonts）可用于展示与 UI 两个层级——Inter 在 700 字重下配 -0.768px 字距紧密近似品牌的展示行为。为了最大的品牌保真度，Lato 是更柔和的人文替代，在正文字号下配对良好。避免在正文中使用系统 UI 字体——品牌的微妙温度在默认字重下消失。

布局

间距系统

• 基础单位：8px（配有 4 / 12 / 16 / 20 / 24 / 28 子 token 用于精细垂直节奏）。
• Tokens：{spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 20px · {spacing.xxl} 24px · {spacing.huge} 28px。
• 段内边距：营销表面上 64–96px；交易型页收紧到 48px。
• 卡片内边距：定价卡片 32px；紫茄色带卡片 48px。

网格与容器

• 营销页面在约 1240px 容器中居中，边缘流血的粉彩网格渐变超出容器。
• 定价在 992 / 768 断点处折叠 4 列 → 2 列 → 1 列。
• 统计行：3 列网格配巨型 50px 紫茄色展示数字。

留白哲学

粉彩网格渐变填充营销页面上大部分负空间——段感觉宽裕而实际上并不空。在交易型页面上，渐变消失，留白回到传统的 48px 段呼吸空间。

层次与深度

装饰性深度

品牌的深度语言是粉彩网格渐变——桃色、薰衣草、灰绿色停靠点在大半径下模糊融合，在产品 UI 截图背后营造柔和的大气背景。渐变是品牌"无阴影深度"的特有风味：眼睛感知产品模型悬浮在发光背景之上，而没有任何字面的抬起。

形状

圆角比例

摄影几何

品牌更多地使用产品 UI 截图而非摄影。UI 模型位于粉彩网格渐变之上，约 4:3 比例，无阴影，但渐变提供眼睛期望的"抬起"。真实摄影出现在客户 logo 条与偶尔的案例研究卡片中，被视为 {rounded.xl} 容器内的全幅。

组件

按钮

button-primary-pill — 系统范围内的主导 CTA。

• 背景 {colors.primary}，文本 {colors.on-primary}，字体 {typography.button-md}，内边距 14px 28px，圆角 {rounded.pill} 90px。
• 按下态 button-primary-pill-pressed 将背景切换到 {colors.primary-press}。

button-secondary-pill — 柔和薰衣草替代。

• 背景 {colors.canvas-lavender}，文本 {colors.ink}，内边距 10px 30px，相同的胶囊几何。用作紫茄色主胶囊旁边的第二个操作。

button-outline-aubergine — 白色表面上的描边变体。

• 背景 {colors.canvas}，文本 {colors.primary}，2px solid {colors.primary} 边框，相同的胶囊形状。

button-outline-on-aubergine — 紫茄色画布上的描边。

• 背景 {colors.surface-aubergine}（表面上透明），文本 {colors.on-primary}，2px solid {colors.on-primary} 边框，相同的胶囊形状。

卡片与容器

card-pricing — 标准定价层级卡片。

• 背景 {colors.canvas}，内边距 {spacing.xxl}+（32px），圆角 {rounded.xl} 16px，1px {colors.hairline} 边框。标题使用 {typography.heading-lg}，价格使用 {typography.display-md}，正文使用 {typography.body-md}，CTA 钉到底部作为 button-primary-pill。

card-pricing-featured — 反相紫茄色特色层级。

• 背景 {colors.surface-aubergine}，文本 {colors.on-primary}，其他与 card-pricing 相同。紫茄色填充是品牌标志性的特色层级选择。

card-feature-cream — 奶油轨道上的功能说明卡片。

• 背景 {colors.canvas-cream}，文本 {colors.ink}，圆角 {rounded.xl}，内边距 32px。

card-aubergine-band — 大型水平带卡片配紫茄色填充，通常包含营销页面的收尾 CTA。

• 背景 {colors.surface-aubergine}，文本 {colors.on-primary}，内边距 48px，圆角 {rounded.xl} 16px。

card-stat — 统计数据高亮卡片。

• 背景 {colors.canvas}，文本 {colors.primary} 使用 {typography.display-lg}（50px 紫茄色数字）渲染。容纳单个百分比/数字，下方配小说明。

输入与表单

text-input — 标准表单字段。

• 背景 {colors.canvas}，文本 {colors.ink}，字体 {typography.body-md}，内边距 10px 12px，圆角 {rounded.sm} 4px，1px {colors.hairline} 边框。

导航

nav-bar-light — 所有营销页面的顶部导航。

• 背景 {colors.canvas}，文本 {colors.ink}，内边距 {spacing.lg} {spacing.xxl}。左侧 logo 字标，中间导航项，右侧两个胶囊按钮（"Sign In" 用 button-secondary-pill，"Try For Free" 用 button-primary-pill）。

胶囊、标签与芯片

pill-cap-shade — 用在定价层级标题上方的小型大写胶囊作为小标签。

• 背景 {colors.canvas-cream}，文本 {colors.ink}，字体 {typography.micro-cap}，内边距 4px 12px，圆角 {rounded.pill}。

标志性组件

粉彩网格渐变背景 — 桃色（约 #fff0e6）+ 薰衣草（#e9d8ff）+ 灰绿停靠点模糊融合在首屏带后面。作为 CSS 径向渐变栈实现，而非单张图像。提供品牌的深度/亮度，而无字面阴影。

漂浮产品 UI 模型 — 产品截图被 {rounded.lg}（12px）容器框住，置于粉彩网格渐变之上，无边框或阴影。渐变执行抬起的工作。

紫茄色页脚带 — 每个营销页面以全幅 card-aubergine-band 结尾，包含白色字体的收尾 CTA。带的高度慷慨（桌面约 480–600px），读起来像页面的签名。

link-on-light — 浅色表面上正文中的行内链接。

• 文本 {colors.link-blue} 使用 {typography.body-md} 渲染。默认无下划线；悬停时通过 link-hover 行为出现下划线。

link-on-aubergine — 紫茄色表面内的链接。

• 文本 {colors.on-primary}，带持续的下划线。

footer-aubergine — 全站页脚。

• 背景 {colors.surface-aubergine}，文本 {colors.on-primary} 使用 {typography.caption} 渲染，内边距 {spacing.huge}+ {spacing.xxl}（32px 24px）。容纳 4–5 列 {colors.on-aubergine-mute} 链接组、社交图标，以及最底部的小法律/版权行。

推荐与避免

推荐

• 将 {colors.primary} 紫茄色保留给填充 CTA、特色定价层级以及收尾的紫茄色带——它是品牌的色彩一神论。
• 在系统中的每个按钮上使用 {rounded.pill}（90px）——永远不要用圆角矩形按钮。
• 展示层级配负字距（64px 上 -0.768px）；专有字体需要字距拉紧。
• 用粉彩网格渐变背景 + 漂浮产品 UI 模型构成首屏带；渐变就是深度。
• 行内链接使用 {colors.link-blue}——它是唯一的紫茄色彩色替代，属于品牌声音。

避免

• 不要在系统中添加第三种强调色——紫茄色 + 蓝色链接组合已穷尽。
• 不要把按钮内边距压缩到 14px 28px 以下——过度填充的胶囊是品牌感觉的一部分。
• 不要在默认字距（0）下渲染展示层级——没有负字距，标题读起来松散而未经编辑。
• 不要把产品 UI 截图放进卡片内——它们位于粉彩网格渐变之上，从不在外壳内。
• 不要把紫茄色用于正文——它是表面与 CTA 颜色，不是正文字号下的文字颜色。
• 不要在任何地方用方形按钮取代胶囊形状。

响应式行为

断点

触控目标

• 胶囊按钮由于过度填充的几何达到 ≥ 48×48px。符合 WCAG AAA。
• 表单字段保持 44px 最小高度。

折叠策略

• 展示层级沿断点阶梯变化 64 → 50 → 32 → 28 → 24。
• 粉彩网格渐变在移动端重新平铺以防止洗色完全消失。
• 漂浮产品 UI 模型在移动端裁剪到最具可操作性的内部面板。
• 定价层级阶梯式折叠 4 → 2 → 1；紫茄色特色层级保持区别。
• 顶部导航在 768px 以下折叠为汉堡；菜单继承画布颜色。

图像行为

产品 UI 模型使用 srcset 处理桌面 / 平板 / 移动端裁剪；移动端裁剪聚焦于最具可操作性的内部面板，而非缩小整个合成图。

迭代指南

1. 一次专注于一个组件。
2. 直接引用组件名与 token（{colors.primary}、{button-primary-pill}-pressed、{rounded.pill}）。
3. 编辑后运行 npx @google/design.md lint DESIGN.md。
4. 将新变体作为单独条目添加。
5. 正文默认使用 {typography.body-md}；营销引导保留 {typography.body-lg}。
6. 保持紫茄色稀缺——每个视口一个填充紫茄色按钮。
7. 每个首屏带都配粉彩网格渐变背景；裸画布的首屏读起来不像品牌。