The complete brand, voice, visual and motion handbook continues here, with 17 Story supporting colours, 20 analytical families and a separate Location Intelligence profile. Both themes use the same original colour values.
Voice, visuals, fonts, identity, motif/animation, categorical colours and atmosphere recipes remain. Story analytical scales use identical HEX/LUT values and value direction on both backgrounds.
ตัวอย่างเชิงแนวคิดทั้งหมดด้านล่าง · ไม่ใช่ข้อมูล ความสามารถ หรือผลลัพธ์ของผลิตภัณฑ์All fixtures below are conceptual · not product data, capability, or outcome evidence
คงไว้Kept
ความจริงก่อนการตกแต่งTruth before treatment
brand voice · visual foundations · fonts · 7 atmosphere recipes · one job · first AHA · evidence boundary
color-srgb-10 · Story · Location Intelligence · exact theme-invariant colours
01
หนึ่งวิธีคิด หลายขอบเขตความจริงOne shared method, distinct truth owners
Locale Insight เป็นโครงร่วมระดับ portfolio, methodology และ product architecture ได้ แต่ข้อมูล ความสามารถ และคำกล่าวอ้างยังต้องอยู่กับ product layer เจ้าของเรื่องLocale Insight can provide a shared portfolio, methodology, and product-architecture frame. Each product still owns its data, capabilities, and claims.
AHA · แชร์ลำดับการคิดได้ โดยไม่รวม Land, Location และ Living ให้กลายเป็นความจริงชุดเดียวShare the decision sequence without merging Land, Location, and Living into one truth set.
Locale Insightquestion → evidence → boundary → next action
Landวัตถุ ข้อมูล และข้อจำกัดของเจ้าของงานOwned object, data, and limits
Locationวิธี หลักฐาน และ release ของเจ้าของงานOwned method, evidence, and release
Livingบทบาท capability และคำกล่าวอ้างของเจ้าของงานOwned roles, capabilities, and claims
02
ข้อสรุปเดียวกัน คนและเครื่องอ่านตรงกันOne claim, consistent meaning for people and machines
ข้อสรุป ที่มา ช่วงเวลา และข้อจำกัดต้องเดินทางไปด้วยกัน ตั้งแต่ HTML แรก หน้าที่คนเห็น จนถึงสถานะหลัง JavaScript ทำงานThe claim, source, time basis, and limitation travel together from initial HTML to the visible page and hydrated state.
AHA · hydration เปลี่ยนวิธีแสดงได้ แต่ไม่เปลี่ยนความหมายหรือเพิ่มสิทธิ์ให้ actionHydration may change presentation, never meaning or action authority.
PRACTICE-01 · Q2 · synthetic
พื้นที่ B เปลี่ยนมากที่สุดในชุดตัวอย่างนี้Area B changed most in this fixture
source · PRACTICE-01period · Q2limit · ยังไม่ยืนยันสาเหตุlimit · cause not established
1HTML แรกInitial HTMLความหมายครบตั้งแต่ sourcecomplete meaning in source
2หน้าที่เห็นVisible pageอ่านง่ายขึ้น ความจริงเดิมclearer treatment, same truth
3หลังทำงานHydrated statestate เพิ่มได้ claim ห้าม driftstate may grow; claim may not drift
03
สงบลงได้ โดยไม่ทำให้ควบคุมยากCalm by hierarchy, not by hiding controls
ส่วนหัวของหน้านี้คือ adapter ที่ใช้งานจริง: scroll ลงแล้ว visual layer สงบลง แต่ link และ button ยังคงเป็นเป้าตรง 44px ไม่ต้องกดปลุกและไม่มี overlay ส่ง click ต่อThis page header is the live adapter: downward reading calms the visual layer while links and buttons remain direct 44px targets, with no wake-first tap or click-forwarding overlay.
เปลี่ยนสื่อ ไม่เปลี่ยนคำสัญญาChange the format, preserve the promise
เว็บ PDF สไลด์ และภาพ social ไม่ต้องเหมือนกันทุก pixel แต่ข้อสรุป หลักฐาน ข้อจำกัด และผลที่ action สัญญาไว้ต้องไม่หล่นWeb, PDF, deck, and social formats need not match pixel for pixel. The claim, evidence, limitation, and action promise must survive.
AHA · fidelity คือ semantic equivalence ไม่ใช่การบังคับ layout เดียวกันทุกสื่อFidelity is semantic equivalence, not one layout forced onto every format.
เปรียบเทียบไม่ได้ ก็เป็นคำตอบIncompatibility is a valid result
ภาพซ้ายและขวาตั้งใจใช้ grain ต่างกัน ไม่มีค่าผลิตภัณฑ์จริง เมื่อ schema, release, unit หรือ grain ไม่ตรงกัน ต้องคง incompatibility ไว้แทนการฝืนสร้างคะแนนเดียวThe two sides intentionally use different grains and contain no product values. When schema, release, unit, or grain differs, keep incompatibility visible instead of forcing one score.
AHA · ทางต่อไปคือคำนวณใหม่ด้วย schema เดียวกัน หรือหยุดอย่างซื่อตรงRecompute under one compatible schema—or stop honestly.
Spatial fixture · ไม่มีข้อมูลจริงSpatial fixture · no observed data
Land signalSchema A · parcel · index 0–100
≠
Living signalSchema B · neighborhood · rate / 1,000
X
ไม่ผ่าน: motion กลายเป็นประตูขวางหลักฐานRejected: motion gates the proof
ตัวอย่างนี้แสดง failure แบบคงที่ ไม่ได้ซ่อนคำตอบจริง หน้า source ต้องเห็นความหมายสุดท้ายก่อน แล้วจึงเสริมจังหวะเฉพาะ visual ที่ช่วยอธิบายความสัมพันธ์ เวอร์ชันนี้กำหนด motion policy ให้ทุก component family แล้ว ไม่ปล่อยส่วนใดตกหล่นThe failure is shown statically; no real answer is withheld. Source HTML exposes the final meaning first, then motion may enhance only supporting relationships. This build assigns a motion policy to every component family, so none is left undefined.
RecoveryRecovery · reveal / settle / direct / disclosure / static · 760/920ms ceilings · optional approach replays on re-entry, never while stationary · this guide uses static supporting content
Teaching cardsเห็นเนื้อหาก่อน แล้ว settlevisible, then settle
Controlsเปลี่ยน state โดยตรงdirect state change
Disclosureขยับเฉพาะ surfacesurface only
Evidence · Atlasคงที่ อ่านได้ทันทีstatic and immediate
Status · Proofความหมายไม่จางหรือเลื่อนmeaning never dims or moves
หลักเดิมที่ยังทำงานFoundations that still work
Color Atlas ยังคงครบ และเป็นปลายทางหลักThe complete Color Atlas remains a primary destination
พื้นผิว light/dark, atmosphere, type roles, spacing, semantic state และ truth-before-treatment ยังเป็นแกนเดิม รุ่นนี้ใช้ color-srgb-10 พร้อม Story และ Location Intelligence; สีข้อมูลเหมือนกันทั้งสองธีมLight/dark surfaces, atmosphere, type roles, spacing, semantic states, and truth-before-treatment remain unchanged. This release introduces color-srgb-10, Story and Location Intelligence, with identical data colours on both themes.
คงเสียงแบรนด์ ภาพ ตัวอักษร โครงหน้า และตัวอย่างที่ใช้งานได้ดี พร้อมกฎ identity และ motif/animation ฉบับปัจจุบันRetain brand voice, visuals, typography, page structure and useful examples, with the current identity and motif/animation rules.
เพิ่มความชัดให้สีข้อมูลMore deliberate data colours
Story 17 สีแยกหน้าที่จาก Brand Energy · 14 sequential + 6 diverging ใช้สามสีหลักและ 41 ช่วงเป็นหลัก พร้อมตัวเลือก 3/5/7/9 ระดับ สีและทิศทางค่าเดิมทั้งพื้นสว่างและมืด17 Story colours have a separate role from Brand Energy. Fourteen sequential and six diverging families use three anchors and 41 steps as the primary view, with optional 3/5/7/9 classes. Both backgrounds retain the same colours and value direction.
พร้อมเลือกทำเลและส่งต่องานReady for location work and handoff
เพิ่ม demand, supply, market size และบทบาท Location อีก 13 แบบ ใช้ normative 0.9.7 ฉบับเต็มคู่กับ Add-on ของผลิตภัณฑ์ และ Location Profile เมื่อเกี่ยวข้องAdd demand, supply, market size and 13 more Location roles. Use the complete 0.9.7 normative with the separate product Add-on and the Location Profile when relevant.
Integrated in 0.9.7
สิ่งใหม่ทำงานร่วมกับหลักเดิมNew assets, the same complete foundations
Story มี 14 สเกลทางเดียวและ 6 สเกลสองทาง สีหัว–กลาง–ท้ายมีหน้าที่ชัดเจน ธีมมืดใช้สีเดิมทั้งหมดและคงทิศทางค่า ใช้ขอบ ป้ายชื่อ และพื้นรองเมื่อค่าสีใกล้พื้นStory provides fourteen sequential and six diverging families with explicit anchor roles. Dark mode uses identical colours and value direction. Use boundaries, labels and backing surfaces where fills approach the background.
ตัวเลขกับสถานะต้องตรงกันทั้งคนและเครื่องมือPeople and machines read the same value state
ค่าตัวอย่างต่อไปนี้เป็น fixture สังเคราะห์ สองสถานะที่วัดได้มีตัวเลข ส่วนสถานะอื่นต้องมีค่า null เสมอ ห้ามซ่อนตัวเลขที่ปกปิดไว้ใน HTML หรือ JSONThe following synthetic fixtures separate measured numbers from null-valued states. Suppressed numeric values must never be hidden in HTML or JSON.
คงหลักฐานให้อ่านได้ และใช้ motion ตามหน้าที่Keep evidence readable and give motion a job
หน้านี้แสดง supporting content แบบคงที่ และให้ทดลอง motion เมื่อกดใน lab เท่านั้น Approach อาจเล่นซ้ำเมื่อกลับเข้าจอ แต่ไม่วนขณะอยู่นิ่ง; reduced motion, no-JavaScript และ failure เห็นผลสุดท้ายThis guide keeps supporting content static and lets the reader request motion in the lab. Optional approach motion may replay on re-entry, never while stationary; reduced motion, no JavaScript and failure expose final meaning.
Identity และ shared motif ใช้ finite plays ซ้ำเฉพาะขณะเห็นอย่างน้อย 14% ของวัตถุ รอบไม่น้อยกว่า 2,000ms (logo 6,000ms) หยุดเมื่อออกจอ และมีปุ่ม pause/resume ระดับหน้า คงไฟล์โลโก้ต้นฉบับไว้ ส่วน wordmark เปลี่ยนสีได้ตาม LOGO-01; product overlay เช่น ijji.logo-sting คง lifecycle ของตนIdentity and shared motifs use repeated finite plays while at least 14% visible, with cycles of at least 2,000ms (logo 6,000ms), stop offscreen and provide page-level pause/resume. Original logo files are retained; wordmark colour treatments are permitted by LOGO-01; product overlays such as ijji.logo-sting retain their own lifecycle.
ให้การเคลื่อนไหวช่วยเล่าเรื่องGive motion a part in the story
กฎ animated logo และ motif อยู่ใน LDS 0.9.7 ฉบับเต็มแล้ว เลือกหน้าที่ ดูตัวอย่าง แล้วหยิบไฟล์ชุดเดียวกันไปใช้ได้จากตรงนี้Animated-logo and motif rules are already part of the complete LDS 0.9.7. Choose a purpose, try the example, and take the exact files from here.
01 · เปิดเรื่อง01 · OpeningLogo assembly / Dial
ให้คนรู้ว่ากำลังเข้าสู่เรื่องอะไรHelp the reader enter the story.
02 · เปลี่ยนบริบท02 · TransitionRings / Layers
เชื่อมพื้นที่หรือชั้นของเรื่องเข้าด้วยกันConnect the next place or layer.
03 · ส่งต่อ03 · ClosingSlice / Cultivate
จบช่วงของเรื่อง แล้วเปิดทางให้คนไปต่อClose the story beat and let people continue.
เลือกหนึ่งจังหวะ แล้วลองดูChoose one motion to try
เลือก Full หรือ Quiet ได้ทุกแบบ ทั้งโลโก้และ motif พื้นรองของตัวอย่างจะเปลี่ยนให้เหมาะกับภาพ แม้ธีมของหน้าจะต่างกัน เริ่มจากภาพนิ่งแล้วกดเล่น หรือเลือกตามธีมเพื่อสลับให้อัตโนมัติChoose Full or Quiet for every logo and motif. The preview uses the matching carrier, independently of the page theme. Start with the still and press play, or follow the page theme automatically.
ภาพสุดท้ายพร้อมใช้งาน แม้ไม่มี JavaScriptThe final still is available even without JavaScript.
เมื่อเล่น: เห็นอย่างน้อย 14% จึงเริ่ม รอบ logo 6 วินาที / motif อื่น 3 วินาที ออกนอกจอหรือกดหยุดจะเห็นภาพสุดท้าย การตั้งค่าลดการเคลื่อนไหวของเครื่องมีผลเสมอWhen enabled: play at 14% visibility; logo cycles every 6 seconds and other motifs every 3 seconds. Leaving the viewport or pausing shows the final still. Your device’s reduced-motion preference always applies.
Logo assemblyภาพประกอบการเปิดเรื่อง · ไม่ใช่ไฟล์โลโก้ทางการAn opening treatment · separate from official logo artwork
หน้าใช้งานจริงมีได้ไม่เกิน 3 จังหวะต่อเส้นทาง หรือ 1 จังหวะต่อพื้นที่ทำงาน ไม่วางทับคำตอบแรก หลักฐานหลัก หรือปุ่มหลัก ตัวอย่างทั้ง 6 ด้านล่างจึงแสดงเป็นภาพนิ่งA real route has at most three motion moments, or one per task surface. Keep the first answer, primary proof and primary action clear. The six specimens below remain still.
เปิดเรื่องOpening · Logo assembly
เปิดเรื่องด้วยจังหวะประกอบร่างOpen with the assembly sequence
เปิดเรื่องของแบรนด์ ใช้เป็นภาพประกอบการเปิดเรื่อง ไม่แทนโลโก้ในเมนูหรือภาพแชร์Introduce the brand. This opening treatment does not replace the official logo in navigation or sharing.
พาไปยังบริบทหรือพื้นที่ถัดไป ไม่แทนเขตบริการ รัศมีจริง หรือข้อมูลแผนที่Introduce the next place or context. The rings do not represent a service boundary, radius or mapped evidence.
แบ่งและเชื่อมชั้นของเนื้อหา โดยไม่สื่อจำนวน ชั้นข้อมูลจริง หรือความคืบหน้าSeparate and connect parts of a story, without encoding a count, actual data layers or progress.
ช่วยปิดช่วงของเรื่องและส่งต่อไปยังขั้นถัดไป โดยเว้นพื้นที่ให้ปุ่มหลักClose a story beat and lead into the next step while keeping the primary action clear.
ส่งต่อClosing · Cultivate
ส่งต่อสิ่งที่เติบโตจากเรื่องนี้Close with a handoff
ปิดเรื่องและส่งต่อให้คนไปทำต่อ ไม่ใช้เป็นหลักฐานการเติบโตหรือความสำเร็จClose and hand the work to the reader. The motif is not evidence of growth or success.
หยิบใช้ให้ตรงกับงานTake what the work needs
ภาพนิ่งใช้ SVG จากตัวอย่างได้เลย งานเว็บที่เคลื่อนไหวใช้ runtime, MotifFrame, MotionController และ fallback ที่อยู่ในชุดเดียวกัน ห้ามวาดใหม่หรือเปลี่ยนสีของ motifFor a still, download its SVG above. For web motion, use the supplied runtime, MotifFrame, MotionController and fallback together. Do not redraw or recolour the motif.
Project Source ที่มี LDS 0.9.7 มีข้อกำหนดและรายการไฟล์แล้ว ไม่ต้องเพิ่มกฎจาก 0.9.4 ส่วนแพ็กเกจ skill มีไฟล์ motion พร้อมใช้ การติดตั้งไม่ได้ใส่ animation ให้ทุกชิ้นงานอัตโนมัติ ผู้สร้างยังต้องเลือกหน้าที่ วางไฟล์ และตรวจการเล่นจริงA Project Source containing LDS 0.9.7 already has the rules and file references; no 0.9.4 rule document is needed. The skill package also includes motion files. Installation does not automatically animate every output: the author still selects a purpose, includes the files and checks playback.
ไฟล์สำหรับเว็บ และตัวอย่างการประกอบWeb files and an integration example
ดาวน์โหลดชุดเต็มแล้วคงโครงสร้างโฟลเดอร์ไว้ หรือตรวจไฟล์แต่ละรายการด้านล่าง ใช้ CSS และ JavaScript ต้นฉบับร่วมกับภาพนิ่งของชนิดที่เลือกDownload the complete kit and keep its folder structure, or inspect the individual files below. Pair the original CSS and JavaScript with the chosen motif’s final-state SVG.
ตัวอย่างนี้แสดง logo assembly บนพื้นสว่างคงที่ แม้หน้าใช้ธีมมืด สำหรับการสลับ full/quiet ตามธีม ให้ใช้ MotifFrame ของตัวอย่างด้านบนและ SVG ทั้งสองแบบ ตรวจ viewport, pause, reduced motion, no-JavaScript และ print ในชิ้นงานจริงก่อนส่งต่อThis example places logo assembly on a fixed light carrier, even when the page is dark. To switch full/quiet with the theme, use the preview’s MotifFrame pattern and both SVGs. Check visibility, pause, reduced motion, no JavaScript and print in the actual output before handoff.
<!-- Keep the supplied lds/motif/ directory and svg/ files together. -->
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="lds/motif/landometer-motifs.css">
<link rel="stylesheet" href="lds/motif/motif-frame.css">
<script defer src="lds/motif/landometer-motifs.js"></script>
<script defer src="lds/motif/motion-controller.js"></script>
<script defer src="lds/motif/motif-frame.js"></script>
<!-- One page-level control; use your page's current language. -->
<button type="button" class="lds-motion-pause" aria-pressed="false"
data-label-pause="Pause motion" data-label-resume="Resume motion">
Pause motion
</button>
<!-- Example: a full opening motif on a fixed, approved light carrier. -->
<div class="lds-motif-frame" data-kind="logo"
data-job="animated_brand_opening" data-beat="opening"
data-variant="full" data-host-surface="surface.card@light"
data-cycle-ms="6000">
<lm-motif kind="logo" ink="blue" autoplay="false"></lm-motif>
<noscript><img src="lds/motif/svg/logo-full.svg" alt=""
width="600" height="300"></noscript>
</div>
งาน ijji และ CityChat ใช้กฎใดเพิ่มWhat changes for ijji and CityChat
ijji
ใช้ LDS ฉบับเต็มคู่กับ ijji Add-on ปัจจุบัน ชุด four-beat ใช้ภาพนิ่งเท่านั้น ส่วน logo-sting ที่อนุมัติแยกเป็นภาพเปิดตัวของเว็บเฉพาะชิ้นงาน มี fallback และ lifecycle ของตัวเอง ตัวอย่างเคลื่อนไหวใน Studio ไม่ได้ขยายสิทธิ์ของ Add-onUse the complete LDS with the current ijji Add-on. Its four-beat motifs are static only. A separately approved logo sting is an artifact-local website opening with its own fallback and lifecycle. Studio examples do not broaden the Add-on’s permissions.
ใช้ conversation motif ตามไฟล์ พื้นที่วาง และบทบาทที่อนุมัติ การเคลื่อนไหว logo bubbles จำกัดเฉพาะบันทึกของชิ้นงานนั้น ไม่ใช่อนุญาตให้ขยับหรือวาดโลโก้ใหม่ทั่วไปUse conversation motifs only with their approved files, carriers and roles. Logo-bubble motion remains limited to its exact artifact approval; it is not a general permission to animate or redraw the logo.
Keep one truth, then write naturally in each language: start with the real object, name what the data cannot answer, and end with a useful verb.
งานที่กำลังดูThe work in front of us
สิ่งที่ข้อมูลบอกWhat the data says
สิ่งที่ยังบอกไม่ได้What it cannot establish
สิ่งที่ทำต่อได้What someone can do next
ก่อนปรับ · กว้างและแทนกันได้Before · broad and interchangeableข้อมูลเชิงลึกล่าสุด เพื่อการตัดสินใจที่ชาญฉลาดLatest insights for smarter decisions
หลังปรับ · ชัด มีขอบเขต และชวนไปต่อAfter · specific, bounded, actionableพื้นที่ ข เปลี่ยนมากสุด—เปิดดูเหตุผลก่อนเลือกพื้นที่ถัดไปArea B changed most—check why before choosing what to inspect next
Brand Visual
เลือกบรรยากาศให้เข้ากับงาน ไม่ใช่แค่เลือกสีที่ชอบChoose atmosphere by its job—not by taste.
ชุด 0.9.7 ที่เจ้าของอนุมัติ · 1 ต.ค. 2569 · ไม่มีลายเซ็นดิจิทัลใหม่Owner-approved 0.9.7 distribution · 1 Oct 2026 · unsigned
ขอบเขตและข้อจำกัดBoundary and limitation
ตัวอย่างเชิงแนวคิดใน shared layer · ความจริงและ capability ของผลิตภัณฑ์ยังอยู่ใน product packConceptual shared-layer example · product truth and capability stay in the product pack
สถานะหลักที่ห้ามเปลี่ยนAuthoritative state
DS active · ตัวอย่างไม่ใช่หลักฐานผลิตภัณฑ์DS active · example is not product evidence
ผู้รับงานคนถัดไปNext recipient
ต้องระบุชื่อไว้ใน brief ของงานจริงก่อนส่งต่อMust be named in the real work brief before handoff
อย่าเพิ่มความมั่นใจให้ข้อมูลเพียงเพราะงานเปลี่ยนมือ และอย่านำความสามารถของผลิตภัณฑ์หนึ่งมาเหมารวมเป็นของ Landometer
A handoff never upgrades certainty or turns one product's capability into shared Landometer truth.
Open color and surface guidance directly, or browse foundations, components, dataviz, experience patterns, and product-adaptation examples one group at a time.
These retained examples keep action geometry, token-bound focus, evidence boundaries, atmosphere, icons, motion, navigation and cross-format delivery. Current color demonstrations use color-srgb-10.
เปิดดูตัวอย่างรากฐานที่คงไว้Open retained foundation examples
ปุ่มมีสองทรงเท่านั้นTwo shapes for every button[BTN-GEOM-01]
Capsules for labelled actions, 44px circles for icon-only — no third shape exists. The language, theme, copy, and download buttons across this page are already migrated.
Relaxed, offbeat, landing clean: 60ms skank stagger for lists, one-drop settle for results, 120ms downbeat press — every duration equals v0.8.9; only two easing tokens are new.
เห็นวัตถุก่อนObject first
ค่าที่วัดได้Measured value
ความหมายMeaning
ก้าวถัดไปNext action
ผลลัพธ์ลงจังหวะครั้งเดียว ไม่วนซ้ำThe result lands once — never loops
Each factor is a named translucent field; intersections are where factors collide. Colors come from atmosphere-recipe stops and registry opacities only — never decorative blobs.
ปัจจัยซ้อนของทำเลหนึ่งOne site, three interacting factors
น้ำท่วม · ทราฟฟิก · คู่แข่ง — ป้ายชื่อชั้นเป็นข้อบังคับFlood · traffic · competition — naming each layer is mandatory
ไอคอนล็อกชุดเดียว + หมวดหมู่มีสีมีไอคอนOne locked icon set + colorful categories[ICON-01] [CATEGORY-ID-01]
Material Symbols Rounded only: thin outlined wght 300 with rounded corners — a 43KB self-hosted subset embedded in this page (the Google Fonts link is internal-demo only). All 36 icon slots on this page are migrated.
LandLocationLiving
v0.9.1 คง glyph แบบ outline ทุกสถานะ; selected ใช้พื้นผิว ขอบ และ labelv0.9.1 keeps the glyph outlined in every state; selection uses surface, border, and label.
ชั้นการเปิดเผย: คำตอบก่อน หลักฐานลึกหนึ่งคลิกDisclosure layers: answer first, evidence one tap deep[DISCLOSURE-01]
The first view carries zero caution prose. Truth rides in the claim's own wording and compact status chips; the full source, method, and limitation wait behind one tap.
SRI 62 — สัญญาณกิจกรรมเชิงพื้นที่ (ค่าประมาณ)spatial activity signal (estimate)
Source: an in-page demonstration fixture · status: limited evidence · method: a synthetic index for UI demonstration · limitation: SRI is not revenue and not willingness-to-pay; use it to compare activity signals only · decision warnings appear at the confirm action, not on browse views.
Every published page can answer “which build is this?” from its own metadata. The readout below is live; current colors use color-srgb-10 from v0.9.7-owner.1.
The retained principle is one governed token/component source plus binary checks against the actual artifact before release. v0.9.1 has no exception channel for work claiming conformance.
ตารางถัดไปเป็นหลักฐานตัวอย่างจากหน้า 0.9.1 เก็บเพื่ออธิบายวิธีตรวจเท่านั้น ผลตรวจ package และหน้า 0.9.7 ต้องอ่านจากบันทึกของรุ่นปัจจุบันThe following table is retained evidence from the 0.9.1 page, showing how a checklist is recorded. Current package and 0.9.7 page results have their own receipts.
ดูผลรายข้อทั้ง 23 ข้อOpen all 23 per-item results
SC
ผลResult
SC-01 receipt
pass
SC-02 theme init
pass
SC-03 tokens
pass
SC-04 buttons
pass
SC-05 focus
pass
SC-06 reduced motion
pass
SC-07 targets + type floors
pass
SC-08 structure / lang
pass
SC-09 gradients
pass
SC-10 build-local layer
pass
SC-11 offline fonts
pass
SC-12 discovery set
n/a — หน้า internal · noindex จึงไม่มีชุด discovery สาธารณะโดยตั้งใจn/a — internal noindex page; the public discovery set is intentionally absent
SC-13 share previews
n/a — ไม่มีปลายทาง share ที่โปรโมทn/a — no promoted share destination
การชวนเพื่อนเริ่มจาก exact link ที่พาไปสถานะเดียวกันเป๊ะ ไม่มีนับแต้ม ไม่มีเร่ง ส่วนเส้นทางข้ามผลิตภัณฑ์บอกสถานะจริงเสมอ
Inviting a friend starts with an exact link that restores this very state — no counters, no pressure. Cross-product paths always state real availability.
ตัวอย่าง product-specific: CityMETER — ความสามารถและสถานะเป็นของ CityMETER เท่านั้น ไม่ใช่ shared Landometer layerProduct-specific example: CityMETER — its capability and status belong to CityMETER, not the shared Landometer layer.montri-th.github.io/CityMETER
ส่วนนี้เก็บตัวอย่างจาก predecessor ไว้เพื่อให้เห็นว่ารากฐานใดเดินทางต่อมา โดยกติกาปัจจุบันให้ยึด Landometer Design System 0.9.7-owner.1 และใช้สี color-srgb-10
This section preserves predecessor examples so retained foundations remain visible. Current implementation authority is Landometer Design System 0.9.7-owner.1.
EXAMPLE → FILE → YOUR WORK · LDS 0.9.7
เห็นตัวอย่าง แล้วหยิบไฟล์ไปใช้See the example. Take the right files.
เลือกจากงานที่กำลังทำ แต่ละเส้นทางพาไปยังตัวอย่างที่มีอยู่แล้ว พร้อมไฟล์ปัจจุบันและขอบเขตการใช้Choose the job in front of you. Each path connects an existing example to the current files and their intended use.
Normative บอกกติกา · Assets คือไฟล์ที่นำไปวางในชิ้นงาน · ตัวอย่างช่วยเลือกวิธีใช้Normative documents define the rules. Assets are files placed in your output. Examples show how to choose and apply them.
01
เขียนด้วยเสียงของแบรนด์Write in the brand voice
เริ่มจากสิ่งที่รู้ บอกขอบเขต แล้วพาไปทำต่อStart from what is known, name the limit and offer a useful next step.
ใช้เนื้อหาใน normative เป็นแหล่งอ้างอิง ไม่ต้องติดตั้งชุดสีเพิ่มเพื่อเขียนข้อความUse the normative as the writing source. Copywriting does not require a separate colour installation.
02
เลือกภาพและจัดบรรยากาศChoose imagery and set the atmosphere
ให้ภาพเล่าเรื่องตรงบทบาท พร้อมพื้นที่ให้ข้อความและหลักฐานGive imagery a clear role and leave room for the message and its evidence.
ภาพทีมนี้คงจากเว็บเดิมในบทบาท team culture ไม่ใช่หลักฐานผลลัพธ์ผลิตภัณฑ์และไม่รวมในแพ็กเกจดาวน์โหลด การนำภาพไปสื่ออื่นต้องอยู่ในขอบเขตสิทธิ์ของภาพนั้นThis retained website photograph has the team-culture role. It is not product-outcome evidence and is not included in the downloadable package. Reuse in another medium must stay within that image’s recorded rights.
03
เลือกโลโก้และ faviconChoose the logo and favicon
ใช้ไฟล์ตรงบทบาท และตรวจชื่อกับสัญลักษณ์บนพื้นจริงUse the asset for its recorded role and check the complete identity on the actual background.
Wordmark เปลี่ยนสีได้ตาม LOGO-01 โดยคงรูปทรงและสัดส่วน ไอคอนของ portfolio ไม่ใช่ไอคอนของทุกผลิตภัณฑ์LOGO-01 permits wordmark colour changes while retaining letterforms and proportions. The portfolio favicon does not become every product’s icon.
ดาวน์โหลดไอคอน portfolio ครบทุกขนาดDownload every portfolio icon size
เลือก role และพื้นหลังตาม icon-set.json ไม่ตัดโลโก้แนวนอนให้กลายเป็น faviconFollow the roles and backgrounds in icon-set.json. Do not crop the horizontal logo to make a favicon.
04
วางตัวอักษรไทย–อังกฤษSet Thai and English type
หัวเรื่อง เนื้อหา และข้อมูลมีฟอนต์คนละหน้าที่Headlines, body copy and technical information have distinct font roles.
fonts.css ต้องใช้พร้อมไฟล์ WOFF2 ที่อ้างถึง ดาวน์โหลดทั้งแพ็กเกจได้จากด้านบนfonts.css requires its referenced WOFF2 files. The complete package above keeps them together.
ไฟล์เว็บฟอนต์ทั้ง 9 ไฟล์และใบอนุญาตAll nine web-font files and licences
เก็บ WOFF2 ในโฟลเดอร์ assets ข้าง fonts.css ตามแพ็กเกจ ชุดนี้เป็นเว็บฟอนต์ งานเอกสารและสไลด์ต้องเลือก native font mapping ตาม §5.2 และ §11 ก่อนส่งออกKeep WOFF2 files in the assets folder beside fonts.css, as packaged. These are web fonts. Documents and slides must resolve the native font mapping in §5.2 and §11 before export.
ใช้เฉพาะ glyph ที่อนุมัติ พร้อมชื่อปุ่มที่อ่านได้ ไม่แทนด้วยฟอนต์ไอคอนอื่นเงียบ ๆUse only approved glyphs with readable control names. Do not silently substitute another icon font.
05
เลือกสีตามความหมายของงานChoose colour by the meaning of the work
แยกสีแบรนด์ สีหมวดหมู่ สีวิเคราะห์ และสีบรรยากาศSeparate brand, categorical, analytical and atmosphere colours.
เลือกสีหมวดหมู่และสีข้อมูลจากไฟล์ตรงหน้าที่ ส่วนสเกล Location ใช้ Profile แยกคู่กับ LDS ฉบับเต็มUse the corresponding categorical or analytical records. Location scales require the separate Profile alongside the complete LDS base.
06
ทำแผนที่ กราฟ และหลักฐานBuild maps, charts and evidence
ระบุหน่วย ตัวหาร ที่มา และสถานะค่าที่อ่านได้Keep units, denominators, sources and value states visible.
ตัวอย่างใช้ข้อมูลสังเคราะห์ ไม่ใช่ dataset ที่พร้อมตัดสินใจ สไตล์ต้องโหลดผ่าน CSS หลักเพื่อให้สีและฟอนต์ครบExamples use synthetic data, not decision-ready datasets. Load the styles through the main CSS entry point so tokens and fonts resolve.
07
ประกอบหน้าจอและสถานะCompose screens and states
เลือกส่วนประกอบจากสิ่งที่ผู้ใช้ต้องทำให้สำเร็จChoose components for the task the user needs to complete.
CSS ให้รูปแบบภาพ ผู้พัฒนายังต้องทำ semantics, state และพฤติกรรมของ control ให้ตรงงาน ไม่ใช่ไลบรารี widget ที่ทำงานครบทุกตัวCSS supplies visual styles. Authors still implement the correct semantics, state and control behaviour; this is not a complete executable widget library.
08
ออกแบบการไปต่อและจังหวะของเรื่องDesign the next step and the story rhythm
แยก motion ของสถานะงานออกจาก animated logo และ motifDistinguish task-state motion from animated identity and motifs.
แกลเลอรี motif มี SVG, runtime และ wrapper อยู่ข้างตัวอย่างแต่ละแบบ ไม่ใช้ motif แทนข้อมูลหรือสถานะโหลดThe motif gallery places SVGs, runtime and wrapper beside the examples. Motifs do not replace data or loading states.
09
ทำงานให้ตรงผลิตภัณฑ์Apply the system to a product
ใช้ LDS ฉบับเต็ม แล้วเพิ่ม Add-on ของผลิตภัณฑ์นั้นStart with the complete LDS, then add the matching product Add-on.
ตัวอย่างการปรับใช้ไม่ยืนยันว่าฟีเจอร์นั้นเปิดใช้ในผลิตภัณฑ์แล้ว งานทำเลเพิ่ม Location Profile อีกหนึ่งไฟล์Adaptation examples do not establish deployed product features. Location work adds one separate Location Profile.
10
ส่งออกเอกสาร สไลด์ และภาพแชร์Deliver documents, slides and social images
เปลี่ยนสื่อโดยคงข้อสรุป ที่มา และความหมายChange the format while retaining the claim, source and meaning.
ชุดนี้ให้กติกาและ assets ยังไม่มี template DOCX/PPTX สำเร็จรูป แปลง motion เป็นภาพสุดท้ายและตรวจฟอนต์กับการตัดข้อความในไฟล์ส่งออกจริงThis distribution provides rules and assets, not ready-made DOCX/PPTX templates. Use final motion frames and check fonts and text clipping in the actual exported file.
11
เริ่มหน้าเว็บจากไฟล์ที่เห็นผลได้Start from a working web example
เปิดตัวอย่าง แล้วดาวน์โหลด HTML ไปปรับต่อOpen the example, then download the HTML to adapt it.
HTML ตัวอย่างต้องเชื่อมต่อเครือข่าย งาน offline ให้ใช้ไฟล์ในแพ็กเกจครบตามโครงสร้างและเปลี่ยน path ให้ตรงที่ติดตั้งThe example HTML needs a network connection. For offline work, keep the complete packaged file structure and update paths to the installed files.
12
เริ่มใช้กับ AI และส่งต่อให้ทีมUse with AI and share with the team
แยก Project Source ออกจากชุดติดตั้งและไฟล์สร้างงานDistinguish Project Sources from tool installation and implementation files.
การอัปโหลดกฎช่วยให้ AI อ้างอิงได้ การใช้ฟอนต์ โลโก้ หรือ motion ในชิ้นงานยังต้องใส่ไฟล์จริงและตรวจผล ไม่ได้เปิดใช้ให้ทุกบัญชีหรือทุก Project โดยอัตโนมัติUploading rules makes them available as a reference. Fonts, logos and motion still need the actual files in the output and a result check. This does not activate every account or Project automatically.
ไม่ต้องย้อนอ่าน 0.9.4 เริ่มจาก normative 0.9.7 ฉบับเต็ม แล้วเพิ่มเฉพาะ Add-on หรือ Location Profile ที่ตรงงาน เก็บเอกสารรุ่นเก่าไว้อ้างประวัติ แยกจาก Project Source ที่ใช้งานปัจจุบันNo 0.9.4 document is required. Start with the complete 0.9.7 normative and add only the applicable product Add-on or Location Profile. Keep historical documents separate from active Project Sources.
Implementation Library · source-limited reference
มีงานแบบไหน ลองดูตัวอย่างแบบนั้นOne shared system. Many implementation-ready examples.
Browse first by what the team is building, then by product adaptation. Facts, data, methods, and live capabilities always remain with their product owner.
01
สี พื้นผิว และสีสำหรับข้อมูลColor, surfaces, and data palettes
เลือกจากหน้าที่ของสี แล้วไปดู solid, gradient, scale, หมวดหมู่, ชั้นซ้อน และเส้นในชิ้นงานจริงChoose color by its job, then inspect solids, gradients, scales, categories, layers, and lines in real work.6 ways in · complete atlas · Light/Dark
COLOR ROUTER · CHOOSE THE JOB FIRST
ก่อนหยิบสี ถามก่อนว่าสีกำลังทำงานอะไรBefore choosing a color, name the job it must do.
Brand names the owner; interaction marks action; semantic color names a state; atmosphere frames a scene; data color supports comparison. Never swap those jobs because two colors look similar.
These examples show shared, governed roles. Product terminology, voice, and factual claims still require the evidence and release context of that work.
TYPE-01 · packaged roles
ใช้ฟอนต์ตามหน้าที่Assign type by job
English displayArvo · 700 · display/Product UI heading
โลโก้โปร่งใสเสมอLogo background is always transparent
Non-negotiable · ห้ามใส่กล่องหรือแผ่นรองหลังโลโก้กับ release metadata ถ้าคอนทราสต์ไม่พอ ให้เปลี่ยนสีพื้นผิวรอบทั้งคู่แทนNever add a box, plate, or carrier behind the logo or release metadata. If contrast fails, change their shared surrounding surface.
GRADIENT-01 · declared job
บรรยากาศสามหน้าที่Three atmosphere jobs
Measure
Ground
Cultivate
Measure เปิดเรื่องและทำให้ Brand Blue นำสายตา, Ground เชื่อมหลักฐานกับบริบท, Cultivate ใช้เมื่อพาคนไปสู่การลงมือทำ สีบรรยากาศไม่ใช้เข้ารหัสค่าข้อมูล
Measure opens with Brand Blue; Ground connects evidence and context; Cultivate supports human action. Atmosphere colors never encode data values.
COMPOSITION-01 · quiet + proof
หนึ่งจุดสำคัญ ที่พักสายตา และหลักฐานที่อ่านได้One focus, perceptual quiet, and readable proof
ให้เรื่องสำคัญที่สุดนำสายตาเพียงเรื่องเดียวLet one focal idea lead the scene.
เว้นที่ให้สายตาพัก เพื่อให้จุดสำคัญเด่นขึ้น ไม่ใช่เพื่อเติมกล่องว่างUse quiet to direct attention—not as decorative emptiness.
ให้ภาพ ตาราง และข้อจำกัดใหญ่พอจะอ่านความหมายKeep media, tables, and limitations large enough to carry meaning.
ใช้ motion เมื่อสถานะเปลี่ยน และเคารพ reduced motionUse motion for state change and respect reduced motion.
Use one work object to see what identifies the brand, what is interactive, what is state, what encodes data, and what is only atmosphere. Color never speaks alone; words, values, shapes, or patterns confirm its meaning.
ตัวอย่างอ้างอิงReference fixture
พื้นที่ไหนควรตรวจต่อ?Which area deserves the next check?
ขอบเขตที่เลือก · 3 พื้นที่Selected boundary · 3 areas
พื้นที่ กArea A68
พื้นที่ ขArea B44
พื้นที่ คArea Cยังไม่มีข้อมูลNo data
COLOR-FIXTURE-01 · ข้อมูลจำลอง · ใช้ดูหน้าที่ของสี ไม่ใช้ตัดสินใจจริงCOLOR-FIXTURE-01 · synthetic data · for color-role review, not a real decision
Brandบอกว่าใครเป็นเจ้าของงาน ไม่ใช้แทนค่าข้อมูลNames the owner; never a data value.
Interactionบอกจุดที่กด เลือก หรือโฟกัสได้จริงMarks real action, selection, and focus.
Stateสีอยู่คู่คำและไอคอนเสมอPairs color with words and an icon.
Seriesแยกหมวด พร้อมชื่อและค่ากำกับSeparates categories with names and values.
No dataใช้ลายและคำกำกับ—ไม่ใช่ศูนย์Uses pattern and text—never zero.
Energyเติมพลังให้ช่วงที่พูดถึงผู้คน ไม่ใช้แทนสถานะAdds human energy; never a state.
Atmosphereวางกรอบให้ฉาก ไม่เข้ารหัสค่า 68 หรือ 44Frames the scene; never encodes 68 or 44.
สีสถานะต้องมากับคำหรือไอคอนเสมอ; energy color ไม่ใช้แทน success, warning หรือ dangerState color always travels with a word or icon; energy colors never substitute for semantic state.
Brand Blue ไม่ใช่สีปุ่มBrand Blue is not interaction
DS 0.9.7
Brand Blue · #1D4497บอกว่าเป็น LandometerIdentifies Landometer
เปิดหลักฐาน →Open evidence →interaction.accentบอกว่ากด เลือก หรือโฟกัสอะไรได้Shows action, selection, and focus
ปุ่มหลักใช้ label/border ของ interaction.accent พร้อม surface.blueTint เมื่อ hover/selected—ไม่ใช้ปุ่มทึบ Brand BluePrimary actions use interaction.accent labels/borders and surface.blueTint for hover/selection—never a filled Brand Blue button.
หนึ่ง viewport มี gradient เด่นได้ไม่เกินหนึ่งผืน ใช้ stop ตาม recipe เดิม ตรวจคอนทราสต์ใต้ตัวอักษรจริง และลบทิ้งถ้าความเข้าใจไม่ดีขึ้นUse at most one dominant gradient per viewport, preserve the exact recipe, sample contrast beneath real glyphs, and delete it when comprehension does not improve.
เลือก scale ให้ตรงคำถามMatch the scale to the question
DATAVIZ-01
หมวดอะไร?Which category?ใช้ categorical + ชื่อ/รูปทรงประจำหมวดUse categorical color + stable label/shape
เปลี่ยนไปทางไหน?Which direction?delta · ลบ / ศูนย์ / บวก ไม่ได้แปลว่าเลว/ดีเองdelta · negative / zero / positive is not bad/good by itself
−0+
20 ตระกูลข้อมูล · แยกตัวหารก่อนเลือกสี20 analytical families · choose the denominator first
Density 3 ตัวหารคงโทนร้อน: ต่อพื้นที่สีส้ม ต่อประชากรกุหลาบ และต่อครัวเรือนแดง สิ่งปลูกสร้างใช้พีช–ทองตามนิยาม footprint ความสูง หรือสัดส่วนปกคลุม ไม่ใช่ตัวหารที่สี่ ใช้ชุด 3/5/7/9 ระดับหรือ LUT 41 สีที่ให้มาครบThe three density denominators stay warm: area orange, per-capita rose and household scarlet. Built form uses peach–gold for its stated footprint, height or coverage definition; it is not a fourth denominator. Use exact 3/5/7/9 classes or the complete 41-sample LUT.
No dataอยู่นอก ramp และมีคำกำกับoutside the ramp, directly labelledZeroเป็นข้อเท็จจริงคนละอย่างa different fact
ตัวอย่างด้านบนใช้ confidence และ delta จาก 0.9.7 ส่วน Atlas ด้านล่างแสดงครบ 14 sequential และ 6 diverging families พร้อมสามสีหลัก LUT 41 สี และชุด 3/5/7/9 ชั้น ใช้สีต้นฉบับเดียวกันทั้งสองธีม ไม่ผสมสีใหม่ตอนใช้งานThe specimens above use confidence and delta from 0.9.7. The Atlas below retains all fourteen sequential and six diverging families, with three anchors, exact 41-sample LUTs and 3/5/7/9 classes. Both themes use identical original values, without runtime color mixing.
ซ้อนชั้นโดยไม่สร้างความหมายใหม่Layer without inventing meaning
A7
ส่วนซ้อน · 12Overlap · 12
solid1.00
strong.88
medium.72
soft.56
subtle.40
ghost.24
watermark.12
trace.06
opacity ช่วยจัดชั้น แต่ห้ามแบกความหมายสำคัญเพียงลำพัง สีที่เกิดจากการซ้อนไม่ใช่ token ใหม่; ส่วนซ้อนต้องมี label/ค่า/ลายช่วยOpacity may organize depth but never carry critical meaning alone. A blended result is not a new token; label or pattern the overlap.
ทุกเส้นต้องบอกหน้าที่Every line needs a meaning
บางส่วนรออนุมัติPartly candidate
บริบทContext เส้นเงียบ ไม่แย่งข้อมูลQuiet, behind the data
ข้อมูลData เห็นต่อเนื่องและมี labelContinuous and labelled
หนึ่ง release record เท่านั้นOne release record onlyrelease.json · v0.9.7-owner.1 · color-srgb-10 คู่มือ Atlas และ package ต้องอ้าง token/gradient ชุดเดียวกันGuide, Atlas, and package must resolve the same token and gradient set.
แชร์ไฟล์ที่ล็อก Color Set และ UI build แล้วShare the pinned Color Set and UI buildv0.9.7-owner.1 · ui-20261002-lds097-r7 ลิงก์นี้ล็อกทั้งชุดสีและหน้าตาที่กำลังตรวจThis URL pins both the palette and the interface under review.
ตรวจ Build ID ก่อนดูสีCheck Build ID before colordata-color-registry="color-srgb-10" ถ้า ID ต่างกัน คือได้คนละ build—not สีเพี้ยนDifferent IDs mean different builds—not color drift.
แล้วค่อยล็อกวิธี renderThen lock renderingSDR sRGB · explicit interpolation ใช้ ?theme=light หรือ ?theme=dark ตอนเทียบ ห้ามใช้ system เป็น baselineUse ?theme=light or ?theme=dark for comparison; never use system as a baseline.
หากสองเครื่องเห็น “คนละชุดสี” ให้เทียบ Color Set ID ก่อน: ID ต่างกันคือ cache/build เก่า ส่วน ID เดียวกันแต่ภาพต่างจึงค่อยตรวจ theme และ color rendering หน้า latest บน GitHub Pages อาจถูก cache ได้ 10 นาที จึงใช้ไฟล์ pinned เมื่อต้อง review หรือส่งต่อIf two devices show different palettes, compare the Color Set ID first: different IDs indicate an older cached build. Only when IDs match should theme and rendering be investigated. GitHub Pages may cache the latest alias for 10 minutes, so use the pinned file for review and handoff.
เปิดดูสีทั้งหมด พร้อม gradient และ scale ทุกชุดOpen every governed color, gradient, and scaleดูค่าจริงทั้ง Light/Dark วิธีใช้ และเส้นแบ่งว่าอะไรเป็น shared, product-only, asset-only หรือยังเป็น reference fixtureInspect exact Light/Dark values, real jobs, and the boundary between shared, product-only, asset-only, and reference-fixture use.
สมุดสีฉบับเต็ม—เห็นทุกบทบาทก่อนหยิบไปใช้The complete color atlas—see every role before using it
เปิดดูได้ตั้งแต่สีอัตลักษณ์ พื้นผิว สถานะ gradient ชุดข้อมูล แผนที่ ไปจนถึงการซ้อนชั้น โดยแยกหน้าที่ของแต่ละสีให้ชัดInspect identity, surfaces, states, gradients, data scales, map layers, and depth—with every color kept in its governed role.
ANALYTICAL REFERENCE · NOT PRODUCT EVIDENCE
LUT ปัจจุบันอ่านจาก color-srgb-10.scales.json ของ v0.9.7-owner.1 ใช้เป็นชุดสีที่ตรวจสอบได้ ไม่ใช่หลักฐานของผลิตภัณฑ์ งานวิเคราะห์จริงต้อง bind schema, release, unit และ grain ที่เข้ากันก่อนใช้Current LUTs come from color-srgb-10.scales.json in v0.9.7-owner.1. They are exact color assets, not product evidence. Real analysis must bind compatible schema, release, unit and grain before use.
สีเสริม 17 สี และสเกลเลือกทำเล 12 ชุด อยู่ตรงนี้17 supporting colours and 12 location scales, together here
Story ใช้กับกราฟิกเสริม สเกลข้อมูลทั่วไปยังมี 20 ตระกูล ส่วน Location เพิ่มความหมายสำหรับงานเลือกทำเล โดยคงค่า HEX เดียวกันทั้งพื้นสว่างและมืดStory serves supporting graphics. The 20 shared analytical families remain; Location adds definitions for site-selection work. Data HEX values stay identical on light and dark backgrounds.
Story · สีเสริมสำหรับเล่าเรื่องStory · a supporting colour vocabulary
คง Brand Energy สำหรับงานหลักของแบรนด์ ชุดนี้มี Paper 1 สีและสีบทบาทอีก 16 สี ไม่ใช่คำแนะนำให้ใช้ 17 series พร้อมกันหรือแทนสีตามสถานะของระบบKeep Brand Energy for primary brand work. This set contains Paper plus 16 role colours; it is not a recommendation for 17 simultaneous chart series or a replacement for system-state colours.
9 สเกลทางเดียว + 3 สเกลสองทาง ใช้ 41 ช่วงเป็นหลักสำหรับ CityMETER พร้อมสามสีหลักหัว–กลาง–ท้าย เลือกตัวแปรจากความหมาย หน่วย ตัวหาร และหลักฐาน แล้วดูผลบนแผนที่ด้านล่าง ชุด 3/5/7/9 ระดับเป็นตัวเลือกเสริมNine sequential and three diverging scales. CityMETER starts with all 41 steps and three start–middle–end anchors. Choose by meaning, unit, denominator and evidence, then try the map below. The 3/5/7/9-class sets are optional.
ลองสีบนแผนที่และกราฟ แล้วหยิบไปใช้Try the colours on a map and chart, then use them
เริ่มด้วยตาราง 41 ช่วงที่ CityMETER ใช้เป็นหลัก เลือกตัวแปรเพื่อดูสี ความหมาย และไฟล์ใช้งานต่อเนื่องในหน้านี้ ตัวเลือก 3/5/7/9 ระดับมีไว้สำหรับงานที่ต้องการแบ่งช่วงให้น้อยลงStart with CityMETER’s primary 41-interval table. Choose a metric to explore its colours, meaning and usable files right here. The 3/5/7/9-class options are available for work requiring fewer intervals.
สเกลทางเดียวSequential scale · li.demand
ความต้องการซื้อDemand
มีโอกาสซื้อรวมมากกว่า ไม่ได้ยืนยันยอดขายของสาขาใหม่More total purchase occasions; not confirmed sales for a new branch.
41 ช่วง · CityMETER41 intervals · CityMETERสีเดิมทั้งพื้นสว่างและพื้นมืดThe same colours on light and dark backgrounds
050100
ข้อมูลสมมติสำหรับดูสี · ปรับช่วง 0–100 ไม่ใช่ค่าตลาดหรือทำเลจริง ค่ามากเข้มขึ้นIllustrative values rescaled to 0…100, not actual market or site measurements. Higher values are darker.
ดูสีในพื้นที่ · แผนผังสมมติSee colour by area · schematic mapเทียบปริมาณ · ชุดข้อมูลสมมติCompare magnitude · illustrative series
0ศูนย์เป็นค่าจริงในตัวอย่างZero is a numeric value
—ไม่มีข้อมูลMissing
Wไม่เปิดเผยWithheld
N/Aไม่เกี่ยวข้องNot applicable
?คำนวณไม่ได้Undefined
อ่านตัวเลขและสถานะในภาพตัวอย่างRead the numbers and states behind the examples
พื้นที่ 1–24 เรียงจากซ้ายไปขวา บนลงล่าง ทุกค่าเป็นข้อมูลสมมติสำหรับดูสีAreas 1–24 run left to right, then top to bottom. Every value is illustrative, for reviewing colours.
ข้อมูลสมมติในแผนผังและกราฟแท่งIllustrative map and bar-chart values
รายการItem
ค่า / สถานะValue / state
ช่วงสีColour bin
พื้นที่Area 1
0
1
พื้นที่Area 2
7
3
พื้นที่Area 3
23
10
พื้นที่Area 4
45
19
พื้นที่Area 5
64
27
พื้นที่Area 6
91
38
พื้นที่Area 7
8
4
พื้นที่Area 8
19
8
พื้นที่Area 9
44
19
พื้นที่Area 10
60
25
พื้นที่Area 11
83
35
พื้นที่Area 12
100
41
พื้นที่Area 13
12
5
พื้นที่Area 14
30
13
พื้นที่Area 15
50
21
พื้นที่Area 16
ไม่มีข้อมูลMissing
—
พื้นที่Area 17
86
36
พื้นที่Area 18
96
40
พื้นที่Area 19
3
2
พื้นที่Area 20
ไม่เปิดเผยWithheld
—
พื้นที่Area 21
74
31
พื้นที่Area 22
ไม่เกี่ยวข้องNot applicable
—
พื้นที่Area 23
99
41
พื้นที่Area 24
คำนวณไม่ได้Undefined
—
แท่งBar A
0
1
แท่งBar B
12
5
แท่งBar C
25
11
แท่งBar D
38
16
แท่งBar E
50
21
แท่งBar F
62
26
แท่งBar G
75
31
แท่งBar H
88
37
แท่งBar I
100
41
เปลี่ยนธีมจากเมนูหลักได้เลย สีข้อมูลและทิศทางคงเดิม การจำลองการมองเห็นช่วยตรวจเพิ่มเติม แต่ไม่ใช่ใบรับรองว่าสีแยกได้สำหรับทุกคนUse the main theme control to compare canvases: data colours and direction stay unchanged. Vision simulation is a review aid, not a guarantee that everyone can distinguish every colour.
อ่านนิยาม หน่วย ตัวหาร และขอบเขตหลักฐานRead the definition, unit, denominator and evidence boundary
หน่วยเมื่อนำไปใช้จริงUnit in actual work
ครั้งซื้อ/เดือน ในหมวดธุรกิจที่กำหนดPurchase occasions per month in the defined business category
ตัวตั้งNumerator
จำนวนโอกาสซื้อในหมวดที่เกี่ยวข้อง โดยประกาศส่วนที่สังเกตจริงและส่วนที่ประมาณRelevant purchase occasions, separating observed quantities from estimates.
ตัวหาร / ขอบเขตDenominator / scope
ช่วงเวลา 1 เดือน; ไม่ใช่ density และไม่หารประชากรโดยปริยายThe stated month; this is not implicitly population density.
ขอบเขตหลักฐานEvidence boundary
POI ประชากร การเดินทางและ Locale Insight เป็นบริบท/proxy ได้ตามขอบเขต ไม่ใช่จำนวนลูกค้าจริง ต้องกำหนดธุรกิจ กลุ่มเป้าหมาย ช่วงเวลา และฐานข้อมูลPOIs, population, travel and Locale Insight can supply contextual proxies within their scope. They do not establish actual customer counts. State the category, target group, period and evidence.
ก่อนใช้จริง ระบุหน่วย แหล่งข้อมูล ช่วงเวลา พื้นที่ และเกณฑ์แบ่งช่วงของงานนั้น ตัวอย่างนี้ใช้ช่วงเท่ากันเพื่อดูสีเท่านั้นBefore use, declare the metric unit, source, period, geography and actual class boundaries. This demonstration uses equal intervals only to inspect colours.
หยิบค่าสีไปใช้ · 3 สีหลัก ตาราง 41 สี และช่วงที่เลือกUse the exact colours · three anchors, the 41-colour table and selected bins
สามสีหลักอธิบายเส้นทางสี ใช้ตารางที่ให้ครบทุกค่าในการแสดงผล ไม่สร้างสีระหว่างกลางขึ้นใหม่The three anchors explain the colour route. Render with the supplied exact table; do not generate new intermediate colours.
หัว · ค่าน้อยStart · lower
#F1F5E5
กลาง · ไม่ใช่ศูนย์Middle · not zero
#60C9AD
ท้าย · ค่ามากEnd · higher
#25659A
ตารางหลัก 41 ค่าสีตามลำดับThe full 41-colour lookup table, in order
ขอบช่วงในตารางนี้เป็นเพียงตัวอย่างที่ปัดแสดงสองตำแหน่ง JSON ของชุดที่เลือกเก็บตัวเลขเต็ม ไม่ใช่เกณฑ์ของข้อมูลจริงThese illustrative boundaries display up to two decimals. The selected-scale JSON keeps the full numeric values; these are not actual data thresholds.
41 ช่วง · CityMETER41 intervals · CityMETER · ช่วงและ HEX ที่ใช้ในภาพด้านบนBins and HEX used in the diagrams above
ช่วงBin
HEX
ค่าตัวอย่างIllustrative values
1
#F1F5E5
0 ≤ x < 2.44
2
#EAF3E2
2.44 ≤ x < 4.88
3
#E4F1DF
4.88 ≤ x < 7.32
4
#DDEFDC
7.32 ≤ x < 9.76
5
#D7ECDA
9.76 ≤ x < 12.2
6
#D0EAD7
12.2 ≤ x < 14.63
7
#C9E8D4
14.63 ≤ x < 17.07
8
#C3E6D1
17.07 ≤ x < 19.51
9
#BCE4CE
19.51 ≤ x < 21.95
10
#B5E2CB
21.95 ≤ x < 24.39
11
#AEDFC9
24.39 ≤ x < 26.83
12
#A7DDC6
26.83 ≤ x < 29.27
13
#A0DBC3
29.27 ≤ x < 31.71
14
#99D9C0
31.71 ≤ x < 34.15
15
#91D7BD
34.15 ≤ x < 36.59
16
#8AD4BB
36.59 ≤ x < 39.02
17
#82D2B8
39.02 ≤ x < 41.46
18
#7AD0B5
41.46 ≤ x < 43.9
19
#72CEB2
43.9 ≤ x < 46.34
20
#69CBB0
46.34 ≤ x < 48.78
21
#60C9AD
48.78 ≤ x < 51.22
22
#5DC4AC
51.22 ≤ x < 53.66
23
#59BFAC
53.66 ≤ x < 56.1
24
#56BAAB
56.1 ≤ x < 58.54
25
#53B5AB
58.54 ≤ x < 60.98
26
#4FB0AA
60.98 ≤ x < 63.41
27
#4CABA9
63.41 ≤ x < 65.85
28
#49A6A8
65.85 ≤ x < 68.29
29
#46A1A7
68.29 ≤ x < 70.73
30
#439CA7
70.73 ≤ x < 73.17
31
#4097A6
73.17 ≤ x < 75.61
32
#3D92A5
75.61 ≤ x < 78.05
33
#3A8DA4
78.05 ≤ x < 80.49
34
#3788A3
80.49 ≤ x < 82.93
35
#3483A1
82.93 ≤ x < 85.37
36
#317EA0
85.37 ≤ x < 87.8
37
#2F799F
87.8 ≤ x < 90.24
38
#2C749E
90.24 ≤ x < 92.68
39
#2A6F9D
92.68 ≤ x < 95.12
40
#276A9B
95.12 ≤ x < 97.56
41
#25659A
97.56 ≤ x ≤ 100
เปิดดูครบ 12 สเกล พร้อมสีหัว–กลาง–ท้ายShow all 12 scales with start, middle and end anchors
ทางเดียวSequential
ความต้องการซื้อDemand
li.demand
มีโอกาสซื้อรวมมากกว่า ไม่ได้ยืนยันยอดขายของสาขาใหม่Purchase occasions in the defined business category and period; not confirmed sales for a new branch.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#F1F5E5
ช่วงกลางMiddle
#60C9AD
ค่ามากHigher
#25659A
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
มีทางเลือกหรือกำลังบริการมากกว่า ไม่ได้แปลว่าแข่งรุนแรงกว่าเสมอAvailable service capacity in units comparable with demand; a POI count alone is not capacity.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#EEF6F5
ช่วงกลางMiddle
#87B5D4
ค่ามากHigher
#278E94
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
ได้ส่วนแบ่งของตลาดที่นิยามมากกว่า ไม่ได้บอกว่าตลาดใหญ่หรือกำไรดีOur category sales divided by total category sales in the same market and period; not store-count share.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#F0F4F9
ช่วงกลางMiddle
#9BBBA6
ค่ามากHigher
#4B8FD8
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
มีผู้ตอบที่ผ่านนิยามความพร้อมมากกว่าในตัวอย่าง/แบบจำลองนี้ ไม่ใช่ยอดซื้อที่รับประกันRespondents meeting both available-budget and near-term purchase-intent criteria; income alone is insufficient.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#FFF5D8
ช่วงกลางMiddle
#F3BC93
ค่ามากHigher
#BFA000
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
ค่าบวกสูงคือ demand เพิ่มมากกว่า ไม่ได้ยืนยันกำไรหรือความยั่งยืนChange from a comparable demand baseline. Zero means unchanged; a zero baseline makes percentage growth undefined.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ด้านลบNegative side
#CF5420
จุดอ้างอิงReference
#F1F3EC
ด้านบวกPositive side
#3C9278
ศูนย์: ไม่เปลี่ยนจากช่วงฐานที่ระบุZero = no change
ค่าบวกสูงคือช่องว่าง demand มากกว่า; ค่าลบคือกำลังเกินตามนิยาม ไม่ใช่ดี/เสียสากลDemand minus comparable capacity, normalized by demand. Zero means balance; a gap is not guaranteed profit.
สัดส่วนย้ายจากเครือข่ายเดิมมากกว่า; ไม่ใช่จำนวนลูกค้าใหม่หรือความเสียหายจริงที่เกิดแล้วModelled sales transferred from our existing branches relative to proposed-branch sales; not observed behaviour.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#FFF0F0
ช่วงกลางMiddle
#F0A07A
ค่ามากHigher
#B72B63
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
รายได้ส่วนที่ต้องใช้จ่ายกับพื้นที่มากกว่า; ไม่มีกำแพงผ่าน/ไม่ผ่านสากลOccupancy cost relative to sales for the same site and period; distinguish observed and forecast inputs.
41 ค่าสีที่กำหนดไว้41 exact colour samples
ตัวเลือกเสริม · 5 ระดับOptional · five classes
ตัวอย่าง 5 ระดับFive-class example
ค่าน้อยLower
#FFF6DA
ช่วงกลางMiddle
#EF9DAE
ค่ามากHigher
#D6600C
หัว → กลาง → ท้าย: ค่าสูงเข้มขึ้น สีกลางไม่ใช่จุดศูนย์Start → middle → end: higher values deepen; the middle hue is not zero.
ค่าบวกสูงคือเหลือส่วนต่างดำเนินงานมากกว่า; ค่าลบคือรายได้ต่ำกว่าต้นทุนใน scopeSite operating margin under the stated cost scope. Zero means operating break-even, not an investment approval.
สีและทิศทางค่าไม่เปลี่ยนเมื่อสลับธีม บางเส้นทางใช้สีร่วมกับ Story อย่างตั้งใจ ต้องอ่านชื่อ หน่วย และคำอธิบายร่วมด้วย สีอย่างเดียวไม่รับรองว่าทุกคู่แยกออกได้สำหรับทุกคนTheme changes preserve colours and value direction. Some routes intentionally reuse Story colours. Retain names, units and explanations; colour alone does not guarantee that every viewer can distinguish every pair.
งานเลือกทำเลใช้ LDS 0.9.7 ฉบับเต็ม + Location Profile ถ้าเป็นงาน ijji หรือ CityChat ให้ใช้ Add-on ของผลิตภัณฑ์นั้นเพิ่มด้วย ไฟล์ MD รวมส่วนที่คนและเครื่องมืออ่านได้แล้ว ไม่ต้องอัปโหลด JSON ซ้ำFor location work, use the complete LDS 0.9.7 base plus the Location Profile. Add the matching product Add-on for ijji or CityChat. The MD contains human and machine content; uploading JSON as well is unnecessary.
Demand, Supply และอีก 10 ตัวแปรใช้สเกลด้านบน ส่วน Strength, Weakness, Opportunity, Threat เป็นมุมมองหลักฐาน ใช้ป้ายชื่อและสีประจำบทบาท ไม่มีคะแนนหรือ gradient อัตโนมัติDemand, Supply and ten other measurements use the scales above. Strength, Weakness, Opportunity and Threat are evidence lenses: use labels and role colours, without automatic scores or gradients.
เปิดสีประจำบทบาททั้ง 16 แบบShow all 16 role colours
สีไม่ยืนยันจำนวนลูกค้า พฤติกรรมจริง หรือผลตอบแทนของทำเล ต้องมีนิยามตัวแปร แหล่งข้อมูล ช่วงเวลา และความไม่แน่นอนกำกับเสมอColour does not establish customer counts, actual behaviour or site returns. Always retain metric definitions, source, period and uncertainty.
01 · IDENTITY
สีแบรนด์ สีสร้างพลัง และสีที่อยู่ในไฟล์โลโก้เท่านั้นBrand, energy, and asset-only logo colors
ในหนึ่งฉากใช้ energy เพียง 1–2 สี และไม่ใช้แทนสีข้อมูล สถานะ แผนที่ โฟกัส หรือโลโก้Use only 1–2 energy colors in one scene; never alias them to data, state, map, focus, or logo roles.
brand.blue#1D4497สีอัตลักษณ์Identityอัตลักษณ์หลักของ LandometerProtected Landometer identitybrand.beige#F2F1DFสีอัตลักษณ์Identityบริบทแบรนด์โทนอุ่นWarm brand contextdark.brand.beige#D8CFB2สีอัตลักษณ์Identityจุดเน้นโทนอุ่นบนพื้นมืด ไม่ใช่สีข้อความหลักWarm dark-theme accent, not default textenergy.sky#59D2FEสีสร้างพลังEnergy expressionพลังมนุษย์และวัฒนธรรมHuman and cultural expressionenergy.mint#0AD69Cสีสร้างพลังEnergy expressionพลังมนุษย์และวัฒนธรรมHuman and cultural expressionenergy.coral#FF5A5Fสีสร้างพลังEnergy expressionพลังมนุษย์และวัฒนธรรม ต้องทดสอบสีตัวอักษรHuman expression; test its foregroundenergy.yellow#FFBC1Fสีสร้างพลังEnergy expressionพลังมนุษย์และวัฒนธรรมHuman and cultural expression
สีในสัญลักษณ์คงตามไฟล์ที่อนุมัติ ไม่ยกไปเป็น UI token ส่วน wordmark เปลี่ยนสีได้ รวมถึงตัวอักษรละสี โดยคงรูปทรงและสัดส่วน และตรวจให้อ่านได้บนพื้นจริง ตาม LOGO-01Keep symbol colours in the approved artwork; do not promote them into UI tokens. LOGO-01 permits wordmark recolouring, including per-letter colour, with letterforms and proportions preserved and readability checked on the actual background.
logo.blue#1D4497อยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.mint#0AD69Cอยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.sky#59D2FEอยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.cyan#0194CAอยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.yellow#FFBC1Fอยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.coral#FF5A5Fอยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork onlylogo.gray#757575อยู่ในไฟล์โลโก้ที่อนุมัติแล้วเท่านั้นFrozen inside approved logo artwork only
17 คู่ด้านล่างคือ active authoring subset ที่สืบทอดเข้า v0.9.1 เลือกตามบทบาท ไม่เลือกเพราะชอบรหัสสีThese 17 light/dark pairs are the active authoring subset carried into v0.9.1. Choose by role, never by favorite hex.
surface.canvas
Light#F6F7F3Dark#11191D
surface.alt
Light#EEF1EEDark#172126
surface.card
Light#FCFCFADark#20292D
surface.raised
Light#FFFFFFDark#293337
surface.soft
Light#E5E9E6Dark#2B3534
surface.blueTint
Light#E2E9EDDark#18333E
surface.beigeTint
Light#F2F1DFDark#2C2A22
text.primary
Light#182327Dark#F1F4EF
text.secondary
Light#5F635ADark#C4CECA
text.metadata
Light#5C6A61Dark#A6B5B1
text.muted
Light#7B877DDark#8D9D99
text.disabled
Light#A7B3A9Dark#71817D
border.hairline
Light#DCE1DDDark#33403D
border.default
Light#C9D0CBDark#46524F
border.emphasis
Light#7D877FDark#7C8A84
interaction.accent
Light#176B82Dark#68C4E2
interaction.focus.ring
Light#176B82Dark#68C4E2
03 · SEMANTIC STATE
สถานะต้องมาทั้งพื้น สีตัวอักษร คำ และสัญญาณประกอบA state needs its fill, ink, word, and companion signal
สีสถานะห้ามทำงานลำพัง และ energy color ไม่ใช่ทางลัดไปยัง success, warning หรือ dangerState color never works alone, and energy colors never stand in for success, warning, or danger.
semantic.successสำเร็จSuccess
Light#E2F4E5 / #126B49Dark#17362D / #72E8C4
semantic.warningเตือนWarning
Light#FFF1D1 / #A64A00Dark#3B2E16 / #F5C15C
semantic.dangerอันตรายDanger
Light#FCE5DF / #B43A3ADark#3A1F21 / #FF7C72
semantic.infoข้อมูลInfo
Light#E8EEF0 / #176B82Dark#18333E / #68C4E2
semantic.neutralเป็นกลางNeutral
Light#ECE4D2 / #5F635ADark#2B3534 / #C4CECA
semantic.pendingรอดำเนินการPending
Light#F3EEDB / #5C6A61Dark#2C2A22 / #D8CFB2
semantic.assistedมีตัวช่วยAssisted
Light#DFF3F1 / #176C67Dark#163331 / #79D9D1
04 · GRADIENT
ทุก gradient มีงานเดียวที่ต้องทำEvery gradient has one declared job
หนึ่ง viewport มี gradient เด่นได้ไม่เกินหนึ่งผืน เก็บ stop order เดิม ตรวจคอนทราสต์ใต้ glyph จริง และลบทิ้งเมื่อไม่ได้ช่วยให้เข้าใจดีขึ้นAllow at most one dominant gradient per viewport, preserve stop order, test beneath real glyphs, and remove it when comprehension does not improve.
landometer-atmosphere-gradient-v23 tonal pairs + 1 rare spectrumMeasure, Ground และ Cultivate มีคู่ deep/light คนละหน้าที่ ส่วน Diversity ใช้เมื่อเรื่องนั้นมีหลายมุมมองจริงMeasure, Ground, and Cultivate each have a distinct deep/light pair; Diversity is reserved for truthful multi-perspective scenes.
atmosphere.gradient.measure.deep#1D4497 0% · #176B82 54% · #08756F 100%Brand DNA, จุดเริ่มต้น และช่วงปิดงานที่ต้องการน้ำหนักน่าเชื่อถือBrand DNA, entry, and closure when a confident directional field is neededMeasure · entry, direction, high-confidence orientation, or closuresurfaceForeground.onDeep · #FFFFFF / #F1F4EF · ≥4.5:1deletion test · keep only when comprehension improvesatmosphere.gradient.measure.luminous#89CEF6 0% · #5ECAD6 50% · #6CD5B3 100%Measure โทนสว่างสำหรับฉากมืด โดยยังอ่านด้วยหมึก Mineral ได้ชัดA luminous Measure companion for dark mode with Mineral foregroundMeasure · orientation and measurement becoming actionsurfaceForeground.onLight · #182327 / #293337 · ≥4.5:1deletion test · keep only when comprehension improvesatmosphere.gradient.ground.current#0F5773 0% · #006A6A 50% · #1F744F 100%บริบท หลักฐาน และการไหลของเรื่องในฉากมืดContext, evidence, and narrative current in dark modeGround · context reveal and evidence becoming understandablesurfaceForeground.onDeep · #FFFFFF / #F1F4EF · ≥4.5:1deletion test · keep only when comprehension improvesatmosphere.gradient.ground.mist#C4E0EE 0% · #B2E2E2 50% · #CCE6D0 100%Brand Voice สีฟ้าอ่อนแบบ muted ช่วยให้คำและหลักฐานเป็นพระเอกA muted light-blue Brand Voice field that lets language and evidence leadGround · calm context, collaboration, and Brand Voice proofsurfaceForeground.onLight · #182327 / #293337 · ≥4.5:1deletion test · keep only when comprehension improvesatmosphere.gradient.cultivate.glow#EB8182 0% · #F5A06F 50% · #EBC573 100%พลังของการลงมือทำและความคืบหน้าที่จับต้องได้Human energy for action and credible momentumCultivate · action and credible momentumsurfaceForeground.onLight · #182327 / #293337 · ≥4.5:1deletion test · keep only when comprehension improvesatmosphere.gradient.cultivate.mist#F7CBC7 0% · #FBD1B6 50% · #F1E0B4 100%Cultivate โทนอ่อนสำหรับฉากมืดที่ต้องการความอบอุ่นโดยไม่เร่งเร้าA light Cultivate companion for dark mode—warm without urgencyCultivate · completion and handoffsurfaceForeground.onLight · #182327 / #293337 · ≥4.5:1deletion test · keep only when comprehension improves
DIVERSITY · RARE · EVIDENCE REQUIRED
ใช้ไม่เกินหนึ่งครั้งต่อ long route และใช้เมื่อฉากนั้นพูดถึงหลายมุมมองหรือการร่วมสร้างจริงเท่านั้น ห้ามใช้กับ data, status, product, button หรือ logoUse at most once per long route and only for a truthful multiple-perspective or co-creation scene. Never use it for data, status, product, button, or logo.
atmosphere.gradient.diversity.spectrum#89CEF6 0% · #6CD5B3 34% · #EBC573 67% · #EB8182 100%ใช้เฉพาะฉากที่มีหลายมุมมองหรือการร่วมสร้างจริง ไม่เกินหนึ่งครั้งต่อ long routeRare use for a truthful multiple-perspective or co-creation scene—once per long routeDiversity · rare evidenced diverse participation or co-creationsurfaceForeground.onLight · #182327 / #293337 · ≥4.5:1deletion test · keep only when comprehension improves
MOTIF-01 · GATE STILL APPLIES
brandSignature เป็น alias ของ Measure Deep ไม่ใช่ palette อีกชุด ส่วน civicCool และ civicWarm เป็น asset-only legacy motif ชื่อ motif gradient ไม่ได้อนุญาตให้วาดหรือ trace โลโก้ขึ้นใหม่brandSignature is an alias of Measure Deep, not another palette. civicCool and civicWarm remain asset-only legacy motifs. A motif gradient ID never authorizes rebuilding or tracing the logo.
motif.gradient.brandSignature→atmosphere.gradient.measure.deepmotif.gradient.brandSignaturealias → atmosphere.gradient.measure.deepเป็น semantic alias ของ Measure Deep เท่านั้น—ไม่ใช่ swatch ชุดที่สองSemantic alias of Measure Deep—not a second palette specimenexact alias · separately approved motif asset onlynot a general-purpose surface tokendeletion test · keep only when comprehension improvesmotif.gradient.civicCool#147A9F 0% → #3BD3CB 52% → #3BD19B 100%สีเดิมสำหรับ motif asset ที่ผ่าน gate แล้วเท่านั้น ไม่ใช่ surfaceLegacy color for a separately approved motif asset only—not a surfaceasset-gated legacy motif onlynot a general-purpose surface tokendeletion test · keep only when comprehension improvesmotif.gradient.civicWarm#C33F55 0% → #FF8A4C 52% → #F4C44E 100%สีเดิมสำหรับ motif asset ที่ผ่าน gate แล้วเท่านั้น ไม่ใช่ surfaceLegacy color for a separately approved motif asset only—not a surfaceasset-gated legacy motif onlynot a general-purpose surface tokendeletion test · keep only when comprehension improves
สีผลิตภัณฑ์—สูตรอัตลักษณ์และตัวอย่างคู่สีProduct colors—identity recipes and pair previews
แยกสูตรอัตลักษณ์ที่อนุมัติแล้วออกจากตัวอย่างคู่สีตามป้ายกำกับแต่ละชุด ทุกชุดห้ามใช้เข้ารหัสค่า สถานะ หรือเปรียบเทียบข้ามผลิตภัณฑ์Each card distinguishes an approved identity recipe from an illustrative color pairing. Never use either to encode magnitude, state, or cross-product comparison.
Light#12669B → #36BCE4แสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surfaceDark#4C99D5 → #59C7E8แสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surface
สูตรอัตลักษณ์ที่สืบทอดและอนุมัติไว้ สีตรงกับ primary / accent ปัจจุบัน ใช้เฉพาะอัตลักษณ์ผลิตภัณฑ์ ห้ามใช้แทนข้อมูล สถานะ หรือหลักฐานRetained approved identity recipe; its colors match the current primary/accent pair. Product identity only; never encode data, states or evidence.บันทึกการอนุมัติApproval record · ทะเบียนสูตรที่สืบทอดRetained recipe registry
ใช้ opaque panel หรือ scrim สำหรับข้อความ และตรวจ contrast บนงานจริงUse an opaque panel or scrim for text and check contrast in the actual artifact.
Light#176B82 → #007E79แสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surfaceDark#59C7E8 → #3BD3CBแสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surface
ตัวอย่างแสดงสี primary และ accent ร่วมกัน LDS และ Add-on ปัจจุบันยังไม่มีสูตร gradient อัตลักษณ์ CityWiki ที่อนุมัติ ใช้เป็นอัตลักษณ์ได้เมื่อมีสูตรและขอบเขตที่อนุมัติใน Add-on เท่านั้นIllustrative primary/accent pairing. Current LDS and Add-on files do not supply an approved CityWiki identity-gradient recipe. Identity use requires an approved recipe and scope in the Add-on.
ใช้ opaque panel หรือ scrim สำหรับข้อความ และตรวจ contrast บนงานจริงUse an opaque panel or scrim for text and check contrast in the actual artifact.
Light#007A58 → #007E79แสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surfaceDark#3BD19B → #3BD3CBแสดงบนพื้นของธีมที่ระบุเสมอPinned to the named theme surface
ใช้บอกอัตลักษณ์ของผลิตภัณฑ์นี้เท่านั้น ห้ามใช้แทนข้อมูลหรือสถานะProduct identity only—never data magnitude or semantic state
ใช้ opaque panel หรือ scrim สำหรับข้อความ และตรวจ contrast บนงานจริงUse an opaque panel or scrim for text and check contrast in the actual artifact.
Light#C4E0EE 0% · #B2E2E2 50% · #CCE6D0 100% · alias → ground.mistแสดงบนพื้น Light เสมอ ไม่ตามธีมของหน้านี้always shown on the light surface, not this page's themeDark#59C7E8 → #3BD3CBแสดงบนพื้น Dark เสมอ ไม่ตามธีมของหน้านี้always shown on the dark surface, not this page's theme
ใช้บอกอัตลักษณ์ของผลิตภัณฑ์นี้เท่านั้น ห้ามใช้แทนข้อมูลหรือสถานะProduct identity only—never data magnitude or semantic state
Light: หมึก mineral ≥11.36:1 · ห้ามใช้ตัวอักษรขาวเปล่า · Dark: mineral ≥8.21:1Light: mineral ink ≥11.36:1, bare white prohibited · Dark: mineral ≥8.21:1
05 · CATEGORICAL + ANALYTICAL · 0.9.7
สีหมวดหมู่ ชุดข้อมูล และบรรยากาศครบตามรุ่นปัจจุบันCurrent categorical colors, analytical families and atmospheres
สีชุด 0.9.7 ใช้งานอยู่ในคู่มือฉบับเต็มนี้ เลือกธีม หมวดหมู่ และตัวหารเพื่อดูค่าจริงThe approved 0.9.7 colors are part of this complete guide. Choose theme, category and denominator to inspect exact values.
Move activity out of the hazard/heat lane. A higher-chroma mint middle suggests active exchange; a clear blue end carries magnitude. This adopts a cool-zone reassignment, not a claim that activity is good. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
Land-area denominator stays orange. The golden middle and clean orange high avoid borrowing the urgent red reserved for risk. Always state km², rai or the actual area denominator. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF1D9
#FFF1D9
1/40
#FEEED2
#FEEED2
2/40
#FDEACA
#FDEACA
3/40
#FCE7C3
#FCE7C3
4/40
#FAE3BC
#FAE3BC
5/40
#F9E0B5
#F9E0B5
6/40
#F8DCAD
#F8DCAD
7/40
#F7D9A6
#F7D9A6
8/40
#F6D59E
#F6D59E
9/40
#F4D297
#F4D297
10/40
#F3CF8F
#F3CF8F
11/40
#F2CB87
#F2CB87
12/40
#F1C87F
#F1C87F
13/40
#EFC477
#EFC477
14/40
#EEC06F
#EEC06F
15/40
#EDBD66
#EDBD66
16/40
#EBB95D
#EBB95D
17/40
#EAB653
#EAB653
18/40
#E9B249
#E9B249
19/40
#E7AF3D
#E7AF3D
20/40
#E6AB30
#E6AB30
21/40
#E5A72E
#E5A72E
22/40
#E5A42D
#E5A42D
23/40
#E4A02B
#E4A02B
24/40
#E49D2A
#E49D2A
25/40
#E39928
#E39928
26/40
#E29526
#E29526
27/40
#E29225
#E29225
28/40
#E18E23
#E18E23
29/40
#E08A21
#E08A21
30/40
#DF8720
#DF8720
31/40
#DF831E
#DF831E
32/40
#DE7F1C
#DE7F1C
33/40
#DD7B1A
#DD7B1A
34/40
#DC7818
#DC7818
35/40
#DB7417
#DB7417
36/40
#DA7015
#DA7015
37/40
#D96C13
#D96C13
38/40
#D86811
#D86811
39/40
#D7640E
#D7640E
40/40
#D6600C
#D6600C
ความร้อน · heat · yellow / vermilion
Sunlit yellow turns through orange to vermilion on both light and dark surfaces, with decreasing lightness as temperature increases. Temperature units and thresholds remain necessary; hue is not a warning classification. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF6CF
#FFF6CF
1/40
#FFF3C8
#FFF3C8
2/40
#FEF0C1
#FEF0C1
3/40
#FEECBA
#FEECBA
4/40
#FEE9B3
#FEE9B3
5/40
#FDE6AC
#FDE6AC
6/40
#FDE2A5
#FDE2A5
7/40
#FCDF9E
#FCDF9E
8/40
#FCDC97
#FCDC97
9/40
#FCD88F
#FCD88F
10/40
#FBD588
#FBD588
11/40
#FBD280
#FBD280
12/40
#FACE78
#FACE78
13/40
#F9CB70
#F9CB70
14/40
#F9C868
#F9C868
15/40
#F8C45F
#F8C45F
16/40
#F8C156
#F8C156
17/40
#F7BD4C
#F7BD4C
18/40
#F6BA41
#F6BA41
19/40
#F6B634
#F6B634
20/40
#F5B323
#F5B323
21/40
#F3AD22
#F3AD22
22/40
#F1A721
#F1A721
23/40
#EFA120
#EFA120
24/40
#EE9B1F
#EE9B1F
25/40
#EC951E
#EC951E
26/40
#E98F1D
#E98F1D
27/40
#E7891C
#E7891C
28/40
#E5821B
#E5821B
29/40
#E37C1A
#E37C1A
30/40
#E17619
#E17619
31/40
#DE7018
#DE7018
32/40
#DC6917
#DC6917
33/40
#DA6316
#DA6316
34/40
#D75C16
#D75C16
35/40
#D55515
#D55515
36/40
#D24E14
#D24E14
37/40
#CF4713
#CF4713
38/40
#CD3F12
#CD3F12
39/40
#CA3611
#CA3611
40/40
#C72D10
#C72D10
ระดับความเสี่ยง · risk · coral orange / clean red
Evidence-backed risk receives a coral-orange middle and clean red high on both themes; no wine, muddy brown or cheerful pink detour. Severity requires labelled thresholds, a distinct warning symbol and text. The unchanged high color needs actual-surface contrast review on dark backgrounds. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF0E5
#FFF0E5
1/40
#FFEADD
#FFEADD
2/40
#FFE4D6
#FFE4D6
3/40
#FFDFCE
#FFDFCE
4/40
#FFD9C6
#FFD9C6
5/40
#FFD3BE
#FFD3BE
6/40
#FFCDB6
#FFCDB6
7/40
#FEC7AE
#FEC7AE
8/40
#FEC1A6
#FEC1A6
9/40
#FDBB9E
#FDBB9E
10/40
#FDB596
#FDB596
11/40
#FCAF8F
#FCAF8F
12/40
#FBA987
#FBA987
13/40
#FAA37F
#FAA37F
14/40
#F99D76
#F99D76
15/40
#F8966E
#F8966E
16/40
#F79066
#F79066
17/40
#F68A5D
#F68A5D
18/40
#F58355
#F58355
19/40
#F37D4C
#F37D4C
20/40
#F27642
#F27642
21/40
#EE7140
#EE7140
22/40
#EA6D3F
#EA6D3F
23/40
#E6683D
#E6683D
24/40
#E2643B
#E2643B
25/40
#DF5F3A
#DF5F3A
26/40
#DB5B38
#DB5B38
27/40
#D75636
#D75636
28/40
#D35135
#D35135
29/40
#CF4D33
#CF4D33
30/40
#CB4832
#CB4832
31/40
#C74330
#C74330
32/40
#C33E2E
#C33E2E
33/40
#BF392D
#BF392D
34/40
#BB342B
#BB342B
35/40
#B82E2A
#B82E2A
36/40
#B42928
#B42928
37/40
#B02227
#B02227
38/40
#AC1B25
#AC1B25
39/40
#A81324
#A81324
40/40
#A40822
#A40822
ราคา · price · mint cyan / forest
A mint-cyan middle turns toward forest green, suggesting value without using brand energy mint. Higher price is magnitude, not automatically benefit or desirability. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#F4F4DD
#F4F4DD
1/40
#EEF2DC
#EEF2DC
2/40
#E8EFDA
#E8EFDA
3/40
#E2EDD9
#E2EDD9
4/40
#DCEBD8
#DCEBD8
5/40
#D6E8D6
#D6E8D6
6/40
#D0E6D5
#D0E6D5
7/40
#C9E3D4
#C9E3D4
8/40
#C3E1D2
#C3E1D2
9/40
#BDDFD1
#BDDFD1
10/40
#B7DCD0
#B7DCD0
11/40
#B0DACE
#B0DACE
12/40
#AAD7CD
#AAD7CD
13/40
#A4D5CC
#A4D5CC
14/40
#9DD3CA
#9DD3CA
15/40
#97D0C9
#97D0C9
16/40
#90CEC8
#90CEC8
17/40
#89CBC6
#89CBC6
18/40
#82C9C5
#82C9C5
19/40
#7BC6C3
#7BC6C3
20/40
#74C4C2
#74C4C2
21/40
#70BFBC
#70BFBC
22/40
#6CBBB7
#6CBBB7
23/40
#68B6B1
#68B6B1
24/40
#63B2AC
#63B2AC
25/40
#5FADA6
#5FADA6
26/40
#5BA9A1
#5BA9A1
27/40
#57A59B
#57A59B
28/40
#53A096
#53A096
29/40
#4F9C91
#4F9C91
30/40
#4B978B
#4B978B
31/40
#479386
#479386
32/40
#438F81
#438F81
33/40
#3F8B7C
#3F8B7C
34/40
#3B8676
#3B8676
35/40
#368271
#368271
36/40
#327E6C
#327E6C
37/40
#2E7A67
#2E7A67
38/40
#2A7562
#2A7562
39/40
#25715D
#25715D
40/40
#216D58
#216D58
อายุ · age · mineral blue / olive leaf
Mineral blue turning into olive leaf gives elapsed age a quiet archival character. Old is not automatically damaged, unsafe or obsolete. Distinguish from duration by units and legend labels. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#F5F0DF
#F5F0DF
1/40
#F1EDDE
#F1EDDE
2/40
#ECEBDD
#ECEBDD
3/40
#E8E8DC
#E8E8DC
4/40
#E3E5DB
#E3E5DB
5/40
#DFE2DA
#DFE2DA
6/40
#DAE0D9
#DAE0D9
7/40
#D6DDD8
#D6DDD8
8/40
#D2DAD7
#D2DAD7
9/40
#CDD8D6
#CDD8D6
10/40
#C9D5D5
#C9D5D5
11/40
#C4D2D4
#C4D2D4
12/40
#C0D0D3
#C0D0D3
13/40
#BCCDD2
#BCCDD2
14/40
#B7CAD1
#B7CAD1
15/40
#B3C7D0
#B3C7D0
16/40
#AEC5CF
#AEC5CF
17/40
#AAC2CE
#AAC2CE
18/40
#A6BFCD
#A6BFCD
19/40
#A1BDCC
#A1BDCC
20/40
#9DBACB
#9DBACB
21/40
#99B6C3
#99B6C3
22/40
#95B2BB
#95B2BB
23/40
#91AEB4
#91AEB4
24/40
#8DA9AC
#8DA9AC
25/40
#89A5A4
#89A5A4
26/40
#85A19D
#85A19D
27/40
#819D95
#819D95
28/40
#7D998E
#7D998E
29/40
#7A9586
#7A9586
30/40
#76917F
#76917F
31/40
#728D77
#728D77
32/40
#6E8970
#6E8970
33/40
#6B8468
#6B8468
34/40
#678061
#678061
35/40
#637C59
#637C59
36/40
#607851
#607851
37/40
#5C744A
#5C744A
38/40
#597042
#597042
39/40
#556C3A
#556C3A
40/40
#526832
#526832
ต่อครัวเรือน · density.household · rose / scarlet coral
Household density uses a rose middle and a lighter scarlet/coral high than risk. This warm living-related lane is not a hazard code. Always name the household denominator. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF2E4
#FFF2E4
1/40
#FFEDE1
#FFEDE1
2/40
#FFE7DD
#FFE7DD
3/40
#FEE2DA
#FEE2DA
4/40
#FEDCD7
#FEDCD7
5/40
#FDD7D3
#FDD7D3
6/40
#FDD1D0
#FDD1D0
7/40
#FCCCCD
#FCCCCD
8/40
#FCC7CA
#FCC7CA
9/40
#FBC1C6
#FBC1C6
10/40
#FABCC3
#FABCC3
11/40
#F9B6C0
#F9B6C0
12/40
#F8B1BD
#F8B1BD
13/40
#F7ABB9
#F7ABB9
14/40
#F6A6B6
#F6A6B6
15/40
#F5A0B3
#F5A0B3
16/40
#F49BB0
#F49BB0
17/40
#F395AD
#F395AD
18/40
#F28FA9
#F28FA9
19/40
#F08AA6
#F08AA6
20/40
#EF84A3
#EF84A3
21/40
#EE819D
#EE819D
22/40
#EE7F98
#EE7F98
23/40
#ED7C92
#ED7C92
24/40
#EC7A8C
#EC7A8C
25/40
#EB7787
#EB7787
26/40
#EB7481
#EB7481
27/40
#EA727B
#EA727B
28/40
#E96F75
#E96F75
29/40
#E86C70
#E86C70
30/40
#E8696A
#E8696A
31/40
#E76664
#E76664
32/40
#E6635D
#E6635D
33/40
#E56057
#E56057
34/40
#E45D51
#E45D51
35/40
#E35A4A
#E35A4A
36/40
#E35743
#E35743
37/40
#E2543B
#E2543B
38/40
#E15033
#E15033
39/40
#E04D2A
#E04D2A
40/40
#DF491F
#DF491F
การเติบโต · growth · yellow green / leaf
A sunny yellow-green middle turns to leaf green for one-way growth. Use only when the mapped variable is a nonnegative magnitude; signed change belongs to delta with a meaningful zero. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#EEF5E5
#EEF5E5
1/40
#EBF3DF
#EBF3DF
2/40
#E8F1D8
#E8F1D8
3/40
#E5EED2
#E5EED2
4/40
#E2ECCB
#E2ECCB
5/40
#DEEAC5
#DEEAC5
6/40
#DBE8BE
#DBE8BE
7/40
#D8E5B8
#D8E5B8
8/40
#D5E3B1
#D5E3B1
9/40
#D2E1AA
#D2E1AA
10/40
#CFDEA4
#CFDEA4
11/40
#CCDC9D
#CCDC9D
12/40
#C9DA96
#C9DA96
13/40
#C6D78F
#C6D78F
14/40
#C3D588
#C3D588
15/40
#C0D381
#C0D381
16/40
#BDD07A
#BDD07A
17/40
#BBCE73
#BBCE73
18/40
#B8CC6B
#B8CC6B
19/40
#B5C963
#B5C963
20/40
#B2C75B
#B2C75B
21/40
#ABC359
#ABC359
22/40
#A5BE56
#A5BE56
23/40
#9EBA54
#9EBA54
24/40
#98B552
#98B552
25/40
#91B150
#91B150
26/40
#8BAC4D
#8BAC4D
27/40
#84A84B
#84A84B
28/40
#7EA349
#7EA349
29/40
#779F47
#779F47
30/40
#719B44
#719B44
31/40
#6A9642
#6A9642
32/40
#649240
#649240
33/40
#5D8E3E
#5D8E3E
34/40
#56893C
#56893C
35/40
#50853A
#50853A
36/40
#498137
#498137
37/40
#427D35
#427D35
38/40
#3A7833
#3A7833
39/40
#337431
#337431
40/40
#2B702F
#2B702F
ความเชื่อมั่น · confidence · sky blue / deep teal green
Sky-blue-to-teal-green suggests increasingly supported evidence without imitating a red/green pass/fail signal. Confidence is not truth, causality or permission; show uncertainty and the estimation method. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#EEF4EB
#EEF4EB
1/40
#E7F1EB
#E7F1EB
2/40
#E1EDEA
#E1EDEA
3/40
#DAEAEA
#DAEAEA
4/40
#D4E6EA
#D4E6EA
5/40
#CDE3E9
#CDE3E9
6/40
#C6DFE9
#C6DFE9
7/40
#C0DCE8
#C0DCE8
8/40
#B9D8E8
#B9D8E8
9/40
#B2D5E7
#B2D5E7
10/40
#ACD1E6
#ACD1E6
11/40
#A5CEE6
#A5CEE6
12/40
#9ECAE5
#9ECAE5
13/40
#97C7E4
#97C7E4
14/40
#91C3E4
#91C3E4
15/40
#8AC0E3
#8AC0E3
16/40
#83BCE2
#83BCE2
17/40
#7CB9E1
#7CB9E1
18/40
#75B5E1
#75B5E1
19/40
#6DB2E0
#6DB2E0
20/40
#66AEDF
#66AEDF
21/40
#63ABD8
#63ABD8
22/40
#5FA7D1
#5FA7D1
23/40
#5CA4CB
#5CA4CB
24/40
#58A0C4
#58A0C4
25/40
#559DBD
#559DBD
26/40
#5299B7
#5299B7
27/40
#4E96B0
#4E96B0
28/40
#4B93AA
#4B93AA
29/40
#488FA3
#488FA3
30/40
#448C9D
#448C9D
31/40
#418896
#418896
32/40
#3E8590
#3E8590
33/40
#3A828A
#3A828A
34/40
#377E83
#377E83
35/40
#347B7D
#347B7D
36/40
#307777
#307777
37/40
#2D7470
#2D7470
38/40
#2A716A
#2A716A
39/40
#266D64
#266D64
40/40
#236A5E
#236A5E
จำนวนรวม · count · dusty cyan / editorial navy
A dusty cyan middle and deep editorial navy end give totals weight without heat or danger meaning. Count is not an area/population/household rate. Blue-family collisions remain a specific review item. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#F4F0E7
#F4F0E7
1/40
#EEEDE5
#EEEDE5
2/40
#E8EBE3
#E8EBE3
3/40
#E3E8E1
#E3E8E1
4/40
#DDE5DF
#DDE5DF
5/40
#D7E3DD
#D7E3DD
6/40
#D1E0DB
#D1E0DB
7/40
#CBDDD9
#CBDDD9
8/40
#C5DAD7
#C5DAD7
9/40
#C0D8D6
#C0D8D6
10/40
#BAD5D4
#BAD5D4
11/40
#B4D2D2
#B4D2D2
12/40
#AED0D0
#AED0D0
13/40
#A8CDCE
#A8CDCE
14/40
#A2CACC
#A2CACC
15/40
#9CC8CA
#9CC8CA
16/40
#96C5C8
#96C5C8
17/40
#90C2C6
#90C2C6
18/40
#8ABFC4
#8ABFC4
19/40
#83BDC2
#83BDC2
20/40
#7DBAC0
#7DBAC0
21/40
#78B3BC
#78B3BC
22/40
#73ADB8
#73ADB8
23/40
#6EA7B4
#6EA7B4
24/40
#69A0B0
#69A0B0
25/40
#649AAC
#649AAC
26/40
#5F93A8
#5F93A8
27/40
#5A8DA4
#5A8DA4
28/40
#5587A0
#5587A0
29/40
#50809C
#50809C
30/40
#4C7A98
#4C7A98
31/40
#477494
#477494
32/40
#436E90
#436E90
33/40
#3E688C
#3E688C
34/40
#3A6288
#3A6288
35/40
#355C84
#355C84
36/40
#315680
#315680
37/40
#2D507C
#2D507C
38/40
#294A78
#294A78
39/40
#254474
#254474
40/40
#213E70
#213E70
น้ำ · water · ice / cyan / deep blue
Every phase stays in an aquatic cyan/blue vocabulary; no lime or foliage middle. This maps amount/depth/frequency of water, not flood-danger categories; consequence-based risk uses the risk family. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#EEF7FC
#EEF7FC
1/40
#E6F4FA
#E6F4FA
2/40
#DFF1F7
#DFF1F7
3/40
#D7EEF5
#D7EEF5
4/40
#D0EBF3
#D0EBF3
5/40
#C8E8F0
#C8E8F0
6/40
#C0E5EE
#C0E5EE
7/40
#B8E2EC
#B8E2EC
8/40
#B0DFE9
#B0DFE9
9/40
#A8DCE7
#A8DCE7
10/40
#A0D9E5
#A0D9E5
11/40
#98D6E2
#98D6E2
12/40
#90D3E0
#90D3E0
13/40
#87D0DE
#87D0DE
14/40
#7ECDDB
#7ECDDB
15/40
#75CAD9
#75CAD9
16/40
#6BC7D6
#6BC7D6
17/40
#61C4D4
#61C4D4
18/40
#56C1D2
#56C1D2
19/40
#4BBECF
#4BBECF
20/40
#3DBBCD
#3DBBCD
21/40
#3AB4C9
#3AB4C9
22/40
#36AEC4
#36AEC4
23/40
#33A7C0
#33A7C0
24/40
#30A1BC
#30A1BC
25/40
#2D9BB8
#2D9BB8
26/40
#2A94B4
#2A94B4
27/40
#278EAF
#278EAF
28/40
#2387AB
#2387AB
29/40
#2181A7
#2181A7
30/40
#1E7BA3
#1E7BA3
31/40
#1B759E
#1B759E
32/40
#186F9A
#186F9A
33/40
#156896
#156896
34/40
#136292
#136292
35/40
#105C8D
#105C8D
36/40
#0E5689
#0E5689
37/40
#0C5085
#0C5085
38/40
#0A4A81
#0A4A81
39/40
#08447C
#08447C
40/40
#073E78
#073E78
ต่อประชากร · density.capita · salmon / rose
Per-person density stays warm with a salmon middle and rose high. It must remain distinct from household scarlet and never be read as demographic behaviour, eligibility or risk. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF0ED
#FFF0ED
1/40
#FFECE7
#FFECE7
2/40
#FEE8E1
#FEE8E1
3/40
#FEE4DB
#FEE4DB
4/40
#FEE0D5
#FEE0D5
5/40
#FDDCCF
#FDDCCF
6/40
#FDD8CA
#FDD8CA
7/40
#FCD4C4
#FCD4C4
8/40
#FCD0BE
#FCD0BE
9/40
#FBCCB8
#FBCCB8
10/40
#FBC8B2
#FBC8B2
11/40
#FAC4AC
#FAC4AC
12/40
#F9C0A6
#F9C0A6
13/40
#F9BCA0
#F9BCA0
14/40
#F8B89A
#F8B89A
15/40
#F7B494
#F7B494
16/40
#F6B08E
#F6B08E
17/40
#F6AC88
#F6AC88
18/40
#F5A882
#F5A882
19/40
#F4A47C
#F4A47C
20/40
#F3A076
#F3A076
21/40
#F09B75
#F09B75
22/40
#ED9575
#ED9575
23/40
#EB9074
#EB9074
24/40
#E88B73
#E88B73
25/40
#E58572
#E58572
26/40
#E28072
#E28072
27/40
#DF7A71
#DF7A71
28/40
#DC7570
#DC7570
29/40
#D96F6F
#D96F6F
30/40
#D66A6E
#D66A6E
31/40
#D3646D
#D3646D
32/40
#D05F6C
#D05F6C
33/40
#CD596B
#CD596B
34/40
#CA536A
#CA536A
35/40
#C74D69
#C74D69
36/40
#C44768
#C44768
37/40
#C14167
#C14167
38/40
#BD3A65
#BD3A65
39/40
#BA3364
#BA3364
40/40
#B72B63
#B72B63
พื้นที่ก่อสร้าง · built · peach / gold
The built-area family stays gold with a peach middle. Gold has a shorter useful lightness range before becoming prohibited brown; class-count limitations are reported rather than hidden. State footprint, height or coverage definition. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#FFF5D8
#FFF5D8
1/40
#FFF2D5
#FFF2D5
2/40
#FEEFD1
#FEEFD1
3/40
#FEECCE
#FEECCE
4/40
#FDEACA
#FDEACA
5/40
#FDE7C7
#FDE7C7
6/40
#FCE4C3
#FCE4C3
7/40
#FBE1C0
#FBE1C0
8/40
#FBDEBC
#FBDEBC
9/40
#FADBB9
#FADBB9
10/40
#FAD8B5
#FAD8B5
11/40
#F9D6B2
#F9D6B2
12/40
#F9D3AF
#F9D3AF
13/40
#F8D0AB
#F8D0AB
14/40
#F7CDA8
#F7CDA8
15/40
#F7CAA4
#F7CAA4
16/40
#F6C7A1
#F6C7A1
17/40
#F5C59D
#F5C59D
18/40
#F4C29A
#F4C29A
19/40
#F4BF96
#F4BF96
20/40
#F3BC93
#F3BC93
21/40
#F0BB8E
#F0BB8E
22/40
#EEB989
#EEB989
23/40
#EBB884
#EBB884
24/40
#E8B77F
#E8B77F
25/40
#E6B57A
#E6B57A
26/40
#E3B475
#E3B475
27/40
#E0B370
#E0B370
28/40
#DEB16A
#DEB16A
29/40
#DBB065
#DBB065
30/40
#D9AE5F
#D9AE5F
31/40
#D6AD59
#D6AD59
32/40
#D3AC53
#D3AC53
33/40
#D1AA4D
#D1AA4D
34/40
#CEA946
#CEA946
35/40
#CCA73F
#CCA73F
36/40
#C9A638
#C9A638
37/40
#C7A42F
#C7A42F
38/40
#C4A325
#C4A325
39/40
#C2A118
#C2A118
40/40
#BFA000
#BFA000
ระยะเวลา · duration · sage / neutral charcoal
A sage middle resolves into neutral charcoal for elapsed time, separating it from the count family’s navy. The end is deliberately near-neutral, so midpoint-to-end hue angle is not a meaningful identity test. It remains calm and utilitarian; longer time is not automatically worse unless the product explicitly states that interpretation. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#EEF2F5
#EEF2F5
1/40
#EAEFF1
#EAEFF1
2/40
#E5EBED
#E5EBED
3/40
#E1E8E8
#E1E8E8
4/40
#DCE5E4
#DCE5E4
5/40
#D8E1E0
#D8E1E0
6/40
#D4DEDC
#D4DEDC
7/40
#CFDBD8
#CFDBD8
8/40
#CBD8D4
#CBD8D4
9/40
#C7D4D0
#C7D4D0
10/40
#C2D1CC
#C2D1CC
11/40
#BECEC8
#BECEC8
12/40
#BACBC4
#BACBC4
13/40
#B6C7C0
#B6C7C0
14/40
#B1C4BC
#B1C4BC
15/40
#ADC1B8
#ADC1B8
16/40
#A9BEB4
#A9BEB4
17/40
#A5BBB0
#A5BBB0
18/40
#A0B7AC
#A0B7AC
19/40
#9CB4A8
#9CB4A8
20/40
#98B1A4
#98B1A4
21/40
#93AB9F
#93AB9F
22/40
#8DA599
#8DA599
23/40
#889F94
#889F94
24/40
#829A8E
#829A8E
25/40
#7D9489
#7D9489
26/40
#788E84
#788E84
27/40
#73887E
#73887E
28/40
#6D8379
#6D8379
29/40
#687D74
#687D74
30/40
#63786F
#63786F
31/40
#5E726A
#5E726A
32/40
#596D65
#596D65
33/40
#546760
#546760
34/40
#4F625B
#4F625B
35/40
#4A5D56
#4A5D56
36/40
#465751
#465751
37/40
#41524C
#41524C
38/40
#3C4D47
#3C4D47
39/40
#384843
#384843
40/40
#33433E
#33433E
สมดุล · balance · red / neutral / blue
Red deficit and blue surplus are deliberately separated around the stated balance. The neutral centre is a numerical reference, not a categorical unknown. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#CF5148
#CF5148
1/40
#D25A50
#D25A50
2/40
#D56358
#D56358
3/40
#D76C60
#D76C60
4/40
#DA7468
#DA7468
5/40
#DC7C70
#DC7C70
6/40
#DF8578
#DF8578
7/40
#E18D80
#E18D80
8/40
#E39588
#E39588
9/40
#E59D90
#E59D90
10/40
#E7A599
#E7A599
11/40
#E8ACA1
#E8ACA1
12/40
#EAB4A9
#EAB4A9
13/40
#EBBCB1
#EBBCB1
14/40
#ECC4B9
#ECC4B9
15/40
#EECCC2
#EECCC2
16/40
#EFD4CA
#EFD4CA
17/40
#EFDBD3
#EFDBD3
18/40
#F0E3DB
#F0E3DB
19/40
#F1EBE3
#F1EBE3
20/40
#F1F3EC
#F1F3EC
21/40
#E8EEEA
#E8EEEA
22/40
#DFE8E8
#DFE8E8
23/40
#D6E3E6
#D6E3E6
24/40
#CDDDE4
#CDDDE4
25/40
#C5D8E2
#C5D8E2
26/40
#BCD3E0
#BCD3E0
27/40
#B3CDDE
#B3CDDE
28/40
#AAC8DC
#AAC8DC
29/40
#A1C2D9
#A1C2D9
30/40
#99BDD7
#99BDD7
31/40
#90B8D5
#90B8D5
32/40
#87B2D3
#87B2D3
33/40
#7EADD0
#7EADD0
34/40
#75A8CE
#75A8CE
35/40
#6CA2CC
#6CA2CC
36/40
#639DC9
#639DC9
37/40
#5997C7
#5997C7
38/40
#5092C4
#5092C4
39/40
#468CC2
#468CC2
40/40
#3B87BF
#3B87BF
การเปลี่ยนแปลง · delta · orange / neutral / green
Warm decrease and cool green increase express signed change around zero. Decrease/increase is not automatically bad/good. This pairing may require non-colour support under red-green deficiencies. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#CF5420
#CF5420
1/40
#D25D2E
#D25D2E
2/40
#D5663A
#D5663A
3/40
#D76E46
#D76E46
4/40
#DA7750
#DA7750
5/40
#DC7F5A
#DC7F5A
6/40
#DE8764
#DE8764
7/40
#E18F6E
#E18F6E
8/40
#E39778
#E39778
9/40
#E49E82
#E49E82
10/40
#E6A68B
#E6A68B
11/40
#E8AE95
#E8AE95
12/40
#E9B69E
#E9B69E
13/40
#EBBDA8
#EBBDA8
14/40
#ECC5B2
#ECC5B2
15/40
#EDCDBB
#EDCDBB
16/40
#EED4C5
#EED4C5
17/40
#EFDCCF
#EFDCCF
18/40
#F0E4D8
#F0E4D8
19/40
#F1EBE2
#F1EBE2
20/40
#F1F3EC
#F1F3EC
21/40
#E8EEE6
#E8EEE6
22/40
#E0E9E0
#E0E9E0
23/40
#D7E4DA
#D7E4DA
24/40
#CEDFD4
#CEDFD4
25/40
#C6DACE
#C6DACE
26/40
#BDD6C8
#BDD6C8
27/40
#B4D1C2
#B4D1C2
28/40
#ACCCBC
#ACCCBC
29/40
#A3C7B6
#A3C7B6
30/40
#9AC2B0
#9AC2B0
31/40
#92BDAA
#92BDAA
32/40
#89B8A5
#89B8A5
33/40
#80B49F
#80B49F
34/40
#77AF99
#77AF99
35/40
#6EAA94
#6EAA94
36/40
#65A58E
#65A58E
37/40
#5BA088
#5BA088
38/40
#519C83
#519C83
39/40
#47977D
#47977D
40/40
#3C9278
#3C9278
การแลกเปลี่ยน · tradeoff · gold / neutral / blue
Gold versus blue distinguishes the two directions of a declared tradeoff. Pole lightness is balanced in the approved light-source design; neither end inherits an automatic moral judgement. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#B79900
#B79900
1/40
#BA9E23
#BA9E23
2/40
#BDA235
#BDA235
3/40
#C0A743
#C0A743
4/40
#C2AB4F
#C2AB4F
5/40
#C5B05B
#C5B05B
6/40
#C8B466
#C8B466
7/40
#CBB970
#CBB970
8/40
#CEBD7A
#CEBD7A
9/40
#D1C284
#D1C284
10/40
#D4C68E
#D4C68E
11/40
#D7CB98
#D7CB98
12/40
#D9CFA1
#D9CFA1
13/40
#DCD4AB
#DCD4AB
14/40
#DFD8B4
#DFD8B4
15/40
#E2DDBD
#E2DDBD
16/40
#E5E1C7
#E5E1C7
17/40
#E8E6D0
#E8E6D0
18/40
#EBEAD9
#EBEAD9
19/40
#EEEFE3
#EEEFE3
20/40
#F1F3EC
#F1F3EC
21/40
#EAEFEC
#EAEFEC
22/40
#E4EAEB
#E4EAEB
23/40
#DEE6EB
#DEE6EB
24/40
#D7E2EA
#D7E2EA
25/40
#D1DDEA
#D1DDEA
26/40
#CAD9E9
#CAD9E9
27/40
#C4D5E9
#C4D5E9
28/40
#BED0E8
#BED0E8
29/40
#B7CCE8
#B7CCE8
30/40
#B1C8E7
#B1C8E7
31/40
#ABC3E6
#ABC3E6
32/40
#A4BFE5
#A4BFE5
33/40
#9EBBE5
#9EBBE5
34/40
#98B6E4
#98B6E4
35/40
#92B2E3
#92B2E3
36/40
#8CAEE2
#8CAEE2
37/40
#85A9E1
#85A9E1
38/40
#7FA5E0
#7FA5E0
39/40
#79A0DF
#79A0DF
40/40
#739CDE
#739CDE
การไหลสุทธิ · flow · coral / neutral / teal
Coral outflow and teal inflow keep directional movement distinct from accumulated activity. Use arrows, signed labels and explicit boundary/time units. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#C95368
#C95368
1/40
#CC5C6E
#CC5C6E
2/40
#CF6474
#CF6474
3/40
#D26D7B
#D26D7B
4/40
#D57581
#D57581
5/40
#D77D87
#D77D87
6/40
#DA858E
#DA858E
7/40
#DC8D94
#DC8D94
8/40
#DF959B
#DF959B
9/40
#E19DA1
#E19DA1
10/40
#E3A5A8
#E3A5A8
11/40
#E5ACAE
#E5ACAE
12/40
#E7B4B5
#E7B4B5
13/40
#E8BCBC
#E8BCBC
14/40
#EAC4C3
#EAC4C3
15/40
#ECCCC9
#ECCCC9
16/40
#EDD4D0
#EDD4D0
17/40
#EEDBD7
#EEDBD7
18/40
#EFE3DE
#EFE3DE
19/40
#F0EBE5
#F0EBE5
20/40
#F1F3EC
#F1F3EC
21/40
#E8EEE8
#E8EEE8
22/40
#DFE9E3
#DFE9E3
23/40
#D6E4DF
#D6E4DF
24/40
#CDDFDA
#CDDFDA
25/40
#C4DAD6
#C4DAD6
26/40
#BBD5D1
#BBD5D1
27/40
#B2D0CD
#B2D0CD
28/40
#A9CBC9
#A9CBC9
29/40
#A0C6C4
#A0C6C4
30/40
#97C1C0
#97C1C0
31/40
#8DBCBC
#8DBCBC
32/40
#84B7B7
#84B7B7
33/40
#7BB2B3
#7BB2B3
34/40
#71ADAF
#71ADAF
35/40
#67A8AA
#67A8AA
36/40
#5DA4A6
#5DA4A6
37/40
#539FA2
#539FA2
38/40
#489A9D
#489A9D
39/40
#3C9599
#3C9599
40/40
#2E9095
#2E9095
ความคิดเห็น · sentiment · rose / neutral / leaf
Rose versus leaf expresses an explicitly measured negative/positive scale. Sentiment never substitutes for lived behaviour or population-wide conclusions; non-colour sign cues are required. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ขั้น
พื้นสว่าง
พื้นมืด
0/40
#C95170
#C95170
1/40
#CC5A76
#CC5A76
2/40
#CF637C
#CF637C
3/40
#D26B82
#D26B82
4/40
#D57387
#D57387
5/40
#D77C8D
#D77C8D
6/40
#DA8493
#DA8493
7/40
#DC8C9A
#DC8C9A
8/40
#DF94A0
#DF94A0
9/40
#E19CA6
#E19CA6
10/40
#E3A4AC
#E3A4AC
11/40
#E5ACB2
#E5ACB2
12/40
#E7B4B8
#E7B4B8
13/40
#E9BBBF
#E9BBBF
14/40
#EAC3C5
#EAC3C5
15/40
#ECCBCC
#ECCBCC
16/40
#EDD3D2
#EDD3D2
17/40
#EEDBD8
#EEDBD8
18/40
#EFE3DF
#EFE3DF
19/40
#F0EBE5
#F0EBE5
20/40
#F1F3EC
#F1F3EC
21/40
#E9EEE4
#E9EEE4
22/40
#E0E9DC
#E0E9DC
23/40
#D8E5D3
#D8E5D3
24/40
#D0E0CB
#D0E0CB
25/40
#C7DBC3
#C7DBC3
26/40
#BFD6BB
#BFD6BB
27/40
#B7D2B3
#B7D2B3
28/40
#AFCDAB
#AFCDAB
29/40
#A6C8A3
#A6C8A3
30/40
#9EC39C
#9EC39C
31/40
#96BF94
#96BF94
32/40
#8EBA8C
#8EBA8C
33/40
#86B584
#86B584
34/40
#7DB07C
#7DB07C
35/40
#75AC74
#75AC74
36/40
#6CA76D
#6CA76D
37/40
#64A265
#64A265
38/40
#5B9D5D
#5B9D5D
39/40
#529955
#529955
40/40
#49944D
#49944D
ความผิดปกติ · anomaly · blue / neutral / red
Blue below-reference and red above-reference remain familiar directional cues. The sign is not itself evidence of danger; show the reference and anomaly unit. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
จำนวนรวม · dusty cyan / editorial navy จำนวนรวม ไม่ใช่อัตราหรือความหนาแน่น · A dusty cyan middle and deep editorial navy end give totals weight without heat or danger meaning. Count is not an area/population/household rate. Blue-family collisions remain a specific review item. Same approved light colors and value direction on both themes; use readable labels, boundaries or a neutral backplate without recoloring the data.
ตารางและตัวอย่างด้านบนอ่านจากชุดเดียวกับไฟล์สำหรับเครื่องมือ ระบุ metric หน่วย ตัวหาร เกณฑ์แบ่ง และสถานะไม่มีข้อมูลทุกครั้งThe Atlas above uses the same registry as the machine files. Always declare metric, unit, denominator, thresholds and missing-data states.
สถานะบนแผนที่ต้องเห็นทั้งสี เส้น รูปทรง หรือคำกำกับMap state pairs color with stroke, shape, or a direct label
ค่า rgba ด้านล่างคือ fill ที่กำหนดไว้จริง ไม่ใช่สีทึบใหม่ และต้องทดสอบผลการซ้อนบนแผนที่จริงThe rgba values below are governed fills—not new solid colors—and their composites still need testing on the real map.
จัดชั้นให้เห็นลำดับ โดยไม่แต่งความหมายใหม่Organize depth without inventing new meaning
Opacity ไม่แบกความหมายสำคัญเพียงลำพัง และสีที่เกิดจากการซ้อนไม่ใช่ token ใหม่Opacity never carries critical meaning alone, and a blended result is not a new token.
These are possible design directions, not claims of enabled features. Each begins with intent and ends at an evidence boundary so teams can create something new without dropping truth.
พาบริบทเดิมไปค้นต่อLet context travel with the user
Intent
อยากอ่านข่าวล่าสุดที่ตรงกับเหตุการณ์และข้อมูลที่กำลังดูRead current news for the active event and field.
Design move
นำชื่อเหตุการณ์ ตัวกรองที่เปิดอยู่ และชื่อพื้นที่มาประกอบเป็น query พร้อมบอกว่าคำแต่ละคำมาจากไหนCompose the query from event.name + active filters + place hierarchy, explaining why each term is present.
Value moment
ค้นต่อได้ทันทีโดยไม่ต้องพิมพ์บริบทซ้ำ แต่ยังแก้ query และเห็นว่าข้อมูลใดกำลังจะออกไปThe user continues without retyping context while retaining query control and a visible privacy boundary.
Boundary
สิ่งที่ได้จากภายนอกยังเป็น discovery_only ต้องตรวจแหล่งก่อนนำมาใช้External results remain discovery_only until reviewed and deliberately incorporated.
ลองเปลี่ยนสมมติฐาน แล้วดูว่าคำตอบเปลี่ยนไหมTurn uncertainty into a testable question
Intent
อยากรู้ว่าสมมติฐานข้อไหนอาจทำให้ข้อสรุปพลิกไปอีกทางKnow which assumption could reverse the conclusion.
Design move
วางหลักฐานที่สนับสนุน หลักฐานที่ขัดแย้ง และตัวปรับสมมติฐานไว้ข้างผลเดิม ทุกครั้งที่ปรับ แหล่งข้อมูลกับคำอธิบายกราฟต้องเปลี่ยนตามPair supporting signals, counter-signals, and one assumption control with the result; every state updates source and legend together.
Value moment
แทนที่จะหยุดที่ “คะแนนสูง” คนอ่านจะเห็นว่าเงื่อนไขใดทำให้ตัดสินใจต่างออกไป“High score” becomes “Which condition would change the decision?”
Boundary
เปรียบเทียบได้เมื่อ schema/release และขอบเขตเข้ากันเท่านั้นCompare only compatible schema/release and boundary states.
03 · CITYWIKI · SOURCE-TO-STORY
ตอบเรื่องสำคัญให้ชัดในหนึ่งนาที แล้วพาไปดูที่มาMake the first minute clear and the next detail discoverable
Intent
อยากเข้าใจสถานที่ให้เร็ว และรู้ว่ารายละเอียดไหนยืนยันแล้วหรือควรตรวจล่าสุดอีกครั้งUnderstand a place quickly, then see which details are verified or need a live check.
Design move
ตอบเรื่องสำคัญพร้อมแหล่งอ้างอิงก่อน แล้วค่อยเปิดรายละเอียดต่อ โดยผูกแต่ละช่วงไว้กับ SourceLedgerLead with a sourced one-minute answer, then unfold a detail trail tied to the SourceLedger.
Value moment
คนอยากอ่านต่อเพราะรายละเอียดจริงของสถานที่ ไม่ใช่เพราะถูกซ่อนคำตอบไว้Curiosity comes from truthful place detail—not a teaser that withholds the answer.
Boundary
น้ำเสียงแบบบรรณาธิการ generation mode และ publication status ยังเป็นเรื่องเฉพาะของ CityWikiEditorial voice, generation mode, and publication status remain CityWiki-specific.
04 · CITYCHAT · REPORT-TO-COORDINATION
หลังส่งรายงาน ต้องเห็นว่าใครรับต่อและงานอยู่ไหนMake a report reveal who carries it forward
Intent
รู้ว่ารายงานถูกส่งไปที่ใด อยู่สถานะใด และทำอะไรต่อได้Know where a report went, its current state, and what remains possible.
Design move
ให้ดูก่อนส่งว่าใครมีสิทธิ์เห็น แสดงลำดับการรับงาน และมีทางกลับมาแก้ แทนการขึ้นเพียงข้อความว่า “ส่งแล้ว”Use a permission-aware preview + receipt timeline + quiet recovery route instead of a “Sent” toast.
Value moment
ผู้ใช้เห็นความคืบหน้าโดยไม่ต้องเดา และกลับมาแก้ข้อมูลที่ยังไม่ครบได้The user sees progress without guessing and can return to correct incomplete information.
Boundary
สถานะจริง รายชื่อผู้รับ สิทธิ์ และผลที่เกิดภายนอก ต้องมาจาก product contractReal status, recipients, permissions, and effects require the product contract.
05 · IJJI · SEVEN-DAY EXPERIMENT
เปลี่ยนคำแนะนำเป็นสิ่งเล็ก ๆ ที่ลองและวัดผลได้ใน 7 วันTurn direction into a small, learnable experiment
Intent
เลือกหนึ่งสิ่งที่ลองได้ใน 7 วันและรู้ว่าจะวัดผลอย่างไรChoose one action to try in seven days and know how its outcome will be checked.
Design move
วางสมมติฐาน เหตุผล สิ่งที่จะลอง ใบรับรองส่วนตัว และจุดกลับมาเช็กผลไว้ด้วยกันKeep assumption, why-it-matters, mission, private receipt, and optional check-in on one object.
Value moment
ความก้าวหน้ามาจากสิ่งที่เรียนรู้ ไม่ใช่จำนวนวันที่ต่อเนื่องหรือแรงกดดันให้กลับมาProgress comes from visible learning—not a streak or pressure.
Boundary
ข้อมูลธุรกิจส่วนตัวยังอยู่ใน private scope และไม่นำไปเรียนรู้ลับหลังผู้ใช้Private business data stays private and never becomes hidden learning.
06 · SHARED · EVIDENCE RELAY
ส่งข้อสรุปข้ามทีม โดยไม่ให้ความหมายเพี้ยนLet one claim cross teams without semantic drift
ใช้ channelParityKey กับ object/version เดียวกัน และชี้ให้เห็นทันทีว่าช่องไหนเปลี่ยนความหมายUse channelParityKey, object/version, and a mismatch marker that names the field where meaning changed.
Value moment
ไม่ต้องอ่านเอกสารทั้งเล่ม ทีมก็เห็นว่าจุดไหนทำให้สถานะหรือข้อจำกัดดูแน่นอนเกินจริงTeams can see exactly where status or limitation was strengthened without rereading the whole document.
ไทยเป็นไทย อังกฤษเป็นอังกฤษ แต่เข้าใจเรื่องเดียวกันLet Thai and English reach the same AHA in their own rhythm
Intent
ให้คนอ่านแต่ละภาษาเข้าใจงานโดยไม่รู้สึกว่าอ่านคำแปลHelp each reader understand the work without feeling they are reading a translation.
Design move
เขียนทั้งสองภาษาจากหลักฐานชุดเดียวกัน แล้วเทียบรหัส จำนวน วันที่ ขอบเขต และสิ่งที่จะเกิดขึ้นให้ตรงกันAuthor both languages from one evidence record, then compare identifiers, quantities, dates, boundaries, and actions.
Value moment
แต่ละภาษาอ่านลื่นและตัดบรรทัดเป็นธรรมชาติ โดยความจริงกับผลของการกดยังเหมือนกันVoice and line breaks feel native while truth and consequence remain stable.
Boundary
ภาษาอังกฤษไม่ได้ถูกกว่าไทย และช่องที่ต้องตรงทุกตัวอักษรจะไม่ถูกแปลอย่างอิสระEnglish is not authority over Thai; governed exact fields are not freely translated.
08 · SHARED · HUMAN + MACHINE PARITY
ให้ทั้งคนและเครื่องอ่านเรื่องเดียวกัน โดยไม่เดาเกินจริงDesign for human clarity and machine-safe interpretation
Intent
ให้คน ระบบค้นหา และ AI coding agent พบงานชิ้นเดียวกัน โดยไม่เดาว่าระบบทำอะไรได้บ้างLet people, search, and AI coding agents find the same object without guessing capabilities.
Design move
ใช้ HTML ที่มีความหมาย บอกขอบเขตให้เห็นชัด มีไฟล์ดาวน์โหลดตรงฉบับ พร้อม Manifest, Build Card และ llms.txt ที่พาไปหาแหล่งข้อมูลCombine semantic HTML + visible boundary + exact download + Manifest/Build Card + a concise llms navigation aid.
Value moment
คนอ่านหน้าเดียวก็เข้าใจ เครื่องอ่านไฟล์เดียวก็แยกได้ว่าอะไรใช้ได้จริง อะไรเป็นเพียงตัวอย่าง และอะไรยังรอตรวจA person understands the page; a machine can distinguish enabled, fixture-only, and pending states.
Boundary
การอ่านได้ด้วยเครื่องไม่ได้แปลว่าอนุญาตให้ลงมือทำ และ SEO/agent readiness ยังต้องผ่าน release gateMachine-readable does not grant permission to act; SEO and agent readiness remain release-gated.
Move from object and status to meaning, then evidence, before the next action.
Status
limited evidence · synthetic reference fixture
Source
DS-FIXTURE-0.1 · 28 Jul 2026
Boundary
ตัวอย่างรูปแบบ ไม่ใช่ข้อเท็จจริงของพื้นที่Pattern example—not a place claim
Next
เปลี่ยนเป็นหลักฐานและวิธีวัดที่เจ้าของผลิตภัณฑ์กำกับไว้Replace with product-owned evidence and method
FORMFIELD + BUTTON + RECOVERY
คำถามที่งานนี้ช่วยตอบQuestion this work helps answer
พื้นที่ใดต้องตรวจหลักฐานต่อก่อนเปรียบเทียบWhich area needs another evidence check before comparison?
เห็นชื่อช่อง สิ่งที่ต้องกรอก และคำอธิบายก่อนลงมือLabel, requirement, and guidance appear before action.
ตรวจความเข้ากันได้ของข้อมูลCheck data compatibilityเมื่อทำต่อไม่ได้ ต้องคงข้อความไว้และบอกจุดแก้ไข ไม่ล้างงานของผู้ใช้If blocked, retain the value and identify the correction—never erase the user's work.
Partialแสดงส่วนที่มี พร้อมบอกส่วนที่ขาดShow what exists and name what is missing.
Staleคงวันที่ตรวจล่าสุดและทางไปตรวจใหม่Keep the last-checked date and a refresh route.
Errorบอกสิ่งที่ล้มเหลว งานที่ยังคงอยู่ และวิธีลองใหม่Name the failure, retained work, and safe retry.
COMPONENT ENSEMBLES · COMPOSE BY USER MOMENT
เลือก component เท่าที่ต้องใช้ เพื่อพาคนผ่านช่วงงานนี้Components become valuable when they work together for one user moment.
Do not begin by filling a page with the library. Begin with the moment, then choose the smallest ensemble that preserves meaning, state, and continuation.
01 · EVIDENCE-TO-DECISION
จากผลหนึ่งค่าไปสู่การตัดสินใจที่ปกป้องได้From one result to a defensible decision
Ensemble
DecisionCard + TrustBadge + SourceLedger + one Button
Creative move
ยกหลักฐานที่ชวนสงสัยขึ้นมาเป็น “คำถามถัดไป” ให้เห็นเลย แทนการซ่อนไว้ท้ายหน้าTurn the counter-signal into a visible next question instead of a buried footnote.
Value
คนเห็นพร้อมกันว่าผลนี้ช่วยตอบอะไร และเรื่องไหนยังควรตรวจต่อThe person sees what the result supports and what deserves another check in one scene.
Boundary
ผลจริงต้องเก็บแหล่งข้อมูล วันที่ วิธีวัด ข้อมูลที่ขาด และ allowed use ของผลิตภัณฑ์ไว้ครบReal results must preserve product-owned source, date, method, missingness, and allowed use.
02 · GENTLE RECOVERY
ทำให้ error เป็นจุดเริ่มแก้ ไม่ใช่จุดจบMake error the beginning of recovery
วาง “สิ่งที่ยังใช้ได้” ข้าง “สิ่งที่มีปัญหา” แล้วให้ลองใหม่เฉพาะส่วนนั้นPlace “what still works” beside “what failed,” then offer a scoped retry.
Value
ความผิดพลาดไม่ลบงาน และผู้ใช้ไม่ต้องเดาว่าต้องเริ่มใหม่ตรงไหนFailure does not erase work, and the user never guesses where to resume.
Boundary
เก็บข้อมูลที่กรอกตามขอบเขตและเวลาที่แจ้งไว้เท่านั้น และอย่าบอกว่าสำเร็จก่อนมี receipt จากระบบที่ยืนยันได้Retain input only within its declared scope and retention; never claim success before an authoritative receipt.
03 · DATA WITH TWO DOORS
สลับดูภาพรวมกับค่ารายจุดได้ โดยไม่หลงบริบทGive overview and detail equal doors
Ensemble
Chart or Map + MapLegend + DataTable + SourceLedger
Creative move
เมื่อเลือกจุดหรือพื้นที่ ให้ตารางเลื่อนไปยังแถวเดียวกัน พร้อมเปลี่ยนแหล่งข้อมูลและข้อจำกัดตามWhen a mark or place is selected, move to the same table row and update source/limitation in sync.
Value
คนดูแนวโน้มแล้วลงไปดูค่าจริงได้ โดยยังรู้ว่ากำลังดูเรื่องเดิมPeople move from pattern to exact value without losing context.
Boundary
ใช้แผนที่เมื่อมี geometry ที่กำกับแล้วเท่านั้น ตัวอย่างนี้ยังไม่เปิด map capabilityUse a map only with governed geometry; this fixture does not enable map capability.
04 · QUIET HANDOFF
ให้คนตรวจสิ่งที่จะส่ง ก่อนกดยืนยันMake handoff a calm, inspectable scene
ก่อนยืนยัน แสดงเฉพาะจุดที่ผู้รับจะเห็นต่างจากต้นฉบับReveal only the differences between source and recipient views before confirmation.
Value
ผู้ส่งเห็นทันทีว่าอะไรจะออกจากพื้นที่ส่วนตัว โดยไม่ต้องอ่านหน้าต่างยาว ๆThe sender sees what leaves private scope without reading a long modal.
Boundary
นี่เป็นตัวอย่างอ้างอิงเท่านั้น หน้า playground นี้ไม่มีผู้รับ ไม่มีการส่งจริง และไม่มี permission หรือ share controlReference only: this playground has no recipient, delivery, permission, or share control.
04
ข้อมูล ภาพ และแผนที่Data visualization & maps
เลือกกราฟจากคำถาม แยกศูนย์จากไม่มีข้อมูล และให้ตารางเข้าถึงได้อยู่คู่กันChoose charts from the question, separate zero from no data, and keep an accessible table.3 basics + 9 CityMETER
DATAVIZ-01 · DV-FIXTURE-0.1
เริ่มจากสิ่งที่อยากรู้ แล้วค่อยเลือกกราฟStart with the question—then choose the chart.
พื้นที่ตัวอย่างใดใช้เวลาเดินมากที่สุดWhich sample area has the longest walk?
หน่วย · นาทีUnit · minutes
A
18
B
14
C
9
D
0
E
ND
D คือศูนย์ที่วัดได้ ส่วน E ไม่มีข้อมูลD is a measured zero; E has no data.
ตารางทางเลือกที่เข้าถึงได้ · CompareAccessible alternative · Compare
Area
Minutes
State
A
18
Observed
B
14
Observed
C
9
Observed
D
0
Measured zero
E
—
No data
Source · DV-FIXTURE-0.1 · synthetic · 28 Jul 2026
02 · Change
สัดส่วนร่มเงาบนเส้นทางเปลี่ยนอย่างไรHow did route shade coverage change?
หน่วย · % ของเส้นทางตัวอย่างUnit · % of sampled route
22%Q1
27%Q2
NDQ3
31%Q4
Q3 เว้นเป็นช่องว่าง ไม่ลากแนวโน้มผ่านหลักฐานที่ไม่มีQ3 remains a gap; never bridge missing evidence.
ตารางทางเลือกที่เข้าถึงได้ · ChangeAccessible alternative · Change
Period
Coverage
State
Q1
22%
Observed
Q2
27%
Observed
Q3
—
No data
Q4
31%
Observed
Source · DV-FIXTURE-0.1 · synthetic · 28 Jul 2026
03 · Relationship
ร่มเงาและจุดหยุดที่สังเกตได้เคลื่อนไปด้วยกันหรือไม่Do shade and observed stops move together?
X · shade (%) · Y · stops / 100 passes
จุด E ไม่เดินตามแนวเดียวกับจุดอื่น จึงควรตรวจต่อ แต่ความสัมพันธ์นี้ยังไม่พิสูจน์ว่าอะไรเป็นเหตุหรือผลE is a counter-signal. Association does not establish cause.
ตารางทางเลือกที่เข้าถึงได้ · RelationshipAccessible alternative · Relationship
Area
Shade
Stops / 100
A
20%
10
B
35%
16
C
50%
22
D
65%
28
E · counter-signal
80%
18
Source · DV-FIXTURE-0.1 · synthetic · 28 Jul 2026
Landometer ดูแลลำดับร่วม ตั้งแต่คำถาม รูปแบบ หน่วย แหล่งข้อมูล ขอบเขต ไปจนถึงทางเลือกที่ทุกคนอ่านได้ ส่วนนิยาม วิธีวัด เกณฑ์ allowed use และข้อสรุปจริงเป็นของแต่ละผลิตภัณฑ์ ถ้ายังไม่มี geometry ที่กำกับแล้ว ให้สอนเฉพาะ MapLegend และส่วนประกอบของแผนที่ อย่าสร้างผลแผนที่จำลองขึ้นมาอ้างThe shared Landometer layer governs question → form → unit → source → boundary → accessible alternative. Definitions, methods, thresholds, allowed use, and actual claims remain product-specific. Without governed geometry, teach MapLegend and map anatomy—never invent a map result.
CITYMETER · CURRENT FORMS → DS TREATMENTS
9 แบบที่พบใน CityMETER และวิธีทำให้อ่านง่ายขึ้นNine CityMETER forms—reframed for faster, safer reading
สี่การ์ดแรกใช้ข้อมูลน้ำท่วมที่ CityMETER เปิดเผย ส่วนการ์ดรถใช้ข้อมูล ณ ก.พ. 2026 การ์ดที่ระบุ “โครงร่าง” แสดงเพียงวิธีจัดวาง ไม่ได้สร้างผลข้อมูลขึ้นใหม่The first four use public flood API data; vehicle cards use the Feb 2026 snapshot. Cards marked “treatment sketch” show structure without inventing results.
แผนที่พื้นที่น้ำท่วมFlood-area choropleth
LIVE FORM · TREATMENT SKETCH
เพิ่มAdd · วันที่ วิธีแบ่งช่วง เส้นพื้นที่ที่เลือก ลาย “ไม่มีข้อมูล” และตารางค่าจริงdate, class method, selected outline, no-data pattern, and exact-value table.
พื้นที่น้ำท่วมตามเวลาFlood area over time
PUBLIC API · 21–30 NOV 2025
27 พ.ย. 2025 · 5,944.26 km² · เขียนค่าของวันที่เลือกตรงจุด ไม่ปล่อยให้คนเดาจากแกนDirect-label the selected date instead of making readers estimate from an axis.
จังหวัดที่มีพื้นที่น้ำท่วมสูงFlood-area ranking
PUBLIC API · 27 NOV 2025
เรียงจากมากไปน้อยSort descending · ชื่อเต็ม ค่าตรงปลายแท่ง และวันที่เดียวกันfull labels, direct values, and one shared date.
ใช้คำว่า “ซ้อนทับ/สัมผัส”Label as “overlap/exposure” · ไม่เรียกว่าความเสียหายที่ยืนยันแล้ว และไม่จับหน่วยต่างกันใส่แกนเดียวnot confirmed damage; never force unlike units onto one scale.
แบรนด์รถยนต์ Top 5Top-five vehicle brands
CITYMETER · THAILAND · FEB 2026 · รย.1
Top 5 + Other · ให้ช่วงเวลา ประเภทรถ และตัวหารอยู่ข้างกราฟเสมอKeep period, vehicle type, and denominator beside the chart.
แบรนด์ → รุ่นรถBrand → model hierarchy
CITYMETER SNAPSHOT · DS TREATMENT
ใช้ treemap เมื่อข้อมูลมีลำดับชั้นจริงUse treemap only for a real hierarchy · มีทางย้อนกลับ กลุ่ม “อื่น ๆ” และตาราง; *คงชื่อที่ได้รับจากข้อมูลต้นทางadd breadcrumbs, Other, and a table; *raw API label retained.
ส่วนแบ่ง + แนวโน้มComposition + trend
LIVE FORM · TREATMENT SKETCH
แยกเป็นสองชั้นUse two aligned layers · ส่วนแบ่ง 100% อยู่บน แนวโน้มอยู่ล่าง ไม่ใช้แกนคู่100% share above, trend below—never a dual axis.
เปรียบเทียบสองแบรนด์Two-brand comparison
CITYMETER · FEB 2026 · รย.1
ศูนย์ร่วม + ค่าที่เขียนตรงกราฟShared zero + direct labels · ใช้ตำแหน่ง รูปร่าง และข้อความร่วมกับสี ไม่ใช้แดง/เขียวลำพังposition, shape, and text carry meaning with color—not red/green alone.
แนวโน้มย่อยหลายแถวMicro trends + table
LIVE FORM · TREATMENT SKETCH
แต่ละแถวต้องอ่านจบได้Each row must stand alone · ค่าล่าสุด ค่าเดิม ทิศทาง สถานะ และตาราง—ไม่ใช้ sparkline เป็นของตกแต่งcurrent, prior, direction, state, and table—not decorative sparklines.
ตรวจรูปแบบจาก CityMETER ที่เปิดให้สาธารณะดูเมื่อ 29 ก.ค. 2026 ตัวเลขในกราฟตามเวลา กราฟจัดอันดับ และกราฟรถยนต์เป็นข้อมูลเฉพาะของ CityMETER ไม่ใช่ข้อเท็จจริงร่วมของ Landometer ส่วนแผนที่และภาพที่ระบุ “โครงร่าง” ใช้สอนวิธีจัดวางเท่านั้น ไม่ได้อ้างว่าผลิตภัณฑ์จริงใช้ Design System นี้แล้วForms checked in public CityMETER on 29 Jul 2026. Timeline, ranking, and vehicle values are CityMETER-specific—not portfolio facts. Map and “treatment sketch” thumbnails teach anatomy only and do not claim the live product already conforms.
DATAVIZ OPPORTUNITIES · QUESTION-LED EXTENSIONS
กราฟที่ดีตอบคำถามนี้ และช่วยให้รู้ว่าจะถามอะไรต่อA good chart is not merely the right type—it improves the next question.
01 · QUESTION MORPH
เมื่อคำถามเปลี่ยน รูปกราฟควรเปลี่ยนตาม ไม่ใช่แค่เปลี่ยนสีLet the question change the chart—not the palette
Intent
อยากเปลี่ยนจากถามว่า “พื้นที่ไหนมากกว่า” เป็น “ค่าเปลี่ยนเมื่อไร” โดยยังดูข้อมูลชุดเดิมMove from “which area is higher?” to “when did it change?” on the same object.
Design move
เปลี่ยนกราฟเปรียบเทียบเป็นกราฟตามเวลา โดยคงหน่วย แหล่งข้อมูล ช่วงเวลา และสิ่งที่เลือกไว้Transform Compare bars into Change small multiples while preserving unit, source, period, and selected object.
Value
คนเห็นว่าคำถามที่เปลี่ยนทำให้วิธีอ่านเปลี่ยน โดยความจริงไม่ถูกเขียนใหม่The reader sees how a changed question changes the reading—not the underlying truth.
Boundary
เปลี่ยนรูปได้เฉพาะเมื่อ unit, period, method และ schema/release เปรียบเทียบกันได้Morph the view only when unit, period, method, and schema/release are compatible.
02 · COUNTER-SIGNAL SPOTLIGHT
ทำให้ outlier เห็นชัด และรู้ว่าควรตรวจอะไรต่อMake the outlier a doorway to understanding
Intent
อยากเห็นว่าจุดไหนไม่เป็นไปตามแนวเดียวกับจุดอื่น และควรกลับไปตรวจสมมติฐานข้อใดSee what does not follow the pattern and which assumption deserves review.
Design move
เขียนชื่อกำกับจุด E โดยตรง แล้ววาง “ตรวจบริบทนี้ต่อ” ไว้ข้างข้อจำกัด โดยไม่ลากเส้นแนวโน้มที่ชวนให้สรุปเกินหลักฐานDirect-label point E and place “inspect this context” beside the limitation without an unjustified regression line.
Value
จุดที่ต่างออกไปกลายเป็นสิ่งที่ทำต่อได้อย่างปลอดภัย แทนที่จะถูกตัดออกจากเรื่องThe anomaly becomes a next safe action instead of being edited out of the narrative.
Boundary
counter-signal ยังไม่พิสูจน์สาเหตุ และห้ามตัดออกเพียงเพราะไม่เข้ากับเรื่องที่อยากเล่าA counter-signal does not establish cause and must not be removed for contradicting the narrative.
03 · PLACE + TABLE CHOREOGRAPHY
เลือกพื้นที่ครั้งเดียว แล้วให้แผนที่ กราฟ ตาราง และที่มาเปลี่ยนพร้อมกันLet map, chart, table, and source respond as one object
Intent
เลือกพื้นที่หนึ่ง แล้วเห็นทั้งแนวโน้ม ค่าจริง และขอบเขตของหลักฐานพร้อมกันSelect one place and see its pattern, exact value, and evidence boundary together.
Design move
การเลือกครั้งเดียวต้องเชื่อมพื้นที่ สีในคำอธิบาย จุดบนกราฟ แถวในตาราง วันที่ของแหล่งข้อมูล และข้อจำกัดเข้าด้วยกัน ผู้ใช้คีย์บอร์ดต้องไปตามเส้นทางเดียวกันได้One selection syncs geometry, legend class, chart mark, table row, source date, and limitation; keyboard follows the same route.
Value
ดูภาพรวมแล้วตรวจค่าจริงต่อได้ลื่นไหล โดยไม่ใช้แผนที่เป็นเพียงของตกแต่งOverview and verification flow together without creating a decorative map.
Boundary
ทุกช่องทางต้องชี้ไปที่ object/version เดียวกัน หากไม่มี geometry จริง ให้ใช้กราฟกับตารางเท่านั้นEvery channel must resolve to the same object/version; without real geometry, use chart + table only.
03 · Decideรู้ว่างานนี้ช่วยตัดสินใจอะไรได้Know which decision the work can support.
04 · Actมีสิ่งที่ทำต่อได้จริงหนึ่งอย่างTake one genuinely enabled next action.
05 · Learnเห็น receipt ผลตอบกลับ และเรื่องที่ต้องตรวจต่อSee the receipt, feedback, and next evidence check.
Truthful state and recovery patternsTruthful state and recovery patterns
State
Show now
Safe recovery
Loading
What is loading and what remains usable
Keep a cancel/return route when meaningful
Partial
Available subset + missing portion
Continue only within the visible boundary
Stale
Last checked + reason freshness matters
Refresh or inspect the older evidence explicitly
Offline
Local state + actions that still work
Queue only with an honest receipt
Restricted
Why access is limited
Request the minimum permission from the right owner
Conflict
Both versions and their provenance
Choose/merge without silent overwrite
Error
What failed + what was retained
Retry, revise, or return without losing work
INTENT → AHA → DESIGN RESPONSE
ก่อนออกแบบ ถามให้ได้ก่อนว่าคนกำลังพยายามทำอะไร และควรเห็นอะไรเป็นคำตอบแรกTrace every design response to a declared Intent, AHA, and evidence cue.
สามเคสแรกคือตัวอย่างที่นำไปคิดต่อได้ เคสสุดท้ายช่วยตัดสิ่งที่ไม่ควรออกแบบ ลองเช็กว่า intent ชัดไหม AHA พิสูจน์ได้ไหม และหน้าจอตอบงานจริงหรือยัง
The first three cases are positive directions; the final case is a deletion test. Together they check that intent is specific, the AHA is evidence-backed value, and the proposed UI directly serves the job.
CASE 01 · DECISION EVIDENCE
รู้ว่าผลนี้น่าเชื่อถือพอสำหรับตัดสินใจหรือยังKnow whether this result is trustworthy enough for a decision.
Intent
“ฉันต้องรู้ว่าผลนี้มาจากไหน สดแค่ไหน และใช้ตัดสินใจเรื่องใดได้”“I need to know where this result came from, how current it is, and which decision it can support.”
AHA
เห็นคำตอบหลักพร้อมสถานะ แหล่งข้อมูล วันที่ ขอบเขต ข้อจำกัด และสัญญาณที่ชวนให้ตรวจต่อ โดยไม่ต้องเปิดหลายหน้าThe answer appears with status, source/date, boundary, limitation, and counter-signal without opening several screens.
Evidence cue
อ่าน object/version วันที่ตรวจล่าสุด ข้อมูลที่ขาด และ allowed use ได้ในที่เดียวObject/version, last-checked date, missingness, and allowed use are readable in the same scene.
Design
ใช้ DecisionCard + SourceLedger + TrustBadge และ CTA เดียวว่า “ตรวจแหล่งข้อมูลและข้อจำกัด”Use a DecisionCard + SourceLedger + TrustBadge with one CTA: “Inspect source and limitations.”
Clean completion
บันทึกขอบเขตของการตัดสินใจ หรือออกจากหน้าได้โดยยังเก็บคำตอบและแหล่งข้อมูลไว้Record the decision boundary or leave with the answer and source already received.
Guardrail
อย่าซ่อนข้อมูลที่ขาด อย่าใช้สีบอกสถานะเพียงอย่างเดียว และอย่าให้การแชร์แย่งงานหลักDo not hide missingness, rely on color alone, or let sharing displace the primary decision.
CASE 02 · CITYMETER CURRENT-RECORD REFERENCE
นำเหตุการณ์ พื้นที่ และ field ที่กำลังดูไปค้นข่าวต่อCarry the active event, place, and field into a news search.
Intent
“ขณะดูปี 2567 อุทกภัย ที่หมู่บ้านท่าไทร และเลือกดูยอดผู้เสียชีวิต ฉันอยากตามข่าวที่ตรงกับเหตุการณ์นี้”“While viewing the 2024 flood record for Tha Sai with the fatalities field active, I want news for this exact event.”
AHA
ชื่อเหตุการณ์ วันที่ สาเหตุ เรื่องที่เลือกดู และลำดับพื้นที่ กลายเป็นคำค้นพร้อมใช้โดยไม่ต้องพิมพ์บริบทซ้ำEvent, date, cause, active field, and place hierarchy become a ready query without retyping context.
Evidence cue
ก่อนออกไปค้น คนเห็นข้อมูลต้นทาง คำค้นฉบับเต็ม และแก้ได้ทุกคำThe source record and full editable query remain visible before leaving.
Design
แสดงบริบทที่กำลังใช้ query ที่ระบบประกอบให้และแก้ได้ พร้อม CTA “ค้นคำนี้ต่อใน Google” เปิดผลในแท็บใหม่และเก็บหน้าปัจจุบันไว้Show a context snapshot + an editable auto-composed query + “Continue this query in Google,” opening a new tab while preserving the current page.
Clean completion
แก้หรือคัดลอก query แล้วหยุดได้โดยไม่ส่ง หากค้นต่อ หน้าปัจจุบันยังอยู่ และผลที่ได้ยังเป็น discovery_onlyEdit or copy the query and stop without sending; if search continues, the current page remains and results stay discovery_only.
Guardrail
ตัวอย่างนี้อ้างอิงรายการที่แสดงใน CityMETER ไม่ใช่การยืนยันจากพื้นที่จริง ข้อมูลต้นทางไม่บอกแหล่งอ้างอิง จึงไม่นำตัวเลขที่ยังไม่รู้ว่าครอบคลุมพื้นที่ใดมาใช้This is a CityMETER record snapshot—not independent ground-truth verification. The endpoint exposes no provenance; numeric values are omitted when scope is unclear.
CASE 03 · RECIPIENT VALUE
ส่งงานให้คนถัดไปเข้าใจวัตถุเดียวกันและทำต่อได้Help the next person understand the same object and continue safely.
Intent
“ฉันต้องส่งผลนี้ให้คนที่เกี่ยวข้อง โดยไม่ให้รุ่น ขอบเขต หรือข้อจำกัดหล่นหาย”“I need to hand this result to the relevant role without losing its version, scope, or limitation.”
AHA
ผู้ส่งเห็นตัวอย่างสิ่งที่จะไปถึงปลายทาง ส่วนผู้รับเปิดมาเจอ object/version และขอบเขตเดียวกัน พร้อมสิ่งที่ทำต่อได้อย่างปลอดภัยThe sender sees an exact-object preview; the recipient lands on the same object/version/boundary with a safe next action.
Evidence cue
แยกให้เห็นชัดว่าอะไรคือตัวอย่างก่อนส่ง receipt ปลายทางที่ผู้รับเห็น AHA ของผู้รับ และสิ่งที่ผู้รับทำต่อA static ladder separates preview, receipt, recipient landing, recipient AHA, and useful action.
Design
ตัวอย่างนี้เสนอการส่งต่อพร้อมบริบท หลังผู้ส่งเข้าใจงานแล้วเท่านั้น ต้องเห็นผู้รับ สิ่งที่ผู้รับจะเห็น ข้อมูลที่ถูกปิด receipt และทางยกเลิกหรือแก้ไข หน้า playground นี้ไม่ส่งจริงThis static reference proposes contextual handoff only after source AHA, with recipient, visibility, redaction, receipt, and revoke/recovery; the playground sends nothing.
Clean completion
ผู้ส่งหยุดได้หลังดูตัวอย่าง โดยไม่เสียคำตอบที่ได้รับแล้วหรือเปลี่ยนวัตถุต้นทางThe sender may stop after preview without losing the source AHA or changing the governed object.
Guardrail
อย่าใส่ปุ่ม share ทุกการ์ด ในหนึ่งสถานะมี network action ได้มากที่สุดหนึ่งอย่าง และอย่าเรียกการส่งต่องานว่า network effectNo share button on every card, at most one network action per state, and no claim that handoff is network effect.
CASE 04 · REJECTED PATTERN
“เพิ่ม engagement และ virality” ยังไม่บอกว่าคนเข้ามาทำอะไร หรือได้คุณค่าอะไร“Increase engagement and virality” is not a sufficient user intent or AHA.
Intent?
เป้าธุรกิจคลุมเครือ ไม่บอกว่างานของใครดีขึ้นอย่างไรA vague business target that does not say whose work becomes better or how.
AHA?
เวลาบนหน้า จำนวนคลิก จำนวนแชร์ หรือการเปิดแอปซ้ำ ยังไม่ใช่ความเข้าใจหรือความสำเร็จของคนใช้Time-on-page, clicks, share count, or repeat opens are not user understanding or success.
Do not design
ซ่อนคำตอบหลัง sign-up, ใส่ See more ทุก card, auto-open Google, pulse share, streak/guilt และ hidden trackingGate the answer behind sign-up, add See more to every card, auto-open Google, pulse sharing, use streak/guilt, or add hidden tracking.
Rewrite first
ก่อนเขียนหน้าจอ ให้กลับไปบอกว่าออกแบบให้ใคร เขากำลังทำอะไร อะไรทำให้เข้ามา ควรเห็นคุณค่าอะไร หลักฐานอยู่ไหน ทำอะไรต่อได้ และจบงานอย่างไรDefine the person, job, trigger, useful AHA, evidence cue, allowed next action, and clean completion before writing UI.
MOTION-01 · LOCAL REFERENCE FIXTURE
Motion มีไว้ช่วยอธิบายว่าสถานะเปลี่ยนอย่างไร ไม่ใช่ทำหน้าให้ดูคึกคักMotion explains a state change—it does not manufacture energy.
Answers and evidence stay immediate. Supporting approach motion may replay on viewport re-entry, never while stationary; reduced motion, no JavaScript and runtime failure expose the final state immediately. Supporting content on this guide is static; the motion lab runs on request.
Canonical motion tokens และหน้าที่Canonical motion tokens and jobs
Role / หน้าที่Role
เวลาTime
ใช้เมื่อUse
Feedback
120ms
รับรู้การกดPress acknowledgement
State
200ms
เปลี่ยนสิ่งที่เลือก สถานะ หรือ receiptSelected, status, or receipt change
ลองดูว่า motion ช่วยเล่าการเปลี่ยนสถานะอย่างไรTry the semantic motion sequence
landometer-design-system@0.9.7
คำตอบหลักเห็นได้ทันทีThe primary answer is immediate.
conceptual reference
บริบท แหล่งข้อมูล และข้อจำกัดมีไว้ช่วยอธิบายคำตอบ ไม่ใช่ซ่อนคำตอบไว้รอ animationContext, source, and limitation clarify the answer; they never hide it behind animation.
One page state has one primary CTA. Use links for navigation/download and buttons for state change. A toast or changed label never proves authoritative completion.
CTA contract ที่ต้องออกแบบและทดสอบพร้อมกันCTA contract fields designed and tested together
ลองใหม่ ใช้ทางอื่น ยกเลิก หรือแก้ไขRetry, alternative, revoke, or correction
LOCAL-ONLY · DETERMINISTIC CTA PROOF
ลอง CTA ตั้งแต่ยังขาดเงื่อนไข ไปจนถึง local receipt และการแก้เมื่อทำต่อไม่ได้Exercise the contract from missing requirement to local receipt and recovery.
ยังขาดเงื่อนไข: ตรวจ evidence boundary ก่อนสร้าง receiptMissing requirement: review the evidence boundary before creating a receipt.
ยังไม่มีการทำงาน · ไม่มีการส่ง บันทึก หรือติดต่อระบบภายนอกNo action yet · nothing is sent, saved, or delivered externally.
AHA-01 · LEARN-01 · HOOK WITHOUT DARK PATTERNS
ออกแบบให้คนได้คุณค่า กลับมาเพราะอยากไปต่อ และหยุดได้เมื่อพอแล้วTest the value loop against AHA-01, LEARN-01, and the clean-completion contract.
วงจรคุณค่าที่คนเลือกได้Ethical success loop
คนเป็นคนเริ่มUser-owned triggerเริ่มจากงาน คำถาม สถานที่ หรือการตัดสินใจจริงBegin with a real task, question, place, or decision.
เริ่มด้วยสิ่งเล็กที่สุดที่ช่วยได้Smallest useful actionพาเข้าใกล้คำตอบ โดยยังไม่ขอให้สร้างบัญชีหรือให้สิทธิ์ที่ไม่จำเป็นMove toward the answer without an unnecessary account or permission ask.
ให้คุณค่าจากเป้าหมายจริงObjective-based rewardให้คำตอบ ความหมาย หลักฐาน และข้อจำกัด ไม่ใช้รางวัลที่คาดเดาไม่ได้มาล่อให้กลับมาReveal answer, meaning, evidence, and limits—not a variable reward.
ไปต่อหรือพอแค่นี้ก็ได้Continue or finish cleanlyมีสิ่งที่ทำต่อแล้วเกิดประโยชน์ หรือออกได้โดยไม่เสียสิ่งที่ได้รับแล้วOffer a useful next action or a penalty-free exit with value retained.
ขอเพิ่มเมื่อคนเห็นคุณค่าแล้วOptional investment after AHAหากจะขอให้บันทึกหรือให้ข้อมูลเพิ่ม ต้องบอกประโยชน์ ขอบเขต ระยะเวลาเก็บ และวิธีแก้ ปิด หรือลบAsk only with a stated benefit, scope, retention, and inspect/correct/disable/delete path.
ส่งต่อคุณค่า ไม่ใช่แค่ปุ่มแชร์Recipient value—not a share button
Source AHAผู้ส่งเข้าใจวัตถุและขอบเขตก่อนThe source user understands the object and boundary first.
Exact-object handoff previewpreview รักษา object/version และ recipient viewThe preview preserves object/version and the intended recipient view.
Delivery receiptการส่งสำเร็จต้องยืนยันจากระบบ authoritative เท่านั้น ตัวอย่าง static นี้ไม่สร้าง receiptAn authoritative system confirms real delivery; this static fixture creates no receipt.
Recipient lands on the same objectปลายทางคง version, source, visibility และ limitation เดิมThe destination preserves version, source, visibility, and limitation.
Recipient AHAผู้รับมาถึง object, source และ limitation เดียวกันThe recipient lands on the same object, source, and limitation.
Recipient useful actionผู้รับทำสิ่งที่ allowed use รองรับจริงThe recipient completes an action supported by the allowed use.
Observed governed outcomeถึงขั้นนี้เท่านั้นจึงอาจอ้าง network outcome ได้Only here may a network outcome be claimed.
ตัวอย่างนี้ไม่ส่งข้อมูลจริง ไม่เก็บ telemetry และไม่อ้าง network effect ของผลิตภัณฑ์ใด: share click ≠ delivery, sent ≠ received, received ≠ understood, handoff ≠ network effectThis fixture sends nothing, records no telemetry, and makes no product network-effect claim: share click ≠ delivery, sent ≠ received, received ≠ understood, handoff ≠ network effect.
CONTEXT-01 · IMPL-SEARCH-EXT-01 · IMPL-AI-EXT-01
พาโจทย์ไปค้นต่อ โดยไม่ทำให้ผลค้นหาดูเหมือนหลักฐานContinue an intent transparently—without presenting discovery as evidence.
One visible intent can continue in two distinct ways: Search helps find source pages; AI Mode helps synthesize and follow up. The query stays inspectable and editable, the current page remains available, and every result stays discovery_only until its sources are opened and reviewed.
ตัวอย่างนี้ดึงมาจากข้อมูลที่ CityMETER เปิดให้ดู ไม่ใช่การยืนยันจากพื้นที่จริง และข้อมูลต้นทางไม่ได้บอกแหล่งอ้างอิงของเหตุการณ์ เราจึงใช้เฉพาะชื่อเหตุการณ์ วันที่ สาเหตุ พื้นที่ และหัวข้อที่กำลังดู ตัวเลขที่ยังไม่แน่ใจว่าครอบคลุมพื้นที่ไหนจะไม่ถูกนำไปค้น ทั้งผล Search และคำตอบ AI ต้องเปิดแหล่งอ้างอิงตรวจให้ครบก่อนใช้This is a public CityMETER record snapshot—not independent ground-truth verification. Because the endpoint exposes no provenance, the query uses event, date, cause, place, and field label; values with unclear scope are omitted. Search results and AI synthesis remain discovery_only.
การค้นต่อภายนอกทั้ง Search และ AI synthesis ไม่ใช่การแชร์และไม่ใช่ network effect หาก query อาจทำให้ข้อมูลส่วนตัวหรือขอบเขตงานหลุดออกไป ให้หยุดแล้วใช้คำค้นทั่วไป หรือคัดลอก query ไปจัดการเองExternal discovery through Search or AI synthesis is neither sharing nor network effect. If the query would expose private data or task scope, stop and use a generic or copied query instead.
06
การปรับใช้ตามผลิตภัณฑ์Product adaptations
ใช้ shared layer ร่วมกัน ส่วนข้อมูล วิธีทำงาน น้ำเสียง และ capability ให้แต่ละผลิตภัณฑ์ดูแลShare the system layer; keep data, method, voice, and capability with the product.4 templates
นี่คือตัวอย่างวิธีปรับใช้ ยังไม่ใช่คำยืนยันว่าฟีเจอร์เหล่านี้เปิดใช้แล้วThese are adaptation templates—not claims of enabled features.
Locale Insight spans Land, Location, and Living at portfolio, methodology, and product-architecture levels. Each product still owns its evidence boundary.
CITYMETER · decision template
CityMETER
เริ่มจากพื้นที่หรือคำถามที่เลือกStart with the selected area or question.
วางชุดข้อมูล แหล่งข้อมูล วันที่ schema/release และขอบเขตไว้ข้างผลKeep dataset, source, date, schema/release, and boundary with the result.
บอกว่าใช้สนับสนุนอะไรได้ และยังสรุปอะไรไม่ได้Name what it supports and what it cannot establish.
จบด้วยสิ่งที่คนกดไปตรวจหลักฐานต่อได้จริงEnd with a genuinely enabled evidence check.
เริ่มจากตัวตนของสถานที่ และคำตอบหนึ่งนาทีที่มีแหล่งอ้างอิงStart with place identity and a sourced one-minute answer.
แยกเรื่องที่ยืนยันแล้วออกจากเรื่องที่ควรตรวจล่าสุดอีกครั้งSeparate verified facts from items that require a live check.
แสดง SourceLedger วันที่ตรวจล่าสุด และสิ่งที่ทำต่อได้หนึ่งอย่างShow SourceLedger, last checked, and one next action.
Charming และความหมาย A/B/C ยังคงเป็น CityWiki-specific จนกว่าจะมี production specCharming and any A/B/C meaning remain CityWiki-specific until governed by a production spec.
CITYCHAT · consent template
CityChat
ขอข้อมูลเท่าที่จำเป็นต่อการทำงานขั้นนี้Ask for the minimum route-safe input.
บอกว่าทำไมจึงขอตำแหน่ง ตัวตน สื่อ หรือสิทธิ์ติดต่อExplain location, identity, media, and contact permission.
ให้ receipt และสถานะที่กลับมาทำต่อได้ภายหลังProvide a receipt and resumable status.
เปิดให้แชร์สู่สาธารณะเฉพาะสถานะที่เจ้าของผลิตภัณฑ์ยืนยันแล้วว่าปลอดภัยEnable public sharing only for product-owner-confirmed public-safe states.
IJJI · progress template
ijji
เริ่มจากบริบทธุรกิจท้องถิ่นที่จำเป็นและสมมติฐานที่มองเห็นได้Start with essential local-business context and visible assumptions.
บอกว่าการลงมือทำสำคัญอย่างไร พร้อมทิศทาง 7 วันที่น่าเชื่อถือExplain why action matters with a credible seven-day direction.
ให้ receipt และจุดกลับมาเช็กผล โดยไม่นำข้อมูลไปเรียนรู้ลับหลังProvide a receipt and check-in without hidden learning.
ยอดขาย ต้นทุน พนักงาน และข้อมูลการแข่งขันส่วนตัวยังคงเป็น private/product-specificPrivate sales, cost, staffing, and competitive data remain private and product-specific.
07
เอกสารและไฟล์อ้างอิงResources & release records
ไฟล์กติกาปัจจุบันสำหรับ Project Source คู่มือและ assets พร้อมบันทึก release และเอกสารเดิมCurrent Project Source rules, guide and assets, release records, and preserved history.ปัจจุบัน + ประวัติCurrent + history
ดาวน์โหลดคู่มือ และตรวจบันทึกของ release ได้จากที่เดียวกันKeep the readable master and release records together.
Current work uses the owner-approved v0.9.7-owner.1 distribution, color-srgb-10, brand guidance and ready assets. The complete 0.9.1 records remain below as history and foundations, not current color authority. Page examples are not city or product evidence.
CURRENT · DS 0.9.7 · ONE FILE
Normative v0.9.7 ครบในไฟล์เดียวComplete v0.9.7 normative in one file
โครงเอกสาร 0.9.1 ที่อัปเดตทุกหมวดเป็น 0.9.7 รวมกฎแบรนด์ ภาพ motion ส่วนประกอบ และข้อมูลสำหรับเครื่องไว้ด้วยกัน เลือกไฟล์เดียวแล้วใช้ได้ทั้งคนและ AIThe 0.9.1 document structure, updated throughout to 0.9.7. Brand, visuals, motion, components and exact machine data are consolidated for people and AI.
สี wordmark และพื้นหลังโลโก้Wordmark colour and logo backgrounds
Wordmark เปลี่ยนสีได้ รวมถึงตัวอักษรละสี โดยคงรูปทรงและสัดส่วน สีเทาเป็นตัวเลือก โลโก้ใช้ได้ทั้งพื้นสว่างและมืดเมื่อชื่อและสัญลักษณ์เห็นชัด ปัญหาบน Brand Blue ให้พิจารณาเฉพาะคู่นั้น กฎ full/quiet ของ motif ไม่ใช่ข้อห้ามพื้นมืดของโลโก้ทางการWordmark colours may change, including per-letter colours, while preserving letterforms and proportions. Gray is optional. Official logos may appear on readable light or dark backgrounds. Assess Brand Blue for the actual pairing; motif full/quiet rules do not ban official logos on dark backgrounds.
คู่มือและเสียงแบรนด์ปัจจุบันCurrent guide and brand voice
เสียงแบรนด์ ภาพ และรายละเอียดที่สืบทอดรวมอยู่ใน normative ปัจจุบันแล้วBrand voice, visuals and retained detail are integrated into the current normative.
The v0.9.0 proposal folds sixteen owner amendments into one revision. Every v0.8.9 rule ID is retained and the only rename is [SEARCH-01] → [INTERNAL-SEARCH-01]. It adds the Build Kit, the pass/fail self-check, two-shape action geometry, the Riddim motion signature, dark-pattern-free growth rules, and retires the purple and brown tones from the usable set.
ไฟล์เดียวจบ ฝัง font และภาพไว้ครบ พร้อมล็อก Color Set color-srgb-05 สำหรับตรวจงานข้ามเครื่องและส่งต่อโดยไม่สลับไปคนละ palette ตาม cache ของหน้า latest
One self-contained file with fonts, images, and Color Set color-srgb-05 pinned for cross-device review and handoff—without drifting to a different palette through a cached latest alias.
A concise route to sources, release status, and evidence boundaries. It is not a ranking signal, access control, conformance claim, or permission for an agent to act.
SEO และ AI-friendly ต้องพร้อมทั้งชุด ไม่ใช่ติ๊กช่องเดียวSEO and AI friendliness are not one checkbox—they are aligned release states.
หน้านี้เป็น Design System reference ที่เผยผ่าน GitHub Pages และคง noindex ตามขอบเขตการเผยแพร่ปัจจุบัน เนื้อหาหลักอยู่ใน initial HTML ลิงก์ถึงได้ และตัวอย่างทุกชิ้นบอกขอบเขตว่าเป็นแนวคิด ไม่ใช่หลักฐานจากผลิตภัณฑ์
This Design System reference is published through GitHub Pages and remains noindex under its current delivery boundary. Primary content is present in initial HTML, directly linkable, and every specimen states that it is conceptual—not product evidence.
