01 — Color System
สีหลัก
Primary Palette — Foundation Colors
DEEP INK
#0F0D0B
Page Background
CHARCOAL
#1A1612
Screen BG
STONE DARK
#2C2825
Card / Panel BG
ONSEN GOLD
#B8974A
Primary Accent
WASHI CREAM
#F5F0E8
Primary Text
GOLD SCALE — โทนทอง
Gold Ghost
rgba(184,151,74,0.15)
NEUTRAL SCALE — โทนเทา/หิน
SEMANTIC COLORS — สีตามความหมาย
GENDER MALE
#4A73B8
rgba(74,115,184)
Male zone, wristband, indicators
GENDER FEMALE
#B84A78
rgba(184,74,120)
Female zone, wristband, indicators
SUCCESS
#4A9C6B
rgba(74,156,107)
Confirmed, payment ok, valid code
ERROR
#B44C4C
rgba(180,76,76)
Invalid code, payment failed
AGENT BRAND COLORS — สีแบรนด์ตัวแทน
Generic
N-800 + Gold border
02 — Typography
ตัวอักษร
Font System — 3 Typefaces
DISPLAY · Cormorant Garamond
USE: Screen titles, brand name, numbers
WEIGHT: 300 Light
ONSEN
Luxury & Serenity
CONFIRM BOOKING
42
THAI · Noto Serif Thai
USE: ข้อความภาษาไทยทุกที่
WEIGHT: 300 / 400 / 600
ยินดีต้อนรับ
เลือกประเภทสมาชิก
กรุณาแตะหน้าจอเพื่อเริ่มต้น · Please touch screen to begin
JAPANESE · Noto Sans JP
USE: Decorative label, accent text
WEIGHT: 200 Thin
温泉 ONSEN สปาน้ำพุร้อน
ご予約 · BOOKING · การจอง
TYPE SCALE — ขนาดตัวอักษร (1080×1920px Touch Screen)
| TOKEN |
SIZE |
LINE-HEIGHT |
TRACKING |
USE |
| display-xl |
96px |
1.0 |
4–6px |
Brand name, hero number |
| display-lg |
56px |
1.1 |
3–4px |
Screen title |
| display-md |
36px |
1.2 |
3px |
Section heading, card title |
| heading |
24px |
1.3 |
2px |
Sub-heading, label (EN) |
| body-th |
20px |
1.6 |
1px |
Body text ภาษาไทย |
| caption |
14px |
1.5 |
2px |
Description, helper text |
| label |
11px |
1.4 |
4–8px |
Eyebrow, tag, step indicator |
03 — Spacing & Grid
ระยะห่าง
Spacing Scale & Layout Grid
SCREEN PADDING
Horizontal: 80–100px
Top: 60px
Bottom: 60px
Between sections: 40–48px
TOUCH TARGET
Min button height: 72px
Min touch area: 88 × 88px
Card padding: 32–44px
Card gap: 16–24px
04 — Components
คอมโพเนนต์
UI Building Blocks
BUTTONS — ปุ่ม
PRIMARY — ยืนยัน / Confirm
SECONDARY — ตัวเลือก / Option
GHOST — กลับ / Back
DANGER — แจ้งเตือน / Alert
CARDS — การ์ด
DEFAULT STATE
PromptPay
พร้อมเพย์
Scan QR to pay instantly
SELECTED STATE
Credit Card
บัตรเครดิต
Visa · Mastercard · JCB
DISABLED STATE
WeChat Pay
วีแชทเพย์
Currently unavailable
ALERTS & FEEDBACK — การแจ้งเตือน
✓
PAYMENT SUCCESS
Your booking is confirmed
การชำระเงินสำเร็จ
⚑
EXCEED QUOTA
Additional charge required
เกินโควต้า — กรุณาชำระส่วนต่าง
✕
INVALID CODE
Please check and try again
รหัสไม่ถูกต้อง กรุณาลองใหม่
GENDER SELECTOR — เลือกเพศ (Screen 1)
Male = Blue #4A73B8 · Female = Rose #B84A78
WRISTBAND OUTPUT — สายรัดข้อมือ (Success Screen)
MALE
MALE · ชาย
33
Room No. · ห้องที่
FEMALE
FEMALE · หญิง
12
Room No. · ห้องที่
05 — User Flow
การไหลของผู้ใช้
Screen Flow Map — based on wireframe
→
SCREEN 2
Customer Type
ประเภทลูกค้า
MEMBER
AGENT
VOUCHER
GUEST
→
PATH A
Member Login
เข้าสู่ระบบ
→
PATH B
Payment
ชำระเงิน
PROMPTPAY
CREDIT CARD
WECHAT
→
QR / INPUT
Scan / Enter
สแกน / กรอก
→
06 — Motion & Animation
การเคลื่อนไหว
Transition Timing — Touch Interface
SCREEN TRANSITION
duration: 600ms
easing: ease-out
Fade + slide up 20px between screens
BUTTON PRESS
duration: 150ms
easing: ease-in-out
Scale 0.97 on touch, gold overlay sweep
CARD SELECT
duration: 300ms
easing: ease
Border color + background fade to gold
IDLE ANIMATION
duration: 3000ms
easing: ease-in-out
Steam rise, gold pulse on touch prompt
SUCCESS REVEAL
duration: 800ms
delay: stagger 100ms
Wristband number count-up, glow expand
ERROR SHAKE
duration: 400ms
easing: cubic-bezier
Horizontal shake ±8px on invalid input
07 — Icon System
ไอคอน
Emoji-based Icon Set (Touch-friendly)
ONSEN KIOSK · Design System v1.0
Confidential · Internal Use Only