---
schema_version: 1
id: "woven-field"
name: "Woven Field"
summary: "Ordered thread fields, a narrow creative notebook and a parameter-led studio turn two colors and three crossing structures into real standalone SVG samples."
family: "tactile"
tags: ["handmade", "warm", "annotated", "task-led"]
best_for: ["craft", "portfolio", "products"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A narrow notebook index beside unequal material studies; B a parameter rail beside a large creation table.", "typography": "Quiet Georgia headings, occasional italic and clear Arial control/parameter records.", "navigation": "Five notebook sections versus horizontal studio links, with real sibling compositions.", "content_rhythm": "Idea, field, fragment collection and ledger versus creation, live enquiry and oversized alternating samples.", "imagery": "Original procedural warp/weft lines with actual plain, diagonal and paired crossing structures.", "color_and_material": "Natural linen, deep pine and rust; flat readable surfaces and bounded thread artwork.", "interaction": "Density, two colors, three weaves, editable presets, real standalone SVG export and accurate enquiry copy.", "motion": "800ms tension, bounded nearby bending, 300ms return, 450ms interweave and one-time sample unroll."}
status: "ready"
prompt_path: "prompts/woven-field/prompt.en.md"
---

# Woven Field

## Intent

Woven Field makes the relationship between crossing threads into a practical graphic design tool. The fictional Lintrova studio presents original textile interpretations rather than fabrication specifications. Visitors change density, two thread colors and one of three weave structures, then take a real vector sample and an accurate enquiry note away. The material language comes from repeated directional lines, controlled crossings and deliberate blank linen spaces.

## Signature

Keep five invariants: an ordered field of tensioned threads; a restricted linen, pine and rust palette; legible over-and-under crossings; restrained serif headings paired with practical sans text; and unequal material studies connected to a working pattern creator. A uses the narrow content index and generous working area of an open creative notebook. B exposes a parameter-led studio and larger complete collection samples. Both preserve the relationship between the visitor's choices and the actual generated geometry.

## Typography

Georgia supplies a quiet editorial display voice, with italic used sparingly for the notebook promise. Arial carries controls, short observations and detailed parameters. Small numbered labels distinguish page sections and material studies without competing with headings. Long descriptions keep ordinary sentence case and comfortable line height. Wordmarks remain replaceable text rather than an imported logo. System fallbacks include Lithuanian glyphs and require no font requests. Phones reduce display size while retaining generous control labels and readable enquiry text.

## Color and surfaces

A light natural linen ground supports deep pine text and rust accents. A darker linen surface marks the loom boundary and the studio enquiry sheet. Pine actions use light linen text; rust identifies section annotations and focus. Interface colors come from semantic tokens, while the original procedural SVG artwork explicitly records its own three-color drawing palette. Thread colors are artwork choices rather than replacements for readable interface text. Avoid bitmap grain behind words: crossing lines already communicate the material and keep files small.

## Layout A

A begins with a wordmark and a real studio link. A narrow vertical five-part index accompanies the full notebook, changing into wrapping links on phones. The editorial introduction leads to a broad thread field beside a small making note. A full-width strip of density, two colors and weave choices follows the field, then an actual vector download. Three collection studies use unequal sizes and offsets. A numbered making ledger and a two-part enquiry sheet finish the notebook. This sequence moves from idea through experiment to a shareable brief.

## Layout B

B opens a practical studio heading with horizontal creation, collection and enquiry links. A narrow parameter sheet sits beside a large SVG creation table, so the first task is making a pattern. The live enquiry sheet follows immediately, before the collection. Three large complete samples alternate sides with their own observations and preset actions, then the making ledger closes the page. This replaces A's editorial index and fragment composition with parameter-first work and full sample inspection. On phones the controls precede the loom, with each large sample kept beside its own explanation in reading order.

## Imagery

All imagery is original procedural vector work. Vertical warp threads and horizontal weft threads cross according to the selected structure; small overpass segments make the ordering visible. Plain, diagonal and paired basket interpretations have different crossing formulas. Density changes actual thread counts, and both color controls change the corresponding strokes. Three separately generated local SVG samples establish calm, diagonal and open studies. They need no photographs, stock textures, imported textile patterns or external libraries. The downloadable SVG includes its own geometry, colors, title and descriptive parameters.

## Navigation and interaction

Visible section links and real sibling references work directly. Native range, select and radio controls update the actual pattern and the enquiry summary together. Each collection preset loads its own valid parameters into the creator and remains editable. The optional project name appears literally in the summary. Export generates a complete current SVG rather than a screenshot or a linked asset requiring this page. Copy uses the real clipboard where available; on rejection it selects the readable textarea and explains keyboard copying. No server submission is implied or simulated.

## Motion

The initial thread field tensions from its edges over 800 milliseconds, with a small diminishing vibration and a final settled grid. Pointer movement bends nearby warp lines by a bounded amount; leaving returns them in 300 milliseconds. Parameter changes use a finite 450-millisecond interweaving episode while preserving the actual new structure. Each collection image unrolls once when its region first becomes visible. A single bounded scheduler respects pause, region visibility and hidden documents; pagehide cancels work and disconnects observers. Reduced motion draws informative parameter changes directly and omits bending and unrolling.

## Responsive behavior

At 1440 pixels A uses its notebook rail, broad loom and unequal studies. B pairs a narrow parameter sheet with a large creation table and alternating full sample spreads. Tablet spacing contracts and controls use two columns. At 390 and 360 pixels the index wraps, the loom stays fully bounded and practical controls retain full labels. Samples and enquiry parts become complete vertical records. Native controls need no dragging gesture beyond the optional range interaction, which also supports keyboard arrows. No essential content depends on mouse proximity or sideways panning.

## Accessibility

Provide one page heading, a skip link and semantic main, navigation and section structure. The live SVG has a descriptive label that follows the current parameters, and collection images have specific alternatives. Every density, color, weave, project and summary field has a visible label. Buttons retain clear keyboard focus and substantial targets. Copy and export report their actual outcomes. Browser checks cover resources, contrast, control visibility, keyboard focus and responsive overflow independently from visual judgment. The exported graphic description preserves the selected parameters for a reader outside this application.

## Adaptation

Use the same direction for another original textile, paper, print or material study by preserving ordered crossing logic, constrained colors and the honest relationship between controls and geometry. Replace the fictional identity and observations with confirmed owner content. Keep unequal studies in the notebook and complete large samples in the studio. A production tool needs validated manufacturing rules and a real delivery flow; this demonstration deliberately exports a graphic interpretation. The full creation prompt carries project fields and A/B choice so the direction can move into another stack without depending on these exact collection names.

## Avoid

Exactly three anti-patterns damage this direction: replacing ordered crossing threads with a shapeless animated color cloud; showing controls whose values do not change the exported geometry; and turning the unequal material studies into an identical product-card grid. Keep the copy boundary truthful and leave the selected graphic available when animation is paused or reduced.

## Closest styles

Organic Craft uses irregular ceramic silhouettes, soft backplates and making-versus-object stories. Here a geometric thread field, live parameter sheet and vector-making task replace freestanding objects and native dimensions records. Botanical Engraving uses classified plant plates with accepted-name annotations and a specimen index. Woven Field uses crossing direction, pattern parameters and editable material studies instead of classification. Compare real ready frames at the same desktop and phone widths; shared warm paper and serif text alone do not distinguish the designs.