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.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 4pxComponents
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Use with MCP
Don't have the MCP? Install it here