The proven color, atmosphere, type, and layout foundations remain. v0.9.1 makes navigation, actions, motion, evidence, and cross-format handoff easier to apply consistently.
The proven visual foundations remain. This revision turns long guidance into visible structures, states, and outcomes, with detail available when it is useful.
ตัวอย่างเชิงแนวคิดทั้งหมดด้านล่าง · ไม่ใช่ข้อมูล ความสามารถ หรือผลลัพธ์ของผลิตภัณฑ์All fixtures below are conceptual · not product data, capability, or outcome evidence
คงไว้Kept
ความจริงก่อนการตกแต่งTruth before treatment
color-srgb-05 · atmosphere · type roles · spacing · 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 · once only · reduced motion and observer failure = final state
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 ยังเป็นแกนเดิม ไม่มีการ mint Color Set ใหม่ใน UI revision นี้Light/dark surfaces, atmosphere, type roles, spacing, semantic states, and truth-before-treatment remain unchanged. This UI revision does not mint a new Color Set.
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.
ตัวอย่างเชิงแนวคิดใน 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.
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.
The media ladder — video > image > icon > text — folds overflow prose into expanders exactly like this panel.
ใบเสร็จรุ่นอ่านได้จากหน้า และสีชุดใหม่A receipt any page can answer, and the purged palette[PUB-01] [VIS-04]
ทุกหน้า publish ตอบได้ว่า “นี่ build ไหน” จาก meta ในตัวเอง — ค่าด้านล่างอ่านสดจากหน้านี้ ส่วน Color Set color-srgb-05 คงค่า normative เดิมจาก v0.9.0-r7
Every published page can answer “which build is this?” from its own metadata. The readout below is live, while Color Set color-srgb-05 retains its normative values from v0.9.0-r7.
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.
การชวนเพื่อนเริ่มจาก 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.1-r8
This section preserves predecessor examples so retained foundations remain visible. Current implementation authority is Landometer Design System 0.9.1-r8.
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.1
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+
DATAVIZ-01 · 9 FAMILIES
เห็นทุกชุด ก่อนเลือกให้ตรงคำถามSee every family, then match it to the question
แต่ละชุดแสดง 5, 7 และ 9 ชั้นจาก LUT เดียวกัน สีบนจอจะสลับตามธีมที่กำลังใช้Each family shows 5, 7, and 9 classes from one LUT. The visible cells follow the active theme.
LIGHTDARK
ANALYTICAL REFERENCE · NOT PRODUCT EVIDENCE
ชุดสีนี้สืบทอดจาก scales.json v0.8.6 เข้า v0.9.1 เพื่อใช้เรียนรู้และตรวจแบบ ไม่ใช่หลักฐานหรือ dataviz package ของผลิตภัณฑ์These families are carried from scales.json v0.8.6 into v0.9.1 for teaching and review. They are not product evidence or a product dataviz package.
สองทิศทางรอบจุดกลาง · DivergingTwo directions around a midpoint · Diverging3 families
สมดุลBalancebalance · diverging
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
การเปลี่ยนแปลงDeltadelta · diverging
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
ทางเลือกที่ต้องแลกTrade-offtradeoff · diverging
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
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 onlycolor-delivery.v0.9.1.json · color-srgb-05 retained root, standalone และ Atlas ต้องอ้าง token/gradient ชุดเดียวกันRoot, standalone, and Atlas must resolve the same token and gradient set.
แชร์ไฟล์ที่ล็อก Color Set และ UI build แล้วShare the pinned Color Set and UI buildlandometer-design-system-v0.9.1-standalone.color-srgb-05.ui-20260902-08.html ลิงก์นี้ล็อกทั้งชุดสีและหน้าตาที่กำลังตรวจThis URL pins both the palette and the interface under review.
ตรวจ Build ID ก่อนดูสีCheck Build ID before colordata-color-registry="color-srgb-05" ถ้า 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 ด้านล่างอ่านจาก scales.json ซึ่งเป็น reference fixture ที่สืบทอดเข้า v0.9.1 ใช้เรียนรู้ ตรวจแบบ และเทียบค่าล่วงหน้าได้ แต่ไม่ใช่หลักฐานหรือ dataviz package ของผลิตภัณฑ์ งานวิเคราะห์จริงต้อง bind schema, release, unit และ grain ที่เข้ากันก่อนใช้The LUTs below come from the scales.json reference fixture carried into v0.9.1. Use them to learn, review, and compare—not as product evidence or a product dataviz package. 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 identity—พื้นที่เฉพาะผลิตภัณฑ์Product identity—product scope only
ตัวอย่างเหล่านี้บอกว่าอยู่ในผลิตภัณฑ์ใด ห้ามนำไปเข้ารหัสค่า สถานะ หรือเปรียบเทียบข้ามผลิตภัณฑ์These specimens identify product scope. Never use them to encode magnitude, state, or cross-product comparison.
CityMETERproduct.citymeter.gradient
Light#12669B → #36BCE4แสดงบนพื้น Light เสมอ ไม่ตามธีมของหน้านี้always shown on the light surface, not this page's themeDark#4C99D5 → #59C7E8แสดงบนพื้น Dark เสมอ ไม่ตามธีมของหน้านี้always shown on the dark surface, not this page's theme
ใช้บอกอัตลักษณ์ของผลิตภัณฑ์นี้เท่านั้น ห้ามใช้แทนข้อมูลหรือสถานะProduct identity only—never data magnitude or semantic state
Light: ห้ามวางตัวอักษรเปล่า ใช้ opaque panel/scrim · Dark: mineral ≥5.22:1Light: no bare foreground; use an opaque panel/scrim · Dark: mineral ≥5.22:1
CityWikiproduct.citywiki.gradient
Light#F7CBC7 0% · #FBD1B6 50% · #F1E0B4 100% · alias → cultivate.mistแสดงบนพื้น Light เสมอ ไม่ตามธีมของหน้านี้always shown on the light surface, not this page's themeDark#F2F1DF → #E0B443แสดงบนพื้น Dark เสมอ ไม่ตามธีมของหน้านี้always shown on the dark surface, not this page's theme
ใช้บอกอัตลักษณ์ของผลิตภัณฑ์นี้เท่านั้น ห้ามใช้แทนข้อมูลหรือสถานะProduct identity only—never data magnitude or semantic state
Light: หมึก mineral ≥10.94:1 · ห้ามใช้ตัวอักษรขาวเปล่า · Dark: mineral ≥8.24:1Light: mineral ink ≥10.94:1, bare white prohibited · Dark: mineral ≥8.24:1
CityChatproduct.citychat.gradient
Light#007A58 → #007E79แสดงบนพื้น Light เสมอ ไม่ตามธีมของหน้านี้always shown on the light surface, not this page's themeDark#3BD19B → #3BD3CBแสดงบนพื้น Dark เสมอ ไม่ตามธีมของหน้านี้always shown on the dark surface, not this page's theme
ใช้บอกอัตลักษณ์ของผลิตภัณฑ์นี้เท่านั้น ห้ามใช้แทนข้อมูลหรือสถานะProduct identity only—never data magnitude or semantic state
Light: white ≥4.93:1 · Dark: mineral ≥8.24:1Light: white ≥4.93:1 · Dark: mineral ≥8.24:1
ijjiproduct.ijji.gradient
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 · VIVID CIVIC 10
สีหมวดหมู่สิบคู่ พร้อมรูปทรงและลายประจำตัวTen categorical pairs with stable shape and pattern cues
สีอย่างเดียวหยุดที่ 6 หมวด ตั้งแต่ 7–10 ต้องใช้รูปทรงหรือลายร่วมด้วย และมากกว่า 10 ให้จัดกลุ่ม กรอง ทำ small multiples หรือตารางColor-only identification stops at six. From 7–10, add shape or pattern; above ten, group, filter, use small multiples, or use a table.
แต่ละช่องเป็นสีที่ generate ไว้ล่วงหน้า ไม่มี CSS gradient หรือการผสมสีตอน runtime การเลือก domain, threshold และความหมายของปลาย scale ยังเป็นหน้าที่ของงานวิเคราะห์ที่นำไปใช้Every cell is pre-generated: no CSS gradient and no runtime color mixing. The consuming analysis still owns domain, thresholds, and endpoint meaning.
สมดุลBalancebalance · diverging · lightlightด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#C52C00#F2F1DF#186A9E
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
สมดุลBalancebalance · diverging · darkdarkด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#FF8A4C#7C8A84#4FAFE0
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
การเปลี่ยนแปลงDeltadelta · diverging · lightlightด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#B74436#F2F1DF#007C78
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
การเปลี่ยนแปลงDeltadelta · diverging · darkdarkด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#F28575#7C8A84#55C8BC
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
ทางเลือกที่ต้องแลกTrade-offtradeoff · diverging · lightlightด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#B23F74#F2F1DF#007E91
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
ทางเลือกที่ต้องแลกTrade-offtradeoff · diverging · darkdarkด้าน A · ค่ากลาง · ด้าน BSide A · neutral · side B
#F06FA6#7C8A84#61C2D3
41-stop LUT0 → 40 · OKLab · build-time
02040
5ชั้นclasses
7ชั้นclasses
9ชั้นclasses
No data
Light#D5DAD6Dark#404844
อยู่นอก ramp มีลายทแยงและคำกำกับเสมอ ไม่ใช่ศูนย์Outside every ramp; pair with a diagonal pattern and a direct label. Never zero.
Zero
Light#7D877FDark#93A398
ใช้เส้น outline เฉพาะเมื่อศูนย์เป็นข้อเท็จจริงที่ต้องแยกUse the outline only when zero is a distinct fact.
07 · MAP + INTERFACE LAYERS
สถานะบนแผนที่ต้องเห็นทั้งสี เส้น รูปทรง หรือคำกำกับ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.
The object and answer remain immediate. Motion may then clarify status, meaning, and the next action once. Reduced-motion and no-JavaScript states expose the complete final meaning immediately.
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.1
คำตอบหลักเห็นได้ทันที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
คู่มือฉบับอ่านง่าย normative patch, skill ใช้ซ้ำ บันทึกการส่งมอบ SEO gate และตัวช่วยให้เครื่องค้นพบHuman-readable master, normative patch, reusable skill, release records, SEO gate, and machine-discovery aid.10 records + gates
ดาวน์โหลดคู่มือ และตรวจบันทึกของ release ได้จากที่เดียวกันKeep the readable master and release records together.
The primary download is the owner-approved normative release 0.9.1-r8 dated 1 September 2026. This page retains color-srgb-05 and the proven foundations while making navigation, CTA, motion, icon, evidence parity, and cross-format production tangible. Its examples are conceptual references—not city or product evidence.
OWNER-APPROVED · MARKDOWN · 0.9.1-R8
Design System authoring masterDesign System authoring master
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.
