Nordic Yellow

Nordic Yellow mockup preview
Click to expand

Nordic Yellow is a Scandinavian-inspired design system rooted in function, simplicity, and democratic design. A bold blue-and-yellow palette creates instant recognition, while clean typography and grid-based layouts make complex product catalogs feel organized and accessible. The aesthetic is practical, warm, and optimized for helping people furnish their lives affordably.

Primary#003399
Secondary#FFDA1A
Neutral#767676
Background#F5F5F5
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayNoto Sans · 40px · Bold

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

H1Noto Sans · 32px · Bold

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

H2Noto Sans · 24px · Bold

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

H3Noto Sans · 18px · Bold

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

BodyNoto Sans · 16px · Regular

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

Body SmallNoto Sans · 14px · Regular

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

CaptionNoto Sans · 12px · Regular

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

Product NameNoto Sans · 16px · Bold

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

PriceNoto Sans · 24px · Bold

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

Price SmallNoto Sans · 16px · Bold

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

Unit PriceNoto Sans · 12px · Regular

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

DimensionsJetBrains Mono · 14px · Regular

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

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

Nordic Yellow is a Scandinavian-inspired design system rooted in function, simplicity, and democratic design. A bold blue-and-yellow palette creates instant recognition, while clean typography and grid-based layouts make complex product catalogs feel organized and accessible. The aesthetic is practical, warm, and optimized for helping people furnish their lives affordably.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

CategoryActiveNewSustainability

Elevation & Depth

1
2
3

Do's & Don'ts

Do

use blue (#003399) as the dominant UI color for navigation and actions
use yellow (#FFDA1A) for emphasis and promotions, but never for text on white backgrounds
show prices prominently with currency symbol; affordability is a core message
include product dimensions in a monospace font for technical accuracy

Don't

over-decorate; Scandinavian design is about removing the unnecessary
forget sustainability badges for relevant products; it is a brand pillar
use gradients or decorative patterns; rely on photography for visual interest
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 6.1 KB
Downloads 78
Copies 11

Use with MCP

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

Don't have the MCP? Install it here