# Flat-Art Illustrations Specification **Conformance target:** A family of 3D isometric flat-art illustrations that reads as one set, at icon size and at hero size **Audience:** Designers and engineers producing or commissioning illustrations for achievement systems, empty states, onboarding, and marketing surfaces **Scope:** Single-object illustrations generated or drawn to this style. Vector output preferred; raster output permitted where the pipeline is generative. **Companion specs:** `visual/visual-language-spec.mdx`, `visual/style-guide-design-spec.mdx`, `accessibility/WCAG-AAA-spec.md`, `regions/drapo-flag-color-spec.md` and `regions/ginen-color-spec.md` (hue selection), `equity/design-for-low-literacy-spec.mdx` (illustration carrying meaning for non-readers) Terms **MUST**, **SHOULD**, and **MAY** follow [RFC 2119](https://www.rfc-editor.org/rfc/rfc2119). **The core claim:** consistency in an illustration set comes from freezing a small number of measurable properties, not from taste. Camera angle, facing direction, object scale, tonal ramp, edge softness, background, and detail density are the frozen properties. Only the object and its base hue change from image to image. An illustration that cannot be checked against those seven properties is not part of the set. **Out of scope:** Multi-object scenes, character illustration, animation, photography, and iconography intended to render below 24 px (use the icon set). --- ## 1. Purpose and conventions | Field | Content | |---|---| | **Rule** | Every illustration in the set MUST hold the seven frozen properties (camera angle, left-facing orientation, object scale, tonal ramp, edge softness, background, detail density) unchanged, varying only the object and the base hue. | | **Why** | Sets drift one image at a time. A single right-facing object or one image drawn at 1.3x scale reads as a mistake in a grid of achievements, and the drift is invisible when each image is reviewed alone. Freezing the properties makes review a checklist rather than a judgment call. | | **How to verify** | Lay every illustration in the set out in one grid at a single cell size. Facing direction, apparent horizon angle, and object footprint must be indistinguishable across cells. Any image you can pick out of the grid without reading the object fails. | Each section below uses the same Field/Content table format and lists **MUST / SHOULD / MAY** rules. The unit of work is one **illustration**: one hero object on one canvas. --- ## 2. Direction: everything faces left | Field | Content | |---|---| | **Rule** | Every directional feature MUST point toward the left of the canvas: fronts, openings, screens, arrows, handles, spouts, noses, and any implied motion. Asymmetrical objects MUST be mirrored where necessary so the dominant direction stays left. | | **Why** | Facing direction is the single most visible inconsistency in an isometric set, and it is the one a generative pipeline gets wrong most often because the model has no memory of the previous image. A fixed rule removes the per-image decision. | | **How to verify** | For each illustration, name the object's dominant directional feature and confirm its centroid sits left of the object's bounding-box center. Objects with no directional feature are exempt but MUST still show the front-left face toward the left. | **MUST** - Show the front-left face and the right-side and top surfaces, so the object reads as dimensional rather than as a flat elevation. - Mirror asymmetrical objects rather than rotating them, when rotation would expose an unfamiliar face. - Keep facing direction identical across the whole set. Alternating orientation for visual variety is a defect, not a choice. **MUST NOT** - Rotate an object toward the viewer to reveal detail that the left-facing view hides. Simplify the detail instead. --- ## 3. Camera and perspective | Field | Content | |---|---| | **Rule** | Use one elevated three-quarter isometric (or near-isometric) camera for the entire set: parallel edges, no vanishing-point convergence, and enough top surface visible to establish depth. | | **Why** | Mixed camera heights make a grid look like a collage. Parallel projection also keeps the object's silhouette stable when scaled down, which perspective foreshortening does not. | | **How to verify** | Trace the two ground-plane edges of the object's base in each illustration and measure their angle from horizontal. Every illustration in the set must fall within ±2° of the set's reference angle. | **MUST** - Keep the object centered with a balanced silhouette. - Use the same projection for every object in the set, including cylindrical and shell forms. **SHOULD** - Fix the reference angle once, document it in the set's own README, and state it in every generation prompt. **MUST NOT** - Introduce dramatic perspective distortion, wide-angle exaggeration, or a tilted horizon. --- ## 4. Color: one hue, four tones | Field | Content | |---|---| | **Rule** | Each illustration MUST use exactly one base hue plus lighter and darker tonal variations of that same hue. No secondary accent colors. | | **Why** | A single hue keeps the object readable as a shape rather than as a set of parts, lets one illustration be recolored per state or per brand context without redrawing, and prevents the set from turning into unrelated multicolor art. | | **How to verify** | Extract the illustration's unique colors and convert to HSL. Every non-background color must sit within ±8° of the base hue. Any color outside that window is a defect. | Tonal hierarchy: | Surface | Tone | |---|---| | Upward-facing and highlighted surfaces | Lightest | | Primary and front surfaces | Base | | Secondary side surfaces | Mid-dark | | Recessed areas, undersides, inner surfaces, contact shadow | Darkest | **MUST** - Assign tones by surface orientation, not by part. The same tone on a top face means the same thing in every illustration. - Keep the background plain white or transparent unless the surface it ships on requires otherwise. - Meet a minimum 3:1 contrast ratio between the object's silhouette-defining outer tone and the background, so the shape survives on both light and tinted surfaces. Where the illustration carries meaning rather than decoration, treat it as non-text UI under `accessibility/WCAG-AAA-spec.md` and verify the ratio from resolved colors rather than by eye. - Verify the tonal ramp in grayscale: the four tones must remain distinguishable with hue removed. **SHOULD** - Derive the four tones from the base hue by a fixed lightness delta, recorded once and reused, so a new hue produces a matching ramp automatically. - Pick base hues from the product's existing palette or from the applicable region spec, not ad hoc. **MUST NOT** - Add black outlines, white painted highlights, metallic reflections in unrelated hues, or multicolor detail. - Encode meaning in hue alone. Hue is set-level identity, not information. --- ## 5. Shading | Field | Content | |---|---| | **Rule** | Dimension MUST come from flat tonal planes with crisp transitions, not from simulated lighting. Gradients are permitted only to soften a single large curved form. | | **Why** | Flat planes scale down cleanly and stay consistent across images produced at different times by different hands or models. Rendered lighting does not reproduce, and it is the first thing that diverges across a set. | | **How to verify** | At 48 px, each illustration must still resolve into discrete tonal planes. Any illustration whose surfaces blur into a continuous gradient fails. | **MUST** - Keep the implied light direction identical across the set: top surfaces lighter, vertical and recessed surfaces darker. - Limit ambient shading to a minimal contact shadow where the object meets the ground plane. **MUST NOT** - Use strong cast shadows, dramatic lighting, gloss, specular highlights, texture, noise, or photorealistic materials. --- ## 6. Geometry and detail density | Field | Content | |---|---| | **Rule** | Simplify each object into clean readable volumes (extruded rectangles, cylinders, rounded blocks, chamfered forms, simple shells) with slightly softened edges. Details MUST be dimensional, built from geometry, never drawn onto a surface. | | **Why** | Geometry-built detail survives scaling and recoloring; painted-on detail turns to mud at icon size and breaks the single-hue rule as soon as it needs contrast to be visible. | | **How to verify** | Render each illustration at 32 px and name the object. If it is unidentifiable, the volumes are too complex or the detail is carrying the recognition. | **MUST** - Prefer softened or rounded edges over razor-sharp industrial geometry. - Build details as raised symbols, recessed panels, layered bases, extruded buttons, simple handles, or structural seams. - Keep detail density comparable across the set. One highly detailed object in an otherwise simple set breaks the family. **MUST NOT** - Include text, fine linework, tiny decorative detail, complex patterns, or surface texture. --- ## 7. Composition and scale | Field | Content | |---|---| | **Rule** | One hero object per illustration, centered on an approximately square canvas, fully visible with generous whitespace and comparable visual scale across the set. | | **Why** | Comparable footprint is what makes a grid read as a system. Cropping and inconsistent margins are the difference between an achievement wall and a pile of images. | | **How to verify** | Compute each object's bounding box as a fraction of canvas width. Every illustration in the set must fall within ±5 percentage points of the set's target fill. No object pixels may touch the canvas edge. | **MUST** - Keep the object complete and uncropped. - Keep the silhouette readable at the smallest size the illustration will ship at. **SHOULD** - Record the target fill fraction and canvas size in the set's README alongside the reference camera angle. **MUST NOT** - Include a second object, a ground plane beyond the contact shadow, background scenery, or a caption. - Render any note, label, condition, or annotation inside the illustration. Explanatory content belongs in the review layer, never in the artwork. --- ## 8. Generation and set governance | Field | Content | |---|---| | **Rule** | Where illustrations are generated, the prompt MUST state the frozen properties explicitly on every run, and each accepted illustration MUST be recorded with its object, base hue, prompt, and model. | | **Why** | A generative pipeline has no memory between runs, so consistency has to live in the prompt and in a record, not in the tool. Without the record, a set cannot be extended a year later or regenerated at a new size. | | **How to verify** | Pick any three illustrations in the set at random. Each must resolve to a record naming the object, the base hue, the exact prompt, and the model or author. If it cannot, the set is not conformant. | Reusable generation prompt, with the frozen properties spelled out: ``` Create a clean 3D isometric flat-art vector illustration of [OBJECT]. The object faces left directionally, shown from a consistent elevated three-quarter isometric view. Simplify it into smooth geometric volumes with slightly rounded edges and crisp dimensional construction. Use a single [COLOR] hue only, with lighter and darker tonal variations of that same color to define top, front, side, recessed, and shadowed surfaces. Flat tonal shading, subtle gradients only where a large curved form needs softening. No outlines, no text, no texture, no secondary colors, no photorealistic reflections, no dramatic shadows. Center the complete object on a clean white background with generous whitespace. The result should read as a polished monochromatic vector-style product illustration from a consistent icon family. ``` **MUST** - Review new illustrations against the existing set in a grid, never in isolation. - Reject and regenerate rather than retouching a near-miss, so the prompt and the output stay in sync. **SHOULD** - Ship vector output where the pipeline allows it, so recoloring and rescaling do not require regeneration. - Name an owner for the set who approves additions. **MUST NOT** - Add an illustration to a shipped set without the grid check.