精選 · 開放 · 免費

Groq

快速、可靠、低成本的 AI 推論基礎設施。

01

設計氣質 DNA

AI 的高效能引擎室，結合工業精準度與親和的開發者工具。

02

色彩

溫暖、柔和的中性色調，為高對比度的橙色強調色與深色、易讀的排版提供平穩的基調。

03

字型

geometric-sans · monospace

• display46px · 500
• body15px · 400
• caption12px · 400

標題使用 500 字重以實現細微的強調效果。 · 大寫文字使用 12px 及 1.2px 字間距，適用於技術標籤。 · 內文使用 15px 以達最佳可讀性。

04

間距

標準 4px 基礎，搭配寬裕的 32-48px 水平內距與垂直間距。

05

表面 (圓角 / 陰影 / 邊線)

使用 1px solid rgb(45, 47, 51) 作為卡片與輸入框的細微外框。

06

版面

標準的居中容器，搭配全寬首屏區塊與並排的功能卡片。

07

動效與互動

互動元素的顏色與 transform 過渡效果。 · hover 狀態的背景大小動畫。 · 模態視窗或覆蓋層的可見性與透明度過渡。

細微的背景大小或顏色過渡，150ms ease-in-out。 · 透過 transform 或色彩變換提供即時視覺回饋。

08

組件

• button 高對比度的橙色 (#F43E01) 搭配白色文字，藥丸形狀 (border-radius: 999px)，用於主要操作。
• card 淺色背景 (#F3F3EE)，12px border-radius，無可見的陰影效果。
• chip 行內大寫標籤，使用等寬字體樣式作為分類標籤。
• input 標準文字輸入框，採用極簡樣式，可能使用柔和的邊框。
• hero 桌面版採用分割版面，左側為大字體排版，右側為影片。

09

文案語氣與禁用清單

• 語氣 自信、技術導向、專注效能。
• 標題風格 直接且有力，聚焦於速度與可靠性。
• 按鈕文案 以行動為導向的動詞，例如「開始使用」與「開始建構」。

• 避免使用純黑色 (#000000) 作為背景 — 螢幕截圖顯示的是溫暖、柔和的米色 (#E8E8DE)。
• 避免使用鮮紅色作為強調色 — 螢幕截圖顯示的是特定的活力橙色 (#F43E01)。
• 避免使用寬版、多欄位的文字版面 — 螢幕截圖顯示的是受限的約 680px 段落寬度。
• 避免在卡片上使用厚重的陰影 — 螢幕截圖顯示的是平整的表面，陰影極少或無。
• 避免在技術標籤上使用小寫字母 — 螢幕截圖顯示的是帶有寬鬆字間距的大寫字母。
• 避免使用具侵略性的深色模式美學 — 螢幕截圖顯示的是淺色、暖色調的介面。
• 避免: 模糊的行銷術語
• 避免: 過於俏皮或隨意的語言
• 避免: 標題中使用複雜的架構圖

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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