Deno DESIGN.md

Modern JavaScript runtime design with simple black-and-white foundations, green dinosaur-brand personality, and secure-by-default developer tooling.

1. Visual Theme & Atmosphere

Deno should feel like a clean, modern runtime and cloud platform for JavaScript, TypeScript, WebAssembly, and edge apps. The design language balances playful mascot identity with serious security, standards, and developer workflow clarity.

• Mood: modern, secure, simple, standards-based, developer-native
• Density: medium, with docs, code examples, and deploy surfaces
• Character: black/white restraint, green brand accents, code-first panels, mascot-friendly touches

2. Color Palette & Roles

Use black and white as the base. Green should signal Deno identity, permission safety, and successful deploy/runtime state.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "DM Mono", "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #000000;
  border-radius: 999px;
  background: #000000;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.button-accent {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #70FFAF;
  border-radius: 999px;
  background: #70FFAF;
  color: #000000;
  font: 700 14px/1 Inter, sans-serif;
}

.code-panel {
  border-radius: 16px;
  background: #111827;
  color: #F9FAFB;
  padding: 18px;
  font: 500 13px/1.55 "DM Mono", monospace;
}

.docs-card {
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
}

5. Layout Principles

Lead with code, runtime capabilities, permissions, deploy paths, and standards compatibility. Keep docs highly scannable.

6. Depth & Elevation

css.shadow-card { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); }
.shadow-panel { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12); }

Use light shadows for cards and stronger separation for code/deploy panels.

7. Do's and Don'ts

Do make secure-by-default permissions visible. Do use code examples generously. Do not overuse mascot visuals inside dense developer tools. Do not make the runtime feel like a generic hosting dashboard.

8. Responsive Behavior

Code panels should scroll horizontally when needed.

9. Agent Prompt Guide

Design like Deno: black-and-white developer clarity, green runtime accents, secure-by-default permission cues, clean code panels, docs-first layouts, and a modern JavaScript/TypeScript tooling feel.