Skip to content
Browse
Library

Josh W. Comeau. Clay mascot on a cloudbank.

  • Media
  • Light theme
  • 13 colors
  • 2 typefaces

Josh W. Comeau is a light, sky-and-paper blog page where a layered cutout cloudscape and a 3D clay avatar of Josh frame an otherwise disciplined white reading column. The hero sky runs Sky Blue #a0d4ee into Cloud Pill #b1dff6 and Cloud Mist #ddeef8 silhouettes, and the same blue returns as a cloud-edged gradient footer, so the page opens and closes in weather. Between them everything is text: Night Ink #0a0c10 Wotfard titles at 22px/600, 16px/400 excerpts on a roomy 1.5 line-height, and spaced uppercase Raspberry Eyebrow #e60067 labels. Comeau Blurple #4242fa is reserved for the wordmark, while soft 8px category chips and one 4px slate Show more button keep the controls friendly rather than salesy.

Visit joshwcomeau.com
Screenshot of Josh W. Comeau
Captured from joshwcomeau.com on October 17, 2026

Josh W. Comeau design system

Josh W. Comeau

Brand1

  • The Josh Comeau wordmark in header and footer — a saturated violet-blue that reads as hand-made ink against the pale sky

Accent5

  • Spaced uppercase section eyebrows such as Articles and Tutorials and Popular Content — the only warm colour in the reading column

  • Hero sky behind the header and the top stop of the footer gradient — paints the page as an open daytime sky

  • Category chip fills and the mid-layer cloud silhouettes in the hero cloudscape

  • Inline code backgrounds and the palest back-layer clouds behind the clay avatar

  • Vertical footer wash that deepens the sky toward the bottom edge beneath the cloud silhouette

Neutrals7

  • Reading-column canvas, foreground cloud shapes and the newsletter field wrapper — the white the clouds melt into

  • Article titles, excerpts, nav links, Read more links, sidebar links and line icons — a blue-black rather than pure black

  • Article subtitles beneath titles — a muted slate second voice under the 22px headings

  • Footer column headings, footer social icons and helper text — a sea-blue gray tuned to sit on the sky gradient

  • The Show more button fill at the end of the article feed — the only filled dark control on the page

  • The small square icon well holding the down arrow inside the Show more button

  • The square arrow submit button and typed text in the footer newsletter field

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Comeau Blurple

6.19 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.