---
version: alpha
name: Deno
description: A friendly light-canvas dev-tool playground where a warm Moranga display serif fronts crisp Inter body copy, a single mint-green runs every primary action, and buttons sit on hard offset shadows that make the page feel like a sticker sheet of physical, pressable objects.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f4f8fb"           # pale blue-white hero band and section tints
  surface-strong: "#e5eaea"    # muted card / code-shell fills
  surface-dark: "#0b0d11"      # the dark "Install" / GitHub button and footer

  # Ink / text
  ink: "#0b0d11"               # near-black headings and body
  ink-secondary: "#56575a"     # supporting paragraph copy
  ink-muted: "#9ea0a5"         # captions, metadata, placeholder
  on-dark: "#ffffff"           # text on dark surfaces and the GitHub button

  # Brand accent — the singular Deno mint green
  primary: "#70ffaf"           # primary CTA fill, version badges, the dino's glow
  primary-hover: "#5be89c"     # mint pressed/hover — darker mint
  primary-ink: "#172723"       # near-black-green text sitting on the mint button
  primary-soft: "#dafbe1"      # pale mint tint for inserted-code and badge fills

  # Secondary accents
  accent-yellow: "#ffdb1e"     # sunshine yellow — playful highlight, doc dots
  accent-sky: "#66c2ff"        # sky blue — the offset hard-shadow color
  accent-sky-soft: "#b3e0ff"   # pale sky tint, secondary link

  # Borders
  border: "#e5eaea"            # hairline dividers, card edges
  border-strong: "#25272b"     # the hard 2px button outline / offset edge

  # Shadow tints (opaque approximations for the elevation table)
  shadow-sky: "#66c2ff"        # was rgb(102,194,255) offset shadow — kept opaque for hex
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Moranga, Georgia, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  micro:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  code-mono:
    fontFamily: "Menlo, ui-monospace, SFMono-Regular, 'Cascadia Code', monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  code-small:
    fontFamily: "Menlo, ui-monospace, SFMono-Regular, 'Cascadia Code', monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px

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

rounded:
  sm: 3px
  md: 4px
  lg: 6px
  xl: 8px
  2xl: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.primary-ink}"

  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
  button-dark-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  button-tactile:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 10px 18px
  button-tactile-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.primary-ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-shell:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 12px 24px

  announce-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.caption}"
    padding: 8px 16px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  badge-version:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.micro}"
    rounded: "{rounded.md}"
    padding: 2px 8px

  code-block:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.code-mono}"
    rounded: "{rounded.2xl}"
    padding: 20px
---

# Deno Design System

## Overview

Deno's homepage is a JavaScript runtime that wants to be friendly. Where most dev-tools default to a serious dark terminal, Deno does the opposite: it sits on bright white (`{colors.background}`) and a barely-there blue-white wash (`{colors.surface}`), then leads with a chubby, headphone-wearing dinosaur mascot working at a cozy desk. The whole page reads as approachable rather than austere. The headline — "Uncomplicate JavaScript" — is set not in a grotesque sans but in **Moranga** (`{typography.display-hero}`), a warm humanist display serif with soft terminals, weight 400, near-black (`{colors.ink}`). That serif-for-display, sans-for-body pairing is the first signal that this is a tool with personality, not just a spec sheet.

The signature move is the single mint green. Deno's green (`{colors.primary}`) is electric and unmistakable, and it owns every primary action: the "Docs" CTA, the version badge ("2.8.0"), the announcement bar across the top, and the glow around the mascot. It is the brand's one chromatic anchor on an otherwise black-and-white page. Crucially, text on that green button is a deep near-black-green (`{colors.primary-ink}`), never white — the green is bright enough to need dark ink for contrast, and that choice keeps the mint reading as a highlighter, not a flat fill. A secondary sunshine yellow (`{colors.accent-yellow}`) and a sky blue (`{colors.accent-sky}`) appear sparingly for accent dots and tactile shadows.

Then there's the tactility. Deno's interactive elements don't float on soft ambient blur — many sit on a hard, offset shadow (originally `rgb(102, 194, 255) 2px 4px 0px 0px`, the sky-blue `{colors.shadow-sky}`) with a crisp `{colors.border-strong}` edge, so a pill button reads like a physical sticker you could peel off and press. Pills are everywhere: the CTAs are fully rounded (`{rounded.pill}`), the corners elsewhere stay tight (3-8px). Combined with the serif headline and the mascot, the overall impression is a runtime that takes correctness seriously but refuses to take itself seriously — playful, tactile, warm, and unmistakably light-mode.

**Key Characteristics:**
- Bright white canvas (`{colors.background}`) with a pale blue-white hero wash (`{colors.surface}`) — committedly light, never a dark terminal
- **Moranga** warm display serif for the hero headline (`{typography.display-hero}`, weight 400) paired with crisp **Inter** for all body and UI text
- A single electric mint green (`{colors.primary}`) owns every primary action — CTA, version badge, announcement bar, mascot glow
- Dark near-black-green ink (`{colors.primary-ink}`) on the green button, never white — preserves the highlighter feel
- Hard offset shadows in sky blue (`{colors.shadow-sky}`) give buttons a tactile, pressable, sticker-like physicality
- Fully-rounded pill CTAs (`{rounded.pill}`) against tight 3-8px corners elsewhere
- Friendly dinosaur mascot illustration carries the brand personality where most dev-tools use abstract diagrams
- Secondary sunshine yellow (`{colors.accent-yellow}`) and sky blue (`{colors.accent-sky}`) for sparse accent moments
- **Menlo** monospace (`{typography.code-mono}`) for the dark code blocks (`{colors.surface-dark}`) — code shown as a real terminal pane
- Inter at heavy 700 for headings and labels; the system rarely goes lighter than 400
- Hairline borders (`{colors.border}`) for structure; reserved offset shadows for interactive physicality

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Most of the page sits on pure white.
- **Blue-White Wash** (`{colors.surface}`): The pale hero band and section tints — a barely-there cool shift from white.
- **Muted Surface** (`{colors.surface-strong}`): Card and code-shell fills, a soft gray-green.
- **Near-Black Surface** (`{colors.surface-dark}`): The dark "Install / GitHub" button, code blocks, and footer.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings and body copy. A hair of blue, not pure black.
- **Slate** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Muted Slate** (`{colors.ink-muted}`): Captions, metadata, and input placeholders.
- **On Dark** (`{colors.on-dark}`): White text on dark surfaces and the GitHub button.

### Brand Accent
- **Deno Mint** (`{colors.primary}`): The singular brand color. Primary CTAs, version badges, announcement bar, mascot glow. The one chromatic anchor.
- **Mint Hover** (`{colors.primary-hover}`): The pressed/hover state — a deeper mint.
- **Mint Ink** (`{colors.primary-ink}`): The near-black-green text that sits on the mint button — never white.
- **Pale Mint** (`{colors.primary-soft}`): A light tint for inserted-code highlights and soft badge fills.

### Secondary Accents
- **Sunshine Yellow** (`{colors.accent-yellow}`): Sparse playful highlights and accent dots.
- **Sky Blue** (`{colors.accent-sky}`) / **Pale Sky** (`{colors.accent-sky-soft}`): The offset-shadow color and secondary links.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers — the primary structural device.
- **Hard Edge** (`{colors.border-strong}`): The crisp 2px outline / offset edge on tactile buttons.
- **Offset / Soft** (`{colors.shadow-sky}`, `{colors.shadow-soft}`): Opaque stand-ins for the sky-blue offset shadow and the soft ambient drop (the originals were rgb/rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Moranga` — a warm humanist display serif with soft terminals, used at weight 400 for the marquee headline. The signature personality face.
- **Primary**: `Inter`, with fallbacks `ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif` — carries all body, UI, and most heading text.
- **Monospace**: `Menlo`, with fallbacks `ui-monospace, SFMono-Regular, Cascadia Code, monospace`. Reserved for code blocks and terminal panes.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / Moranga 400 — the marquee serif headline |
| `display` | 44px / Inter 700 — large section titles |
| `heading` | 36px / Inter 700 — feature headings |
| `heading-sub` | 28px / Inter 700 — sub-section headings |
| `body-large` | 18px / Inter 400 — lead paragraphs |
| `body` | 16px / Inter 400 — standard body |
| `caption` | 14px / Inter 400 — metadata, helper text |
| `label` | 14px / Inter 700 — button text, UI labels |
| `micro` | 12px / Inter 700 — version badges, tiny labels |
| `code-mono` | 16px / Menlo 400 — terminal code blocks |
| `code-small` | 14px / Menlo 400 — inline and dense code |

### Principles
- **Serif fronts, sans carries**: Moranga gives the hero its warmth; Inter does all the readable lifting underneath.
- **Weight does hierarchy**: 700 for Inter headings and labels, 400 for body. The system rarely goes lighter than 400.
- **Code is monospace and dark**: Menlo on a dark shell, shown as a literal terminal rather than recolored prose.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with 2px and 4px sub-steps for tight component internals (`{spacing.xs}`–`{spacing.sm}`). Generous vertical breathing room (`{spacing.6xl}` = 96px) separates marketing sections; component internals stay compact.

### Grid & Container
- Max content width: ~1100px, centered
- Common pattern: a left text column (eyebrow + serif headline + CTAs) paired with the mascot illustration or a code block on the right
- "Install Deno" sections center a version badge over OS-tabbed install commands

### Whitespace Philosophy
- **Light and airy**: white does the separating; the page never feels crowded despite the playful elements
- **Personality in the gaps**: the mascot and illustrations get room to breathe rather than being crammed into a hero corner
- **Compact components, generous page**: cards and buttons are tightly composed but float in roomy surroundings

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most page content |
| Hairline (Level 1) | `1px` solid `{colors.border}` | Card and chip containment |
| Soft drop (Level 2) | `0 10px 15px -3px` + `0 4px 6px -4px` at ~10% black (`{colors.shadow-soft}`) | Resting cards, floating panels |
| Tactile offset (Level 3) | `2px 4px 0px 0px` hard offset in sky blue (`{colors.shadow-sky}`) + `{colors.border-strong}` edge | Pressable pill buttons — the signature physical element |
| Deep drop (Level 4) | `0 25px 50px -12px` at ~25% black | The largest lifted illustrations / modals |

**Shadow Philosophy**: Deno splits its elevation in two. Content cards use soft, ordinary ambient drops. But interactive elements get a hard, *offset* shadow — a crisp sky-blue rectangle nudged down-and-right with no blur — that makes a button read as a physical, pressable object sitting on the page. That offset-shadow tactility, not soft blur, is the brand's distinctive depth signature and the reason the page feels like a sticker sheet.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 3px | Tiny badges |
| `md` | 4px | Version badges, kbd keys, small chips |
| `lg` | 6px | Tactile buttons, links, code chips |
| `xl` | 8px | Inputs, mid containers |
| `2xl` | 12px | Cards, code shells |
| `pill` | 9999px | Primary and dark CTAs — fully rounded |

The system is split: primary CTAs go fully pill-rounded (`{rounded.pill}`) for friendliness, while everything else stays tight (3-12px). The contrast — round buttons, crisp corners — is part of the playful-but-precise character.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Mint (`{colors.primary}`) fill, dark mint-ink text, fully pill. The main "Docs" CTA. Hover deepens to `{colors.primary-hover}`.
- **`button-dark`** — Near-black (`{colors.surface-dark}`) fill, white text, pill. The "GitHub" / install pattern.
- **`button-tactile`** — Mint fill with the hard sky-blue offset shadow and `{colors.border-strong}` edge — the pressable, sticker-like variant.

### Cards
- **`card`** / **`card-shell`** — White or muted-surface fill, hairline border, 8-12px radius. The shell variant holds code or grouped content.

### Inputs
- **`input`** — White fill, hairline border, 8px radius. **`input-focus`** brightens the border; no heavy ring.

### Navigation
- **`nav-bar`** — White, hairline bottom border, Inter 700 labels, the wordmark + dino logo at left. Sits above a mint announcement bar.

### Badges & Bars
- **`badge-version`** — Mint fill, dark mint-ink, 4px radius — the "2.8.0" version stamp.
- **`announce-bar`** — Full-width mint bar with dark text at the very top of the page.

### Code
- **`code-block`** — Dark (`{colors.surface-dark}`) shell, white Menlo text, 12px radius — code shown as a real terminal pane.

## Do's and Don'ts

### Do
- Keep the canvas bright white (`{colors.background}`) or the pale blue-white wash (`{colors.surface}`) — Deno is light-mode
- Use **Moranga** serif for the hero headline (`{typography.display-hero}`) and **Inter** for everything else
- Reserve mint green (`{colors.primary}`) for primary actions, version badges, and the announcement bar — it's the one chromatic anchor
- Put dark mint-ink (`{colors.primary-ink}`) on the green button, never white text
- Use the hard sky-blue offset shadow (`{colors.shadow-sky}`) on tactile buttons to make them feel pressable
- Make primary CTAs fully pill-rounded (`{rounded.pill}`) and keep other corners tight
- Lean on the dinosaur mascot and friendly illustration for personality
- Show code in a dark Menlo terminal block (`{components.code-block}`)

### Don't
- Don't switch to a dark canvas — Deno's marketing site is committedly light despite being a dev tool
- Don't put white text on the mint button — the green is bright and needs dark ink for contrast
- Don't replace the offset hard shadows with generic soft-blur drops on buttons — the tactility is the signature
- Don't set the hero headline in a sans — the Moranga serif is the personality
- Don't spread mint green across body text or borders — it's an action color, used sparingly
- Don't make every corner a pill; only the CTAs go fully rounded
- Don't strip out the mascot for "serious" abstract diagrams — friendliness is a deliberate stance

---

## Responsive Behavior

### Breakpoints
*(Three breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; serif hero scales 72px → ~40px; nav collapses to a menu; mascot stacks below the copy and shrinks |
| Tablet | 640–1023px | Two-column blocks begin; illustration sits beside copy at reduced size |
| Desktop | 1024–1279px | Full layout; copy-left / mascot-right hero |
| Large | ≥1280px | Max ~1100px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run ~40px tall with `8px 20px` padding — comfortable for thumbs
- Nav links and OS-tab toggles carry generous hit areas

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the mint announcement bar persists
- **Hero**: copy and mascot go from side-by-side to stacked, illustration full-width then scaled down
- **Type**: Moranga display drops from 72px toward ~40px; Inter body holds at 16-18px
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- The mascot illustration is the hero "image" — it reflows as a flex child and scales with the column rather than cropping

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Deno Mint (`{colors.primary}`)
- Secondary text: Slate (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Mint fill (`{colors.primary}`) with dark mint-ink text (`{colors.primary-ink}`)

### Example Component Prompts

- "Create a hero on a pale blue-white wash (`{colors.surface}`) with a 72px near-black (`{colors.ink}`) headline in Moranga serif (weight 400), a slate (`{colors.ink-secondary}`) Inter lead paragraph below, and two pill CTAs: a mint (`{colors.primary}`) 'Docs' button with dark mint-ink text and a near-black 'GitHub' button"
- "Build a tactile pill button: mint (`{colors.primary}`) fill, dark mint-ink (`{colors.primary-ink}`) text, `{rounded.lg}` radius, a `{colors.border-strong}` edge and a hard `2px 4px 0px 0px` offset shadow in sky blue (`{colors.shadow-sky}`) — pressable, sticker-like"
- "Render a version badge: mint (`{colors.primary}`) fill, dark mint-ink text in 12px Inter 700, `{rounded.md}` radius, 2px 8px padding — e.g. '2.8.0'"
- "Create a dark code block: near-black (`{colors.surface-dark}`) shell, white Menlo text at 16px (`{typography.code-mono}`), `{rounded.2xl}` radius, 20px padding — shown as a terminal pane"
- "Add a full-width announcement bar at the top: mint (`{colors.primary}`) background, dark mint-ink text in 14px Inter, centered, 8px 16px padding"
- "Design an input: white fill, hairline (`{colors.border}`) border, `{rounded.xl}` radius, 10px 14px padding; on focus brighten the border, no heavy ring"

### Iteration Guide

1. Start on white (`{colors.background}`) or the pale blue-white wash (`{colors.surface}`). If you reached for a dark canvas, stop — Deno is light-mode.
2. The hero headline must be Moranga serif (`{typography.display-hero}`); everything else is Inter. If your headline is a sans, swap it.
3. Mint green (`{colors.primary}`) is the one accent — primary actions, version badges, announcement bar only. Text on it is dark mint-ink (`{colors.primary-ink}`), never white.
4. Tactile buttons get a hard offset shadow (`2px 4px 0px 0px` in `{colors.shadow-sky}`) plus a `{colors.border-strong}` edge — not a soft blur. This is the depth signature.
5. Primary CTAs go fully pill (`{rounded.pill}`); keep all other corners tight (3-12px).
6. Lean into personality — the dinosaur mascot and friendly illustration are the brand, not optional decoration.
7. Code is dark and monospace (`{components.code-block}`) — a real terminal, not recolored prose.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Deno. Brand names and trademarks belong to their respective owners.