№ deno-com--changelog

Deno — Changelog

Soft, muted teal and ochre, gentle sans serif, spacious digital study.

Feature Stackminimalism editorial playful monochrome developer toolslight

The hero image establishes a calm, focused mood with a stylized illustration. The typography is clean and modern, prioritizing readability. The overall density is low, allowing the visual to breathe. · javascript runtime, developer tools, technical website, dark theme, modern javascript, deno, coding, productivity, minimalist design, developer website

Deno — Changelog - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: cool · monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#6ff4a7
OKLCHoklch(87.3% 0.160 156)
RoleDominant
find sites →
Hex#449c6c
OKLCHoklch(62.6% 0.112 157)
RoleSurface
find sites →
Hex#95fcc4
OKLCHoklch(91.3% 0.125 159)
RoleInk
find sites →
Hex#9f8568
OKLCHoklch(63.3% 0.052 70)
RoleAccent
find sites →
Hex#cac1b1
OKLCHoklch(81.4% 0.024 82)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Inter	72px	700	1.1	-1.8px	Aa Bb Cc
h2	Inter	36px	700	1.1	-0.9px	Aa Bb Cc
h3	Inter	44px	700	1.1	-1.1px	Aa Bb Cc
body	Inter	16px	400	1.5	0	Aa Bb Cc
caption	Inter	16px	400	1.5	0	Aa Bb Cc
button	Inter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

10px

12px

24px

32px

48px

64px

128px

Radius scale

0px

2px

4px

6px

8px

12px

16px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #6ff4a7;
  --color-surface: #449c6c;
  --color-ink: #95fcc4;
  --color-accent: #9f8568;
  --color-detail: #cac1b1;
}

/* CSS variables exposed by source */
:root {
  --color-purple-200: oklch(90.2% .063 306.703);
  --color-runtime: #70ffaf;
  --color-zinc-100: oklch(96.7% .001 286.375);
  --text-heading-3xl: clamp(3rem,calc(2.5rem + 3vw),6.25rem);
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --text-heading-sm--font-weight: bold;
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --text-heading-lg: clamp(1rem,calc(.75rem + 3vw),2.25rem);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-neutral-300: oklch(87% 0 0);
  --color-deploy-neutral-50: #f8f9fc;
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-main-blue: #0094ff;
  --text-heading-sm--line-height: 1.1;
  --text-base--line-height: calc(1.5/1);
  --color-deploy-neutral-600: #475269;
  --color-neutral-200: oklch(92.2% 0 0);
  --color-subhosting: #66c2ff;
  --color-gray-300: #c2c4c7;
  --color-prettylights-syntax-comment: #57606a;
  --color-accent-emphasis: #0969da;
  --font-mono: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  --color-fresh-dark: #401c00;
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-fg-muted: #656d76;
  --color-azure3: #e1ecf2;
  --color-gray-500: #9ea0a5;
  --text-heading-sm: clamp(1rem,calc(.25rem + 3vw),1.25rem);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-white: #fff;
  --color-gray-400: #b0b2b6;
  --color-blue-400: oklch(70.7% .165 254.624);
  --font-deploy-mono: Recursive,ui-monospace,Menlo,Monaco,Courier New,monospace;
  --radius-sm: .25rem;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --font-deploy-sans: Recursive,Inter,ui-sans-serif,system-ui,sans-serif;
  --color-yellow-300: oklch(90.5% .182 98.111);
  --color-deploy-neutral-500: #64708b;
  --font-weight-bold: 700;
  --color-gray-100: #e5eaea;
  --color-deploy-900: #001319;
  --color-runtime-200: #b0ffd4;
  --color-purple-600: oklch(55.8% .288 302.321);
  --text-xs--line-height: calc(1/.75);
  --color-deploy-neutral-350: #cbd1e1;
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --color-code-2: #00a341;
  --text-xl: 1.25rem;
  --radius-lg: .5rem;
  --color-canvas-default-transparent: rgba(255,255,255,0);
  --text-heading-3xl--letter-spacing: -.025em;
  --color-deploy-neutral-950: #020617;
  --color-runtime-950: #001f08;
  --color-prettylights-syntax-constant: #0550ae;
  --color-neutral-100: oklch(97% 0 0);
  --color-blue-100: oklch(93.2% .032 255.585);
  --color-prettylights-syntax-variable: #953800;
  --text-heading-md--letter-spacing: -.025em;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Deno — Changelog.
Reference design system (extracted from the live site):
- Palette: #6ff4a7, #449c6c, #95fcc4, #9f8568, #cac1b1
- Typefaces: Inter
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/deno-com--changelog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

72px

700

1.1

-1.8px

Aa Bb Cc

Inter

36px

700

1.1

-0.9px

Aa Bb Cc

Inter

44px

700

1.1

-1.1px

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

caption

Inter

16px

400

1.5

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #6ff4a7; --color-surface: #449c6c; --color-ink: #95fcc4; --color-accent: #9f8568; --color-detail: #cac1b1; } /* CSS variables exposed by source */ :root { --color-purple-200: oklch(90.2% .063 306.703); --color-runtime: #70ffaf; --color-zinc-100: oklch(96.7% .001 286.375); --text-heading-3xl: clamp(3rem,calc(2.5rem + 3vw),6.25rem); --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --text-heading-sm--font-weight: bold; --color-orange-600: oklch(64.6% .222 41.116); --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --text-heading-lg: clamp(1rem,calc(.75rem + 3vw),2.25rem); --color-blue-700: oklch(48.8% .243 264.376); --color-neutral-300: oklch(87% 0 0); --color-deploy-neutral-50: #f8f9fc; --color-purple-800: oklch(43.8% .218 303.724); --color-main-blue: #0094ff; --text-heading-sm--line-height: 1.1; --text-base--line-height: calc(1.5/1); --color-deploy-neutral-600: #475269; --color-neutral-200: oklch(92.2% 0 0); --color-subhosting: #66c2ff; --color-gray-300: #c2c4c7; --color-prettylights-syntax-comment: #57606a; --color-accent-emphasis: #0969da; --font-mono: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; --color-fresh-dark: #401c00; --color-yellow-400: oklch(85.2% .199 91.936); --color-fg-muted: #656d76; --color-azure3: #e1ecf2; --color-gray-500: #9ea0a5; --text-heading-sm: clamp(1rem,calc(.25rem + 3vw),1.25rem); --color-green-500: oklch(72.3% .219 149.579); --color-white: #fff; --color-gray-400: #b0b2b6; --color-blue-400: oklch(70.7% .165 254.624); --font-deploy-mono: Recursive,ui-monospace,Menlo,Monaco,Courier New,monospace; --radius-sm: .25rem; --color-prettylights-syntax-storage-modifier-import: #24292f; --font-deploy-sans: Recursive,Inter,ui-sans-serif,system-ui,sans-serif; --color-yellow-300: oklch(90.5% .182 98.111); --color-deploy-neutral-500: #64708b; --font-weight-bold: 700; --color-gray-100: #e5eaea; --color-deploy-900: #001319; --color-runtime-200: #b0ffd4; --color-purple-600: oklch(55.8% .288 302.321); --text-xs--line-height: calc(1/.75); --color-deploy-neutral-350: #cbd1e1; --radius-2xl: 1rem; --radius-md: .375rem; --color-code-2: #00a341; --text-xl: 1.25rem; --radius-lg: .5rem; --color-canvas-default-transparent: rgba(255,255,255,0); --text-heading-3xl--letter-spacing: -.025em; --color-deploy-neutral-950: #020617; --color-runtime-950: #001f08; --color-prettylights-syntax-constant: #0550ae; --color-neutral-100: oklch(97% 0 0); --color-blue-100: oklch(93.2% .032 255.585); --color-prettylights-syntax-variable: #953800; --text-heading-md--letter-spacing: -.025em; }

Build a landing page in the visual style of Deno — Changelog. Reference design system (extracted from the live site): - Palette: #6ff4a7, #449c6c, #95fcc4, #9f8568, #cac1b1 - Typefaces: Inter - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/deno-com--changelog