Sorry Bravia: Emerald EditorialDESIGN.md alpha

A calm, factual, editorial look for websites built around one cause: a consumer campaign, an open letter, a case file, a petition or a long explainer. It must feel trustworthy and serious without being heavy, so the reader keeps scrolling and believes what they read.

primary#087A58
secondary#0D1117
neutral#FFFFFF
primary-strong#066748
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

headline-displayPlus Jakarta Sans · 60px · Extra Bold

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

headline-lgPlus Jakarta Sans · 47px · Extra Bold

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

headline-mdPlus Jakarta Sans · 29px · Extra Bold

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

stat-numberPlus Jakarta Sans · 52px · Extra Bold

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

body-lgPlus Jakarta Sans · 20px · Regular

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

body-mdPlus Jakarta Sans · 17px · Regular

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

body-smPlus Jakarta Sans · 13.5px · Medium

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

label-lgPlus Jakarta Sans · 15px · SemiBold

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

label-mdJetBrains Mono · 11px · Medium

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

label-smJetBrains Mono · 10px · Medium

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

Corner Radius

12px
18px
26px
9999px

Spacing

Base: 4px
4px
8px
16px
20px
24px
32px
40px
48px
64px
84px
148px
880px
1180px

A calm, factual, editorial look for websites built around one cause: a consumer campaign, an open letter, a case file, a petition or a long explainer. It must feel trustworthy and serious without being heavy, so the reader keeps scrolling and believes what they read.

Components

Buttons

Chips

default

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Elevation & Depth

card
raised
float
input

Do's & Don'ts

Do

Keep emerald as the only accent; let ink and white do the rest.
Put a mono pill label above every section headline.
Show numbers, dates and sources in cards, not buried in paragraphs.
Use bright emerald, never the normal emerald, on dark ink sections.
Keep every text colour at WCAG AA 4.5:1 or better, with a visible focus ring everywhere.
Keep touch targets at least 40px tall.

Don't

Add gradients behind text, glows or coloured shadows.
Stack two dark sections in a row.
Centre long paragraphs; centre only short hero lines.
Bake headlines or numbers into images; keep them as real text.
Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 12.7 KB
Downloads 29
Copies 5

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/laxmimerit/sorry-bravia-emerald-editorial and implement it in my code

Don't have the MCP? Install it here