Not the dark mascot-led runtime page the category implies: a white 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, a 60px pill, the highlighted hero row — never as text or a border on light ground, and always carrying a dark green-black #172723 rather than pure black. The typography inverts the marketing default: the monospace stack is the most-used family on the page, because the hero is a scrolling column of capabilities set as 20/28 code with the current one highlighted in a mint block, while display duty goes to Moranga, a rounded SERIF declared with a Georgia fallback, at weight 400 — so the largest type on the page is also the lightest — over Recursive body copy, with only the 72/79.2 Inter h1 running bold. Negative tracking appears at 36px and above and nowhere else. Chrome stays plain: a static unblurred 48px nav on a hairline, a 4px default radius, Tailwind-standard shadows paired with a 1px ring, and all the bright product hues quarantined into artwork and syntax.
Browse Deno in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.