ศูนย์รวมข้อมูลการออกแบบทั้งหมดของ Thailand Together · iOS 26 liquid-glass booth · Dark premium console · Sub-app patterns (ECM · KB) · Document Shell · Navigation convention (L0/L1/L2/C0) · bilingual TH+EN · honest-labeling aesthetic. ใช้เป็น onboarding ให้ Claude Design อ่านก่อนเสนอแบบใหม่.
Central design-system reference for Thailand Together · iOS 26 liquid-glass booth · dark-premium console · sub-app shells (ECM · KB) · document-shell spec · L0/L1/L2/C0 navigation · TH+EN bilingual · honest-label aesthetic. Use this as the onboarding surface before proposing new designs.
24 canonical screens · 29 presentation-ready frames (24 base + 5 sub-state variations · 2 improved replacements) · ต้นแบบจริงที่กดได้ · manifest · captions · capture summary · storyboard + .pptx · ลิงก์กลับ Management Runtime
24 canonical V1 screens · 29 presentation-ready frames (24 base + 5 sub-states · 2 captured-improved replacements inside the 24) · live prototype · manifest · captions · capture summary · HTML storyboard + .pptx · Management Runtime linkage.
source=v1 · edit readiness · capture status · priority · blocker · next action ได้ทันที · DB-backed · PATCH persistentsource=v1 · editable readiness / capture status / priority / blockers / next actions · DB-backed live state..json / .md / .txt / admin endpoints / bridge-service matrices · open them for audit, handoff, or deep questions — not during a live pitch. The Present now band at the top of this page is what you open in front of an audience.
Thailand Together มี 3 design system ที่ coexist กันในระบบเดียว: (1) iOS 26 Liquid Glass สำหรับ booth demo (`demo_alpha3_5.html`) · (2) Dark Premium (console) สำหรับหน้า planning/runtime/operations · (3) Dark Premium (sub-app) สำหรับ ECM และ KB. ทั้ง 3 share Thai-English bilingual toggle, Noto Sans Thai + Bebas Neue + Space Mono, และ "honest labels" aesthetic — แต่ visual language ต่างกันโดยตั้งใจ.
อ่านตามลำดับ: 1) Navigation convention L0/L1/L2/C0 · 2) Design tokens (ด้านล่าง) · 3) Document Shell Standard (HERO spec) · 4) Live surfaces ที่ deploy แล้ว · 5) Sub-app patterns (ECM · KB) · 6) UX specs ใน /planning/ · 7) Data schemas ที่ drive UI · 8) Architecture roadmap (spec/layer_g_ui).
Dark-mode Neon (booth demo):
Light-mode Strict (booth demo):
Dark Premium (console / sub-apps):
| Class | Size | Weight | Example |
|---|---|---|---|
body | 18px | 400 | ข้อความทั่วไป |
.r-sub · .tag · .d-rating | 16px | 600 | subtitle · rating |
.r-val · .sec-m | 16px | 600 | "จอง", "ดูทั้งหมด" |
.s-btn · .phase-btn · .cat-tab | 16px | 600 | tab buttons |
.dock-lbl | 18px | 600 | "Home", "ทริป" |
.app-lbl | 18px | 600 | "AI Plan", "Hotel" |
.r-name · .d-name · .tl-name | 28px | 700 | place names |
.sec-t | 26px | 800 | section titles |
.d-btn | 24px | 800 | discover card buttons |
.ov-title | 30px | 800 | overlay titles |
.search | 20px | — | search bar |
.pay-btn | 20px | — | pay button |
.w-amt | 40px | 800 | wallet amount |
.tb-circle | 16px | 800 | topbar badges |
Bebas Neue · Thai + Latin running text = Noto Sans Thai · Mono / code / numeric = Space Mono. ทั้ง 3 โหลดผ่าน Google Fonts ในทุกหน้า.
<path d="M9 18l6-6-6-6"> stroke chevron. Star rating ใช้ filled SVG star path (ไม่ใช่ ★ หรือ ⭐). `gico` accent = bright pastel gradients (เช่น #FF6BA0 → #FFB0D0).
iOS 26 liquid glass notes · L0/L1/L2/C0 · user profile · workflow rules (deploy-immediately · no emoji · `\x27` escaping) · stacking-context / scroll-container gotchas.
Document shell (planning/runtime/operations) · ECM shell (dark enterprise) · KB shell (classified index with filter chips).
Single-file vanilla HTML/CSS/JS · translucent panels · backdrop-filter blur · neon accents. ทดสอบจริงบน iPhone · deploy ผ่าน GitHub Pages.
Main console hub · portal · journey hub · operations portal · index portal · Design hub (this page).
9 pages · real login → portal → list → viewer → notes · access-aware · honest "Backend offline" badges · bilingual TH+EN · Known Gaps footer link.
Gradient hero · filter-chip toolbar (Class · Category · Status · Language · Access · Security) · universal search · paragraph anchors · creation scaffolder.
Document shell standard (HERO) · access model · note system · share/export · auth hardening · gating · production candidate · team usage · hint system.
Metadata registry · related map · reading flow · access schema · visibility matrix · note schema · i18n dictionary · discoverability catalog.
Full-platform blueprint · Layer G UI spec (Next.js 15 + React Native) · Layer F RAG · Layer I Reporting · security + PDPA rules. ระวัง: ส่วนใหญ่ยังเป็น spec · ไม่ใช่ live surface.
planning/document-shell-standard.html ก่อน · เป็น design-system spec 18 sections · sub-tab modes · typography · colour · opt-in contractdemo_alpha3_5.html บนมือถือจริง · เป็น hero visual surface ที่สุดในระบบ (iOS 26 liquid glass)assets/document-shell.css / ecm/assets/ecm.css / kb/assets/kb.css หรือยัง · ใช้ซ้ำก่อนเสนอใหม่assets/i18n/label_dictionary.jsondocs/kb/** + docs/document_index.* เป็น Session B-owned · A session ห้ามแก้ตรง. ถ้า Design แนะนำให้เปลี่ยน KB · ยื่น REQ ให้ Session B แทน.
\x27 for single quotes inside JS-generated onclick handlers ·
7. Known gaps are surfaced, never hidden · every sub-app footer links to known-gaps.html ·
8. Back button .ov-back ถูก CSS-hidden ทั่วทั้ง booth · navigation back ใช้ logo tap / C0 / overlay-header tap เท่านั้น.
ข้อมูลใน page นี้มี mirror เป็น Design Bundle ที่ ~/Downloads/Thailand-Together-Design-Bundle-2026-04-20/ · 170 ไฟล์ · 6.5 MB · jarring structure 9 tiers · 00_START_HERE.md + 00_MANIFEST.json เป็นทางเข้า. Bundle นี้คัดเฉพาะไฟล์ที่ design ต้องอ่าน (ไม่มี backend, build, session logs) · ใช้ได้ทั้ง online (page นี้) หรือ offline (bundle). Bundle ไม่ได้ deploy บน production · เป็น local-only reference.