THE MOTIF STUDIO · EXPLORE / PLAY / CREATE

ให้ภาพเล่าเรื่อง
ชวนคนลงมือ

เติมจังหวะให้เรื่องที่คุณอยากเล่า ลองเล่นกับ Landometer, ijji และ CityChat แล้วหยิบลายที่ใช่ไปใช้ในงานต่อได้เลย

Dial motif: หน้าปัดสี่จังหวะของ Landometer
เรื่องเดียวกัน เล่าได้หลายจังหวะ เริ่มจากสิ่งที่อยากให้คนทำต่อ
3 creative voicesLandometer · ijji · CityChat
Try it firstเลือกงาน เล่น motion ทดลองพื้นสี
Make it yoursSVG · PNG · code · team brief
One shared studioเรียนรู้ ทดลอง และส่งต่อในที่เดียว

01 / FIND YOUR RHYTHM

วันนี้ อยากให้ภาพช่วยอะไร?

เลือกสักงาน แล้วดูว่าลายกับข้อความช่วยกันเล่าเรื่องอย่างไร

Landometer · sharedตัวอย่างแนวคิด
มองเรื่องเดิม ในมุมใหม่

ทุกพื้นที่ มีเรื่องให้ค้นพบ

เริ่มจากบริบท แล้วค่อย ๆ เปิดมุมมองไปด้วยกัน

เริ่มสำรวจ →
Landometer Dial
Dial · เริ่มด้วยความอยากรู้

จังหวะเปิดที่ช่วยพาสายตาไปยังเรื่องใหม่ ข้อความยังเป็นผู้บอกว่าเรากำลังสำรวจอะไร

สลับดูได้เลย — ข้อความและความหมายยังเหมือนเดิม ลายช่วยเน้นจังหวะ ไม่ได้เพิ่มข้อมูลหรือผลลัพธ์

Start with your job

เริ่มจากสิ่งที่คุณต้องส่ง

ทุกคนใช้ asset ชุดเดียวกัน แต่ตัดสินใจคนละจุด เลือกทางเข้าที่ใกล้งานของคุณที่สุด แล้วกลับมาดู version และข้อจำกัดก่อนส่งจริง

Choose the brand layer

สามเสียงที่มีบุคลิกต่างกัน

Locale Insight ในชั้น portfolio, methodology และ product architecture ต้องเป็นกลางต่อผลิตภัณฑ์ ครอบคลุม Land, Location และ Living ส่วนตัวอย่างของ ijji อยู่เฉพาะในขอบเขต ijji เท่านั้น

เจ้าของอนุมัติให้เผยแพร่ Owner-approved overlay Landometer shared
Landometer logo full

Landometer

ลายชั้นร่วมสำหรับจัดจังหวะ เปิดเรื่อง เปลี่ยนผ่าน และปิดเรื่อง โดยไม่ผูกกับสมมติฐานของผลิตภัณฑ์ เมือง หรืออุตสาหกรรมใดอุตสาหกรรมหนึ่ง

  • ใช้ประกอบเนื้อหา ไม่แทนหลักฐานหรือกราฟ
  • animated logo full เล่นและวนอัตโนมัติในหน้าเว็บนี้
  • อ้าง token จาก LDS 0.9.1 แต่เป็น asset overlay แยก
เลือกแล้ว + เจ้าของอนุมัติแล้ว ijji product-specific ไม่อยู่ใน canonical Add-on 0.5.3
ijji — Your business buddy around the corner

ijji

ลายสี่หน่วยของ ijji สำหรับบริบทของ ijji เท่านั้น ทั้ง asset, ความหมาย และการใช้เป็นสถานะ ห้ามเหมารวมไปเป็น capability หรือข้อเท็จจริงของ Landometer

  • ใช้ selected 3: graph-b, rings-c, rotate-b
  • animated logo full เล่นซ้ำได้; pending motif ยังสื่อสถานะของ ijji
  • ห้ามใช้เป็นโลโก้ ตัวเลขยอดขาย หรือ data cue
CityChat · เสียงบ้านเรา

CITYCHAT / A PLACE FOR EVERY VOICE

จากเสียงหนึ่ง สู่เรื่องของเรา

เสียงบ้านเรา · น่าอยู่ น่าเที่ยว น่าค้าขาย · เสียงเราอยู่ตรงนี้ เลือกภาพชวนคุยให้เข้ากับเรื่องของ CityChat

ลองชุด CityChat →

กติกาข้ามชั้น: motif ไม่ข้ามผลิตภัณฑ์โดยอัตโนมัติ การนำ ijji ไปใช้เป็นลายกลางต้องมี owner decision, revision และ asset record ใหม่ แม้ไฟล์จะดาวน์โหลดได้จากที่เดียวกัน

Four decisions

ตอบสี่ข้อ แล้วไฟล์ที่ควรใช้จะชัดเอง

อย่าเริ่มจาก “ลายไหนสวย” ให้เริ่มจากเจ้าของลาย งานที่ลายต้องทำ ช่องทาง และเหตุผลที่ motion จำเป็น

01 · LAYER

ของใคร?

Landometer shared, ijji หรือ CityChat

02 · JOB

ช่วยอะไร?

orientation, transition, closure หรือ real pending state

03 · FORMAT

ส่งที่ไหน?

web, deck, 1080 social, document/PDF หรือ owner extension

04 · MODE

ขยับอย่างไร?

หน้าเว็บนี้เล่นซ้ำอัตโนมัติ และคง final fallback ให้ทุกชิ้น

Intent → AHA → next action

เห็นก่อนว่าใช้แล้วงานดีขึ้นตรงไหน

ตัวอย่างทั้งหมดเป็น fixture เพื่อสอนวิธีใช้ ไม่ใช่หน้าจอผลิตภัณฑ์จริง ข้อมูลจริง หรือหลักฐานผลลัพธ์

Section intro
Rings motif วางข้างเนื้อหาส่วนเปิดเรื่อง
01 · ใช้ได้Landometer shared

จัดจังหวะหน้าเว็บ

วาง full motif ข้างข้อความในจังหวะสำคัญ และใช้ quiet motif กับหัวข้อรอง ผู้อ่านเห็นลำดับโดยลายไม่ทับเนื้อหา ไม่แย่ง CTA และไม่กลายเป็นข้อมูล

Layers quiet motif ในสไลด์
Cultivate quiet motif ในเฟรมวิดีโอ
02 · ใช้ได้Auto replay

เล่าเรื่องเดียวข้ามสื่อ

ดู motion ของ motif ชุดเดียวกันในสัดส่วน deck, social และ video โดยคง geometry สี และจังหวะต้นฉบับไว้ครบ

ijji rotate-b motif สำหรับตัวอย่างสถานะกำลังทำงาน

ijji กำลังเตรียมคำตอบ

Live motion · auto replay

03 · ใช้ได้ijji onlyReal state only

แสดงงานที่กำลังรอจริง

เริ่มเมื่อ request เริ่ม แสดงข้อความกับเวลาจริง มีปุ่มยกเลิก และหยุดเมื่อสำเร็จ ล้มเหลว ยกเลิก หรือ timeout ตัว motif ถูกซ่อนจาก assistive technology เพราะข้อความเป็นผู้บอกสถานะ

Rejected

ยอดขายเติบโต

+42%
ตัวอย่างที่ไม่ผ่าน: graph-b ถูกใช้แทนหลักฐานยอดขาย

Motif ไม่ได้พิสูจน์ตัวเลขนี้

04 · ไม่ผ่านCross-layer misuse

อย่าใช้ ijji เป็นโลโก้กลางหรือหลักฐานการเติบโต

วิธีแก้: คืน identity ที่ถูกต้อง แสดง metric พร้อม source, date และ schema/release ที่เทียบกันได้ แล้วใช้ Landometer motif เป็นเพียงกรอบประกอบ—หรือเก็บ ijji motif ไว้ในสถานะจริงของ ijji เท่านั้น

Contrast playground · 20 × 20

เปลี่ยนพื้น แล้วเห็นอีกมุม

ลายเดิม พื้นใหม่ อารมณ์ก็เปลี่ยน ลองจับคู่ 20 ชิ้นกับ 20 พื้น แล้วพาคู่ที่ใช่ไปต่อในงานของคุณ

dial · quiet

dial · quietsurface.canvas · #F6F7F3

ตัวอย่างส่วนอ่อนสุด
1.23 : 1
ตัวอย่างส่วนเด่นสุด
1.62 : 1

บางส่วนยังเบาอยู่

ตัวอย่างสีที่คำนวณ: #59D2FE / Alpha จากไฟล์ต้นฉบับ: 0.4–1

เป็นช่วงค่าของสีและ alpha ที่ระบุในชุดส่งต่อ ไม่ใช่ทุกพิกเซลหรือผลรับรอง accessibility ของทั้งชิ้น

ดาวน์โหลดชิ้นนี้

ตัวเลขนี้บอกอะไร และยังไม่ได้บอกอะไร

เราผสมสีตัวอย่างกับพื้นตาม alpha ที่ระบุ แล้วคำนวณอัตราส่วน luminance จากสี sRGB แสดงทั้งค่าน้อยสุดและมากสุดของชุดตัวอย่าง ไม่สรุปว่าทั้งภาพผ่านจากส่วนที่ชัดที่สุด โลโก้สีและ CityChat มีสีอื่นนอกเหนือจากตัวอย่างนี้ ขอบที่มี anti-alias และภาพซ้อนจริงยังไม่ได้วัด

พื้น gradient แสดงเป็น stop สีทึบหนึ่งจุด จึงต้องตรวจทุก stop และตำแหน่งใช้งานจริง ส่วน overlay.glass เป็นค่าประมาณที่ขึ้นกับพื้นด้านหลัง ขนาดที่ขยายช่วยให้สังเกตได้ แต่ไม่เปลี่ยน contrast ratio ลายตกแต่งควรมี alt="" ส่วนข้อมูลสำคัญต้องมีข้อความและตรวจองค์ประกอบที่สื่อความหมายแยกต่างหาก

Five small moves

ถ้ายังไม่ลงตัว ลองทีละก้าว

ให้พื้น พื้นที่ว่าง และการเลือกไฟล์ช่วยเล่าเรื่อง โดยเก็บลายต้นฉบับไว้ครบ

  1. L1

    วัดกับงานจริง

    ดูทั้งส่วนเด่นและส่วนอ่อน บนพื้นและขนาดที่จะส่ง ตรวจทุก stop เมื่อใช้ gradient

  2. L2

    ลองพื้นอีกแบบ

    เลือกพื้นในชุดที่เหมาะกับบริบท แล้ววัดอีกครั้ง ไม่เติมแผ่นรองหรือสีใหม่เพื่อกลบปัญหา

  3. L3

    สลับไฟล์ที่มีให้

    ลอง full / quiet, ijji ink / mint หรือ CityChat light / dark โลโก้เลือก rendition โดยคงสีต้นฉบับ

  4. L4

    ให้พื้นที่กับลาย

    ขยายตามความเหมาะสม แยกจากคอลัมน์ข้อความ หรือเพิ่มพื้นที่ว่าง ขนาดไม่ทำให้ค่า contrast สูงขึ้น

  5. L5

    เว้นลาย ก็เล่าได้

    ถอดลายออกได้เสมอ ข้อความ ปุ่ม และสถานะจริงยังต้องเล่าเรื่องได้ครบด้วยตัวเอง

แนวทางจากชุดส่งต่อ: ใช้ช่วยตัดสินใจเรื่องการวาง ไม่ใช่การประกาศกติกา Design System ใหม่ ตรวจไฟล์จริงและบริบทปลายทางทุกครั้ง · อ่านไฟล์อ้างอิงต้นฉบับ

Official identity · 12 original files

โลโก้ที่ใช่ บนพื้นของคุณ

การตรวจคู่นี้ใช้กับ PNG ต้นฉบับทั้ง 12 ไฟล์ ระบบจะไม่แสดงคู่ที่โลโก้กลืนพื้น ตรวจขนาด พื้นที่ว่าง และบทบาทที่อนุญาตก่อนใช้จริง

Wordmark เปลี่ยนสีได้ รวมถึงคนละสีในแต่ละตัวอักษร สีเทาเดิมเลือกเพื่อความสะดวกบนพื้นสว่างและมืด ไม่ใช่สีบังคับของอัตลักษณ์ ตรวจให้ชื่อและสัญลักษณ์อ่านได้ครบบนพื้นและขนาดที่ใช้จริง

Landometer · Symbol color
Symbol · color · 1601 × 1601 pxcanvas · #F6F7F3

PNG ต้นฉบับนี้ใช้บน Canvas, Dark หรือ Beige ได้ หมุดสีน้ำเงินกลืนเฉพาะกับ Brand Blue ส่วน wordmark เปลี่ยนสีได้

ดาวน์โหลด PNG นี้

เปิดไฟล์ identity ทั้ง 12 แบบ

ไฟล์ดาวน์โหลดทั้งหมดคงไบต์เดิมจากชุดแนบ การมีไฟล์ให้ดาวน์โหลดไม่ได้ยืนยันว่าใช้ได้กับทุกพื้นหรือทุกบทบาท รุ่น cream ยังเป็น #EFEFD0 · การตรวจนี้ใช้กติกาโลโก้ LDS 0.9.7 §4.3 LOGO-01-B แยกจากกติกา motif full/quiet

Verified asset paths

คลัง Asset พร้อม preview, code และไฟล์ภาพนิ่ง

เลือกแบรนด์หรือพิมพ์งานที่อยากทำ เปิดดู motion แล้วดาวน์โหลด SVG, PNG หรือคัดลอกโค้ดได้ทันที ไฟล์ PNG สร้างในเครื่องคุณ

สิทธิ์การใช้: ทุกคนเปิดดูและดาวน์โหลดไฟล์ได้ การนำ asset ไปใช้ต่อสงวนสำหรับทีม ผู้ร่วมงาน และ AI/agent workflows ที่ได้รับอนุญาตจากเจ้าของ เว้นแต่มี license หรือ owner decision แยกต่างหาก

Landometer · shared layer

6 kinds · full + quiet

โหมดดู animation: เปิด Preview แล้ว full + quiet เล่นทันที โดย motif ทั่วไปวนทุก 3 วินาที ส่วน Logo assembly v3 เล่นครบทั้งคู่ภายใน 3.36 วินาที ค้างท่าสุดท้าย แล้ววนใหม่ทุก 6 วินาที ทุก cycle ใช้จังหวะ สี geometry และท่าสุดท้ายจาก HTML ตัวอย่างชุด 3

Landometer dial full
full
Landometer dial quiet
quiet

Dial · หน้าปัด

motifId: landometer.dial
assetIds: landometer.dial.full / landometer.dial.quiet

จังหวะเปิดและ orientation เมื่อคนต้องเห็นว่าเรื่องนี้กำลัง “วัดและอ่าน” โดยไม่ใช้แทนค่าที่วัด

Job
Orientation
Mode
Finite once / static
Min width
160 / 96 px
Scope
Landometer shared
SVG
การใช้และข้อห้าม

วางข้างเนื้อหา ไม่ทับ copy, CTA, photo หรือ evidence; quiet ใช้เป็นจังหวะรอง และภาพนิ่งใช้กับ deck/PDF/social ได้

ดาวน์โหลด quiet SVG
Landometer rings full
full
Landometer rings quiet
quiet

Rings · วงพื้นที่

motifId: landometer.rings
assetIds: landometer.rings.full / landometer.rings.quiet

ใช้เปลี่ยนผ่านเข้าสู่ความสัมพันธ์เชิงพื้นที่หรือหลายระยะ โดยไม่ทำหน้าที่เป็นแผนที่ legend หรือค่ารัศมีจริง

Job
Spatial transition
Mode
Finite once / static
Min width
160 / 96 px
Scope
Landometer shared
SVG
การใช้และข้อห้าม

เหมาะกับ section intro และจังหวะข้าม scale; ห้ามอ่านวงเป็นระยะทาง, catchment หรือความครอบคลุมที่วัดได้

ดาวน์โหลด quiet SVG
Landometer layers full
full
Landometer layers quiet
quiet

Layers · ชั้นซ้อน

motifId: landometer.layers
assetIds: landometer.layers.full / landometer.layers.quiet

บอกว่ามีหลายมุมหรือหลายชั้นของเรื่องเดียวกัน เหมาะเป็น divider ที่เบากว่า motif แบบเต็ม

Job
Layering / divider
Mode
Quiet preferred
Min width
160 / 96 px
Scope
Landometer shared
SVG
การใช้และข้อห้าม

ลายสื่อ “หลายชั้น” ในเชิง editorial เท่านั้น ไม่ใช่จำนวน data layers หรือระดับคุณภาพของข้อมูล

ดาวน์โหลด quiet SVG
Landometer slice full
full
Landometer slice quiet
quiet

Slice · ชิ้นที่ก้าวออกมา

motifId: landometer.slice
assetIds: landometer.slice.full / landometer.slice.quiet

จังหวะปิดฝั่ง action: ช่วยชี้ว่ามีขั้นถัดไป โดยปุ่มหรือข้อความยังเป็นผู้บอก action จริง

Job
Action closure
Mode
Finite once / static
Min width
160 / 96 px
Scope
Landometer shared
SVG
การใช้และข้อห้าม

ห้ามใช้เหมือน pie chart, progress ring หรือเปอร์เซ็นต์ที่ไม่มีข้อมูลจริง; อย่าวางแทน CTA

ดาวน์โหลด quiet SVG
Landometer cultivate full
full
Landometer cultivate quiet
quiet

Cultivate · เพาะให้เติบโต

motifId: landometer.cultivate
assetIds: landometer.cultivate.full / landometer.cultivate.quiet

ปิดเรื่องฝั่งวัฒนธรรม การลงมือร่วมกัน หรือ handoff ที่มี next action ชัดเจน

Job
Cultural closure
Mode
Finite once / static
Min width
160 / 96 px
Scope
Landometer shared
SVG
การใช้และข้อห้าม

เป็น metaphor ของการร่วมลงมือ ไม่ใช่หลักฐานว่า KPI, รายได้ หรือพื้นที่ “เติบโต” แล้ว

ดาวน์โหลด quiet SVG
Landometer logo-assembly motif full
full
Landometer logo-assembly motif quiet
quiet

Logo assembly · จังหวะประกอบร่าง

motifId: landometer.logo
assetIds: landometer.logo.full / landometer.logo.quiet

เวอร์ชัน 3 ประกอบหมุด ชั้นสี และ quiet outline ตามลำดับใหม่ พร้อมจังหวะชิ้นสีฟ้าก้าวออกมาแล้วกลับสู่ภาพสมบูรณ์

Job
Animated brand opening
Mode
Finite once / showcase loop
Final
Exact v3 authored state
Scope
Landometer overlay
SVG
การใช้และข้อห้าม

ใช้ runtime และสีจากไฟล์ชุด 3 โดยไม่แก้ timing/geometry; navbar, favicon และงาน co-branding ยังใช้ไฟล์ official identity แยกต่างหาก

ดาวน์โหลด quiet SVG

ijji · animated identity

Full + tagline · mark only

Owner-approved artifact overlayดาวน์โหลด animated logo kit

สิ่งที่ผู้ชมเห็น: Full ใช้จังหวะ 9 วินาที—หัวกระโดด ตัวอักษรลงรับ คำโปรยปรากฏ แล้วทักทาย; mark-only ใช้ 6.4 วินาทีและตัดช่วงคำโปรยออก Preview เล่นทันทีและวนใหม่หลังค้างภาพจบ โดยทุก cycle ใช้ runtime, layer, timing และ surface เดียวกับ HTML ตัวอย่าง

ijji — Your business buddy around the corner

Animated logo · พร้อมคำโปรย

assetId: ijji.logo-sting.tagline
runtime: ijji.logo-sting.runtime.r3

หัวสี่จุดกระโดดขึ้น ตัวอักษรหย่อนลงมารับ คำโปรยปรากฏทีละคำ และจบด้วย hello wave ก่อนค้างโลโก้ครบ

Duration
9.0 s
Surface
Brand Blue
Min width
320 px
Scope
ijji identity overlay
PNG finalSource kit
การใช้และขอบเขต

เป็น animated identity ของ ijji โดยเฉพาะ ไม่ใช่ Landometer shared motif และไม่แก้ ijji DS/Add-on เดิมย้อนหลัง ใช้ไฟล์ layer จริงทั้งหมดและห้าม redraw หรือ recolor

ijji

Animated mark · ไม่มีคำโปรย

assetId: ijji.logo-sting.mark
runtime: ijji.logo-sting.runtime.r3

ใช้ช่วง hop, bodies และ hello เดียวกับตัวเต็มในเฟรมที่กระชับขึ้น เหมาะเมื่อพื้นที่ไม่รองรับคำโปรย

Duration
6.4 s
Surface
Brand Blue / Dark
Min width
160 px
Scope
ijji identity overlay
PNG finalSource kit
การใช้และขอบเขต

ใช้ notagline กับ runtime ชุดเดียวกัน ตัว component โปร่งใสจึงต้องวางบน Brand Blue หรือ Dark และ reduced motion ต้องเห็น final mark ทันที

ijji · product-specific

Selected 3 · 6 surfaces each

Selected + owner-approvedดาวน์โหลด ijji kit
ijji graph-b แบบเส้นหมึกบนพื้นอ่อนtransparent ink
ijji graph-b สีมินต์บนพื้น brand bluetransparent mint

Graph B · ไต่ขึ้น

motifId: ijji.graph-b
shown assetIds: ijji.graph-b-transparent-ink / ijji.graph-b-transparent-mint

ใช้ใน ijji เมื่อระบบกำลังคำนวณผลลัพธ์หรือแนวโน้มจริง โดยข้อความเป็นผู้บอกงาน ไม่ใช่รูปทรง

Job
Real calculation state
Motion
State-bound · 4.4 s
Min size
72 px
Scope
ijji only
SVG
พื้นและข้อห้าม

เว็บเลือก transparent ก่อน; boxed surfaces ใช้เมื่อคุมพื้นไม่ได้ ห้ามใช้รูปนี้เป็นหลักฐานยอดขาย การเติบโต ความมั่นใจ หรือ completion

ดู 6 surfaces ใน manifest
ijji rings-c แบบเส้นหมึกบนพื้นอ่อนtransparent ink
ijji rings-c สีมินต์บนพื้น brand bluetransparent mint

Rings C · วาดวง

motifId: ijji.rings-c
shown assetIds: ijji.rings-c-transparent-ink / ijji.rings-c-transparent-mint

ใช้ใน ijji เมื่องานกำลังรวบรวมบริบทรอบพื้นที่จริง จุดกลางมาก่อน แล้ววงขยายตามลำดับ

Job
Real area-gathering state
Motion
State-bound · 5 s
Min size
40 px
Scope
ijji only
SVG
พื้นและข้อห้าม

วงเป็น narrative cue ไม่ใช่ catchment, buffer, coverage หรือระยะทางจริง ห้ามวางใน map legend

ดู 6 surfaces ใน manifest
ijji rotate-b แบบเส้นหมึกบนพื้นอ่อนtransparent ink
ijji rotate-b สีมินต์บนพื้น brand bluetransparent mint

Rotate B · เดินหน้า

motifId: ijji.rotate-b
shown assetIds: ijji.rotate-b-transparent-ink / ijji.rotate-b-transparent-mint

เหมาะกับงานคิดหรือประมวลผลหลายรอบของ ijji โดยต้องเริ่มและหยุดตาม lifecycle ของ request จริง

Job
Real iterative state
Motion
State-bound · 4 s
Min size
24 px
Scope
ijji only
SVG
พื้นและข้อห้าม

ไม่ใช้เป็น ambient spinner ใน header/hero และไม่ปล่อยให้หมุนหลัง success, failure, cancel หรือ timeout

ดู 6 surfaces ใน manifest

CityChat · conversation & community

ให้เมืองเริ่มคุย

ดาวน์โหลดชุด CityChat

เริ่มจากเรื่องที่อยากชวนคุย แล้วเลือกตัวช่วยเล่าเรื่องหนึ่งชิ้น ลองพื้น ลองจังหวะ และหยิบไปใช้ได้ทันที
3 เรื่องเล่า + 1 บทสนทนาต้นฉบับ

  1. เลือกความหมายที่ตรงกับงาน
  2. ลองพื้นสว่างหรือมืด แล้วเปิดดูจังหวะ
  3. ส่งออกภาพนิ่ง หรือคัดลอกโค้ดพร้อม motion
3a · เสียงบ้านเรา
light · #F6F7F3

3a · เสียงบ้านเรา

citychat.voice-home

ชวนคนใหม่มาร่วมวง แล้วให้เรื่องเล่าจากบ้านเริ่มต้น

พื้นภาพ
เหมาะกับ
Welcome · โพสต์ชวนคุย · บอร์ดชุมชน
จังหวะใน preview
2.8 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

กระโดด ยืดตัว พยักหน้า — ใบเหลืองแอบโผล่มาทัก

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

3b · น่าอยู่ น่าเที่ยว น่าค้าขาย
light · #F6F7F3

3b · น่าอยู่ น่าเที่ยว น่าค้าขาย

citychat.live-visit-trade

บ้าน กล้อง ร้าน — สามมุมชวนมองละแวกเดียวกัน

พื้นภาพ
เหมาะกับ
CityScan hero · roll-up · สไลด์สามคำถาม
จังหวะใน preview
3.4 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

หมุน 2 / 3 / 1 รอบ แล้วค่อย ๆ หยุดให้เห็นภาพข้างใน

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

3c · เสียงเราอยู่ตรงนี้
light · #F6F7F3

3c · เสียงเราอยู่ตรงนี้

citychat.our-voice-here

ชวนปักเรื่องเล่า ณ จุดที่มีความหมาย ท่ามกลางเสียงเพื่อนบ้าน

พื้นภาพ
เหมาะกับ
หน้าปักเรื่อง · empty state · สไลด์เรื่องสถานที่
จังหวะใน preview
3.0 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

เพื่อนบ้านค่อย ๆ โผล่ ใบหลักงอกจากแผนที่ และวงแหวนกระเพื่อม

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

ConversationMotif · ต้นฉบับ
ต้นฉบับ · พื้นสว่าง

ConversationMotif · ต้นฉบับ

citychat.conversation

สองเสียงเอนเข้าหากัน แค่นี้เมืองก็เริ่มคุย

ต้นฉบับ · พื้นสว่าง
เหมาะกับ
Welcome · คำชวน · empty · success
จังหวะใน preview
2.6 s / รอบ
เริ่มเห็นรอยยิ้ม
≥ 88 px
ขนาด motion
≥ 120 px
SVG
จังหวะและวิธีใช้

สองใบโผล่ แล้วเอนเข้าหากันสลับจังหวะ

หนึ่งฉาก หนึ่ง motif เว้นรอบภาพอย่างน้อย 10% และวางข้อความสำคัญไว้นอกภาพ

ภาพนิ่งเป็นไฟล์ต้นฉบับจากเจ้าของ ส่วน preview ใช้ motion ที่ส่งมาคู่กัน ต้นฉบับมี rendition เดียว จึงแสดงบนพื้นสว่าง

ลิงก์ตรงถึงชิ้นนี้

SVG เป็นภาพนิ่ง · PNG พื้นตามที่เลือก · โค้ดเล่นหนึ่งครั้งเมื่อเข้าจอ

เลือกพื้นให้ถูก แล้วปล่อยให้รอยยิ้มทำงาน

ดูพื้นที่วางจริง

พื้นสว่างใช้ light พื้นเข้มใช้ dark ชื่อธีมของหน้าไม่ใช่ตัวตัดสิน และไม่ย้อมสีภาพให้เข้ากับพื้น

ให้ภาพมีที่หายใจ

ภาพนิ่ง ≥24 px เห็นรอยยิ้ม ≥88 px motion ≥120 px ไม่ครอป ยืด กลับด้าน หรือใส่ข้อความลงในภาพ

บอกเรื่องจริงด้วยข้อความ

ใช้เป็นคำชวนหรือจังหวะของเรื่อง ไม่ใช้แทนปุ่ม สถานะ หลักฐาน หรือจุดข้อมูลบนแผนที่

3d · แนวทาง lockup ในเอกสารแนบ — ไฟล์แนบมีข้อเสนอปรับบอลลูนบนโลโก้ให้เข้าชุด ที่นี่แสดงชุด motif โดยยังใช้โลโก้เดิม การออกไฟล์โลโก้ใหม่และปรับ Design System เป็นงานแยก

CityChat

พื้นภาพ

การวนเป็นโหมดทดลองของคลังนี้ โค้ดที่คัดลอกจะเล่นหนึ่งครั้ง และกลับเป็นภาพนิ่งเมื่อพักหรือเปิด reduced motion

One contract · two workflows

ทำเองหรือให้ agent ทำ ก็เริ่มจากไฟล์จริงชุดเดียวกัน

Screenshot และความจำของโมเดลใช้ยืนยัน geometry ไม่ได้ ให้ส่ง asset ID, path, revision และ hash ไปพร้อมโจทย์ทุกครั้ง

Manual

ทีมลงมือเอง

  1. Frame — ระบุ brand layer, งาน และ channel
  2. Choose — เลือก ID, variant และ surface จาก manifest
  3. Place — resize ตามสัดส่วน ไม่ recolor, crop หรือ stretch
  4. Pair — ใส่ข้อความ, fallback และ accessibility ที่แบกความหมายจริง
  5. Verify — เช็ก hash, responsive, reduced motion และไฟล์ส่งจริง
  6. Ship — ส่งพร้อม source/version และข้อจำกัดของ format
เปิดคู่มือฉบับไฟล์
AI & Agents

Brief เทคนิค · Landometer + ijji

ส่วนนี้คงสัญญา asset รุ่น 1.2.1 สำหรับ Landometer และ ijji หากรวม CityChat ให้ใช้ brief รวมด้านล่างและ manifest ของ Studio

ใช้ไฟล์จาก Landometer Motif Library manifest เท่านั้น

งาน: [ระบุสิ่งที่จะสร้าง]
familyId: [landometer.motif.v3 | ijji.logo-sting.r3 | ijji.four-beat.selected-3.r3]
productScope: [shared_landometer | ijji_product_specific]
motif: [คัดลอกค่าจาก record]
assetId: [คัดลอก exact ID จาก asset record]
allowedJob: [คัดลอกหนึ่งค่าจาก allowedJobs]
allowedFormat: [web_public | deck_16x9 | social_square_1080 | document_pdf | video_owner_extension]
variant: [full | quiet | not_applicable]
surface: [transparent | canvas | brand-blue | ground-mist | dark | transparent-mint | transparent-ink]
motionMode: static [คัดลอกจาก baseline record]
path + sha256 + staticFallback + approvalRef: [คัดลอกจาก record เดียวกัน]
motionExtension: [none โดยปริยาย | finite_once | finite_once_logo_sting | state_bound_only]
ถ้าใช้ motionExtension: allowedFormat ต้องเป็น web_public และต้องคัดลอก runtimeAssetIds + runtimeAllowedJob + runtimeAllowedFormat + lifecycle จาก agentContract.motionExtensions ที่ familyId ตรงกัน โดยใช้ path ของ baseline เป็น static fallback

ห้าม redraw จาก screenshot/ความจำ ห้ามเปลี่ยนสีหรือสัดส่วน ห้ามใช้ motif แทน identity, data, evidence หรือ claim; ถ้าต้องใช้ animated logo ให้เลือกเฉพาะ ijji.logo-sting.r3 และห้ามนำ ijji ไปเหมารวมเป็น Landometer

ก่อนส่ง ให้ยืนยัน familyId + assetId + path + SHA-256 จาก record เดียวกัน ใส่ static/reduced-motion fallback ตรวจ output จริง และรายงานทุกข้อที่ยังไม่ได้ตรวจ
เปิด JSON Manifest เปิด llms.txt

Before you ship

เช็กความจริงก่อนเช็กความสวย

Owner approval ทำให้ใช้ asset ได้ แต่แต่ละชิ้นงานยังต้องพิสูจน์ว่าบริบท ขนาด contrast fallback และ claim ถูกต้องใน output ที่ส่งจริง

1 · Boundary

  • เลือก Landometer, ijji หรือ CityChat ถูกชั้น
  • ไม่เหมารวม F&B, retail, municipality หรือ CityWiki
  • ข้ามเมือง/ผลิตภัณฑ์ใช้ schema/release เดียวกันหรือบอก incompatibility

2 · Meaning

  • motif ไม่ใช้แทน identity; animated logo ใช้ได้เฉพาะ family ที่ระบุชัด
  • สถานะจริงต้องมีข้อความที่มองเห็นได้ ไม่ใช้ motif แบกความหมาย
  • claim มี source, date และข้อจำกัด; ลบ motif แล้วความจริงไม่เปลี่ยน

3 · Asset

  • path, revision และ SHA-256 ตรง manifest
  • ไม่ redraw, recolor, crop หรือยืดสัดส่วน
  • ใช้ selected ไม่ใช้ explorations

4 · Access

  • decorative mark ใช้ alt="" / aria-hidden
  • meaningful preview มี text alternative
  • pending state มีข้อความ เวลา และ cancel

5 · Fallback

  • no-JS และ reduced motion เห็น final static state
  • print/email ใช้ภาพนิ่ง
  • motion ไม่ทำให้ layout shift หรือบัง action

6 · Output

  • ทดสอบ viewport และไฟล์ export จริง
  • Social conformance claim จำกัดที่ 1080×1080
  • Video/ratio อื่นระบุเป็น owner extension

04 / TAKE IT INTO YOUR WORK

ไอเดียมาแล้ว ส่งต่อให้พร้อม

เลือกชุดที่ตรงงาน หรือส่งทั้งสตูดิโอให้ทีม พร้อมไฟล์และที่มาของแต่ละชุด

เวอร์ชันและสถานะในชุดดาวน์โหลด

Studio 1.3.2 อัปเดตลิงก์คู่มือ LDS 0.9.7 จากเว็บรวมเครื่องมือรุ่น 1.3.0 ไฟล์ Landometer/ijji ยังคงรุ่นต้นฉบับ 1.2.1 ส่วน CityChat คงชื่อชุด 1.0.1-proposal และบันทึกต้นทางไว้ การเผยแพร่นี้ไม่เปลี่ยนรุ่น Design System

อ่านบันทึกการรวมไฟล์

ก่อนส่งต่อ เช็กให้ครบสามเรื่อง

0 / 3 · เริ่มจากงานที่ลายต้องช่วย

ดู brief ก่อนคัดลอก
ใช้ Motif Studio 1.3.0 เพื่อเลือกไฟล์ต้นฉบับ
งาน: [ระบุงานและผู้ใช้]
แบรนด์และบทบาท: [Landometer / ijji / CityChat]
ไฟล์ path + SHA-256: [เลือกจาก record เดียวกันใน manifest]
Asset ID: [Landometer/ijji เลือกจาก manifest 1.2.1; CityChat ระบุไฟล์และ rendition]
ช่องทาง / ขนาด / พื้นสี: [ระบุ]
ภาพนิ่งสำรอง: [ระบุไฟล์ให้ตรง variant]
Motion: [finite once / state-bound ตามต้นฉบับ]
ผลตรวจพื้นสี: [ทั้งส่วนที่ชัดและจาง; ไม่สรุปทั้งภาพจากค่าสูงสุด]
คงรูปทรง สี และสัดส่วนของต้นฉบับ ตรวจชิ้นงานส่งจริงและรายงานสิ่งที่ยังไม่ได้ตรวจ
Manifest: https://montri-th.github.io/motif/assets/motif-studio-library.json

Provenance & versions

ทุกไฟล์มีที่มา ทุกข้อยกเว้นมีขอบเขต

Studio 1.3.0 · 11 ก.ย. 2026 รวม CityChat, Contrast Lab และเครื่องมือส่งต่อจากไฟล์แนบ บันทึกอนุมัติและผลตรวจรุ่น 1.2.1 ด้านล่างอ้างถึง Landometer/ijji เดิม ส่วนสถานะ CityChat คงตามต้นทาง การปรับเว็บนี้ไม่เปลี่ยน Design System Studio manifest · Integration sources

สำหรับชุด Landometer/ijji รุ่นเดิม: เจ้าของยืนยันสิทธิ์และอนุมัติการเผยแพร่กับดาวน์โหลดต่อสาธารณะเมื่อ 5 ก.ย. 2026 การนำไปใช้ต่อสงวนสำหรับทีม ผู้ร่วมงาน และ AI/agent workflows ที่ได้รับอนุญาต การอนุมัตินี้ไม่แก้ release เดิมย้อนหลังและไม่ใช่ open-source license สำหรับบุคคลภายนอก

Design authorityLDS 0.9.1 · 0.9.1-r8 · v0.9.1-mp7Verified: 5,394 checks + 103 package hashes
Landometer motifOwner-approved overlay · v3 · 6 Sep 2026Owner-source runtime SHA-256 3a5caef7…af2 + CSS 7cc2deb4…12e แบบ byte-exact; animation และ final state เทียบกับ HTML ชุด 3
ijjiAnimated logo r3 + Selected motifs r3Animated identity เป็น owner-approved artifact overlay แยกจาก state-bound motifs และไม่แก้ ijji Add-on 0.5.3 ย้อนหลัง
Format boundaryWeb 360–1600 · deck 16:9 · social 1080 square · A4 document/PDFVideo and other ratios are owner extensions without LDS 0.9.1 conformance claim

Motif preview

คัดลอกแล้ว