Browse all products
Product-inspired palettes · Publishing platform - articles & long-form writing

Blog Platform

The Blog Platform template (inspired by Medium) is a quiet, text-first light UI: a near-white background, near-black type, and a single accent color reserved for links and small interactive marks, built around long-form reading rather than dashboards or data.

See the Blog Platform palette applied to a real, live-updating UI below - not a flat swatch. Switch to "Your palette" to preview your own colors in the same interface.

Live previewBlog Platform
Blog
Search⌘ K
✎ WriteS
For youFollowing
42 stories
WEDNESDAY, MAR 15Stories for your morning
Latest
EElena Marsh· Mar 14Featured
The quiet case for boring technologyWhy the most resilient teams ship less-exciting stacks - and how that discipline compounds over years, not sprints.
Technology8 min read 2.4K 84
M
DDevon Okafor· Mar 12
What a color palette can tell you about a productA short field guide to reading intent, confidence, and taste straight off a hex code.
Design5 min read 891 31
M
SSergei Fediukov· Mar 10
Notes from a year of writing every single dayNo streak apps, no gimmicks - just what actually changed in the sentences and in me.
Writing11 min read 5.1K 176
M
MMarco Ferreira· Mar 7
Shipping the feature nobody asked forSometimes the backlog is wrong. A story about trusting a hunch over a roadmap.
Product6 min read 432 22
M
SSofia Lindqvist· Mar 3
The typography choices nobody notices - on purposeGood type is invisible until it is missing. A close look at the details that hold a page together.
Design7 min read 1.2K 57
M
JJon Bell· Feb 28
A small guide to making room for better ideasWhat happens when you deliberately remove noise from the way you read, work, and make decisions.
Self Improvement9 min read 763 41
M
Showing this archetype's own signature colors.

What does the Blog Platform color palette look like?

Publishing platforms live or die on how long someone is willing to keep reading, which pushes the visual language toward restraint: a near-white background, one highly legible text color, and just enough accent color to mark a link, a tag, or a claps count without ever competing with the words themselves.

This mockup - a single-column article feed with author bylines, topic tags, and a recommendations rail - borrows that text-first approach to show how a palette holds up in a reading-heavy interface rather than a colorful dashboard. It's an original layout built in that spirit, not a copy of any real product's design system or trademarked UI.

Key visual characteristics

  • A near-white background with generous whitespace around a single, centered reading column
  • A narrow left sidebar for primary navigation and followed topics
  • A right-hand rail surfacing staff picks, recommended topics, and people to follow
  • Small circular author avatars paired with a byline and a publish date
  • A persistent "Write" action in the header, styled as a simple pill button

Color characteristics

  • A near-black text color on a white or off-white background for maximum reading contrast
  • One accent color - often green - reserved for links, the write action, and small interactive marks like claps
  • A muted gray for secondary metadata (dates, read time, topic tags) so it recedes behind the headline
#FFFFFF
#F7F5F2
#1A8917
#1A8917
#242424
#6B6B6B

Typography

  • A serif or high-contrast serif-adjacent typeface for headlines, distinct from the UI's plain sans chrome
  • A plain system sans for navigation, metadata, and buttons
  • Comfortable line-height and a constrained line length in the article column, tuned for long-form reading

UI patterns

  • A single-column feed of article rows, each with a headline, a short excerpt, and a small square thumbnail
  • A sidebar listing followed topics as compact tag chips
  • A right rail with staff picks, recommended topics, and suggested people to follow
  • A sticky top bar with search, a write action, and an avatar menu

Frequently asked questions

What colors does a Medium-style blog interface typically use?

A near-white background with near-black text for reading contrast, plus one accent color - often green - reserved for links, the write action, and small interactive elements like claps or bookmarks.

Are these the official Medium brand colors?

No - this is an original layout inspired by the general look and feel of publishing platforms like Medium, not a copy of its official brand palette or trademarked design.

Does a text-first palette like this work with any accent color?

Most accent colors work well here, since the palette leans on a single accent for links and small actions rather than large colored surfaces - just make sure it holds enough contrast against white so links stay readable.

Can I preview my own colors on this Blog Platform-style UI instead of the default palette?

Yes - use the "Your palette" toggle above the preview to see your current colors rendered live inside this Blog Platform interface, instead of its default palette.

Export