精選 · 開放 · 免費

Svelte

一個乾淨的編輯風格開發者文件網站，以高對比排版與俏皮的 3D 主視覺插圖為特色。

01

設計氣質 DNA

一個具有編輯靈魂、精緻的 open-source 開發者工具。

02

色彩

高對比的編輯風格調色盤，以乾淨的白色與灰色為基底，搭配單一 vibrant orange 強調色。

03

字型

didone-serif · humanist-sans · monospaced

• display54px · 400
• headline22px · 400
• body16px · 400
• mono12px · 400

04

間距

標準 4px 格線，垂直區塊內距為 100px。

05

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

1px solid #EBEBEB

06

版面

標準的居中單欄文件佈局。

07

動效與互動

使用 filter 與 opacity 過渡效果，實現細微的互動狀態變化。

細微的透明度與縮放調整。 · 標準的游標狀態。

08

組件

• button 基於文字的操作連結，採用大寫字母並附帶箭頭符號。
• card 平坦的背景容器，邊框為 2px 實線。
• chip 小型大寫文字徽章，採用深色背景。
• input 搜尋列，具有圓角與鍵盤快捷鍵指示器。
• hero 大型 3D 插圖搭配超大尺寸的 serif 標題。

09

文案語氣與禁用清單

• 語氣 友善、自信且具教育性。
• 標題風格 俏皮的小寫 serif 陳述句。
• 按鈕文案 直接的大寫 sans-serif 指令。

• 勿使用 sans-serif 作為主要標題字體 — 螢幕截圖顯示標題採用 didone-serif。
• 勿在卡片上使用圓角 — 螢幕截圖顯示為銳利的 2px 或 4px 邊框。
• 勿使用多個競爭的強調色 — 螢幕截圖僅顯示 orange 色調。
• 勿將深色模式設為預設 — 螢幕截圖顯示白色 (#FFFFFF) 背景。
• 勿使用過小、緊湊的字體排版 — 螢幕截圖顯示寬裕的 1.5 行高。
• 勿使用複雜的 box shadow — 螢幕截圖顯示平坦或極簡陰影的表面。
• 避免: 術語過多或具侵略性的語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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