精选 · 开放 · 免费

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

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

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

这是 Deno 的网站,一个开源的 JavaScript 运行时。设计简洁、现代且以开发者为中心。关键颜色包括白色背景(#ffffff)、用于柔和区块的极浅蓝灰色(#ecf3fd)、用于文字的深墨色(#0a0e1c),以及用于行动号召的独特薄荷绿色(#70ffaf)点缀色。排版使用粗体无衬线字体作为标题,人文主义无衬线字体用于正文,代码片段使用等宽字体。关键禁忌:避免复杂的深色背景,不要使用装饰性衬线字体,并保持充足的留白而非杂乱的布局。整体系统冷静、精致,专注于简化开发者工具。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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