精选 · 开放 · 免费

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