---
title: "Deno design system"
variant: extended
source: https://deno.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/deno-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Deno · Design System

> Bright mint meets a dark, code-first canvas.

**Theme:** light · **Industry:** devtools · **Source:** https://deno.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Deno pairs a dramatic near-black hero with a bright mint announcement bar and a long, spacious sequence of developer-focused feature sections. Clean sans-serif headlines, monospace code treatments, and product UI illustrations make the page feel both approachable and technically grounded.

## North star

Keep the page calm and spacious, then use mint green to highlight the one action or technical detail that matters in each section.

## Overview

The page establishes its identity through a sharp contrast between bright white content areas and a nearly black, atmospheric hero. Mint green (#70ffaf) is the signature signal: it marks the top announcement, selected items in the hero animation, version badges, and primary pill CTAs. Neutral white and pale blue-gray sections give the long feature narrative room to breathe, while deep charcoal bands reserve visual weight for runtime and security content. Inter handles prominent headings and explanatory copy, with compact Menlo code and terminal elements reinforcing the developer context; Recursive appears sparingly in link treatments. The layout alternates centered command-line demonstrations with two-column feature splits and broad visual panels. Product imagery is mostly interface mockups, code windows, benchmark cards, and diagrams rather than photography. Fine borders and restrained shadows define cards without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main content canvas, white cards, and text on selected dark surfaces. |
| Deno Mint | `#70ffaf` | `--color-deno-mint` | brand | Signature announcement band, primary CTA fills, active hero rows, and version badges. |
| Forest Edge | `#005c1a` | `--color-forest-edge` | semantic | Fine border around dark security badges; supporting green detail rather than a broad surface. |
| Terminal Green | `#00b84d` | `--color-terminal-green` | accent | Small badge and interface accent details; keep usage subordinate to the brighter mint. |
| Graphite Muted | `#56575a` | `--color-graphite-muted` | neutral | Muted text, badge outlines, and subdued supporting UI details. |
| Moss Action | `#2d7155` | `--color-moss-action` | accent | Rare button-related green detail; not the main CTA fill. |
| Cloud Tint | `#ecf3fd` | `--color-cloud-tint` | surface | Pale blue feature bands and soft gradient grounding behind technical comparisons. |
| Carbon Text | `#121417` | `--color-carbon-text` | neutral | Dark secondary text and gradient transitions within muted or dark technical areas. |
| Night Canvas | `#0b0d11` | `--color-night-canvas` | surface | Large dark hero and security-section backgrounds. |
| Cool Hairline | `#e5eaea` | `--color-cool-hairline` | neutral | Thin card and component borders on white content surfaces. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary navigation, headings, and body text on light backgrounds. |
| Slate Panel | `#191b1f` | `--color-slate-panel` | surface | Dark cards and code-oriented panels inside inverse sections. |
| Deep Teal | `#001319` | `--color-deep-teal` | surface | Subtle deep-toned section background supporting the dark runtime visual language. |
| Mist Surface | `#f8f9fc` | `--color-mist-surface` | surface | Light media and card surfaces, offering gentle separation from pure white. |
| Button Charcoal | `#25272b` | `--color-button-charcoal` | neutral | Dark CTA and badge backgrounds, plus compact component details. |
| Soft Graphite | `#868789` | `--color-soft-graphite` | neutral | Secondary interface text and subdued input or control outlines. |
| Code Blue | `#0a3069` | `--color-code-blue` | semantic | Syntax and technical text accent; appears in code-oriented contexts, not as a primary brand field. |
| Syntax Green | `#116329` | `--color-syntax-green` | semantic | Green code syntax and technical text accents; keep localized to code and developer UI. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0b0d11` (Night Canvas) · `--color-surface-2` → `#191b1f` (Slate Panel) · `--color-surface-3` → `#001319` (Deep Teal) · `--color-surface-4` → `#f8f9fc` (Mist Surface) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#56575a` (Graphite Muted) · `--color-text-subtle` → `#121417` (Carbon Text) · `--color-border` → `#e5eaea` (Cool Hairline) · `--color-accent` → `#70ffaf` (Deno Mint) · `--color-accent-2` → `#0a3069` (Code Blue) · `--color-accent-3` → `#116329` (Syntax Green) · `--color-on-accent` → `#000000` (True Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0b0d11` | 1.08:1 | fail |
| `#000000` | `#191b1f` | 1.22:1 | fail |
| `#000000` | `#001319` | 1.11:1 | fail |
| `#56575a` | `#ffffff` | 7.22:1 | AAA |
| `#56575a` | `#0b0d11` | 2.69:1 | fail |
| `#56575a` | `#191b1f` | 2.39:1 | fail |
| `#56575a` | `#001319` | 2.63:1 | fail |
| `#121417` | `#ffffff` | 18.45:1 | AAA |
| `#121417` | `#0b0d11` | 1.05:1 | fail |

### Gradients

- `linear-gradient(to top in oklab, rgb(236, 243, 253) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(236, 243, 253) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right, rgb(18, 20, 23) 0%, oklab(0.190386 -0.00137379 -0.00671232 / 0.55) 50%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(rgb(234, 237, 245) 1.5px, rgba(0, 0, 0, 0) 1.5px), linear-gradient(0deg, rgba(0, 0, 0, 0), rgb(241, 243, 249) 30%, rgb(241, 243, 249)), linear-gradient(0deg, rgb(241, 243, 249), rgb(241, 243, 249))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500 | Display headings, body copy, navigation, and most interface text. | Inter |
| Menlo | `--font-mono` | system | 400, 500, 700 | Terminal commands, code samples, compact technical labels, and selected links. | Roboto Mono |
| Recursive | `--font-recursive` | webfont | 400 | Occasional link styling and small brand-adjacent text. | Inter |

- **Inter:** Use crisp, bold, tightly tracked display headings; body copy remains regular and sentence case.
- **Menlo:** Monospace texture distinguishes technical content; keep labels compact and avoid decorative styling.
- **Recursive:** Used sparingly as a secondary sans-serif voice; preserve readable sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1.1 | -0.025em | — | Inter | Oversized hero and major promotional headlines. |
| h1 | 44px | 700 | 1.1 | -0.025em | — | Inter | Primary page title and top-level section heading. |
| h2 | 36px | 700 | 1.1 | -0.025em | — | Inter | Feature-section headlines and key explanatory blocks. |
| body | 18px | 400 | 1.56 | 0 | — | Inter | Feature descriptions and supporting paragraphs. |
| caption | 16px | 400 | 1.5 | 0 | — | Inter | Small annotations and explanatory interface copy. |
| button | 14px | 400 | 1.43 | 0 | — | Menlo | Compact action labels and command-like controls. |
| link | 16px | 400 | 1.5 | 0 | — | Menlo | Inline navigation and technical resource links. |
| code | 20px | 500 | 1.4 | 0 | — | Menlo | Code snippets, terminal content, and command demonstrations. |

OpenType features in use: `"ss12"`, `"liga"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 6, 8, 10, 12, 16, 24, 32, 56, 64, 128, 144 px.
- Section rhythm 144px · element gap 16px · card padding 32px · max content width 1280px.

The measured page uses a spacious, wide content frame with a reported maximum width of 1280px. It opens with a full-width announcement and navigation above a full-bleed dark hero, then alternates centered install demonstrations, two-column feature splits, pale blue comparison bands, and dark security content. Headings often align left within feature rows, while showcase and benchmark areas center their content. Large section gaps and restrained content density separate ideas; cards and code windows sit within the grid rather than crowding the page.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `6px` · media `50%` · badge `4px` · nav `50%` · link `8px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · pill `9999px`
- Shadow `md` (card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Shadow `sm` (button, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (card): `rgba(203, 209, 225, 0.4) 2px 4px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections remain flat, with white cards separated from their surroundings by thin cool-gray borders. Code and interface panels gain restrained, soft shadows to suggest layered windows without heavy depth. Dark sections use tonal differences between background and cards rather than pronounced elevation; pill buttons and badges rely on color and shape for emphasis.

## Imagery

Visuals are primarily developer-product representations: code editors, terminal panels, package diagrams, benchmark comparisons, and interface cards. The hero uses a dark atmospheric backdrop with subdued colored light and an animated-looking list of runtime capabilities. Mockups are framed as floating panels with subtle borders or shadows. Photography is not a defining brand element; keep illustrations and UI demonstrations precise, legible, and product-led.

## Components

### Announcement bar

Full-width Deno Mint (#70ffaf) strip with centered update copy, an outlined learn-more control, and a quiet dismiss affordance.

### Primary CTA

Compact pill-shaped button, usually filled with Deno Mint (#70ffaf) and paired with dark text and a small directional icon.

### Terminal panel

Dark command window with compact monospace content, a narrow header or tab row, and a copy control.

### Feature card

White or Mist Surface (#f8f9fc) panel with a Cool Hairline (#e5eaea) border, rounded corners, and restrained shadow.

### Technical badge

Small monospace badge using charcoal or deep green surfaces, mint text, and a fine green border for security flags.

### Feature split

Alternating two-column feature row pairing a concise heading and copy with a code, package, or interface illustration.

### Measured component styles

- **Primary button** (“Node & npm in Deno”): background #70ffaf · text #000000 · radius 9999px · padding 2px · 400 16px Inter
- **Secondary button** (“Get started”): background #25272b · text #000000 · radius 9999px · padding 2px · 400 16px Inter
- **Link** (“Fresh logo”): transparent background · text #0a0e1c · radius 8px · padding 8px · 400 16px Recursive
- **Input**: transparent background · text #000000 · border 1px solid #868789 · radius 8px · padding 4px 4px 4px 32px · 400 16px Inter
- **Card** (“Drops right in npm node_modules package.”): background #ffffff · text #000000 · border 1px solid #e5eaea · radius 6px · padding 32px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“deno audit”): background #25272b · text #c2c4c7 · border 1px solid #56575a · radius 4px · padding 4px 8px · 400 12px Menlo
- **Navigation item** (“Products Docs Modules Community Blog ⌘K”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Inter

## Do

- Use Deno Mint (#70ffaf) for the announcement and primary actions.
- Give the hero a deep, nearly black background.
- Keep feature sections spacious and easy to scan.
- Use Inter for headings and explanatory copy.
- Use monospace styling for code and terminal content.
- Alternate text-and-visual feature splits down the page.

## Don't

- Do not turn pale blue into a saturated brand color.
- Do not use shadows as the main way to define every section.
- Do not crowd the layout with dense feature cards.
- Do not use photography as a substitute for product UI visuals.
- Do not apply mint indiscriminately to long text passages.
- Do not use decorative all-caps headings.

## Agent prompt

Build a developer-focused page that follows Deno’s calm, spacious visual language. Use Gallery White (#ffffff) as the main content canvas and Night Canvas (#0b0d11) for a dramatic hero or important inverse section. Reserve Deno Mint (#70ffaf) for primary actions, status highlights, and small active states. Use Inter for clear, bold headings and body copy; use a monospace face such as Menlo for terminals, code samples, and technical labels. Organize content in a wide, centered frame with alternating feature splits, centered demos, and occasional Cloud Tint (#ecf3fd) bands. Represent the product through crisp interface mockups and code panels rather than stock photography. Define cards with Cool Hairline (#e5eaea) borders and restrained shadows. Keep hierarchy simple, alignment deliberate, and whitespace generous.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width announcement and navigation above a dark, full-bleed hero with left-aligned headline and a technical animation to the right. | Announcement with dismiss, Search in navigation, Version and release link, Primary and secondary CTAs | Mint announcement strip, Dark atmospheric hero, Monospace animated capability list, Pill buttons |

## Source CSS custom properties (selected)

```css
--color-canvas-default-transparent: rgba(255,255,255,0);
--color-prettylights-syntax-comment: #57606a;
--color-prettylights-syntax-constant: #0550ae;
--color-prettylights-syntax-entity: #6639ba;
--color-prettylights-syntax-storage-modifier-import: #24292f;
--color-prettylights-syntax-entity-tag: #116329;
--color-prettylights-syntax-keyword: #cf222e;
--color-prettylights-syntax-string: #0a3069;
--color-prettylights-syntax-variable: #953800;
--color-prettylights-syntax-string-regexp: #116329;
--color-prettylights-syntax-markup-deleted-text: #82071e;
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
--color-prettylights-syntax-markup-inserted-text: #116329;
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
--color-fg-default: #1f2328;
--color-fg-muted: #656d76;
--color-canvas-default: #fff;
--color-canvas-subtle: #f6f8fa;
--color-border-default: #d0d7de;
--color-border-muted: #d8dee4;
--color-neutral-muted: rgba(175,184,193,.2);
--color-accent-fg: #0969da;
--color-accent-emphasis: #0969da;
--color-danger-fg: #d1242f;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/deno-com