---
schema_version: 1
id: "playful-cutout"
name: "Playful Cutout"
summary: "Coherent cutout illustrations, deliberate overlap and friendly type for a playful creative story."
family: "illustrative"
tags: ["cutout", "playful", "image-led"]
best_for: ["events", "culture", "campaign"]
avoid_for: []
density: "balanced"
image_dependency: "medium"
motion_level: "subtle"
complexity: "medium"
signature: {"composition": "Reserved overlapping cutout invitation scene in A; alternating illustrated story chapters in B.", "typography": "Friendly bold sans-serif display with plain readable supporting copy.", "navigation": "Visible activities/practical links and a three-chapter story index.", "content_rhythm": "Assembled scene and numbered activities, or short illustrated narrative chapters.", "imagery": "Three original coherent SVG tool/paper cutouts with pale edges and simple shading.", "color_and_material": "Cream, plum, soft yellow, coral and teal; cut-paper edges separate layers.", "interaction": "Real local anchors and native practical-note disclosures; objects remain illustrative.", "motion": "Still overlap creates energy; brief link transitions removed for reduced motion."}
status: "ready"
prompt_path: prompts/playful-cutout/prompt.en.md
---

# Playful Cutout

## Intent

Playful Cutout gives an imagined community making day an inviting, illustration-led identity. The fictional Snipwhistle gathering uses paper tools, folded forms and short friendly instructions to encourage curiosity. It suits cultural events, creative campaigns and informal portfolios. The tone should be lively without making the interface unpredictable. Visitors need to understand the activities and follow a simple story; they should not have to chase moving stickers or decode an illustrated object as an unlabeled control.

## Signature

Preserve four invariants: original cutout-like objects with visible pale edges; deliberate overlap within reserved illustration stages; warm playful color relationships; and friendly large headings balanced by plain practical text. A uses one assembled object scene as its invitation. B distributes individual objects and sticker-like notes along an event story. The illustrations lead the composition, but controls and body copy retain their own clear reading space. The direction should survive a different creative subject without copying these exact tools.

## Typography

Use a bold plain sans-serif for short display lines and a neutral sans-serif for body copy and navigation. Friendly phrasing should do more work than a novelty font. Occasional tilted labels can be short and decorative, but practical details stay level and readable. Large headings need deliberate line breaks and sufficient space around illustrations. The references use system Arial and include Lithuanian glyphs, so no external font request is needed to establish the page’s character.

## Color and surfaces

Cream provides a warm ground, plum anchors text and key links, and a soft yellow surface supports activity notes. Teal and coral belong to the playful artwork vocabulary and occasional explicit semantic surfaces. All interface colors use generated tokens, including focus and the dark invitation band. Pale cutout edges separate objects from their backgrounds without thick black framing. Texture is optional and light; the page should not look like a collection of unrelated stickers pasted over essential text.

## Layout A

A compact Snipwhistle identity leads to a two-part invitation: large friendly words and a reserved scene where a pencil, scissors and folded paper overlap. A short event strip supplies fictional context and a real activities anchor. Below, three numbered activity rows explain folding, marking and trying a new shape. A dark closing band links to the separate story composition. Native practical notes and the demonstration colophon finish the page without an inert ticket button or registration form.

## Layout B

Begin with a story heading and three local chapter links. A wide opening chapter pairs folded paper with a short narrative. A second chapter reverses the image/text relationship and attaches a small sticker-like observation outside the body measure. A third chapter uses a generous colored note field beside the pencil illustration, followed by a practical disclosure and return link. The page reads as an illustrated sequence rather than repeating A’s assembled invitation scene and activity index.

## Imagery

Three original code-authored SVG illustrations depict a yellow pencil, coral-handled scissors and a teal folded paper plane. Each has a coherent pale cut edge, simple shading and a clear silhouette. These are finished original vector illustrations, not placeholders or traced stock imagery. The local asset register records original MIT authorship and redistribution. For another subject, use a consistent illustrated or licensed cutout set and keep edges, scale and light treatment coherent. Do not mix unrelated photo styles merely to fill the scene.

## Navigation and interaction

Visible text links reach the activities, practical notes and separate story. The story’s chapter index uses working local anchors. Native practical disclosures work with the keyboard and expose their real state. Illustrations and stickers are not disguised buttons. Focus remains clearly visible on real controls and is never clipped by a scene’s decorative layers. A real event adaptation can add a booking flow when it exists, but the demonstration makes no claim to accept registrations.

## Motion

The playful composition is complete when still. Short link-color transitions are enough and are removed for reduced-motion preferences. No bouncing tools, rotating stickers or scroll-controlled paper flight is required. Overlap creates a sense of movement through arrangement rather than constant animation. If a future project adds a small animated illustration, keep the same meaning in a static frame and allow nonessential motion to stop. Do not move a control away from a user’s pointer or keyboard focus.

## Responsive behavior

At desktop widths the assembled scene sits beside the invitation with several objects overlapping safely inside it. Story chapters alternate image and text positions. At tablet widths reduce scene scale and gaps while preserving enough space for the large title. At 360 pixels place the full scene after the invitation, stack activity rows and normalize story chapters into a consistent reading order. Stickers stay within their reserved sections and never cover paragraphs, links or the edge of the viewport.

## Accessibility

The references target clear landmarks, one page heading, meaningful object alternatives and a visible skip link. Decorative sticker flourishes do not add redundant announcements. Useful information remains in ordinary text beside the illustrations. Actual evidence separates six responsive axe/resource/control combinations from visual checks of overlap and hierarchy. Native disclosures, local anchors, keyboard focus, glyph loading and semantic token consumption are checked in the browser. These are scoped reference results, not a promise of complete accessibility for every future adaptation.

## Adaptation

Choose a small coherent object set that supports the new story, then reserve scene space before positioning the pieces. Replace the fictional gathering with truthful content while preserving the cut-edge treatment, restrained overlap and friendly display-to-body hierarchy. A WordPress or React implementation can use ordinary image elements and semantic sections without a canvas engine. Keep practical event information outside decorative layers. If the new brief needs a serious procedural flow, reduce illustration density rather than forcing every action into a sticker metaphor.

## Avoid

1. Do not cover text or controls with arbitrary decorative overlaps; scene boundaries and reading space are intentional. 2. Do not mix unrelated clip art, traced imagery or mismatched cut edges; use one coherent rights-cleared object language. 3. Do not make stickers bounce continuously or turn ordinary objects into unexplained navigation controls.

## Closest styles

Bauhaus Geometric is the nearest ready expressive comparison. Playful Cutout uses overlapping recognizable paper tools with pale edges, activity/story navigation and illustrated narrative chapters. Bauhaus organizes elementary geometric modules with programme/exhibition indexes and flat work studies. Botanical Engraving provides another illustrative comparison: its fine line plant plates, accepted-name labels and classified specimen records differ from cut-paper silhouettes, sticker captions and a playful event story. Neo Brutalist uses exposed thick frames and hard typographic bands instead of object overlap. These composition, navigation, image-language and rhythm differences are compared in the complete P13 visual review.