THE MOTIF STUDIO · EXPLORE / PLAY / CREATE
Give your next story a rhythm. Explore Landometer, ijji and CityChat, see what each motif brings, and take the right one into your work.
01 / FIND YOUR RHYTHM
Pick a moment. See how a motif and a few words can work together.
Start with the context. Let each new layer reveal a little more.
Start exploring →An opening beat draws the eye into a new story. The words still explain what you are exploring.
Try both views. The words and facts stay the same; the motif adds emphasis, not evidence.
Start with your job
The source assets are shared, but each discipline makes a different decision. Start with your closest route, then check version and scope before release.
Choose the brand layer
Portfolio, methodology, and product-architecture language for Locale Insight stays product-neutral across Land, Location, and Living. ijji examples remain inside the ijji evidence and identity boundary.
Shared motifs for orientation, entry, transition, and closure without assuming a particular product, city, or industry.
ijji’s four-unit motifs belong to ijji. Their assets, meanings, and state use must not be generalized into Landometer capability or portfolio truth.
CITYCHAT / A PLACE FOR EVERY VOICE
Voice of home. Live, visit, trade. Our voice here. Choose an invitation that fits your CityChat story.
Meet the CityChat set →Cross-layer rule: a motif never crosses products by default. Promoting an ijji motif into the shared layer needs a new owner decision, revision, and asset record—even though every download lives in this library.
Four decisions
Do not start with “Which motif looks best?” Start with ownership, the job, the channel, and whether motion adds meaning.
Landometer shared, ijji or CityChat
Orientation, transition, closure, or a real pending state
Web, deck, 1080 social, document/PDF, or an owner extension
This webpage auto-replays motion and keeps a complete final fallback
Intent → AHA → next action
Every specimen below is an educational fixture—not captured product UI, observed data, or outcome evidence.
Place one full motif beside a major beat and use quiet motifs for secondary rhythm. The motif stays away from copy, proof, and actions while making the sequence easier to scan.
See the same motif family move across deck, social, and video proportions while preserving its authored geometry, colour, and rhythm.
ijji is preparing your answer
Live motion · auto replay
Start with the request, show visible status and elapsed time, provide a working cancel action, and stop on success, failure, cancel, or timeout. Assistive technology reads the status copy, not the motif.
Sales growth
+42%
The motif does not prove this number
Recovery: restore the correct identity, show the real metric with source, date, and compatible schema/release, then use a Landometer motif only as framing—or keep the ijji motif inside a genuine ijji state.
Contrast playground · 20 × 20
A small change of surface can change the whole feeling. Mix 20 assets with 20 surfaces, explore the details, and take your best pairing into the next idea.
dial · quietsurface.canvas · #F6F7F3
Some sampled parts stay subtle
Sampled inks: #59D2FE / Authored alpha: 0.4–1
A range for the inks and alpha samples listed in the handoff. It does not cover every pixel or certify the whole asset for accessibility.
Solid carrier sample. Check at the final size and placement.
Compare the details. 3:1 is a reference, not permission for a motif to replace text or a real status.
Try these surfaces
We composite the listed ink samples over the surface at the supplied alpha values, then calculate their sRGB luminance contrast. You see both the minimum and maximum of that sample set. A strong detail never certifies the whole image. The color logo and CityChat contain inks beyond these samples; anti-aliased edges and the final layered composition are not measured here.
Gradient entries show one stop as a solid color. Check every stop and the final position. The overlay.glass sample is approximate and depends on what sits behind it. A larger motif can be easier to notice, but size does not increase its contrast ratio. Use alt="" for decoration, and check meaningful components and text alternatives separately.
Five small moves
Let the surface, the spacing and the file choice do the work, while the original artwork stays intact.
Inspect strong and soft details on the final surface and at the final size. Test every stop of a gradient.
Choose a supplied surface that fits the context and measure again. Avoid adding a plate or inventing a color to mask the issue.
Try full / quiet, ijji ink / mint, or CityChat light / dark. For logos, swap the rendition while keeping its original colors.
Adjust its size, move it out of the text column, or add clear space. Size does not increase the contrast ratio.
Remove the motif if needed. Text, buttons and real status components should still tell the complete story on their own.
Handoff reference guidance: a placement aid, not a new Design System rule. Check the exact file and its final context each time. · Read the original reference file
Official identity · 12 original files
This pairing check applies to the 12 original PNGs. Pairings that obscure the logo are not displayed. Check size, clear space and permitted role before use.
The wordmark may be recolored, including a different color for each letter. The original gray was a convenient choice for light and dark surfaces, not a mandatory identity color. Check that both the name and symbol remain clear on the actual background and at the intended size.
This original PNG can be used on Canvas, Dark or Beige. Its blue pin blends into Brand Blue. The wordmark may be recolored.
All downloads retain their supplied bytes. Availability does not approve every surface or role. Cream remains #EFEFD0. This placement check follows the logo rule LDS 0.9.7 §4.3 LOGO-01-B, separately from motif full/quiet rules.
Verified asset paths
Choose Landometer, ijji or CityChat. Search by task, preview the motion and take an SVG, PNG or code snippet. PNGs are created on your device.
Reuse rights: Anyone may view and download the files. Reuse is reserved for the team, owner-authorized collaborators, and AI/agent workflows acting for an authorized operator unless a separate license or owner decision says otherwise.
Landometer · shared layer
Animation showcase: Open Preview and full + quiet play immediately. Most motifs replay every 3 seconds; Logo assembly v3 lets both variants complete within 3.36 seconds, holds the final state, then replays every 6 seconds. Every cycle uses the timing, colour, geometry, and final state from the supplied set-3 example HTML.
motifId: landometer.dial
assetIds: landometer.dial.full / landometer.dial.quiet
An opening and orientation beat when the story is about measuring or reading—without standing in for a measured value.
Keep it beside content and away from copy, actions, photos, and evidence. Use quiet for a supporting beat.
Download quiet SVGmotifId: landometer.rings
assetIds: landometer.rings.full / landometer.rings.quiet
A transition into spatial relationships or changing scales—not a map legend, buffer, or measured radius.
Use for section orientation. Never imply actual catchment, distance, coverage, or map evidence.
Download quiet SVG
motifId: landometer.layers
assetIds: landometer.layers.full / landometer.layers.quiet
Signals several perspectives or layers in one story. The quiet form makes a useful secondary divider.
“Layers” is an editorial cue, not a count of available datasets or a data-quality tier.
Download quiet SVG
motifId: landometer.slice
assetIds: landometer.slice.full / landometer.slice.quiet
An action-side closing beat. It suggests a next step while the actual button or sentence names that step.
Never treat it as a pie chart, progress ring, or percentage without real data. It does not replace a CTA.
Download quiet SVG
motifId: landometer.cultivate
assetIds: landometer.cultivate.full / landometer.cultivate.quiet
A cultural or collaborative closure when the handoff and next action are explicit.
This is a metaphor for collective action, not evidence that a KPI, revenue line, or place has grown.
Download quiet SVG
motifId: landometer.logo
assetIds: landometer.logo.full / landometer.logo.quiet
Version 3 assembles the pin, colour layers, and quiet outlines in a new sequence, then lets the sky pieces step forward and settle into the complete authored state.
Use the version 3 runtime and colours without changing timing or geometry. Navigation, favicon, and co-branding still use the separate official identity asset.
Download quiet SVGijji · animated identity
What the audience sees: Full uses the 9-second sequence—heads hop, letter bodies land, tagline words appear, then a hello wave. Mark-only uses 6.4 seconds and omits the tagline phase. Preview starts immediately and replays after the final hold; every cycle uses the same runtime, layers, timing, and surface as the supplied HTML.
assetId: ijji.logo-sting.tagline
runtime: ijji.logo-sting.runtime.r3
Four heads hop up, letter bodies drop into place, tagline words appear, and a hello wave resolves into the complete logo.
This is ijji-specific animated identity, not a shared Landometer motif and not a retroactive ijji DS/Add-on change. Use every exact source layer; never redraw or recolour it.
assetId: ijji.logo-sting.mark
runtime: ijji.logo-sting.runtime.r3
The same hop, bodies, and hello phases in a tighter frame for placements where the tagline would not remain legible.
Use notagline with the same runtime. The component is transparent, so place it on Brand Blue or Dark; reduced motion must show the final mark immediately.
ijji · product-specific
transparent inktransparent mintmotifId: ijji.graph-b
shown assetIds: ijji.graph-b-transparent-ink / ijji.graph-b-transparent-mint
Use inside ijji when the system is genuinely calculating a result or trajectory. Visible copy—not the shape—states the work.
Prefer transparent files on the web. Never use this as proof of sales, growth, confidence, or completion.
See all six surfaces
transparent ink
transparent mintmotifId: ijji.rings-c
shown assetIds: ijji.rings-c-transparent-ink / ijji.rings-c-transparent-mint
Use inside ijji while genuinely gathering context around a place. The hub appears before the rings expand.
The rings are a narrative cue, never a catchment, buffer, coverage area, or map legend.
See all six surfaces
transparent inktransparent mintmotifId: ijji.rotate-b
shown assetIds: ijji.rotate-b-transparent-ink / ijji.rotate-b-transparent-mint
For a real multi-pass thinking or processing state inside ijji. It begins and ends with the request lifecycle.
Do not run it as an ambient header or hero spinner. Remove it on success, failure, cancel, or timeout.
See all six surfacesCityChat · conversation & community
Start with the conversation you want to open. Choose one motif, try its surface and rhythm, and take it into your next piece.
3 stories + 1 original conversation
citychat.voice-home
A new neighbour joins the circle. Give stories from home a warm beginning.
Hop, stretch, nod — then a yellow newcomer peeks in.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.live-visit-trade
Home, camera, shop: three ways to see the same neighbourhood.
Turn 2 / 3 / 1 times, then settle to reveal the picture inside.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.our-voice-here
Place a story where it matters, surrounded by neighbours’ voices.
Neighbours appear, the main voice grows from the map, and one ripple spreads.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.conversation
Two voices lean towards each other. A conversation begins.
Two bubbles arrive and lean towards each other in alternating beats.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
The still is the owner’s original file; preview uses the supplied motion companion. The original has one rendition and is shown on a light surface.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
Use light artwork on a light surface and dark artwork on a dark surface. Choose by the placement area, rather than the page theme; keep the supplied colours.
Still ≥24 px, visible smile ≥88 px, motion ≥120 px. Keep the full artwork and its proportions; place text beside it.
Use the motif as an invitation or a story beat. Buttons, status, evidence and map data retain their own clear labels.
3d · Lockup direction in the handoff — The handoff proposes aligning the logo bubbles with this family. This library retains the current logo; a new logo export and Design System migration remain separate work.
One contract · two workflows
A screenshot or model memory cannot verify geometry. Send the asset ID, path, revision, and hash with every task.
This preserves the 1.2.1 asset contract for Landometer and ijji. For work including CityChat, use the Studio brief and combined file manifest below.
Use only files listed in the Landometer Motif Library manifest. Task: [describe the deliverable] familyId: [landometer.motif.v3 | ijji.logo-sting.r3 | ijji.four-beat.selected-3.r3] productScope: [shared_landometer | ijji_product_specific] motif: [copy from the selected record] assetId: [copy the exact asset record ID] allowedJob: [copy one exact value from 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 [copy from the baseline record] path + sha256 + staticFallback + approvalRef: [copy from the same record] motionExtension: [none by default | finite_once | finite_once_logo_sting | state_bound_only] If motionExtension is not none: allowedFormat must be web_public; copy runtimeAssetIds + runtimeAllowedJob + runtimeAllowedFormat + lifecycle from the matching-family entry in agentContract.motionExtensions, and keep the baseline path as the static fallback. Do not redraw from screenshots or memory. Do not recolor, distort, cross brand layers, or use a motif as identity, data, evidence, or a claim. For animated identity, select only ijji.logo-sting.r3. Before delivery, report familyId + assetId + path + SHA-256 from one record, add static and reduced-motion fallbacks, inspect the real output, and list every unverified gate.
Before you ship
Owner approval authorizes the assets. Each artifact must still prove that its context, size, contrast, fallback, and claims are correct in the delivered output.
04 / TAKE IT INTO YOUR WORK
Take just the set you need, or share the complete studio with its source records.
Both languages, Landometer, ijji, CityChat, the contrast lab and identity references, with usage notes.
Download the complete studio ↓Studio 1.3.2 updates LDS 0.9.7 guide links from the integrated 1.3.0 experience. Landometer/ijji retain their 1.2.1 source release; CityChat retains its supplied 1.0.1-proposal name and source records. This publication does not revise the Design System.
Read the integration notes0 / 3 · Start with the job the motif should do
Use Motif Studio 1.3.0 and its original asset files. Work and audience: [describe] Brand and role: [Landometer / ijji / CityChat] File path + SHA-256: [from the same manifest record] Asset ID: [Landometer/ijji: baseline 1.2.1; CityChat: exact file and rendition] Channel / size / carrier: [specify] Static fallback: [matching exact variant] Motion: [source finite-once / state-bound lifecycle] Contrast: [strongest and weakest sampled bounds, not a whole-image pass] Preserve source geometry, colors and aspect ratio. Inspect the delivered output and report untested states. Manifest: https://montri-th.github.io/motif/assets/motif-studio-library.json
Provenance & versions
Studio 1.3.0 · 11 September 2026 integrates CityChat, the contrast lab and handoff tools. The 1.2.1 approvals and QA below describe the original Landometer/ijji release; CityChat retains its supplied source status. This web update does not revise the Design System. Studio manifest · Integration sources
For the original Landometer/ijji release, the owner confirmed rights and approved public display and downloads on 5 September 2026. Reuse is reserved for the team, owner-authorized collaborators, and authorized AI/agent workflows. This does not rewrite older releases or grant an unrestricted third-party open-source license.
Landometer
3a5caef7…af2 + CSS 7cc2deb4…12e; animation and final state are checked against the supplied set-3 HTML