CURATED · OPEN · FREE

Josh Comeau

An educational web developer blog that uses bright, playful illustrations and clear typography to make complex coding concepts accessible.

01

Identity DNA

A friendly, illustrated textbook that explains complex web technologies with colorful, interactive metaphors.

02

Color

A bright, airy aesthetic dominated by a signature sky-blue (#B1DFF6) and a vibrant magenta accent (#E60067), grounded by deep navy text (#0A0C10) for maximum readability.

03

Typography

geometric-sans · monospace

• display36px · 700
• heading24px · 600
• subtitle19px · 400
• body16px · 400
• caption14px · 400

Use uppercase and wide letter-spacing for category labels. · Reserve monospace font exclusively for code snippets and technical terms. · Maintain generous line-height (1.5) for long-form readability. · Use bold weights sparingly to highlight key terms without overwhelming the layout.

04

Spacing

A 4px base grid ensures consistent rhythm, with generous 24px gaps between structural elements and 48-96px spacing for major section breaks.

05

Surfaces

Subtle, thin borders in neutral grays (e.g., rgba(10, 12, 16, 0.1)) are used for cards and inputs, while category tags use slightly more defined strokes.

0px 2px 4px rgba(0, 0, 0, 0.02) · 0px 4px 12px rgba(0, 0, 0, 0.03) · 0px 8px 24px rgba(0, 0, 0, 0.05)

06

Layout

A two-column layout with a narrow sidebar (300px) for 'Popular Content' and 'Categories' alongside a wide main content column.

07

Motion & Interaction

Smooth opacity transitions for UI state changes. · Subtle transform animations for interactive elements. · Staggered entry animations for content sections.

Subtle scaling or color shifts on interactive elements to provide immediate visual feedback. · Smooth transition to a new state or page with minimal delay.

08

Components

• button Simple text-based buttons or subtle pill-shaped tags with light background fills and rounded corners.
• card Clean, edge-to-edge content cards with clear typographic hierarchy and subtle background colors for emphasis.
• chip Small, pill-shaped tags with uppercase text, used for categorization (e.g., CSS, React).
• input Clean, rounded input fields with subtle borders and clear focus states.
• hero A full-width illustrated hero section featuring 3D-style graphics and a light blue gradient background.

09

Voice & Don'ts

• Tone Friendly, approachable, and encouraging, like a helpful mentor.
• Headlines Clear, direct, and benefit-oriented, often using 'An Interactive Guide to...' or 'A Friendly Introduction to...'
• CTAs Subtle, text-based calls to action that blend naturally into the content flow.

• Don't use a dark background for the main content area — the screenshot shows a bright, light-background aesthetic.
• Don't use a purely monochrome or grayscale palette — the design relies on vibrant sky blue and magenta accents.
• Don't use traditional serif fonts for body text — the screenshot exclusively uses clean, geometric sans-serif and monospace.
• Don't use harsh, black borders for UI components — borders are subtle and light, often transparent or gray.
• Don't overcrowd the layout with tight margins — the design uses generous whitespace and clear section breaks.
• Don't use sharp, 90-degree corners for buttons or cards — the screenshot shows consistent use of rounded corners (4-12px).
• Avoid: Dense, impenetrable jargon.
• Avoid: Impersonal, corporate-speak.
• Avoid: Overly dramatic or sensationalist language.
• Avoid: Dull, textbook-like prose.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko