| 1 | # Renderings — Index |
| 2 | |
| 3 | A **rendering** is a visual style family: line quality, texture, depth, material, mood. Lock one rendering per deck — every AI image in the deck shares it. |
| 4 | |
| 5 | > **HEX values are not in renderings.** Rendering describes how the image is drawn. The new flow starts from the deck's core color anchors in `spec_lock.md colors` and interprets them with the Design Spec/image context; it does not ask for or author a separate image palette. See [`image-generator.md`](../image-generator.md) §2. |
| 6 | |
| 7 | > **Core deck identity has precedence.** Any sample HEX inside an individual rendering file is illustrative legacy prose. Prompt assembly replaces identity roles with the current deck anchors, then may derive coherent tints, light/shadow transitions, material colors, and atmospheric hues from the rendering and image context. Do not replace the deck identity with an unrelated palette. When one derived tone becomes a reusable semantic role across images/pages, promote it to a named lock row. |
| 8 | |
| 9 | --- |
| 10 | |
| 11 | ## 1. Catalog (20 renderings) |
| 12 | |
| 13 | Each rendering has its own file with: style paragraph, line / texture / depth notes, deck HEX usage, and a fewshot prompt snippet. A preset lock reads that one file. A catalog-based `custom` reads every preset named in `image_rendering_references`; a novel `custom` may omit references. Never glob the directory. |
| 14 | |
| 15 | ### 1.1 Modern / commercial (the corporate-PPT main field) |
| 16 | |
| 17 | | Rendering | One-liner | Best for | |
| 18 | |---|---|---| |
| 19 | | [`vector-illustration`](./vector-illustration.md) | Clean flat vector with bold shapes, no gradients | Consulting / SaaS / general professional decks | |
| 20 | | [`flat`](./flat.md) | Modern geometric blocks, slightly more design-forward than vector | Brand / product showcase decks | |
| 21 | | [`minimalist-swiss`](./minimalist-swiss.md) | Swiss-grid Bauhaus austerity, aggressive whitespace | High-end consulting / architecture / luxury / type foundries | |
| 22 | | [`glassmorphism`](./glassmorphism.md) | Frosted-glass translucent panels, soft shadows | Modern SaaS / fintech / health-tech / premium apps | |
| 23 | | [`3d-isometric`](./3d-isometric.md) | Isometric 3D forms with subtle shadows | Tech architecture / product structure | |
| 24 | | [`digital-dashboard`](./digital-dashboard.md) | Polished UI / data-viz aesthetic | SaaS demos / data products | |
| 25 | | [`corporate-photo`](./corporate-photo.md) | Editorial photography, real subjects | Team / lifestyle / product shots | |
| 26 | | [`blueprint`](./blueprint.md) | Technical schematic with grid, monospace cues | Architecture / engineering / AI systems | |
| 27 | | [`editorial`](./editorial.md) | Magazine-style infographic look | Finance / journalism / explainers | |
| 28 | |
| 29 | ### 1.2 Hand-drawn / educational |
| 30 | |
| 31 | | Rendering | One-liner | Best for | |
| 32 | |---|---|---| |
| 33 | | [`sketch-notes`](./sketch-notes.md) | Warm cream paper, black hand-drawn lines, pastel fills | Education / training / onboarding | |
| 34 | | [`ink-notes`](./ink-notes.md) | Pure white, black ink, sparse semantic color | Methodology / Before-After / manifestos | |
| 35 | | [`chalkboard`](./chalkboard.md) | Chalk on board, classroom feel | Teaching / tutorials / classroom decks | |
| 36 | | [`paper-cut`](./paper-cut.md) | Layered paper craft, scissor-cut edges, soft shadows | Education / children / cultural / festival / sustainability | |
| 37 | |
| 38 | ### 1.3 Narrative / atmospheric |
| 39 | |
| 40 | | Rendering | One-liner | Best for | |
| 41 | |---|---|---| |
| 42 | | [`watercolor`](./watercolor.md) | Painterly soft edges, color bleeding | Lifestyle / travel / brand story | |
| 43 | | [`warm-scene`](./warm-scene.md) | Golden-hour cinematic warmth | Personal growth / origin story | |
| 44 | | [`screen-print`](./screen-print.md) | Halftone poster art, 2-5 flat colors | Cultural / media / cinematic covers | |
| 45 | | [`vintage-poster`](./vintage-poster.md) | Mid-century modern poster, halftone + paper grain | Cultural / brand heritage / hospitality / anniversaries | |
| 46 | |
| 47 | ### 1.4 Specialty |
| 48 | |
| 49 | | Rendering | One-liner | Best for | |
| 50 | |---|---|---| |
| 51 | | [`fantasy-animation`](./fantasy-animation.md) | Ghibli/Disney hand-drawn warmth | Children / storybook / brand fable | |
| 52 | | [`pixel-art`](./pixel-art.md) | 8-bit retro game aesthetic | Gaming / retro tech / nostalgic | |
| 53 | | [`nature`](./nature.md) | Organic earthy illustration | Environment / wellness / sustainability | |
| 54 | |
| 55 | ### 1.5 Escape hatch — `custom` |
| 56 | |
| 57 | Whenever proposed image usage includes `ai`, Stage 2 authors one separate, visible custom rendering proposal in addition to the preset cards. It uses `rendering: custom` plus a complete behavior paragraph, remains initially unselected, and enters the confirmed contract only when the user chooses it. A template-backed proposal must honor inherited identity and the confirmed template-application plan. |
| 58 | |
| 59 | **Hard rule — `rendering_behavior` prose**: |
| 60 | |
| 61 | | Rule | Value | |
| 62 | |---|---| |
| 63 | | Length | One paragraph, 2-5 sentences | |
| 64 | | Axes covered | line / texture / depth / material / mood (same as preset files) | |
| 65 | | Catalog basis | When existing renderings are combined or borrowed, name every exact id and read every named file before synthesis | |
| 66 | |
| 67 | ```yaml |
| 68 | - image_rendering: custom |
| 69 | - image_rendering_behavior: "Hand-screened poster aesthetic — slightly misregistered halftone overlays, 3 flat ink colors with visible dot pattern at 12% opacity, no gradients, no anti-aliased edges; reads as silkscreen print." |
| 70 | ``` |
| 71 | |
| 72 | **Hard rule**: the custom candidate is mandatory when AI images are proposed; selecting `custom` is a tail-case, not the default. See [`strategist-image.md`](../strategist-image.md) for the Stage-2 carrier and downstream lock behavior. |
| 73 | |
| 74 | Write `image_rendering_references` only when the custom direction actually uses catalog material. Keep the list exact: a blend of `screen-print` and `watercolor` reads both files and lists both ids. A genuinely new rendering with no catalog source omits the field and proceeds from its standalone behavior; never invent a reference merely to legitimize `custom`. |
| 75 | |
| 76 | --- |
| 77 | |
| 78 | ## 2. Auto-selection table — `design_spec` → rendering |
| 79 | |
| 80 | Match `design_spec.md d` (mode + `visual_style`) against this table. First match wins. **No row matches** → use `custom` per §1.5 rather than force-fitting `vector-illustration`. (When the locked `visual_style` names a paired rendering, prefer that for aesthetic alignment.) |
| 81 | |
| 82 | | `d. Style` signal | Recommended rendering | Alternates | |
| 83 | |---|---|---| |
| 84 | | Strategic / MBB / board | `editorial` or `vector-illustration` | `blueprint`, `minimalist-swiss` | |
| 85 | | Corporate report / analysis | `vector-illustration` | `flat`, `digital-dashboard` | |
| 86 | | High-end consulting / luxury / 高端 / design-firm | `minimalist-swiss` | `editorial`, `vector-illustration` | |
| 87 | | Tech / SaaS / AI / system / architecture | `3d-isometric`, `blueprint`, or `digital-dashboard` | `flat`, `vector-illustration` | |
| 88 | | Modern SaaS / fintech / health-tech / premium app | `glassmorphism` | `digital-dashboard`, `flat` | |
| 89 | | Product launch / brand / marketing | `flat`, `3d-isometric`, or `corporate-photo` | `vector-illustration` | |
| 90 | | Education / training / onboarding / 教学 | `sketch-notes` | `vector-illustration` (if school is corporate), `paper-cut` | |
| 91 | | Children / story / storybook / 儿童 | `fantasy-animation` | `paper-cut`, `watercolor`, `sketch-notes` | |
| 92 | | Cultural / folk / festival / 文化 / 节日 | `paper-cut` | `vintage-poster`, `screen-print` | |
| 93 | | Methodology / Before-After / manifesto / 方法论 | `ink-notes` | `editorial` | |
| 94 | | Government / formal / official report | `editorial` or `corporate-photo` | `vector-illustration` | |
| 95 | | Finance / data journalism / 财经 | `editorial` or `digital-dashboard` | `vector-illustration` | |
| 96 | | Personal story / 个人成长 / lifestyle | `watercolor`, `warm-scene` | `corporate-photo`, `paper-cut` | |
| 97 | | Cultural / media / opinion / cinematic | `screen-print`, `vintage-poster` | `editorial`, `warm-scene` | |
| 98 | | Brand heritage / hospitality / 老字号 / 周年 | `vintage-poster` | `screen-print`, `editorial` | |
| 99 | | Gaming / retro / 8-bit / 复古 | `pixel-art` | `vintage-poster` | |
| 100 | | Environment / wellness / 环保 / 户外 | `nature` | `watercolor`, `paper-cut` | |
| 101 | | Classroom / blackboard / 课堂 | `chalkboard` | `sketch-notes` | |
| 102 | | Team / company / product photo | `corporate-photo` | — | |
| 103 | |
| 104 | --- |
| 105 | |
| 106 | ## 3. How to use |
| 107 | |
| 108 | 1. From `design_spec.md` extract `d. Style` mode + descriptor. |
| 109 | 2. Find the matching row above; pick the primary recommendation. |
| 110 | 3. For a preset, read `image-renderings/<chosen>.md`. For `custom`, read every file named in `image_rendering_references`, then synthesize them under the confirmed behavior; with no references, use the novel behavior directly. Apply the result when assembling prompts per [`image-generator.md`](../image-generator.md) §4. |
| 111 | |
| 112 | **Lock for the whole deck.** Don't change rendering between images in the same deck. |
| 113 |