Supabase

version: alpha name: 受 Supabaze 启发的设计分析 description: 对 Supabaze 设计语言的启发式解读——一个建立在干净的白色和近黑色系统上的开源数据库平台，配以单一标志性的翡翠绿 CTA、自定义的人文无衬线展示层以及合成在首屏上方的密集产品 UI 模型。品牌读起来是安静技术的：极简外壳、近乎单色的调色板，绿色主色作为页面上唯一的色彩事件。

colors: primary: "#3ecf8e" primary-deep: "#24b47e" primary-soft: "#4ade80" ink: "#171717" ink-secondary: "#212121" ink-mute: "#707070" ink-mute-2: "#9a9a9a" ink-faint: "#b2b2b2" on-primary: "#171717" on-dark: "#ffffff" canvas: "#ffffff" canvas-soft: "#fafafa" canvas-night: "#1c1c1c" canvas-night-soft: "#202020" hairline: "#dfdfdf" hairline-strong: "#c7c7c7" hairline-cool: "#ededed" hairline-cool-2: "#efefef" hairline-cool-3: "#d4d4d4" accent-purple: "#6b01c2" accent-violet: "#644fc1" accent-purple-soft: "#eddbf9" accent-yellow: "#ffdb13" accent-tomato: "#ff2201" accent-pink: "#c7007e" accent-indigo: "#054cff" accent-crimson: "#e2005a"

typography: display-xxl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.92px display-xl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.44px display-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.72px display-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.42px heading-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 micro: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 code: fontFamily: "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px

components: button-primary-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-primary-green-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-secondary-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 0px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-feature-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-block: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.sm}" padding: 16px pill-tag-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px pill-tag-soft: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px 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.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

概述

Supabaze 的设计语言以清晰至上为设计目标。营销表面位于 {colors.canvas}（纯白）之上，文字以 {colors.ink}（#171717——近黑，从不是纯黑）渲染。在整个系统中，唯一持续的色彩事件是翡翠绿主色（{colors.primary} — #3ecf8e）——用作填充 CTA、偶发点缀圆点和字标中的标志性高亮色。其他一切都是校准过的灰色阶梯，从 #ededed 细线冷色到 #171717 墨色，黑色细字配白色字体承担大部分视觉工作。

字体排版使用 Circular，展示层字重 500、正文字重 400。展示层使用紧致的负字距（64px 处 -1.92px）将圆润的人文字形拉入编辑密度。没有大气渐变、没有满幅摄影、没有暗色画布营销轨道——品牌坚持白色。

产品本身作为合成的 UI 截图出现在每个页面上：仪表盘表格、SQL 编辑器、查询构建器、日志流。这些截图是品牌的论点。它们位于 {rounded.lg} 12px 容器内，带有微妙的 1px 细线，通常 2 列排列或在首屏带上方浮动"堆叠面板"合成。

关键特征：

• 单一翡翠主色（{colors.primary} #3ecf8e）作为唯一的色彩事件；其他一切都是单色。
• 白色画布营销轨道，从 {colors.hairline-cool} 到 {colors.ink} 的灰阶层次。
• 自定义人文无衬线展示层，字重 500，负字距从 -1.92px 到 -0.42px。
• 合成的产品 UI 截图（仪表盘、SQL 编辑器、日志流）是主要的装饰元素——从不是摄影，从不是插画。
• 紧致的 6px / 8px 按钮圆角——方形、技术感，从不是胶囊形状。
• 深 {colors.canvas-night}（#1c1c1c）渲染代码块配等宽内联代码；品牌的开发者 DNA 出现在每个片段中。
• 价格层使用暗色反色的 {colors.canvas-night} 推荐层，而不是绿色的——绿色保留给按钮和圆点点缀。

配色

来源页面： 首页（/）、/database、/partners/integrations、/partners/integrations/powersync、/solutions/ai-builders、/pricing。

品牌与点缀

• 翡翠（{colors.primary} — #3ecf8e）：标志性的 CTA 色。填充按钮背景、品牌字标点缀、圆点指示。
• 深翡翠（{colors.primary-deep} — #24b47e）：主色的按下态提升。
• 柔翡翠（{colors.primary-soft} — #4ade80）：图表点缀和产品 UI 中使用的更浅翡翠。
• 点缀紫（{colors.accent-purple} — #6b01c2）：用于集成 logo 和图表点的罕见点缀；从未用作按钮。
• 点缀紫罗兰（{colors.accent-violet} — #644fc1）：与点缀紫同角色的次要点缀。
• 点缀黄（{colors.accent-yellow} — #ffdb13）：仅图表点缀 / 状态指示。
• 点缀粉 / 绯红 / 靛蓝 / 番茄红：保留给集成 logo 和罕见的图表高亮，从不用作系统色。

表面

• 画布（{colors.canvas} — #ffffff）：默认页面背景。
• 柔画布（{colors.canvas-soft} — #fafafa）：用于交替区段带的几乎不着色的白。
• 夜画布（{colors.canvas-night} — #1c1c1c）：代码块、仪表盘模型、推荐价格层使用的深近黑。
• 柔夜画布（{colors.canvas-night-soft} — #202020）：嵌套外框的略亮深色。
• 细线（{colors.hairline} — #dfdfdf）：卡片和表格上的 1px 边框。
• 强细线（{colors.hairline-strong} — #c7c7c7）：强调用略深的边框。
• 冷细线（{colors.hairline-cool} — #ededed）/冷细线 2（#efefef）/冷细线 3（#d4d4d4）：品牌的精细外框灰阶梯。

文字

• 墨色（{colors.ink} — #171717）：默认正文。近黑，从不是纯黑。
• 次要墨色（{colors.ink-secondary} — #212121）：正文强调的略冷近黑。
• 柔墨色（{colors.ink-mute} — #707070）：次要文字和辅助副本。
• 柔墨色 2（{colors.ink-mute-2} — #9a9a9a）：第三级文字。
• 淡墨色（{colors.ink-faint} — #b2b2b2）：禁用 / 占位文字。
• 主色之上（{colors.on-primary} — #171717）：翡翠主色填充上的文字——近黑，不是白色。按钮读作"点亮"的表面配深色字体，而非彩色色块。
• 暗色之上（{colors.on-dark} — #ffffff）：canvas-night 表面上的文字。

字体排版

字体族

展示和 UI 层使用 Circular——Lineto 的专有几何人文无衬线。回退链：'Helvetica Neue', Helvetica, Arial。

为了在没有 Circular 授权时达到最大品牌保真度，使用 Inter（Google Fonts 上的开源）字重 500 用于展示，配合 64px 处 letter-spacing: -1.92px。Inter 是 Circular 几何人文特征最接近的开源替代。

代码块使用系统等宽（ui-monospace，搭配 Menlo / Monaco / Consolas 回退）。

层级

原则

• 整个展示层使用 500 字重。 中等字重读起来是工程化的，而非装饰的。
• 展示层使用负字距。 64px 处 -1.92px 按比例递减——收紧圆润的人文字形到编辑密度。
• 代码使用等宽字体。 系统等宽字体族（Menlo / Monaco）——没有专有的等宽 webfont。

字体替代说明

Circular 是专有的。使用 Inter 字重 500 配合 letter-spacing: -1.92px 用于展示层。Geist Sans（Vercel 开源）是展示和正文的另一个接近替代。避免 Helvetica 默认值——它们更重且缺少几何的暖度。

布局

间距系统

• 基础单位：8px（搭配 2 / 4 / 12 子 token 用于精细工作）。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px。
• 区段内边距：营销表面 64–96px。
• 卡片内边距：功能 / 价格卡片 32px。

网格与容器

• 营销页面在约 1280px 容器中居中，无边缘出血；品牌将内容保留在框内。
• 价格表在 1024 / 768 断点处从 4 列 → 2 列 → 1 列折叠。
• 产品 UI 模型 2 列堆叠或在同一容器内渲染为重叠面板。

留白哲学

品牌在没有大气渐变填充空间的情况下使用慷慨的 64–96px 区段内边距——白色画布就是设计。合成的产品 UI 模型打破区段而不需要装饰。

层次与深度

装饰性深度

品牌的深度是产品 UI 模型而非渐变。堆叠的仪表盘 / SQL 编辑器 / 日志面板合成在一起，带有微妙的 Level 2 阴影以暗示空间层级。

形状

圆角尺度

图像几何

品牌使用最少的摄影。客户 logo 条以统一高度（约 24–32px）灰度显示字标；罕见的案例研究卡片使用 4:3 照片内嵌在 {rounded.lg} 容器中。

组件

按钮

button-primary-green —— 标志性的 CTA。

• 背景 {colors.primary}，文字 {colors.on-primary}（近黑，不是白色），类型 {typography.button-md}，内边距 {spacing.sm} {spacing.lg}（8px 16px），圆角 {rounded.sm} 6px。
• 按下态 button-primary-green-pressed 切换到 {colors.primary-deep}。

button-secondary-outline —— 白色上的描边替代。

• 背景 {colors.canvas}，文字 {colors.ink}，1px solid {colors.hairline-strong} 边框，相同的形状。

button-on-dark —— 用于暗色表面 / 代码块 CTA。

• 背景 {colors.canvas-night}，文字 {colors.on-dark}，相同的形状。

button-link —— 仅文本的内联按钮。

• 透明背景，文字 {colors.ink} 以 {typography.button-md} 渲染，无内边距，悬停时有微妙的下划线。

卡片与容器

card-feature-light —— 白色上的功能卡片。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg} 12px，1px {colors.hairline} 边框。

card-pricing —— 标准价格层。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg}，1px {colors.hairline} 边框。标题 {typography.heading-lg}，价格 {typography.display-md}，正文 {typography.body-md}，CTA button-primary-green 钉在底部。

card-pricing-featured —— 反色暗色的推荐层。

• 背景 {colors.canvas-night}，文字 {colors.on-dark}，其他结构相同。

card-feature-dark —— 深色填充的功能卡片。

• 背景 {colors.canvas-night}，文字 {colors.on-dark}，内边距 {spacing.xxl}，圆角 {rounded.lg}。用于代码重的功能解释。

code-block —— 代码片段容器。

• 背景 {colors.canvas-night}，文字 {colors.on-dark} 以 {typography.code} 渲染。内边距 {spacing.lg} 16px，圆角 {rounded.sm} 6px。

输入与表单

text-input —— 标准表单输入。

• 背景 {colors.canvas}，文字 {colors.ink}，类型 {typography.body-md}，内边距 {spacing.sm} {spacing.md}（8px 12px），圆角 {rounded.sm} 6px，1px {colors.hairline} 边框。

导航

nav-bar-light —— 全站顶部导航。

• 背景 {colors.canvas}，文字 {colors.ink}，内边距 {spacing.lg} {spacing.xl}。Logo 在左，主导航居中，"Sign In" 链接 + 填充的 button-primary-green 在右。

胶囊、标签和芯片

pill-tag-green —— 用于"新"或推荐指示的小绿色胶囊。

• 背景 {colors.primary}，文字 {colors.on-primary}，类型 {typography.micro}，内边距 {spacing.xxs} {spacing.sm}，圆角 {rounded.full}。

pill-tag-soft —— 浅色表面上的中性胶囊。

• 背景 {colors.canvas-soft}，文字 {colors.ink}，其他形状相同。

标志性组件

合成产品 UI 模型 —— 多层仪表盘 / SQL 编辑器 / 日志面板合成，带有微妙的 Level 2 阴影。产品是品牌的论点；模型始终位于白色画布上，无周围装饰。

link-on-light —— 正文中的内联链接。

• 文字 {colors.ink} 以 {typography.body-md} 渲染，带持续的下划线。

footer-light —— 全站页脚。

• 背景 {colors.canvas}，文字 {colors.ink-mute}，类型 {typography.caption}，内边距 {spacing.huge} {spacing.xl}（64px 24px）。包含 4–5 列链接组、社交图标和小型法律行。

推荐与避免

推荐

• 将翡翠 {colors.primary} 保留给填充 CTA 和字标点缀——应谨慎使用。
• 以 500 字重配合负字距渲染展示层——工程化的紧致是品牌的一部分。
• 按钮使用 {rounded.sm} 6px——方形半径，从不是胶囊形。
• 将产品 UI 模型合成在 {rounded.lg} 容器内，带有微妙的 Level 2 阴影。
• 在翡翠按钮上使用近黑 {colors.ink}（而非白色）——绿色读作"点亮"的配深色字体，这是品牌的特立独行选择。
• 为每个代码块应用系统等宽字体。

避免

• 不要引入额外的点缀色作为系统色——紫色、黄色和粉色仅属于图表点和集成 logo。
• 不要将展示字重提高到 500 以上——品牌校准的中等字重在 600+ 时会崩。
• 不要使用胶囊形按钮；品牌的按钮半径是方形的 6px。
• 不要在翡翠按钮上使用白色文字——品牌专门使用近黑配绿色。
• 不要在大气渐变中添加到首屏带——白色画布就是设计。

响应式行为

断点

触摸目标

• 按钮在移动端 ≥ 36×36px；垂直内边距缩放以满足 WCAG AA 最小值。
• 表单字段保持 36px 最小高度。

折叠策略

• 展示层阶梯式 64 → 48 → 36 → 28 → 22px。
• 产品 UI 模型在移动端简化为单一主面板。
• 价格层阶梯式 4 → 2 → 1 列；暗色推荐层始终区分。

图像行为

产品 UI 模型使用 srcset 与桌面 / 移动裁剪；移动裁剪聚焦于最具可操作性的内部面板。

迭代指南

1. 一次专注于一个组件。
2. 直接引用组件名称和 token。
3. 编辑后运行 npx @google/design.md lint DESIGN.md。
4. 默认正文使用 {typography.body-md}；任何面向开发者的片段使用 {typography.code}。
5. 保持翡翠色的稀缺；每个视口一个填充绿色按钮。
6. 白色画布承诺不可妥协——添加大气背景会破坏品牌。