ระบบออกแบบ ไล้พานิช
ชุดกฎ + tokens + ชิ้นส่วน UI ที่หยิบไปใช้ซ้ำได้ สำหรับงานแอป/เว็บที่ใช้ CSS ได้ (Cloudflare Pages, widget standalone). ทุกชิ้นมาจาก "Polish Pass" ที่ผ่านการขัดโครงแล้ว
⚑ เลือก "ต้นฉบับ ★" = เห็นของแท้ ; เลือกสีร้าน = เอาโครงนั้นมาใส่สีเรา (ทุกคู่ผสมกันได้)
4 ชั้นของ Design System
เข้าใจ "ชั้น" แล้วสั่งงานได้แม่น — อยากหยิบส่วนไหนไปใช้ซ้ำ บอกชื่อชั้นให้ถูก. เมนูลอยทางขวาสลับได้แค่ 2 ชั้นล่าง (Tokens) ; ชั้นบนคือชิ้นส่วน+หน้าจอที่ประกอบขึ้นจากชั้นล่าง
สี · Color tokens
ค่าสีพื้นฐาน — accent ปุ่ม/ราคา, พื้นหน้าจอ, ตัวอักษร
"ธีมสี"
โครง · Style tokens
รูปทรงของระบบ — ความมน (radius), เงา, เส้นขอบ, ระยะห่าง
"โครง/skin"
ชิ้นส่วน · Components
ชิ้น UI เดี่ยวๆ ที่ประกอบจาก tokens — หยิบไปวางซ้ำได้
หน้าจอ · Templates / Screens
เอา component มาประกอบเป็นหน้าเต็ม + จัดเลย์เอาต์/flow
"เลย์เอาต์/หน้าจอ"
5 กฎโครงสร้าง
ทำตาม 5 ข้อนี้ให้นิ่งก่อนเสมอ แล้วค่อยเลือกสี — อย่าไล่สีก่อน
Spacing สเกล 4 / 8
ระยะห่างทุกจุดเป็นพหุคูณของ 4 (4·8·12·16·24·32·48) ไม่ตั้งค่าตามใจ ความสม่ำเสมอ = ความเรียบร้อยที่ตาจับได้
ลำดับ Type ชัด
เล็ก–กลาง–ใหญ่ ต่างกันให้เห็น หัวข้อหนัก (800) ตัวรองเทา ไม่ใช้ขนาดใกล้กันจนแยกไม่ออก
ไอคอนเส้นชุดเดียว
ใช้ไอคอนเส้น (stroke 1.7) ชุดเดียวกันทั้งแอป เลิกใช้ emoji หรือรูปสินค้าเป็นไอคอนหมวด — ทำให้ดูเป็นแอปจริง
Accent มีวินัย
สีเน้น (เขียว/ฟ้า) ใช้เฉพาะ ปุ่ม · ราคา · สถานะ active เท่านั้น ที่เหลือเป็นกลาง (ขาว/เทา/ดำ) — สีน้อยแต่ตรงจุด = พรีเมียม
การ์ด + ที่ว่าง
การ์ดขาว เส้นขอบบาง 1px เงานุ่ม radius 16 บนพื้นโทนอ่อน เว้นที่ว่างเยอะ ไม่อัดแน่น
สี & ตัวแปร
โครงใช้ token คงที่ — สลับเฉพาะ 4 ตัว accent ต่อพาเลต กด เมนูธีมลอยทางขวา (เลื่อนตามตลอด) เพื่อเทียบจริงทุกจุดในหน้า — ตัวเลือกสีแอปที่ยังค้างอยู่
ลำดับตัวอักษร
ฟอนต์เดียวทั้งระบบ — Sarabun (มีหัว อ่านง่ายภาษาไทย). ขนาดไล่ตามลำดับชัด หัวข้อหนา เนื้อเบา — ห้าม letter-spacing บนเนื้อไทย ตัวเลข/ราคาใช้ Mono.
สเกล Spacing 4 / 8
ทุก padding · gap · margin เลือกจากสเกลนี้เท่านั้น — ไม่ตั้งค่าสุ่ม. ฐาน 4px คูณขึ้นเป็น 8 / 12 / 16 / 24 / 32 / 48.
Radius
มุมมนพอประมาณ — ไม่เหลี่ยมแข็ง ไม่กลมเกินจนเล่น. สามค่าพอ ทั้งระบบ.
Elevation / เงา
เงานุ่มจาง โทนเขียวอมเทา ไม่ใช้ดำทึบ — ยกการ์ดให้ลอยเบาๆ ไม่ตะโกน.
ชุดไอคอน
เส้นชุดเดียวทั้งระบบ — เส้นหนา 1.7 ปลายมน (stroke-linecap:round) viewBox 24×24. ห้ามผสมไอคอนทึบกับไอคอนเส้น (ยกเว้นดาวเรตติ้ง).
Components
ก็อป HTML snippet ไปใช้ได้เลย — class ทุกตัวนิยามใน <style> หัวไฟล์ (ก็อปบล็อก token + component CSS ไปด้วย)
<span class="btn">เพิ่มลงตะกร้า</span> <span class="btn ghost">ย้อนกลับ</span>
<span class="add"><svg class="i"…>＋</svg></span> <span class="ga"><svg class="i"…>＋</svg></span>
<div class="chiprow"> <span class="chip on">ทั้งหมด</span> <span class="chip">ยาฆ่าหญ้า</span> </div>
<div class="search">
<svg class="i"…>🔍</svg>
<span>ค้นหาสินค้า…</span>
</div><span class="bdg">พร้อมส่ง</span> <span class="bdg low">เหลือน้อย</span> <span class="dpill">✓ กลุ่มสาร K3</span>
<div class="pc"> <div class="pt"><img src="…" alt="…"></div> <div> <div class="pn">โซฟิต 1L</div> <div class="pm">เพรทิลาคลอร์</div> <div class="pp">฿245</div> </div> <div class="add">＋</div> </div>
<div class="gc"> <div class="gt"><img src="…"></div> <span class="bdg">พร้อมส่ง</span> <div class="gn">คายีซาเรส 1L</div> <div class="gr"> <span class="gp">฿320</span> <div class="ga">＋</div> </div> </div>
<div class="price"> <span class="now">฿245</span> <span class="was">฿290</span> <span class="off">-16%</span> </div> <div class="rate">★ <b>4.9</b> · ขายแล้ว 120</div> <span class="tchip">✓ ของแท้ 100%</span>
ลดทั้งร้าน สูงสุด 25%
เลือกครบจบในที่เดียว
ช้อปเลย<div class="promo"> <div class="pk">โปรเดือนนี้</div> <h4>ลดทั้งร้าน สูงสุด 25%</h4> <span class="pb">ช้อปเลย</span> </div> <div class="ship">🚚 ส่งฟรีครบ ฿1,000</div>
<div class="sech"> <b>ขายดีตอนนี้</b> <span class="acc">ดูทั้งหมด</span> </div>
ช่องกรอก & ตัวเลือก
ใช้ในตะกร้า · ที่อยู่จัดส่ง · ค้นหา. ขอบบาง มุม 12px โฟกัสขึ้นวงเขียวตามสี accent — สม่ำเสมอทุกช่อง.
<div class="fwrap"> <label class="flabel">ชื่อผู้รับ</label> <input class="field" placeholder="…"> </div>
<div class="selwrap"> <select class="field">…</select> <svg class="i"…>⌄</svg> </div>
<textarea class="field"
placeholder="ที่อยู่…"></textarea><label class="opl"> <input type="checkbox"> <span class="cbx"><svg…>✓</svg></span>ข้อความ </label> <label class="opl"> <input type="radio" name="pay"> <span class="rdo"></span>ข้อความ </label>
<label class="tgl"> <input type="checkbox"> <span class="tk"></span> </label>
<div class="qtyL">
<button>−</button>
<span>2</span>
<button>+</button>
</div>สถานะ (States)
ทุกตัวควบคุมต้องสื่อสถานะชัด — กดได้/กำลังกด/กดไม่ได้/ผิดพลาด ผู้ใช้ต้องรู้ทันทีโดยไม่ต้องเดา.
.btn /* ปกติ */ .btn:hover /* เข้ม + เงาลึก */ .btn:active /* ยุบลง 1px */ .btn.dis /* เทา · no-shadow */
.field /* ปกติ */ .field:focus /* ขอบ+วงเขียว */ .field.err /* ขอบ+วงแดง */ .field.dis /* เทา · disabled */
8 จอตัวอย่าง — แอปครบ flow
ชิ้นส่วนข้างบนประกอบเป็นแอปจริงตั้งแต่เปิดดูสินค้า → สั่งซื้อ → ติดตามพัสดุ → บัญชี. สลับโครงสร้าง/สีจากเมนูขวาแล้วเลื่อนดูทุกจอเปลี่ยนพร้อมกัน
ลดทั้งร้าน สูงสุด 25%
ยาคุม · ยาคุมหญ้า · ปุ๋ย เลือกครบจบในที่เดียว
ช้อปเลย
เราได้รับออเดอร์แล้ว กำลังจัดเตรียมสินค้าให้คุณ