The complete 0.9.5 guide and rules continue here, with fourteen sequential families built from three distinct hue anchors. Light and dark tables share each metric’s meaning and class intervals.
The 0.9.5 voice, visuals, fonts, identity, motif/animation, categorical colors, diverging scales and atmosphere recipes remain. Only the fourteen sequential families gain a distinct midpoint hue while preserving monotonic lightness.
ตัวอย่างเชิงแนวคิดทั้งหมดด้านล่าง · ไม่ใช่ข้อมูล ความสามารถ หรือผลลัพธ์ของผลิตภัณฑ์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
หนึ่งวิธีคิด หลายขอบเขตความจริง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-09 โดยปรับเฉพาะสเกลทางเดียว 14 ชุดจาก 0.9.5Light/dark surfaces, atmosphere, type roles, spacing, semantic states, and truth-before-treatment remain unchanged. This release introduces color-srgb-09, changing only the fourteen sequential families from 0.9.5.
สิ่งใหม่ทำงานร่วมกับหลักเดิมNew assets, the same complete foundations
สเกลทางเดียว 14 ชุดใช้สีหัว–กลาง–ท้ายต่างเฉดใน Color Atlas; ธีมสว่างเริ่มด้วยครีม #F2F1DF ส่วนธีมมืดใช้ช่วงสว่างของตน สเกลสองทาง หมวดหมู่ แบรนด์ ภาษา ภาพ และ motif/animation สืบทอดจาก 0.9.5Fourteen sequential families use distinct start, midpoint and end hues. Light themes begin with cream #F2F1DF; dark themes retain their own luminance range. Diverging scales, categories, brand, voice, visuals and motif/animation are retained from 0.9.5.
ตัวเลขกับสถานะต้องตรงกันทั้งคนและเครื่องมือ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.
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.6 ที่เจ้าของอนุมัติ · 1 ต.ค. 2569 · ไม่มีลายเซ็นดิจิทัลใหม่Owner-approved 0.9.6 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-09.
เปิดดูตัวอย่างรากฐานที่คงไว้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-09 from v0.9.6-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.6 ต้องอ่านจากบันทึกของรุ่นปัจจุบันThe following table is retained evidence from the 0.9.1 page, showing how a checklist is recorded. Current package and 0.9.6 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.6-owner.1 และใช้สี color-srgb-09
This section preserves predecessor examples so retained foundations remain visible. Current implementation authority is Landometer Design System 0.9.6-owner.1.
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.6
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/5/7/9 ระดับหรือ LUT 41 สีที่ให้มาครบEvery density denominator has a distinct warm direction: area orange, per-capita rose, household scarlet and built-area gold. Use exact 3/5/7/9 classes or the complete 41-sample LUT.
No dataอยู่นอก ramp และมีคำกำกับoutside the ramp, directly labelledZeroเป็นข้อเท็จจริงคนละอย่างa different fact
ตัวอย่างนี้แสดงครบ 6 sequential และ 3 diverging families ทั้ง 5/7/9 ชั้น โดยอ่านค่าธีมสว่างและมืดจาก LUT/scaleVersion ที่ generate ไว้ล่วงหน้า—ไม่ผสมสีตอน runtimeThis fixture shows all six sequential and three diverging families at 5/7/9 classes, reading exact light/dark values from pre-generated LUTs and scaleVersions—never 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.6-owner.1 · color-srgb-09 คู่มือ 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.6-owner.1 · ui-20261001-lds096-r1 ลิงก์นี้ล็อกทั้งชุดสีและหน้าตาที่กำลังตรวจThis URL pins both the palette and the interface under review.
ตรวจ Build ID ก่อนดูสีCheck Build ID before colordata-color-registry="color-srgb-09" ถ้า 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-09.scales.json ของ v0.9.6-owner.1 ใช้เป็นชุดสีที่ตรวจสอบได้ ไม่ใช่หลักฐานของผลิตภัณฑ์ งานวิเคราะห์จริงต้อง bind schema, release, unit และ grain ที่เข้ากันก่อนใช้Current LUTs come from color-srgb-09.scales.json in v0.9.6-owner.1. They are exact color assets, not product evidence. Real analysis must bind compatible schema, release, unit and grain before use.
สีแบรนด์ สีสร้างพลัง และสีที่อยู่ในไฟล์โลโก้เท่านั้น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
แสดงเพื่ออ้างอิงไฟล์ asset เท่านั้น ห้ามสร้างใหม่ recolor หรือยกไปเป็น UI token แม้รหัสสีจะตรงกับสีอื่นAsset reference only. Never rebuild, recolor, or promote these values into UI tokens—even when a hex value matches another role.
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.6
สีหมวดหมู่ ชุดข้อมูล และบรรยากาศครบตามรุ่นปัจจุบันCurrent categorical colors, analytical families and atmospheres
สีชุด 0.9.6 ใช้งานอยู่ในคู่มือฉบับเต็มนี้ เลือกธีม หมวดหมู่ และตัวหารเพื่อดูค่าจริงThe approved 0.9.6 colors are part of this complete guide. Choose theme, category and denominator to inspect exact values.
ตารางและตัวอย่างด้านบนอ่านจากชุดเดียวกับไฟล์สำหรับเครื่องมือ ระบุ 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.6
คำตอบหลักเห็นได้ทันที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.6-owner.1 distribution, color-srgb-09, 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.6 · ONE FILE
Normative v0.9.6 ครบในไฟล์เดียวComplete v0.9.6 normative in one file
โครงเอกสาร 0.9.1 ที่อัปเดตทุกหมวดเป็น 0.9.6 รวมกฎแบรนด์ ภาพ motion ส่วนประกอบ และข้อมูลสำหรับเครื่องไว้ด้วยกัน เลือกไฟล์เดียวแล้วใช้ได้ทั้งคนและ AIThe 0.9.1 document structure, updated throughout to 0.9.6. 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.
