CURATED · OPEN · FREE

Deno

An uncomplicated JavaScript runtime for the modern web.

devtoolsruntime

Deno screenshot

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://deno.com

📦 Browse pack contents →

01

Identity DNA

developerruntimejavascriptsimplifiedmodern

a well-organized toolbox for modern web developers

02

Color

#70ffafAccent

#0a0e1cInk

#1f2328Ink soft

#ffffffBG

#ecf3fdBG soft

#f5f5f5BG quiet

#868789Muted

rgba(229, 234, 234, 1)Line

Clean white backgrounds with a distinct mint green accent for primary actions.

03

Typography

grotesque-sans · humanist-sans · monospace

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

04

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

Standard 4px grid with consistent vertical rhythm based on line heights.

05

Surfaces

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero split into two columns, transitioning to single column on mobile.

07

Motion & Interaction

150msmicro

200mssmall

300msmedium

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

Fade-in transitions · Smooth hover state changes

Subtle background color or opacity changes on interactive elements. · Immediate visual feedback with micro-interactions.

08

Components

button Pill-shaped primary buttons with solid mint green background and dark text; secondary buttons with dark background and white text.
card Softly shadowed containers with white backgrounds and subtle rounded corners.
chip Small rounded pill-shaped elements used for tags or interactive labels.
input Rounded search field with subtle border and integrated search icon.
hero Large asymmetric split layout featuring a bold headline on the left and a rounded illustration on the right.

09

Voice & Don'ts

Tone Professional, approachable, and confident.
Headlines Direct, action-oriented, and bold.
CTAs Simple and clear, focusing on core actions like 'Docs' and 'GitHub'.

Don't use complex gradients — screenshot shows solid flat backgrounds.
Don't use decorative serif fonts — screenshot shows clean sans-serif typography.
Don't use harsh neon colors — screenshot uses a specific soft mint green for accents.
Don't use cluttered layouts with many competing focal points — screenshot uses generous white space.
Don't use sharp, boxy corners on primary elements — screenshot uses rounded and pill-shaped corners.
Don't use dark mode as the primary theme — screenshot shows a predominantly light, white-based interface.
Avoid: Unnecessary jargon
Avoid: Aggressive marketing language
Avoid: Overly formal tone

10

Inside the pack — real screenshots

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 — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is the website for Deno, an open-source JavaScript runtime. The design is clean, modern, and developer-focused. Key colors include a white background (#ffffff), a very light blue-gray for soft sections (#ecf3fd), deep dark ink (#0a0e1c) for text, and a distinct mint green (#70ffaf) as the primary accent for calls to action. The typography uses a bold grotesque sans-serif for headlines and a humanist sans-serif for body text, with monospace fonts for code snippets. Critical donts: avoid complex dark backgrounds, do not use decorative serif fonts, and maintain generous whitespace rather than cluttered layouts. The system is calm, refined, and focuses on uncomplicating developer tools.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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