Newsdesk Red

Newsdesk Red is a high-urgency design system built for real-time news and media platforms. The bold red-on-white palette communicates immediacy and authority. Every design decision prioritizes speed of information consumption — scannable headlines, dense article grids, and prominent breaking news indicators. The system handles the full spectrum from calm browsing to breaking news alerts.

Primary#CC0000
Secondary#990000
Neutral#F9F9F9
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

metadataRoboto · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bylineRoboto · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyRoboto · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body largeRoboto · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h5/card headlineRoboto · 18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4/section headlineRoboto · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3/featured headlineRoboto · 28px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2/top storyRoboto · 36px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h1/breaking news heroRoboto · 48px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Newsdesk Red is a high-urgency design system built for real-time news and media platforms. The bold red-on-white palette communicates immediacy and authority. Every design decision prioritizes speed of information consumption — scannable headlines, dense article grids, and prominent breaking news indicators. The system handles the full spectrum from calm browsing to breaking news alerts.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

breakinglivedevelopingcategory

Elevation & Depth

0
1
2
3

Do's & Don'ts

Do

use the red sparingly and purposefully — reserve it for breaking news, live states, and primary CTAs
maintain strict typographic hierarchy: 900 for hero, 700 for headlines, 400 for body
use timestamps prominently and update them in real-time ("2m ago", "LIVE")
provide clear visual distinction between breaking/developing/regular stories
use the dark navigation bar to create separation between global nav and content

Don't

round image corners; sharp edges convey journalistic authority and urgency
use decorative animations; the only motion should be functional (loading, live indicators)
use more than 2 column layouts for article text; readability requires constrained line lengths (60-75 characters)
use light gray (#F9F9F9) text on white backgrounds; maintain minimum 4.5:1 contrast
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.1 KB
Downloads 36
Copies 4
bold editorial landing-page professional

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/newsdesk-red and implement it in my code

Don't have the MCP? Install it here