---
schema_version: 1
id: "organic-craft"
name: "Organic Craft"
summary: "Warm material surfaces, irregular object forms and asymmetric compositions for independent makers."
family: "tactile"
tags: ["handmade", "warm", "asymmetric", "product-led"]
best_for: ["craft", "products", "portfolio"]
avoid_for: ["data", "documentation"]
density: "balanced"
image_dependency: "medium"
motion_level: "subtle"
complexity: "medium"
signature: {"composition": "Unequal object stages, soft backplates and asymmetric story/collection arrangements.", "typography": "Personable serif display, occasional italic annotation and clear sans-serif practical notes.", "navigation": "Visible making/collection links and local object anchors, wrapping on mobile.", "content_rhythm": "Short material observations alternating with process chapters or individual object studies.", "imagery": "Three original shaded, speckled SVG ceramic illustrations with readable silhouettes.", "color_and_material": "Warm cream, sand, brown and terracotta; restrained grain stays inside artwork.", "interaction": "Native dimensions/care disclosures, local anchors and clearly visible keyboard focus.", "motion": "Settled still objects and brief link transitions, removed for reduced motion."}
status: "ready"
prompt_path: prompts/organic-craft/prompt.en.md
---

# Organic Craft

## Intent

Organic Craft is a tactile direction for independent makers, material-led portfolios and small collections of useful objects. The fictional Kilnrue ceramics studio demonstrates how a digital page can suggest touch without pretending to be a photograph or a working shop. Visitors first meet the material and its making, then study a few objects. Warmth comes from irregular forms, generous space and specific language about surfaces, rather than decorative leaves or a generic collection of rounded cards.

## Signature

Preserve four invariants: a warm paper-like ground with restrained earthen accents; visibly uneven object silhouettes; asymmetric image-and-text relationships; and a slow alternation between material observations and individual pieces. These relationships should survive a different craft or brand name. A tells a making story through one dominant vessel and short process chapters. B offers a deliberately uneven collection shelf with attached object notes. The two pages share a material voice but ask the reader to do different things.

## Typography

Use a personable serif for large headings and small italic observations. Pair it with a plain sans-serif for practical copy, dimensions and navigation. Avoid simulated handwriting for essential information. Headings may break into short lines but should not turn every sentence into a display statement. Body text needs a comfortable measure and line height. These references use system Georgia and Arial, with Lithuanian glyph samples in the colophon. Different families can work if the friendly display voice and clear technical notes remain distinct.

## Color and surfaces

Cream provides the main ground, with a slightly darker sand surface for object stages. Brown text and muted earth tones carry the information hierarchy. A deep terracotta accent supports links and occasional filled labels. All interface colors come from semantic tokens; the original SVG illustrations have their own documented artwork palette. Small repeating marks suggest ceramic grain inside the drawings. Keep texture away from body text and avoid large bitmap noise layers that increase preview size without improving the material story.

## Layout A

Open with a compact studio wordmark and visible links. Pair a large left-aligned promise with an oversized pitcher on an uneven pale backplate. A small angled annotation points to the material rather than acting as another button. Follow with a brief material statement, a two-column making sequence and a quiet studio note. A real catalogue link changes the content task. The closing care disclosure and demonstration colophon complete the page without a fake checkout, subscription form or invented customer review.

## Layout B

Begin with a collection heading and three local object links. Use unequal image stages for a large pitcher, a smaller bowl and a horizontally arranged vase feature. Each piece retains its name, material note and a native details control for dimensions. The arrangement is intentionally asymmetric rather than a uniform commerce grid. End with a shared care note and a route back to the making story. There are no prices or stock claims because these are fictional illustrative studies, not products offered for sale.

## Imagery

Three original code-authored SVG illustrations depict a handled terracotta pitcher, a low olive-glazed bowl and a pale narrow-necked vase. Gradients, clipped speckle patterns and turning lines give each form a distinct surface. They are illustrations, not product photographs or placeholders. The asset register records original authorship and repository MIT redistribution. Preserve object edges when adapting to photography: use licensed cutouts or a consistent quiet backdrop. Never copy another maker’s product imagery merely to achieve an artisan mood.

## Navigation and interaction

Keep navigation visible at every width and let it wrap naturally on small screens. Working local anchors take readers to material, process and individual pieces; ordinary links connect the two references. Native disclosures hold concise dimensions or care guidance and remain keyboard operable without JavaScript. Focus is clearly outlined and offset. Hover changes a link color without moving the object. Do not turn decorative annotations into controls, and introduce a real enquiry or purchase flow only when the destination and behavior exist.

## Motion

The material should feel settled. Short link-color transitions are enough, and reduced-motion removes them. No floating pots, scroll-driven rotations or mandatory parallax are needed. The irregular shapes already provide visual movement within a still composition. Content must remain visible before any optional enhancement loads. If a future adaptation animates a process diagram, supply an equivalent static explanation and a way to stop nonessential motion instead of making the animation the only carrier of information.

## Responsive behavior

At 1440 pixels A uses a broad text-and-object pairing, followed by unequal process columns. B places the pitcher and bowl at different vertical positions, then introduces a wide vase row. At tablet widths reduce stage height and spacing while retaining the asymmetric emphasis. At 360 pixels stack each object with its own notes, remove the catalogue offsets and keep navigation above the content. Scale the drawings with reserved aspect ratios; avoid cropping a handle or forcing a horizontal scroll to preserve the desktop composition.

## Accessibility

The references aim for clear landmarks, one page heading, meaningful image alternatives and usable keyboard navigation. Informative drawings receive subject descriptions rather than repeating the entire adjacent paragraph. Native details expose their actual open state. Automated checks cover contrast, overflow, resources, landmarks, controls and responsive combinations; visual inspection separately checks the object crops and reading order. Token ratios and axe results are scoped evidence, not a complete accessibility certification. Any replacement imagery or changed palette needs its own review.

## Adaptation

Start with a small coherent set of objects and truthful notes about their materials and process. Retain uneven stage proportions, soft object contours and the material-to-object rhythm when changing to textiles, wood or another craft. Keep dimensions and practical guidance close to each piece. A React or WordPress implementation can use the same semantic landmarks, native disclosures and local asset discipline. Replace the demonstration identity explicitly and add commerce only as a separately implemented capability, rather than treating decorative catalogue cards as a functioning store.

## Avoid

1. Do not replace the irregular object stages with identical rounded product cards; unequal scale is part of the composition. 2. Do not cover readable surfaces in dense distressed texture or simulated handwriting; material cues belong around the content. 3. Do not imply a working shop through dead purchase buttons or invented availability; label demonstrations and implement real destinations.

## Closest styles

Field Notes and Botanical Engraving are the nearest ready tactile/illustrative neighbors. Organic Craft uses uneven freestanding ceramic stages and surface observations, with making/collection links and individual object notes. Field Notes uses a documentary image, annotation rail, route sketch and timed diary stops; its navigation and chronological rhythm serve a notebook. Botanical Engraving uses linear plant plates, accepted-name labels and a classified specimen index rather than material/process chapters or irregular object families. Quiet Luxury is another object-led comparison: broad rectangular furniture stages and sparse edition dossiers differ from tactile backplates and varied ceramic silhouettes. The complete P13 rendered comparison records these structural differences.