精選 · 開放 · 免費

Nuxtlabs

一篇極簡風格的深色模式開發者部落格文章，宣布 Vercel 收購 NuxtLabs。

01

設計氣質 DNA

為開發者受眾撰寫的靜謐而自信的公告部落格文章。

02

色彩

採用帶有冷藍色調的高對比度深色模式，優先考慮可讀性與專注度。

03

字型

grotesque-sans · monospace

• display36px · 500
• body16px · 400

Geist 字體家族同時用於展示文字與內文，維持一致的技術美感。 · 段落行高設定為 1.6，確保深色背景上密集文字的可讀性。 · 粗體字重（700）僅謹慎用於段落內的強調處。

04

間距

透過一致的段落間距與列表項目間隙建立垂直節奏。

05

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

極簡邊框，主要用於細微分隔或列表項目標記。

06

版面

單欄居中文字版面，配以寬裕邊距以最大化可讀性。

07

動效與互動

互動元素上的細微色彩與文字裝飾過渡效果。

互動元素在 hover 狀態下呈現細微色彩過渡。 · 標準點擊行為。

08

組件

• button 無可見按鈕。
• card 無可見卡片。
• chip 無可見標籤。
• input 無可見輸入框。
• hero 以文字為主的首圖區塊，搭配大型質感標誌、醒目標題與介紹性段落。

09

文案語氣與禁用清單

• 語氣 專業、誠懇且以社群為導向。
• 標題風格 直接、宣言式且帶有慶祝意味。
• 按鈕文案 文字內的資訊性連結。

• 勿使用白色背景——截圖顯示為深海軍藍/藍黑色背景。
• 勿為內文使用襯線字體——截圖顯示全程使用簡潔無襯線字體（Geist）。
• 勿添加彩色強調色或亮色按鈕——截圖依賴深色背景上的單色白/灰色文字。
• 勿使用多欄格線版面——截圖顯示為單欄居中文字版面。
• 勿添加厚重陰影或玻璃擬態效果——截圖使用平面啞光表面。
• 勿使用齊行文字對齊——截圖使用左對齊文字。
• 避免: 行銷推廣語言
• 避免: 充斥術語的技術解釋
• 避免: 強勢的行動呼籲

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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