精選 · 開放 · 免費

Deno

為現代網路打造的、不複雜的 JavaScript 執行環境。

devtoolsruntime

Deno 網站截圖

↓ 下載設計系統包 (17 MB)在 OpenDesign 中開啟

原站: https://deno.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

開發者執行環境javascript簡化現代

為現代網頁開發者整理有序的工具箱

02

色彩

#70ffafAccent

#0a0e1cInk

#1f2328Ink soft

#ffffffBG

#ecf3fdBG soft

#f5f5f5BG quiet

#868789Muted

rgba(229, 234, 234, 1)Line

乾淨的白色背景，搭配獨特的薄荷綠作為主要操作的強調色。

03

字型

grotesque-sans · humanist-sans · monospace

display44px · 700
headline18px · 700
body16px · 400
small13px · 400

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

標準 4px 網格，並基於行高保持一致的垂直節奏。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid #e5eaea

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全寬主視覺區域分為兩欄，在手機上轉換為單欄。

07

動效與互動

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

淡入轉場 · 流暢的懸停狀態變化

互動元素上細微的背景色或透明度變化。 · 透過微互動提供即時的視覺回饋。

08

組件

button 藥丸形的主要按鈕，採用實心薄荷綠背景與深色文字；次要按鈕則為深色背景與白色文字。
card 帶有柔和陰影、白色背景與細微圓角的容器。
chip 小型的圓角藥丸形元素，用於標籤或互動式標記。
input 圓角的搜尋欄位，帶有細微邊框與整合的搜尋圖示。
hero 大型的不對稱分割佈局，左側為大膽的標題，右側為圓角插圖。

09

文案語氣與禁用清單

語氣專業、平易近人且自信。
標題風格 直接、以行動為導向且大膽。
按鈕文案 簡單明瞭，聚焦於如「文件」和「GitHub」等核心操作。

避免使用複雜的漸層——截圖顯示的是實心的平面背景。
避免使用裝飾性的襯線字體——截圖顯示的是乾淨的無襯線排版。
避免使用刺眼的霓虹色——截圖使用了特定的柔和薄荷綠作為強調。
避免使用雜亂、帶有眾多競爭視覺焦點的佈局——截圖運用了寬裕的留白。
避免在主要元素上使用銳利、方正的角落——截圖使用了圓角與藥丸形角落。
避免將深色模式作為主要主題——截圖顯示的是以白色為主的明亮介面。
避免: 不必要的行話
避免: 具侵略性的行銷語言
避免: 過於正式的語氣

10

包內真實截圖

Deno — 桌面首屏（hero） — 桌面首屏（hero）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Deno — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是 Deno 的網站，一個開源的 JavaScript 執行環境。設計乾淨、現代，並以開發者為中心。關鍵色彩包括白色背景（#ffffff）、用於柔和區塊的淺藍灰色（#ecf3fd）、深邃的墨色（#0a0e1c）用於文字，以及作為主要操作強調色的獨特薄荷綠（#70ffaf）。排版上，標題使用粗體的怪誕無襯線字體，內文使用人文無襯線字體，程式碼片段使用等寬字體。關鍵禁忌：避免複雜的深色背景，不要使用裝飾性襯線字體，並保持寬裕的留白而非雜亂的佈局。整體系統是沉靜、精緻的，專注於簡化開發者工具。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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