精选 · 开放 · 免费

Supabase

一个高对比度、简洁的开发者平台网站，在白色画布上使用明亮的绿色强调色，搭配几何无衬线字体。

01

设计气质 DNA

一种简洁、以开发者为中心的瑞士设计，优先考虑清晰度与功能性美学。

02

色彩

以纯净白色画布为基础，搭配高对比度文本和单一鲜艳的绿色作为主要操作的强调色。

03

字体

geometric-sans · monospace

• display64px · 500
• h236px · 500
• body16px · 400
• small14px · 400

所有文本使用 Circular 或类似的几何无衬线字体。 · 标题使用紧凑的行高（1.0-1.1）以增强视觉冲击力。 · 正文保持可读的 1.5 行高。

04

间距

组件间距采用一致的 8px 网格，主要章节之间留有充足的垂直内边距（96px）。

05

表面 (圆角 / 阴影 / 边线)

1px solid #dfdfdf

0 1px 3px rgba(0, 0, 0, 0.1)

06

布局

主视觉采用单列居中布局，内容部分则过渡到更宽的容器。

07

动效与交互

悬停时细微的颜色和背景过渡。 · 用于 UI 反馈的平滑透明度变化。

细微的背景颜色变化或边框高亮。 · 通过状态变化提供即时视觉反馈。

08

组件

• button 采用圆润的药丸形状，主要操作使用绿色实心填充，次要操作使用透明背景加边框。
• card 简洁的白色卡片，带有微妙的 1px 边框和圆角。
• chip 圆润的药丸形标签或选项卡，带有细边框。
• input 标准的输入框，带有圆角和微妙边框。
• hero 居中的大段文字，具有强烈的标题层次和清晰的行动号召按钮。

09

文案语气与禁用清单

• 语气 直接、对开发者友好且自信。
• 标题风格 简短、有力且以利益为驱动的句子。
• 按钮文案 行动导向且清晰，例如‘开始你的项目’。

• 不要使用衬线字体 — 截图显示全文采用简洁的几何无衬线字体。
• 不要将深色背景作为主要主题 — 截图显示以白色（#ffffff）画布为主。
• 不要使用多个相互竞争的强调色 — 截图仅依赖单一的鲜艳绿色（#00bb68）强调色。
• 不要使用尖锐的方角 — 截图显示所有组件均采用圆角（4px 到 16px）。
• 不要使用厚重的投影 — 截图显示最小化或无阴影，依靠微妙边框营造层次感。
• 不要使用密集、拥挤的布局 — 截图显示充足的空白和清晰的章节分隔。
• 避免: 营销话术
• 避免: 过于复杂的术语
• 避免: 模糊的承诺

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko