# Deno — Marketing site Design Spec

> Source: deno.com (live DOM, computed styles), 2026-07-21.
> Coverage: announcement banner, nav, dark hero with the animated capability list, CTA pills, code-panel tabs, colour/type/radius/shadow census across the whole document.
> Gap: the animated hero repeatedly blocked script injection, so **below-the-fold reference screenshots were not captured** — all values below still come from computed styles on the live page.
> Responsive: not captured.

## 1. Visual Theme & Atmosphere

A **white** site — not the dark mascot-led runtime page the category suggests — that puts one full-bleed near-black hero band in the middle of it and lets a single acid mint do all the talking. The distinguishing move is typographic: this is a JavaScript-runtime brand whose display face is a **rounded serif** (Moranga, falling back to Georgia) set at weight **400**, sitting above body copy in **Recursive** and an enormous amount of monospace — the mono stack outnumbers the sans roughly two-to-one across the document, because the hero itself is a list of capabilities rendered as code. Chrome stays plain: 4px radii, Tailwind-standard shadows, hairline rules. All the saturated colour is quarantined into product artwork and syntax highlighting.

Feels: technical, bright, confident, playful-at-the-edges.

## 2. Color Palette & Roles

**Text**

| Token | Hex | Role / usage |
|---|---|---|
| ink | `#121417` | Primary text, also the darkest surface |
| muted | `#56575a` | Secondary text, active code-tab label |
| faint | `#868789` | Tertiary text (the most-used muted step) |
| disabled | `#9ea0a5` | Inactive code-tab label |
| dim | `#c2c4c7` | Lowest-contrast text |
| banner-ink | `#172723` | Text on the mint banner — a dark **green**-black, not `#000` |
| on-dark | `#ffffff` | Text on the hero band |

**Surfaces & borders**

| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page ground (54 blocks) |
| tonal | `#f5f5f5` | Inactive tabs, subtle fills |
| dark-deep | `#121417` | The darkest band, chip fills |
| dark | `#191b1f` | Hero band |
| dark-raised | `#25272b` | Raised dark surfaces, the dark CTA pill |
| hairline | `#e5eaea` | Nav rule and the 1px ring in the card shadow |
| border-mid | `#d4d6d8` | Code-tab underline |

**Accent**

| Token | Hex | Role / usage |
|---|---|---|
| mint | `#70ffaf` | The one brand colour: banner, primary pill, highlighted list row, the conic spinner |
| mint-ring | `rgba(112,255,175,.4)` | 1px border on dark chips |
| deep-green | `#001f08` | Deep green block |

**Product / illustration palette** (artwork only, never chrome): cyan `#01c2ff` · magenta `#db01ff` · yellow `#ffd601` · orange `#ea8e04` · green `#01ff67` · pale blue `#b3e0ff`.

**Vendor tokens — excluded from the brand.** The page also carries GitHub's *prettylights* markdown palette as `--color-*` custom properties (`#0969da` accent, `#1f2328` fg, `#d0d7de` border, `#f6f8fa` canvas-subtle, `#d1242f` danger, plus syntax `#6639ba`, `#0550ae`, `#57606a`). These style rendered markdown, not Deno's chrome, and should not be treated as design tokens.

Rules: **mint is the only accent**, and it appears as a *fill* (banner, pill, highlighted row) rather than as text. Text on mint is always `#172723`. The bright product hues never touch a button, link or border.

## 3. Typography Rules

Four families with distinct jobs:

- `Inter, ui-sans-serif, system-ui, …` — the h1 and all UI.
- `Moranga, "Georgia Pro", Georgia, serif` — **display**, declared with a serif fallback.
- `Recursive, Inter, ui-sans-serif, system-ui, sans-serif` — running body copy.
- `Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` — code, tabs, and the hero list.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| h1 hero | Inter | 72 / 79.2 | 700 | -1.8px |
| Display large | Moranga | 44 / 48.4 | **400** | -1.1px |
| Display | Moranga | 36 / 39.6 | **400** | -0.9px |
| Display small | Moranga | 18 / 18 | 700 | normal |
| Label | Moranga | 14 / 14 | 700 | normal |
| h2 (Inter variant) | Inter | 36 / 39.6 | 700 | -0.9px |
| h3 (Inter variant) | Inter | 44 / 48.4 | 700 | -1.1px |
| Body | Recursive | 16 / 24 | 400 | normal |
| Lead | Recursive | 18 / 28 | 400 | normal |
| Nav link | Inter | 18 / 36 | 700 | normal |
| Hero list row | Menlo | 20 / 28 | 500 | normal |
| Code tab | Menlo | 12 / 16 | 700 | normal |
| Banner | Inter | 16 / 24 | 400 | normal |

Patterns: **the mono stack is the most-used family on the page** (roughly 533 leaf elements versus 237 sans) — a deliberate inversion of the usual marketing ratio. Negative tracking is applied only at 36px and above, scaling to about -2.5% of font size; everything else is `normal`. Moranga carries display duty at weight **400**, so the largest serif type on the page is also the lightest. Nothing is uppercase.

## 4. Component Stylings

- **Announcement banner** — full-bleed `#70ffaf`, height 68px, text `#172723` at 16/24 weight 400, closed by an X at the right.
- **Banner button** — transparent fill, **`2px solid #172723`** border, `#172723` label, radius `6px`, height 36px, padding `4px 8px`, 16/24 at **700**.
- **Nav** — height 48px, transparent, separated by a `1px solid #e5eaea` bottom rule, `position: static` (it does not stick). Links are Inter 18/36 at 700 in `#000000`, radius 6px, 36px tall.
- **Search field** — white, height 40px, padding 8px, 16/24, with a `⌘K` keycap chip at the right.
- **Primary CTA pill** — `#70ffaf` fill, `#000000` label, radius `9999px`, height **60px**, padding `2px`, 16/24 at 400.
- **Secondary CTA pill** — identical geometry on `#25272b`.
- **Dark chip** — `#121417` fill, `1px solid rgba(112,255,175,.4)` mint border, radius `9999px`, height 34px, padding `4px 10px 4px 4px`, 14/20.
- **Code-panel tabs** — Menlo 12/16 at 700, height 29px, padding `6px 16px`, **no radius**; the active tab is white over a `#d4d6d8` underline, the inactive is `#f5f5f5` with a `#9ea0a5` label.
- **Hero capability list** — the signature component: a vertical column of Menlo 20/28 rows in white on the dark band, scrolling behind a horizontal mask, with the current row highlighted as a **mint `#70ffaf` block with black text and a check glyph**.

## 5. Layout Principles

Banner, then a static 48px nav on white, then a full-bleed dark band that holds the hero: headline on the left, the animated mono capability list on the right, masked at its edges by a horizontal gradient. Content below returns to white sections with code panels and product artwork. There is no fixed or blurred navigation.

## 6. Depth & Elevation

Radius scale by frequency: `4px` (129 uses — the default) · `9999px` (pills) · `6px` (buttons, nav links) · `8px` · `3px` · `2px` · `12px`.

```css
/* card lift — the dominant recipe, 39 uses */
box-shadow: rgba(0,0,0,.1) 0 10px 15px -3px, rgba(0,0,0,.1) 0 4px 6px -4px;

/* hairline ring + contact shadow, used together */
box-shadow: rgb(229,234,234) 0 0 0 1px,
            rgba(0,0,0,.1) 0 1px 3px 0,
            rgba(0,0,0,.1) 0 1px 2px -1px;

/* long throw, rare */
box-shadow: rgba(0,0,0,.25) 0 25px 50px -12px;
```

Philosophy: Tailwind's standard elevation scale used straight, with the notable local pattern of pairing a **1px `#e5eaea` ring with the contact shadow** so cards read as bordered *and* lifted. Depth on the dark band is a surface step (`#121417` → `#191b1f` → `#25272b`) rather than shadow.

## 7. Motion

House transition is `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on the colour group (147 elements), with `0.15s` on `opacity` (19), a compound `0.1s linear / 0.25s cubic-bezier(0, 0.37, 0.17, 1)` on `opacity, transform` (17) for reveals, and a slower `0.3s` variant (16). The hero's capability list animates continuously — it is the page's one piece of ambient motion, and it is heavy enough to block script injection.

## 8. Backgrounds, Effects & WebGL

No video, no canvas, no WebGL, no backdrop-filter, no grain. Three gradient recipes, all functional rather than decorative:

```css
/* faint top sheen on the dark band */
linear-gradient(rgba(255,255,255,.01), rgba(0,0,0,0) 50%);

/* horizontal mask fading the hero list into the band (note the oklab midpoint) */
linear-gradient(to right, rgb(18,20,23) 0%,
  oklab(0.190386 -0.00137379 -0.00671232 / .55) 50%, rgba(0,0,0,0) 100%);

/* mint conic sweep — the spinner / progress ring */
conic-gradient(from 270deg at calc(0% + 28px) 50%,
  rgb(112,255,175) 0deg, rgb(112,255,175) 360deg, rgba(0,0,0,0) 360deg);
```

## 9. Do's and Don'ts

### Do
- Keep the page white and drop **one** full-bleed dark band into it; don't invert the whole site.
- Let mono carry the page — the hero is a list of code, and the mono stack should outnumber the sans.
- Set display type in the Moranga serif at weight 400, and reserve Inter 700 for the 72px h1.
- Use mint `#70ffaf` as a fill only, always with `#172723` or `#000000` text on it.
- Apply negative tracking only at 36px and above.
- Pair the 1px `#e5eaea` ring with the contact shadow on cards.
- Keep the bright product hues (cyan, magenta, yellow, orange) inside artwork and syntax.

### Don't
- Don't make mint a text colour, a link colour or a border on light ground.
- Don't add a second accent, or let the GitHub prettylights `--color-*` vendor tokens into the chrome.
- Don't make the nav sticky, translucent or blurred — it is static and plain.
- Don't set Moranga bold at display sizes; 400 is the display weight.
- Don't use radii above 12px outside of pills — 4px is the default.
- Don't apply negative tracking to body, nav or mono text.

## 10. Responsive Behavior

Not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#121417` · Muted `#868789` · Border `#e5eaea` · Accent `#70ffaf`
- Font: Inter + Moranga (serif display) + Recursive (body) + Menlo (mono) · Body: 16px · Radius: 4px default / 6px button / 9999px pill · Control height: 36px nav, 60px hero pill
- Focus: not captured · Hover fill: not captured (colour transitions at 0.15s)

<deno_design_language>
A white developer-runtime site with exactly one full-bleed near-black band dropped into it, and one acid mint #70ffaf doing all the accent work — as a fill only (the announcement banner, the 60px 9999px CTA pill, the highlighted hero row), never as text or a border on light ground, and always carrying #172723 or black type. The typographic signature is inverted from the category: the monospace stack (Menlo-first) is the most-used family on the page because the hero is a scrolling list of capabilities set as 20/28 code with the current row highlighted mint, while display duty goes to Moranga, a rounded SERIF declared with a Georgia fallback, at weight 400 (44/48.4 at -1.1px, 36/39.6 at -0.9px) above Recursive body at 16/24; only the 72/79.2 Inter h1 at 700 with -1.8px tracking is heavier, and negative tracking appears only at 36px and above. Surfaces are #ffffff and #f5f5f5 on light, stepping to #121417 / #191b1f / #25272b on the dark band, with ink #121417 and muted #868789 / #56575a over #e5eaea hairlines. The nav is a plain static 48px rule — not sticky, not blurred. Radii default to 4px with 6px buttons and 9999px pills; depth is Tailwind-standard, most often rgba(0,0,0,.1) 0 10px 15px -3px plus 0 4px 6px -4px, and cards pair a 1px #e5eaea ring with the contact shadow. Motion is 0.15s cubic-bezier(.4,0,.2,1) on colour. Bright product hues — cyan #01c2ff, magenta #db01ff, yellow #ffd601, orange #ea8e04 — stay inside artwork and syntax. Feels: technical, bright, confident, playful-at-the-edges. Avoid: a dark whole-site theme, mint as a text or border colour, a second accent, bold Moranga at display sizes, a sticky blurred nav, or negative tracking below 36px.
</deno_design_language>