Northern Hearth Design SystemDESIGN.md alpha

This design system is built for a local pre-order marketplace that bridges the gap between traditional craftsmanship and modern convenience. The brand personality is **Community-Centric, Joyful, and Earnest**, moving away from sterile e-commerce patterns toward a "digital village" experience. The visual style is a blend of **Tactile Minimalism** and **Contemporary Cultural Heritage**. It utilizes generous whitespace and clean grids to maintain a premium feel, while the 3D Tai Yai Chibi mascots introduce a layer of warmth and personability. Key characteristics include: - **Organic Softness:** Heavy use of 2xl rounded corners (16px–24px) to mimic the approachability of the chibi characters. - **Cultural Texture:** Subtle use of gold accents and terracotta tones inspired by the earth and architecture of Mae Hong Son. - **Narrative UI:** The Chibi mascots are not just decorative; they are functional guides that appear in empty states, success messages, and onboarding to reduce user anxiety. - **Premium Localism:** A clean, systematic approach that elevates local products without losing their authentic, handmade charm.

primary#6c2f00
secondary#47664a
tertiary#732813
surface#fff8f5
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

display-lgBe Vietnam Pro · 48px · Bold

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

headline-lgBe Vietnam Pro · 32px · Bold

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

headline-lg-mobileBe Vietnam Pro · 28px · Bold

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

headline-mdBe Vietnam Pro · 24px · SemiBold

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

body-lgPlus Jakarta Sans · 18px · 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 · 16px · 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 · 14px · Regular

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

label-lgPlus Jakarta Sans · 14px · SemiBold

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

buttonPlus Jakarta Sans · 16px · SemiBold

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

Corner Radius

0.25rem
0.5rem
0.75rem
1rem
1.5rem
9999px

Spacing

Base: 4px
4px
8px
12px
16px
16px
20px
24px
32px
48px

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

shippedpending
Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 8.0 KB
Downloads 16
Copies 2

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/gamerx-99/kadkom and implement it in my code

Don't have the MCP? Install it here