# Deno · Design system migration spec

> Source: https://deno.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of modern developer documentation design, balancing bold typography with a clean, approachable aesthetic.

## 1. Identity DNA

Deno's design system operates like a well-organized toolbox for modern web developers, where every element is purposeful and nothing is extraneous. Its identity is built on the principle of simplification, removing friction from the developer's workflow through a clean, confident interface.

**One-liner:** An uncomplicated JavaScript runtime for the modern web.
**Keywords:** developer · runtime · javascript · simplified · modern
**Analogy:** a well-organized toolbox for modern web developers

## 2. Color

The color system is built on a foundation of clean, high-contrast backgrounds. A distinctive mint green accent serves as the sole chromatic voice, drawing focus to primary actions against a field of white.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#ecf3fd` | card background |
| `--bg-quiet` | `#f5f5f5` | quiet area |
| `--ink` | `#0a0e1c` | body text |
| `--ink-soft` | `#1f2328` | secondary text |
| `--muted` | `#868789` | placeholder |
| `--muted-soft` | `#e5eaea` | weak hint |
| `--accent` | `#70ffaf` | single accent |
| `--line` | `rgba(229, 234, 234, 1)` | divider |

**Color principle:** Clean white backgrounds with a distinct mint green accent for primary actions.

The principle is one of restraint: color is reserved for purpose, not decoration.

## 3. Typography

The typographic hierarchy establishes a clear voice, using a bold grotesque for headlines and a humanist sans-serif for body text. This pairing supports the system's direct, action-oriented communication while maintaining approachability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 44px | 1.1 | 700 | -1.1px | Hero headlines |
| headline | 18px | 1.5 | 700 | 0 | Navigation and section titles |
| body | 16px | 1.5 | 400 | 0 | General text and descriptions |
| small | 13.6px | 1.45 | 400 | 0 | Code blocks and metadata |

## 4. Spacing

All spatial relationships are governed by a standard 4px grid, creating a consistent vertical rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Standard 4px grid with consistent vertical rhythm based on line heights.

## 5. Surfaces

Depth is communicated through a graded system of soft shadows on elevated surfaces like cards. A single, consistent border style defines edges without adding visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is anchored by a full-width hero section, split into two columns for visual emphasis. This structure gracefully transitions to a single column on smaller viewports, maintaining clarity at every scale.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed as a functional signal, not a spectacle. Transitions are smooth and brief, ranging from 150ms to 300ms for property changes, reinforcing state changes without delaying interaction.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in transitions
  - Smooth hover state changes

- **Hover:** Subtle background color or opacity changes on interactive elements.
- **Click:** Immediate visual feedback with micro-interactions.
- **Transition:** Smooth 150ms to 300ms transitions for colors and background properties.
- **Keyboard:** Standard focus rings and keyboard navigation support.

## 8. Voice & Don'ts

The editorial voice is professional and confident, yet approachable. It favors direct, action-oriented language over jargon, focusing on clarity for the core tasks of development and documentation.

- **Tone:** Professional, approachable, and confident.
- **Headline style:** Direct, action-oriented, and bold.
- **CTA style:** Simple and clear, focusing on core actions like 'Docs' and 'GitHub'.
- **Avoid:** Unnecessary jargon / Aggressive marketing language / Overly formal tone

### Don'ts
- ❌ 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.

The system deliberately omits complex gradients, dark mode as a default, decorative typography, and harsh colors to preserve its calm, focused utility.

## System Prompt (paste into AI tool)

```
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.
```