01
设计气质 DNA
开源Postgres开发者平台快速开发可扩展性
一种简洁、以开发者为中心的瑞士设计，优先考虑清晰度与功能性美学。
02
色彩
#00bb68Accent#171717Ink#707070Ink soft#ffffffBG#fdfdfdBG soft#fcfcfcBG quietrgba(223, 223, 223, 1)Line以纯净白色画布为基础，搭配高对比度文本和单一鲜艳的绿色作为主要操作的强调色。
03
字体
- display
64px · 500 - h2
36px · 500 - body
16px · 400 - small
14px · 400
所有文本使用 Circular 或类似的几何无衬线字体。 · 标题使用紧凑的行高（1.0-1.1）以增强视觉冲击力。 · 正文保持可读的 1.5 行高。
04
间距
4px8px12px16px24px32px48px64px96px组件间距采用一致的 8px 网格，主要章节之间留有充足的垂直内边距（96px）。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #dfdfdf
0 1px 3px rgba(0, 0, 0, 0.1)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
主视觉采用单列居中布局，内容部分则过渡到更宽的容器。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时细微的颜色和背景过渡。 · 用于 UI 反馈的平滑透明度变化。
细微的背景颜色变化或边框高亮。 · 通过状态变化提供即时视觉反馈。
08
组件
- button 采用圆润的药丸形状，主要操作使用绿色实心填充，次要操作使用透明背景加边框。
- card 简洁的白色卡片，带有微妙的 1px 边框和圆角。
- chip 圆润的药丸形标签或选项卡，带有细边框。
- input 标准的输入框，带有圆角和微妙边框。
- hero 居中的大段文字，具有强烈的标题层次和清晰的行动号召按钮。
09
文案语气与禁用清单
- 语气 直接、对开发者友好且自信。
- 标题风格 简短、有力且以利益为驱动的句子。
- 按钮文案 行动导向且清晰，例如‘开始你的项目’。
- 不要使用衬线字体 — 截图显示全文采用简洁的几何无衬线字体。
- 不要将深色背景作为主要主题 — 截图显示以白色（#ffffff）画布为主。
- 不要使用多个相互竞争的强调色 — 截图仅依赖单一的鲜艳绿色（#00bb68）强调色。
- 不要使用尖锐的方角 — 截图显示所有组件均采用圆角（4px 到 16px）。
- 不要使用厚重的投影 — 截图显示最小化或无阴影，依靠微妙边框营造层次感。
- 不要使用密集、拥挤的布局 — 截图显示充足的空白和清晰的章节分隔。
- 避免: 营销话术
- 避免: 过于复杂的术语
- 避免: 模糊的承诺
10
包内真实截图
11
System Prompt
Supabase.com 是一个以开发者为中心的 SaaS 平台，拥有简洁、现代且高对比度的设计。它使用白色背景（#ffffff）搭配黑色文本（#171717），并以鲜艳的绿色（#00bb68）作为主要行动号召的强调色。字体采用几何无衬线字体（Circular）。布局居中且宽敞，优先考虑可读性和清晰的层次结构。关键禁忌：避免深色主题，不要使用多种强调色，避免尖锐圆角，绝不使用厚重的阴影，跳过复杂的渐变，避免拥挤的布局。该设计专为重视清晰度、速度和功能性美学的开发者打造。