---
name: "Deno"
description: "这个网站是现代开发者文档设计的优秀范例，平衡了大胆的排版与简洁、平易近人的美感。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#ffffff"
  primary: "#0a0e1c"
  secondary: "#1f2328"
  tertiary: "#70ffaf"
  neutral: "#868789"
  bg-soft: "#ecf3fd"
  bg-quiet: "#f5f5f5"
  muted-soft: "#e5eaea"
  line: "rgba(229, 234, 234, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 13.6px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

面向现代网络的、简化的 JavaScript 运行时。

*为现代网络开发者准备的、组织有序的工具箱。*

## Colors

纯净的白色背景搭配用于主要操作的独特薄荷绿色点缀。

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#0a0e1c`)** — uses `ink` token
- **Secondary text (`#1f2328`)** — uses `ink-soft` token
- **Accent (`#70ffaf`)** — uses `accent` token
- **Muted (`#868789`)** — uses `muted` token
- **Borders (`rgba(229, 234, 234, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

全宽主视觉区域分为两栏，在移动设备上过渡为单栏。

*Rhythm:* 标准的 4px 网格，基于行高建立一致的垂直节奏。

## Elevation & Depth

- 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)
- Borders: 1px solid #e5eaea

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** 胶囊形主要按钮，采用实心薄荷绿色背景和深色文字；次要按钮采用深色背景和白色文字。
- **card:** 带有柔和阴影、白色背景和微圆角的容器。
- **chip:** 用于标签或交互式标签的小型圆角胶囊形元素。
- **input:** 圆角搜索框，带有微妙边框和集成的搜索图标。
- **hero:** 大型不对称分栏布局，左侧为醒目的标题，右侧为圆角插图。

## Do's and Don'ts

**Don't:**
- 不要使用复杂的渐变色——截图显示为纯色平面背景。
- 不要使用装饰性衬线字体——截图显示为干净的无衬线字体排版。
- 不要使用刺眼的霓虹色——截图使用特定的柔和薄荷绿色作为点缀。
- 不要使用杂乱、有多个竞争焦点的布局——截图使用了充足的留白。
- 不要在主要元素上使用尖锐、方正的角——截图使用了圆角和胶囊形角。
- 不要将深色模式作为主要主题——截图显示了一个以浅色、白色为主的界面。

---

## System Prompt (paste into AI agent)

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