№ gwern-net

Gwern

Deep charcoal geometry, crisp sans-serif clarity, vast luminous negative space.

Long Documentminimalism editorial monochrome portfolio medialight

The page prioritizes readability with a clean, vertical layout. Typography is the dominant visual element, creating a sense of intellectual weight. The color palette is restricted to black and white, reinforcing a serious, academic tone. · ai blog, technical writing, personal website, dark theme, academic blog, gwern branwen, minimalist design, monochrome website

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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#7f7f7f
OKLCHoklch(59.6% 0.000 90)
RoleDominant
find sites →
Hex#424242
OKLCHoklch(37.9% 0.000 90)
RoleSurface
find sites →
Hex#bcbcbc
OKLCHoklch(79.5% 0.000 90)
RoleInk
find sites →
Hex#7d7d7d
OKLCHoklch(59.0% 0.000 90)
RoleAccent
find sites →
Hex#bcbcbc
OKLCHoklch(79.5% 0.000 90)
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	Source Serif 4	50px	600	1.15	-1px	Aa Bb Cc
body	Source Serif 4	20px	400	1.4	0	Aa Bb Cc
caption	Source Sans 3	18px	400	1.4	0	Aa Bb Cc
button	Source Sans 3	20px	400	1	0	Aa Bb Cc

Spacing scale

7px

8px

20px

25px

35px

45px

50px

Radius scale

0px

Container

Max content width 935px

Export

:root {
  --color-dominant: #7f7f7f;
  --color-surface: #424242;
  --color-ink: #bcbcbc;
  --color-accent: #7d7d7d;
  --color-detail: #bcbcbc;
}

/* CSS variables exposed by source */
:root {
  --background-color: #fff;
  --GW-popups-tweet-popup-min-height: 120px;
  --GW-popups-popup-scrollbar-thumb-hover-color: #bbb;
  --SA-image-focus-image-hover-tooltip-text-color: #fff;
  --SA-image-focus-image-background-color: #fff;
  --GW-table-scrollbar-border-color: #000;
  --GW-dropcaps-cheshire-color: #191919;
  --GW-epigraph-quotation-mark-color: #808080;
  --GW-footnote-highlighted-border-color: #aaa;
  --SA-image-focus-overlay-image-number-text-color: #fff;
  --GW-image-checkerboard-000-fff-2x-gif: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
  --GW-page-toolbar-minimum-width: 46px;
  --GW-TOC-collapse-button-text-color: #ccc;
  --GW-block-context-span-highlight-color: #ddd;
  --SA-image-focus-overlay-info-icon-drop-shadow-color: #000;
  --GW-body-link-inverted-color: #eee;
  --GW-popups-popup-max-height: 480px;
  --GW-syntax-highlight-color-comment: #77947b;
  --base-font-size: 20px;
  --GW-table-sorted-column-heading-text-color: #fff;
  --GW-sans-serif-font-stack: "Source Sans 3", "Lucida Sans Unicode", "Helvetica", "Trebuchet MS", sans-serif, "Noto Emoji", "Quivira";
  --GW-TOC-link-hover-background-color: #ececec;
  --GW-full-width-block-layout-left-adjustment: 0px;
  --GW-pre-element-border-color: #c8c8c8;
  --GW-popovers-popover-border-color: #aaa;
  --GW-math-block-scrollbar-border-color: #ccc;
  --GW-syntax-highlight-color-normal: #1f1c1b;
  --GW-table-scrollbar-thumb-hover-color: #999;
  --GW-aux-links-collapse-border-color: #c4c4c4;
  --GW-popups-popup-title-color: #aaa;
  --GW-math-block-scrollbar-thumb-color: #ccc;
  --GW-popups-popup-title-focused-color: #000;
  --SA-image-focus-overlay-slideshow-button-disabled-color: #ddd;
  --GW-code-block-line-highlight-background-color: #ffd;
  --GW-admonition-note-background-color: #d8d8d8;
  --SA-image-focus-overlay-image-caption-text-color: #fff;
  --GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color: #000;
  --GW-collapse-disclosure-button-color: #eee;
  --GW-popovers-popover-title-bar-height: calc(1rem * 16/9);
  --GW-collapse-disclosure-button-text-hover-color: #fff;
  --GW-page-toolbar-button-disabled-text-color: #ccc;
  --GW-popups-popup-border-width: 3px;
  --GW-syntax-highlight-color-function: #002561;
  --GW-popups-popup-title-bar-button-focused-color-disabled: #ddd;
  --GW-image-pattern-dotted-161616-on-3e3e3e-2x-gif: url('data:image/gif;base64,R0lGODlhEAAQAPAAMRYWFj4+PiwAAAAAEAAQAAACHowPcKgb6V6LtFoDXV6b3Q9aHTZ5WhmmJodK0ajGBQA7');
  --GW-table-row-horizontal-border-color: #000;
  --GW-skip-to-content-background-color: #bf1722;
  --GW-pre-element-background-color: #fafafa;
  --GW-popups-popup-with-full-title-bar-min-height: 120px;
  --SA-image-focus-overlay-slideshow-button-hover-background-color: rgba(0, 0, 0, 0.1);
  --SA-image-focus-overlay-background-color: #000;
  --GW-blockquote-background-color-level-one: #f8f8f8;
  --GW-body-background-color: #fff;
  --GW-nav-header-link-hover-color: #000;
  --GW-syntax-highlight-color-operator: #002561;
  --GW-sidenote-scrollbar-thumb-color: #aaa;
  --GW-page-toolbar-button-icon-color: #aaa;
  --GW-math-block-scrollbar-thumb-hover-color: #999;
  --GW-collapse-inline-disclosure-button-text-hover-color: #999;
  --GW-collapse-in-blockquote-disclosure-button-text-color: #999;
}

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 Gwern.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #424242, #bcbcbc, #7d7d7d, #bcbcbc
- Typefaces: Source Serif 4, Source Sans 3
- Macrostructure: Long Document
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/gwern-net

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Source Serif 4

50px

600

1.15

-1px

Aa Bb Cc

body

Source Serif 4

20px

400

1.4

Aa Bb Cc

caption

Source Sans 3

18px

400

1.4

Aa Bb Cc

button

Source Sans 3

20px

400

Aa Bb Cc

:root { --color-dominant: #7f7f7f; --color-surface: #424242; --color-ink: #bcbcbc; --color-accent: #7d7d7d; --color-detail: #bcbcbc; } /* CSS variables exposed by source */ :root { --background-color: #fff; --GW-popups-tweet-popup-min-height: 120px; --GW-popups-popup-scrollbar-thumb-hover-color: #bbb; --SA-image-focus-image-hover-tooltip-text-color: #fff; --SA-image-focus-image-background-color: #fff; --GW-table-scrollbar-border-color: #000; --GW-dropcaps-cheshire-color: #191919; --GW-epigraph-quotation-mark-color: #808080; --GW-footnote-highlighted-border-color: #aaa; --SA-image-focus-overlay-image-number-text-color: #fff; --GW-image-checkerboard-000-fff-2x-gif: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7'); --GW-page-toolbar-minimum-width: 46px; --GW-TOC-collapse-button-text-color: #ccc; --GW-block-context-span-highlight-color: #ddd; --SA-image-focus-overlay-info-icon-drop-shadow-color: #000; --GW-body-link-inverted-color: #eee; --GW-popups-popup-max-height: 480px; --GW-syntax-highlight-color-comment: #77947b; --base-font-size: 20px; --GW-table-sorted-column-heading-text-color: #fff; --GW-sans-serif-font-stack: "Source Sans 3", "Lucida Sans Unicode", "Helvetica", "Trebuchet MS", sans-serif, "Noto Emoji", "Quivira"; --GW-TOC-link-hover-background-color: #ececec; --GW-full-width-block-layout-left-adjustment: 0px; --GW-pre-element-border-color: #c8c8c8; --GW-popovers-popover-border-color: #aaa; --GW-math-block-scrollbar-border-color: #ccc; --GW-syntax-highlight-color-normal: #1f1c1b; --GW-table-scrollbar-thumb-hover-color: #999; --GW-aux-links-collapse-border-color: #c4c4c4; --GW-popups-popup-title-color: #aaa; --GW-math-block-scrollbar-thumb-color: #ccc; --GW-popups-popup-title-focused-color: #000; --SA-image-focus-overlay-slideshow-button-disabled-color: #ddd; --GW-code-block-line-highlight-background-color: #ffd; --GW-admonition-note-background-color: #d8d8d8; --SA-image-focus-overlay-image-caption-text-color: #fff; --GW-reader-mode-masked-links-key-toggle-info-alert-panel-text-shadow-color: #000; --GW-collapse-disclosure-button-color: #eee; --GW-popovers-popover-title-bar-height: calc(1rem * 16/9); --GW-collapse-disclosure-button-text-hover-color: #fff; --GW-page-toolbar-button-disabled-text-color: #ccc; --GW-popups-popup-border-width: 3px; --GW-syntax-highlight-color-function: #002561; --GW-popups-popup-title-bar-button-focused-color-disabled: #ddd; --GW-image-pattern-dotted-161616-on-3e3e3e-2x-gif: url('data:image/gif;base64,R0lGODlhEAAQAPAAMRYWFj4+PiwAAAAAEAAQAAACHowPcKgb6V6LtFoDXV6b3Q9aHTZ5WhmmJodK0ajGBQA7'); --GW-table-row-horizontal-border-color: #000; --GW-skip-to-content-background-color: #bf1722; --GW-pre-element-background-color: #fafafa; --GW-popups-popup-with-full-title-bar-min-height: 120px; --SA-image-focus-overlay-slideshow-button-hover-background-color: rgba(0, 0, 0, 0.1); --SA-image-focus-overlay-background-color: #000; --GW-blockquote-background-color-level-one: #f8f8f8; --GW-body-background-color: #fff; --GW-nav-header-link-hover-color: #000; --GW-syntax-highlight-color-operator: #002561; --GW-sidenote-scrollbar-thumb-color: #aaa; --GW-page-toolbar-button-icon-color: #aaa; --GW-math-block-scrollbar-thumb-hover-color: #999; --GW-collapse-inline-disclosure-button-text-hover-color: #999; --GW-collapse-in-blockquote-disclosure-button-text-color: #999; }

Build a landing page in the visual style of Gwern. Reference design system (extracted from the live site): - Palette: #7f7f7f, #424242, #bcbcbc, #7d7d7d, #bcbcbc - Typefaces: Source Serif 4, Source Sans 3 - Macrostructure: Long Document 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/gwern-net