精選 · 開放 · 免費

WorkOS

WorkOS 賦能開發者，在數分鐘而非數月內交付 SSO 和目錄同步等企業級功能。

01

設計氣質 DNA

將新創公司轉變為企業級平台的隱形腳手架

02

色彩

在乾淨的白色/淺灰色表面上使用高對比度文字，並搭配單一獨特的藍紫色作為主要互動的強調色。

03

字型

geometric-sans · humanist-sans · monospace

• display72px · 500
• h240px · 500
• body20px · 400
• small16px · 400
• caption14px · 400
• overline12px · 500

標題使用緊湊的負字距（-1px 至 -2px） · 內文使用標準字距（0）以確保可讀性 · 等寬字體僅嚴格用於程式碼片段與技術數值 · 字體粗細僅限 400 與 500，以保持乾淨的層次感 · 大寫轉換僅專用於上標題

04

間距

垂直間距遵循嚴格的 4px 格線，段落內距始終為 64px，以創造有節奏感、具呼吸性的佈局。

05

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

使用 rgba(41, 56, 78, 0.08) 或實心白色的細微 1px 邊框，以營造內嵌效果。

0px 1px 0px 0px inset 用於細微的內嵌邊框 · 0px 2px 5px 0px rgba(0, 0, 0, 0.17) 用於浮凸卡片 · 0px 5px 10px -4px rgba(0, 0, 0, 0.17) 用於彈出視窗/浮動面板

06

版面

標準的 12 欄格線，搭配置中的內容容器，段落之間保留寬裕的留白。

07

動效與互動

hover 狀態觸發背景色彩變化 · 互動元素具有變換效果（0.4 秒） · 滾動時有細微的淡入效果

按鈕的背景色彩偏移，文字連結的細微色彩轉換。 · 立即的視覺回饋，通常伴隨輕微的縮放變換或陰影變化。

08

組件

• button 膠囊形狀（border-radius: 100px）的主要按鈕，採用實心強調色與白色文字；次要按鈕為透明底色搭配深色文字。
• card 柔邊圓角卡片（border-radius: 12px），帶有細微內嵌陰影與淺色邊框，用於功能列表與整合模組。
• chip 小型膠囊標籤（border-radius: 4px），用於狀態指示，如「已啟用」或「就緒」。
• input 標準表單欄位，帶有細微內嵌陰影與 1px 邊框。
• hero 大型、粗體標題，搭配漸層文字效果（「Enterprise Ready」），並於右側展示風格化的 UI 模型。

09

文案語氣與禁用清單

• 語氣 專業、直接，且以開發者為核心。
• 標題風格 粗體、簡潔、以效益為導向（例如：「Your app, Enterprise Ready」）。
• 按鈕文案 以行動為導向且清晰明確（「Get started」、「Talk to an expert」）。

• 勿使用深色模式或深色背景——畫面截圖顯示以白色與柔和灰色表面為主的淺色主題。
• 勿使用多種鮮豔且互相競爭的顏色——畫面截圖顯示克制的調色板，包含白色、灰色，以及單一主導的藍紫色強調色。
• 勿使用裝飾性或手寫字體——畫面截圖顯示標題使用乾淨的幾何無襯線體，內文使用人文主義無襯線體。
• 勿在主要按鈕上使用粗糙、尖銳的圓角——畫面截圖顯示膠囊形狀按鈕，具有完整的 100px border-radius。
• 勿使用厚重的實心邊框作為佈局分隔線——畫面截圖顯示細微的內嵌陰影與極淺的 1px 邊框。
• 勿使用置中的內文——畫面截圖顯示左對齊文字，以提升長文的可讀性。
• 避免: 避免過於口語化或俚語密集的語言
• 避免: 避免使用非產業標準的複雜術語
• 避免: 避免在首頁區域使用冗長、密集的段落

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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