Emerald Base

Emerald Base is a developer-centric design system for backend-as-a-service platforms. Its signature green-on-dark palette signals an open-source ethos and technical credibility. The aesthetic balances approachability with depth — friendly enough for newcomers to backend development, yet information-dense enough for experienced developers managing production databases and edge functions.

Primary#3ECF8E
Secondary#1C1C1C
Neutral#171717
Background#121212
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

badgeFira Code · 11px · Regular

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

overlineFira Code · 11px · Regular

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

table metadataInter · 12px · Regular

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

captionInter · 12px · Regular

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

body smallInter · 13px · Regular

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

Spacing

Base: 4px

Emerald Base is a developer-centric design system for backend-as-a-service platforms. Its signature green-on-dark palette signals an open-source ethos and technical credibility. The aesthetic balances approachability with depth — friendly enough for newcomers to backend development, yet information-dense enough for experienced developers managing production databases and edge functions.

Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.3 KB
Downloads 32
Copies 7

Use with MCP

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

Don't have the MCP? Install it here