Supabase

---
version: alpha
name: "Supabase"
description: "Supabase 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Supabase 的设计语言首先为清晰度而工程化。Marketing surface 位于 `{colors.canvas}`（pure white）之上，文本使用 `{colors.ink}`（`#171717`，near-black，从不使用 pure black）。整个系统唯一持续出现的色彩事件是 **emerald green primary** (`{colors.primary}` — `#3ecf8e`)；它用于 filled CTA、偶发 accent dot，以及 wordmark 中的标志性高亮色。其它部分都是校准过的 grey ladder，从 `#ededed` hairline-cool 到 `#171717` ink，由纤细的 black-on-white typography 承担大部分视觉工作。

Typography 使用 **Circular**：display 为 weight 500，body 为 400。Display tier 使用紧凑 negative letter-spacing（64px 时 -1.92px），把圆润的 humanist letterform 收进 editorial density。没有 atmospheric gradient，没有 full-bleed photography，也没有 dark-canvas marketing track；品牌坚定地使用 white。

产品本身以 composited UI screenshot 的形式出现在每个页面上：dashboard table、SQL editor、query builder、log stream。这些 screenshot 就是品牌论点。它们位于 `{rounded.lg}` 12px container 中，带 subtle 1px hairline，常以 2-up 排布，或在 hero band 上方形成 floating "stacked panes" 构图。

**Key Characteristics:**
- 单一 emerald primary（`{colors.primary}` `#3ecf8e`）是唯一色彩事件；其它全部是 monochrome。
- White canvas marketing track，通过 `{colors.hairline-cool}` 到 `{colors.ink}` 的 greyscale hierarchy 建立层级。
- 定制 humanist sans display tier 使用 weight 500，并带 -1.92px 到 -0.42px 的 negative letter-spacing。
- Composited product UI screenshot（dashboard、SQL editor、log stream）是主导性装饰元素；从不用 photography，也不用 illustration。
- Button radius 紧凑，为 6px / 8px；偏方、技术感，从不是 pill-shaped。
- Code block 渲染在 deep `{colors.canvas-night}` (`#1c1c1c`) 中，并使用 monospace inline code；品牌的 developer DNA 在每个 snippet 中可见。
- Pricing tier 的 featured tier 使用 dark inverted `{colors.canvas-night}`，不是绿色；green 保留给 button 和 dot accent。

## Colors

> **Source pages:** home (`/`), `/database`, `/partners/integrations`, `/partners/integrations/powersync`, `/solutions/ai-builders`, `/pricing`.

### Brand & Accent
- **Emerald** (`{colors.primary}` — `#3ecf8e`): 标志性 CTA color。用于 filled-button background、brand wordmark accent、dot indicator。
- **Emerald Deep** (`{colors.primary-deep}` — `#24b47e`): Primary 的 pressed-state lift。
- **Emerald Soft** (`{colors.primary-soft}` — `#4ade80`): 更浅的 emerald，用于 chart accent 和 product UI。
- **Accent Purple** (`{colors.accent-purple}` — `#6b01c2`): 稀有 accent，用于 integration logo 和 chart point；从不用于 button。
- **Accent Violet** (`{colors.accent-violet}` — `#644fc1`): Secondary accent，角色与 accent purple 相同。
- **Accent Yellow** (`{colors.accent-yellow}` — `#ffdb13`): 只用于 chart accent / status indicator。
- **Accent Pink / Crimson / Indigo / Tomato**: 保留给 integration logo 和少量 chart highlight，绝不作为 system color。

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): 默认 page background。
- **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): 轻微 tint 的 off-white，用于交替 section band。
- **Canvas Night** (`{colors.canvas-night}` — `#1c1c1c`): Deep near-black，用于 code block、dashboard mockup、featured pricing tier。
- **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#202020`): 略微抬起的 dark，用于 nested chrome。
- **Hairline** (`{colors.hairline}` — `#dfdfdf`): Card 和 table 上的 1px border。
- **Hairline Strong** (`{colors.hairline-strong}` — `#c7c7c7`): 略深的 border，用于强调。
- **Hairline Cool** (`{colors.hairline-cool}` — `#ededed`) / **Hairline Cool 2** (`#efefef`) / **Hairline Cool 3** (`#d4d4d4`): 品牌用于 fine chrome work 的 grey ladder。

### Text
- **Ink** (`{colors.ink}` — `#171717`): 默认 body text。Near-black，绝不是 pure black。
- **Ink Secondary** (`{colors.ink-secondary}` — `#212121`): 略冷的 near-black，用于 body emphasis。
- **Ink Mute** (`{colors.ink-mute}` — `#707070`): Secondary text 和 helper copy。
- **Ink Mute 2** (`{colors.ink-mute-2}` — `#9a9a9a`): Tertiary text。
- **Ink Faint** (`{colors.ink-faint}` — `#b2b2b2`): Disabled / placeholder text。
- **On Primary** (`{colors.on-primary}` — `#171717`): Emerald primary fill 上的文本；near-black，不是 white。Button 读起来像带暗色文字的“lit” surface，而不是 colored chip。
- **On Dark** (`{colors.on-dark}` — `#ffffff`): Canvas-night surface 上的文本。

## Typography

### Font Family

Display 和 UI tier 使用 **Circular**，这是 Lineto 的专有 geometric humanist sans。Fallback chain: `'Helvetica Neue', Helvetica, Arial`。

当 Circular 未授权时，为了最大化品牌忠实度，display 可使用 **Inter**（Google Fonts 开源）weight 500，并在 64px 时设置 `letter-spacing: -1.92px`。Inter 是最接近 Circular geometric humanist 气质的开源替代。

Code block 使用 **system mono**（`ui-monospace`，并以 Menlo / Monaco / Consolas 作为 fallback）。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 64px | 500 | 1.1 | -1.92px | Hero headline |
| `{typography.display-xl}` | 48px | 500 | 1.1 | -1.44px | Section opener |
| `{typography.display-lg}` | 36px | 500 | 1.15 | -0.72px | Sub-section / pricing tier |
| `{typography.display-md}` | 28px | 500 | 1.2 | -0.42px | Card title |
| `{typography.heading-lg}` | 22px | 500 | 1.2 | 0 | Compact heading |
| `{typography.heading-md}` | 18px | 500 | 1.4 | 0 | Section sub-heading |
| `{typography.body-lg}` | 18px | 400 | 1.55 | 0 | Marketing body lead |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default UI body |
| `{typography.button-md}` | 14px | 500 | 1.0 | 0 | Button label |
| `{typography.caption}` | 13px | 400 | 1.45 | 0 | Helper、footnote |
| `{typography.micro}` | 12px | 400 | 1.45 | 0 | Pill label、fine print |
| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code block content |

### Principles
- **Display 全部使用 weight 500。** Mid-weight 读起来是工程化的，而不是装饰性的。
- **Display 使用 negative tracking。** 64px 时 -1.92px，并按比例向下缩放；它将圆润 humanist letterform 收紧成 editorial density。
- **Code 使用 mono。** System mono family（Menlo / Monaco）；没有专有 mono webfont。

### Font Substitutes
Circular 是专有字体。Display tier 可使用 **Inter** weight 500，并设置 `letter-spacing: -1.92px`。**Geist Sans**（Vercel 开源）是 display 和 body 的另一个接近替代。避免默认 Helvetica；它更重，并缺少 geometric warmth。

## Layout

### Spacing System
- **Base unit**: 8px（带 2 / 4 / 12 sub-token，用于精细处理）。
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px。
- **Section padding**: Marketing surface 上为 64–96px。
- **Card internal padding**: Feature/pricing card 为 32px。

### Grid & Container
- Marketing page 居中在约 1280px container 中，没有 edge-bleed；品牌把内容保持在盒子里。
- Pricing 在 1024 / 768 breakpoint 从 4-up → 2-up → 1-up 折叠。
- Product UI mockup 在同一 container 内以 2-up 堆叠，或渲染为 overlapping pane。

### Whitespace Philosophy
品牌使用宽松的 64–96px section padding，但不用 atmospheric gradient 填充空间；white canvas 本身就是设计。Composited product UI mockup 在不需要装饰的情况下打断 section。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| 0 | Flat, 1px hairline | 默认 card |
| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` | Subtle card lift |
| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` | Floating composited UI mockup |
| 3 | `box-shadow: 0 16px 48px rgba(0,0,0,0.12)` | Modal overlay、deep elevation |

### Decorative Depth
品牌的 depth 来自 **product UI mockup**，而不是 gradient。Stacked dashboard / SQL editor / log pane 通过 subtle Level 2 shadow 组合在一起，暗示空间层级。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | Form input、hairline tag |
| `{rounded.sm}` | 6px | Button（品牌 signature button radius）、code block |
| `{rounded.md}` | 8px | Compact card、alert |
| `{rounded.lg}` | 12px | Pricing card、feature card、product mockup |
| `{rounded.xl}` | 16px | Modal dialog、大型 container chrome |
| `{rounded.full}` | 9999px | Pill tag、avatar |

### Photography Geometry
品牌极少使用摄影。Customer logo strip 以统一高度（约 24–32px）和 greyscale 展示 wordmark；case-study card（少见）使用 4:3 photo，并嵌在 `{rounded.lg}` container 中。

## Components

### Buttons

**`button-primary-green`** — signature CTA。
- Background `{colors.primary}`、text `{colors.on-primary}`（near-black，不是 white）、type `{typography.button-md}`、padding `{spacing.sm} {spacing.lg}`（8px 16px）、rounded `{rounded.sm}` 6px。
- Pressed state `button-primary-green-pressed` 切换到 `{colors.primary-deep}`。

**`button-secondary-outline`** — white 上的 outline alternative。
- Background `{colors.canvas}`、text `{colors.ink}`、1px solid `{colors.hairline-strong}` border，shape 相同。

**`button-on-dark`** — 用于 dark surface / code-block CTA。
- Background `{colors.canvas-night}`、text `{colors.on-dark}`、shape 相同。

**`button-link`** — text-only inline button。
- Transparent background，text `{colors.ink}` 以 `{typography.button-md}` 渲染，无 padding，hover 时有 subtle underline。

### Cards & Containers

**`card-feature-light`** — white 上的 feature card。
- Background `{colors.canvas}`、padding `{spacing.xxl}`、rounded `{rounded.lg}` 12px、1px `{colors.hairline}` border。

**`card-pricing`** — 标准 pricing tier。
- Background `{colors.canvas}`、padding `{spacing.xxl}`、rounded `{rounded.lg}`、1px `{colors.hairline}` border。Title 使用 `{typography.heading-lg}`，price 使用 `{typography.display-md}`，body 使用 `{typography.body-md}`，CTA `button-primary-green` 固定在底部。

**`card-pricing-featured`** — inverted dark featured tier。
- Background `{colors.canvas-night}`、text `{colors.on-dark}`，其它结构相同。

**`card-feature-dark`** — 带 deep dark fill 的 feature card。
- Background `{colors.canvas-night}`、text `{colors.on-dark}`、padding `{spacing.xxl}`、rounded `{rounded.lg}`。用于 code-heavy feature explanation。

**`code-block`** — code snippet container。
- Background `{colors.canvas-night}`、text `{colors.on-dark}`，以 `{typography.code}` 渲染。Padding `{spacing.lg}` 16px、rounded `{rounded.sm}` 6px。

### Inputs & Forms

**`text-input`** — 标准 form input。
- Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.body-md}`、padding `{spacing.sm} {spacing.md}`（8px 12px）、rounded `{rounded.sm}` 6px、1px `{colors.hairline}` border。

### Navigation

**`nav-bar-light`** — 全站 top nav。
- Background `{colors.canvas}`、text `{colors.ink}`、padding `{spacing.lg} {spacing.xl}`。Logo 在左，primary nav 居中，右侧是 "Sign In" link + filled `button-primary-green`。

### Pills, Tags, and Chips

**`pill-tag-green`** — 用于 "new" 或 featured indicator 的小型 green pill。
- Background `{colors.primary}`、text `{colors.on-primary}`、type `{typography.micro}`、padding `{spacing.xxs} {spacing.sm}`、rounded `{rounded.full}`。

**`pill-tag-soft`** — light surface 上的 neutral pill。
- Background `{colors.canvas-soft}`、text `{colors.ink}`，其它 shape 相同。

### Signature Components

**Composited Product UI Mockups** — 多层 dashboard / SQL editor / log pane composite，带 subtle Level 2 shadow。产品就是品牌论点；mockup 始终位于 white canvas 上，没有周围装饰。

**`link-on-light`** — inline links in body copy.
- Text `{colors.ink}` 以 `{typography.body-md}` 渲染，并带 persistent underline。

**`footer-light`** — site-wide footer.
- Background `{colors.canvas}`、text `{colors.ink-mute}`、type `{typography.caption}`、padding `{spacing.huge} {spacing.xl}`（64px 24px）。包含 4–5 列 link group、social icon 和小型 legal row。

## Do's and Don'ts

### Do
- 将 `{colors.primary}` emerald 保留给 filled CTA 和 wordmark accent；它应该少量出现。
- Display tier 使用 weight 500 和 negative letter-spacing；这种工程化紧致感是品牌的一部分。
- Button 使用 `{rounded.sm}` 6px；偏方的 radius，从不 pill-shaped。
- Product UI mockup 放在 `{rounded.lg}` container 中，并使用 subtle Level 2 shadow。
- Emerald button 上使用 near-black `{colors.ink}`（不是 white）；green 以 dark type 呈现为“lit” surface，这是品牌独特选择。
- 每个 code block 都使用 system mono。

### Don't
- 不要把额外 accent color 引入为 system color；purple、yellow 和 pink 只属于 chart point 与 integration logo。
- 不要把 display weight 提到 500 以上；品牌校准过的 mid-weight 在 600+ 会失效。
- 不要使用 pill-shaped button；品牌 button radius 是偏方的 6px。
- 不要在 emerald button 上使用 white text；品牌明确使用 near-black on green。
- 不要给 hero band 添加 atmospheric gradient；white canvas 本身就是设计。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Wide | ≥ 1440px | Full container width；product mockup 全尺寸 |
| Desktop | 1024–1440px | 默认 content max-width；pricing 4-up |
| Tablet | 768–1023px | Pricing 2-up；mockup 简化为 single panel |
| Mobile | < 768px | Pricing 1-up；hamburger nav；display 从 64 降到 36px |

### Touch Targets
- Button 在 mobile 上达到 ≥ 36×36px；vertical padding 会放大以保持 WCAG AA minimum。
- Form field 保持 36px minimum height。

### Collapsing Strategy
- Display tier 阶梯变化为 64 → 48 → 36 → 28 → 22px。
- Product UI mockup 在 mobile 上简化为一个 primary panel。
- Pricing tier 阶梯变化为 4-up → 2-up → 1-up；dark featured tier 始终保持区分。

### Image Behavior
Product UI mockup 使用 `srcset`，带 desktop / mobile crop；mobile crop 聚焦最具操作性的内部 panel。

## Iteration Guide

1. 一次只聚焦一个 component。
2. 直接引用 component name 和 token。
3. 编辑后运行 `npx @google/design.md lint DESIGN.md`。
4. Default body 使用 `{typography.body-md}`；任何 developer-facing snippet 使用 `{typography.code}`。
5. 保持 emerald 稀少；每个 viewport 只放一个 filled green button。
6. White-canvas commitment 不可妥协；添加 atmospheric backdrop 会破坏品牌。