DESIGN.md — Hashnode

Overview

Hashnode's design system serves a writing-first developer platform. A bright blue accent energizes an otherwise clean, white reading surface. The focus is on content legibility, distraction-free writing, and a comfortable reading experience similar to a well-formatted Medium article.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#2962FF	Brand blue, CTAs
color-bg	#FFFFFF	Page background
color-text	#1C1C1C	Primary text
color-surface	#F5F5F5	Code blocks, sidebars
color-muted	#6C6C6C	Meta text, dates

Typography

Role	Family	Size	Weight
Title	Inter	40px	800
Heading	Inter	24px	700
Body	Inter	18px	400
Code	Fira Code	15px	400

Components

Blog Post Card

• Cover image (16:9 ratio), title, excerpt
• Author avatar + name, date, read time
• Reaction count and comment count

Editor

• Markdown editor with live preview
• Toolbar: bold, italic, heading, code, image
• Distraction-free full-screen mode

Profile Header

• Banner image, avatar (96px), display name
• Bio text, social links, follower count
• Tabbed navigation: Posts, Series, About

Do's and Don'ts

Do

• Use 18px body text for optimal reading comfort
• Keep article width to 720px max for readability
• Use generous line height (1.8) for long-form content

Don't

• Don't distract from content with heavy UI chrome
• Don't use more than two typefaces per page
• Don't auto-play media in article feeds