Open design skill · Edition 02

A visual idea only this product could own.

Signature Visual reads the product, develops three art directions, composes a motion score, and builds one memorable computational experience into the page.

Read the method

Semantic seed / 07

“Make cross-border money movement feel alive, precise, and trustworthy.”

Direction 01 Tidal Ledger ink currents · coordinated drift

Tidal Ledger, Still state

Motion score / five beats Still · 00%

From request to direction

Meaning enters first. Form, material, and time follow.

The skill opens with a concise visual brief, widens the field into three distinct propositions, and selects the direction with the strongest semantic fit and visual fingerprint.

Visual brief / sample 12.06.26

Trust should feel coordinated, calm, and alive.

Page job: Establish confidence before the first number appears.
Product truth: Value crosses many boundaries while the experience stays coherent.
Human response: Calm mastery with a moment of discovery.
Constraints: Text-safe hero, mobile composition, quiet reduced-motion state.

Selected direction / anatomy

Tidal Ledger

Spatial grammarParallel currents form and release a protected reading corridor.
Material languageDense mineral ink, fine capillary lines, rare metallic glints.
Motion scoreStill → wake → gather → crest → settle.
Interaction contractPointer proximity parts the current; departure restores the cadence.
Fingerprint testThe concept remains recognizable in monochrome and at thumbnail scale.

Pattern atlas / open systems

Six generative spaces. Hundreds of possible signatures.

Each pattern card carries semantic uses, spatial rules, material logic, motion verbs, and mutation axes. Projects inherit a grammar and develop their own form.

A / Current ecology

Coordination becomes a field.

For networks, markets, communities, and systems that need collective presence.

Mutate: force law · corridor · trail age · density · edge behavior

B / Living specimen

Capability gains a body.

For biotech, intelligence, craft, and products that benefit from a singular presence.

Mutate: silhouette · tissue · pulse · light rig · camera distance

C / Field instrument

Live data becomes an object.

For observability, climate, audio, finance, and interfaces built around sensing.

Mutate: housing · scale logic · sampling · controls · signal decay

D / Terrain memory

History acquires depth.

For archives, provenance, research, places, and products shaped through time.

Mutate: contour source · strata · label rhythm · erosion · reveal path

E / Deposited pigment

Computation leaves a trace.

For culture, care, editorial products, and experiences that need softness.

Mutate: solvent · bleed · granulation · palette · drying sequence

F / Signal bloom

Energy appears at a threshold.

For launches, infrastructure, creative tools, and moments of transformation.

Mutate: frequency · interference · threshold · falloff · chroma split

Built studies / four identities

One discipline. Very different worlds.

Each live case responds to its own page job, content architecture, and product truth. Open a study to experience the composition at full scale.

Live study

01 · Canvas / coordination archive

Memory Loom

Shared work becomes warm-paper fibres that gather, cross, knot, and release around new attention.

Open the full study ↗

Live study

02 · Three.js / synthetic specimen

Permeable Intelligence

An asymmetric tissue boundary admits an external signal, reorganizes its interior, and repairs.

Open the full study ↗

Live study

03 · WebGL / pressure instrument

Signal Weather

Distributed-system pressure becomes a physical monitor that moves through spike, outage, reroute, and cool.

Open the full study ↗

Live study

04 · SVG / decision artifact

Decision Plate 027

Evidence, alternatives, review, commitment, and archive form one keyboard-navigable technical trace.

Open the full study ↗

Deterministic visual QA

A moving idea gets reviewed as a sequence.

The skill captures the same seed and viewport at five exact states. A contact sheet makes composition, legibility, material coherence, pacing, and template distance visible in one pass.

00%Still

25%Wake

50%Gather

75%Crest

100%Settle

Review stateRevise with evidence

Semantic fit: 4.8
Composition: 4.7
Motion arc: 4.6
Material coherence: 4.5
Template distance: 4.8

Revision note 03Hold the crest for 180ms, quiet the outer currents, preserve the headline corridor through the entire arc.

For Codex · Claude Code · Cursor · compatible agents Self-contained · open source · MIT

Give the next product a visual language of its own.

Read the source on GitHub ↗