Moss Garden Core × Design System v1.0

Mossi
เจริญเติบโต
อย่างอ่อนโยน

ดีไซน์ระบบสไตล์สวนมอส — โทนสีเอิร์ธอุ่น เส้นวาดมือ และสัมผัสแบบงานมือ ที่ให้ความรู้สึกเหมือนสมุดบันทึกส่วนตัว

เริ่มสำรวจ ดูคอมโพเนนต์
mossi.design
Design Tokens

Color Palette

โทนสีเอิร์ธโทนที่ได้รับแรงบันดาลใจจากสวนมอส — อบอุ่น สงบ และเป็นธรรมชาติ

--green-moss: #7F8F63
--pink-sakura-milk: #EAC9C1
--brown-warm: #5C4A3A
Warm Cream
#F8F1E7
Soft Ivory
#FFF9F0
Sakura Milk
#EAC9C1
Pink Dust
#DDB3A8
Mushroom
#D8C8B4
Sage
#B8C4A3
Moss
#7F8F63
Warm Brown
#5C4A3A

Typography

Fraunces สำหรับหัวเรื่อง, Quicksand สำหรับ UI, Caveat สำหรับลายมือ, Noto Sans Thai สำหรับภาษาไทย

--font-display: 'Fraunces', serif
--font-ui: 'Quicksand', sans-serif
--font-hand: 'Caveat', cursive
--font-thai: 'Noto Sans Thai', sans-serif

Fraunces

Display · Serif

The quick brown fox jumps over the lazy dog

Quicksand

UI · Sans-serif

The quick brown fox jumps over the lazy dog

Caveat

Handwritten

The quick brown fox jumps over the lazy dog

Spacing & Radii

ระยะห่างและมุมโค้งมนที่สม่ำเสมอ — สร้างความสงบและเป็นระเบียบ

--space-xs
8px
--space-sm
16px
--space-md
24px
--space-lg
32px
Components

UI Component Library

ครบทุกคอมโพเนนต์ที่จำเป็น — จากปุ่มไปจนถึงการแจ้งเตือน ออกแบบให้สอดคล้องกับโทนสวนมอส

Buttons

Cards

Standard

การ์ดมาตรฐาน

การ์ดพื้นฐานที่มีเงาอ่อนนุ่มและมุมโค้ง เหมาะสำหรับเนื้อหาทั่วไป

ดูรายละเอียด
Gradient

การ์ดไล่สี

ไล่สีครีมอ่อนเพื่อความรู้สึกอบอุ่น เหมาะสำหรับเนื้อหาโปรโมชัน

ดูรายละเอียด
Green World

การ์ดโลกสีเขียว

ไล่สีเซจ-มอสเพื่อความรู้สึกผ่อนคลายเหมือนอยู่ในสวน

ดูรายละเอียด
84
คาแรคเตอร์
12K
ผู้ติดตาม
340
โพสต์
96%
ความพึงพอใจ

Reminder (Signature Pattern)

“ปล่อยให้ความคิดไหลไปเหมือนสายน้ำในสวนมอส”
— Mossi Garden
“ความสุขเล็กๆ อยู่ในรายละเอียดรอบตัว”
— คำคมจากสวน
🌱

ทุกการเติบโตเริ่มจากจุดเล็กๆ

Forms & Inputs

เราจะส่งข่าวสารเกี่ยวกับสวนมอสและกิจกรรมใหม่ๆ ให้คุณทุกเดือน

🔍

Tags, Alerts & Navigation

Tags

ธรรมชาติ สวน มอส ต้นไม้

Alerts

ℹ️ อัปเดตสวนมอสประจำสัปดาห์พร้อมแล้ว
✅ บันทึกการปลูกมอสสำเร็จ
⚠️ ต้องรดน้ำมอสวันนี้ก่อน 18:00 น.

Breadcrumb

หน้าแรก → คอลเลกชัน → สวนมอสฤดูใบไม้ผลิ

Avatars

M S G M S

Tabs, Progress & Pagination

Tabs

Progress

ปลูกมอส 68%
ออกแบบสวน 42%

Pagination

Tooltip

วางเมาส์บน คาแรคเตอร์นี้ เพื่อดูคำอธิบาย

Skeleton Loading

Skeleton loading สำหรับ UI states
ขณะโหลดข้อมูล

Usage

วิธีใช้งาน Design System

คัดลอก CSS custom properties และ component classes จากไฟล์นี้ เพื่อเริ่มต้นใช้งานดีไซน์สวนมอสในโปรเจกต์ของคุณ

Installation

<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400,500,600&family=Quicksand:wght@400,600,700&family=Caveat:wght@500,600&family=Noto+Sans+Thai:wght@300,400,500,600" rel="stylesheet">

<!-- คัดลอก :root tokens ไปยัง stylesheet ของคุณ -->
<link rel="stylesheet" href="mossi-design-system.css">

Quick Start

เริ่มต้นง่ายๆ ด้วยคลาสที่พร้อมใช้งาน

<button class="btn btn-primary">
  ปุ่มหลัก
</button>

<div class="card">
  <h3>หัวข้อ</h3>
  <p class="thai">เนื้อหา</p>
</div>

Design Principles

  • 🌿 อบอุ่น & เป็นธรรมชาติ
  • ✋ รู้สึกเหมือนงานมือ
  • 📖 เหมือนสมุดบันทึกส่วนตัว
  • 🌱 เติบโตอย่างอ่อนโยน
  • 🎯 ใช้งานง่าย & เข้าถึงได้