What is Deno's primary brand color?

Deno's signature color is a mint green at #70ffaf, resolved from the --color-runtime CSS variable. It carries the Docs and GitHub primary pills, the Install Deno version chip, the Learn more button inside the Enterprise callout, and the Node and npm support pill near the bottom of the fold. The pressed and dark variant is #172723 (--color-runtime-dark) for inverse surfaces. Crucially the brand pairs the mint with #000000 ink rather than white text — which gives the CTA a lit-surface quality instead of a colored-chip feel. Across the entire marketing fold the mint is the only chromatic event on the page.

What font does Deno use, and what should I use as a fallback?

The system runs Inter for the entire narrative tier — display, body, button, nav, label — at weights 400 and 700, with an Inter / ui-sans-serif / system-ui fallback chain declared in --font-sans. The hero H1 sits at 72px / Bold / 79.2px line-height with -1.8px letter-spacing (the brand's --text-heading-2xl token with --tracking-tight applied), section H2 at 36px / Bold with -0.9px tracking. A Recursive face is declared in --font-deploy-sans and --font-deploy-mono for Deploy-product surfaces, and a Moranga serif appears in --font-deploy-serif for editorial pullquotes. Inter is open-source — no proprietary fallback needed.

Why does Deno use both 9999px pill buttons and 4px card corners?

Deno runs two radius scales side by side. Marketing CTAs (button-primary, button-secondary, install-pill, learn-more) use a fully pilled 9999px radius — 11 occurrences in the extracted radii. Cards, badges, and the Install Deno callout chrome sit at 4px (88 occurrences — the brand's --radius-sm token), with 6px (--radius-md, 48 occurrences) used for nested inputs and chip backgrounds. The fully pilled CTA reads as friendly and approachable; the 4px card chrome reads as engineered. The two scales never mix inside a single component — CTAs stay pilled, surfaces stay tight.

What role does the Deno mascot play in the design system?

The dino mascot is the entire warmth system. Where most developer-platform brands paint atmospheric gradients or hire stock photography, Deno's marketing surface relies on one illustrated dinosaur peeking from the edge of every band — sitting at a desk with a lo-fi rain window in the hero (the @keyframes blink animation is declared for the dino's eyes), poking in from the left margin near the Enterprise callout. The illustration replaces the chromatic decoration that the rest of the page refuses. Treat the mascot as a brand voltage — never crop it, never tint it, never replace it with a generic illustration.

How does Deno handle elevation and depth?

The marketing surface uses near-flat elevation — no stacked shadow stacks, no atmospheric glow. Cards like the Install Deno callout and the Enterprise-grade JavaScript surface carry a 1px solid #e5eaea hairline border (95 border occurrences in the extraction) with at most a single soft drop-shadow at ~5% black opacity. Polarity-flipped depth — switching from #ffffff canvas to the #1f2328 ink band inside code blocks and the footer — is the brand's chief section-depth cue. Buttons and pills carry no drop-shadow; the mint fill itself does the elevation work against the white canvas.

Can I use this DESIGN.md to build a React app that looks like Deno?

Yes — feed the file to Claude, Cursor, or any AI agent that reads structured design tokens and it will reproduce Deno's specific restraint: fully pilled green CTAs with #000000 ink, two radius scales held distinct, Inter at weights 400 and 700 with negative tracking at hero scale, and a marketing surface that refuses gradients. Every hex (#70ffaf, #1f2328, #56575a, #e5eaea, #ffdb1e) is quoted so it pastes straight into Tailwind config or CSS variables. The 19 component recipes give you the button, install-callout, h1, h2, nav, and footer patterns ready to map onto shadcn primitives.

Deno Inspired Design System

Deno's design language as a DESIGN.md file.

About Deno Inspired DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source deno.com

Developer Tools & IDEs
Backend, Database & DevOps

Deno's design language is a JavaScript runtime translated into a near-monochrome marketing surface that refuses to look like an infrastructure brand. The canvas is pure #ffffff with a faint #e5eaea hairline ladder; text sits at near-black #1f2328 (the brand's resolved --color-fg-default token) for headlines and a calibrated #56575a for body paragraphs. The only chromatic event across the entire fold is a single mint green at #70ffaf — the resolved --color-runtime variable — which fills the primary CTA pill, the Install Deno 2.7.14 version chip, and the Learn more button inside the Enterprise-grade JavaScript callout. Everything else is greyscale, hairline, and the recurring dino mascot.

This page packages the system into a single DESIGN.md file in the Google Labs open spec. Inside: 22 color tokens (the mint voltage, four code-syntax brand accents pulled from --code-1 through --code-7, a five-step ink ladder, a four-step canvas ladder, and the structural hairlines), 11 typography styles running Inter at weights 400 and 700 plus a Recursive secondary face and a Moranga serif moment, 6 corner radii capped by the 9999px marketing pill, an 8-step spacing scale anchored on the brand's --spacing token at 4px, and 19 component recipes spanning the green pill, the dark GitHub pill, the bordered install card, and the H1 at 72px Inter Bold with -1.8px tracking.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Deno's specific posture — fully pilled green CTAs that keep black ink rather than flipping to white, two radius scales that never blur (4px cards, 9999px pills), and a marketing page that trusts the dino mascot more than any gradient or photograph. Reference the tokens inside Tailwind config or use them as a brand audit checklist. The system is worth studying because of what it refuses: no atmospheric gradient, no full-bleed product photography, no second accent inside the marketing fold. The runtime mascot is the entire warmth budget.

What makes it distinct

Single mint voltage#70ffaf carries every primary CTA and the Install version chip, the only chromatic event on a near-monochrome page
Two radius scales running side by side9999px fully pilled marketing CTAs against a tight 4px card and badge radius (88 occurrences each)
Inter at weight 700 with -1.8px tracking at 72px heropulled into engineered density rather than softened into rounded display
Mascot as the entire warmth systemthe dino illustration replaces gradients, photography, and atmospheric decoration
Black ink on mint, not whitethe primary button keeps #000000 text on the green fill, reading as a lit surface rather than a colored chip

Live at deno.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

deno.com

Explore Deno Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Deno Inspired design system FAQ

Common questions about Deno Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Deno — official site

The open-source JavaScript runtime for the modern web — TypeScript, JSX, and web standards built in.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Deno Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→