精選 · 開放 · 免費

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

動效與互動

懸停時產生細微的顏色與背景過渡效果。 · 使用平滑的透明度變化作為介面回饋。

細微的背景色偏移或邊框高亮。 · 透過狀態變化提供即時視覺回饋。

08

組件

• button 圓角膠囊形狀，主要操作使用實心綠色填充，次要操作則為透明並帶有邊框。
• card 簡潔的白色卡片，帶有細微的 1px 邊框與圓角。
• chip 圓角膠囊式的標籤或分頁，帶有細邊框。
• input 標準輸入欄位，帶有圓角與細微邊框。
• hero 巨大的居中文字，具有強烈的標題層次結構與清晰的 CTA 按鈕。

09

文案語氣與禁用清單

• 語氣 直接、對開發者友善且自信。
• 標題風格 簡短、有力且以效益為導向的句子。
• 按鈕文案 以行動為導向且清晰明確，例如「開始您的專案」。

• 不要使用襯線字體 — 截圖顯示全程使用簡潔的幾何無襯線字體。
• 不要將深色背景作為主要主題 — 截圖顯示以白色（#ffffff）畫布為主。
• 不要使用多種互相競爭的強調色 — 截圖僅依賴單一鮮明綠色（#00bb68）作為強調色。
• 不要使用尖銳的方形角 — 截圖顯示所有元件均採用圓角（4px 至 16px）。
• 不要使用厚重的陰影 — 截圖顯示極少或無陰影，依賴細微邊框來營造深度感。
• 不要使用擁擠密集的佈局 — 截圖顯示寬裕的留白與清晰的章節分隔。
• 避免: 行銷話術
• 避免: 過於複雜的專業術語
• 避免: 模糊的承諾

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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