--- title: How Sketch to Brand works description: See how Sketch to Brand reads a sketch, proposes three logos, and applies one to product mockups. url: https://www.felixsanz.dev/articles/how-sketch-to-brand-works language: en published: 2026-09-19 updated: 2026-08-09 tags: - ai - development alternate-es: https://www.felixsanz.dev/es/articulos/como-funciona-sketch-to-brand --- # How Sketch to Brand works ## Introduction A sketch can be clumsy and still contain a good idea. The lines wobble and the proportions are approximate. Even the paper becomes part of the image, but **the shape we wanted to draw is already there**. Cleaning it up once would solve the logo. [Sketch to Brand](https://www.felixsanz.dev/lab/sketch-to-visual-system) tries to go a little further. It interprets the drawing, proposes three versions of the mark, and uses the chosen one to build a small brand rollout across different products. The Lab example starts with a sketch for Night Signal, a late-night radio and electronic music event. This is the guidance supplied with it: > An experimental late-night radio and electronic music event. Flat two-color risograph print, deep blue on cream, geometric and analog. In this article we will see **how the visual reference passes from one stage to the next**. First the sketch guides the redesign. Then the selected logo becomes the reference for every application. ![Sketch to Brand with the Night Signal sketch and a brief for a late-night radio and electronic music event.](https://www.felixsanz.dev/assets/tool.DR-9mz0V_ZdLEQ0.jpg) *The sketch and optional brief are the starting point of the process.* ## A path in three stages The experiment connects three different jobs: 1. A vision model turns the sketch and brief into **a structured visual language**. 2. An image model uses the drawing to generate **three interpretations of the logo**. 3. The selected logo is applied to **five surfaces and any others we add**. In the current flow, each stage prepares the next. The palette proposed during the analysis is used to redesign the mark. The surfaces also come from that first response, but they are not generated until we choose which version of the logo we want to keep. The tool lets us upload a file or draw directly on a `1024 × 1024` pixel canvas in the browser. From that point, both paths produce the same input and follow the same process. ## Reading what is intentional A photograph of a sketch contains more than the design. The paper may have a color of its own, while the photograph introduces perspective. There may even be a note in the margin. **The first job is to separate the identity from the physical artifacts around the drawing**. For this we use [Gemma 4 31B](https://runware.ai/models/google-gemma-4-31b?utm_source=felixsanz.dev&utm_medium=blog&utm_campaign=sketch-to-visual-system&utm_content=gemma-model), an open-weight vision model. It receives the sketch and the optional brief. We also send it a small color hint calculated in the browser. This is the complete instruction: ``` You define a reusable visual language from a rough identity sketch, so an image model can later draw anything in that same language. Study the sketch for its deliberate geometry, dominant shapes, hierarchy, negative space, and recurring motif. Decide the brand palette. The brief is authoritative: when it names colors, use them and convert names to accurate hex codes. You are also given the colors sampled directly from the drawing as a hint; these may be genuine identity colors or merely pen and paper artifacts, so use judgment to keep the ones that read as intentional and discard ink-on-paper incidentals. Return two to six named hex colors that form a coherent identity. Treat the brief as the source of medium, treatment, and mood: what material or process the brand should look like (for example flat risograph print, editorial photography, cut paper, 3D clay, technical line drawing) and how it should feel. When the brief is absent, infer a single coherent, tasteful medium and mood that suit the mark; commit to one, never hedge between several. Return one language object: - title: a short evocative name for this visual language (not a company name, not a slogan). - essence: one plain sentence describing the language. - palette: two to six named hex colors, as decided above. - shape: the shape and construction logic drawn from the sketch (geometry, linework, weight, negative space). - motifs: one to three reusable fragments taken from the sketch (a curve, junction, ray, silhouette, or negative-space shape). Never describe the whole logo, wordmark, or full composition as a motif. - treatment: the medium and rendering treatment (grain, finish, lighting or flatness, texture). - type: the typographic character the identity implies (casing, weight, width, feel) as description only. - mood: two to five adjectives. - surfaces: exactly five real products or surfaces this brand would put its identity on, chosen to show its range across a rollout. Span categories such as packaging, apparel, signage, a digital surface, print, and merch (do not pick five of the same kind). Each has a short label (the product name, e.g. "Tote bag", "Coffee bag", "App icon", "Billboard") and a product field describing the physical object as a plain noun phrase with NO style words and NO text (the brand mark is applied automatically). Pick surfaces that suit THIS brand. Ignore the physical drawing and its surroundings: paper or notebook color, desk, ambient lighting, camera perspective, rough strokes, construction lines, measurements, and marginal notes. Do not turn those artifacts into style unless the brief explicitly asks for a handmade treatment. Do not invent a company name, slogan, product capability, or marketing claim. Return only the requested JSON. ``` The brief takes priority when it contains an explicit decision. If it asks for blue on cream, the model must use those colors. If it says nothing, the model can propose a palette. It also describes the treatment and `mood` that suit the shape. The last part of the prompt protects the interpretation. The cream paper may belong to the identity, or it may simply be what we had at hand. The blue ink may be a decision, or it may be the only pen available. The model receives both, but must not turn them into rules automatically. ### The measured palette is only a clue The image has already gone through the [Lab's shared preparation](https://www.felixsanz.dev/articles/how-the-image-debugger-works#reading-the-image), which limits its size and flattens any transparency onto white. Before measuring it, the browser scales it down again until its longest edge is `96` pixels. It then groups nearby colors and finds the dominant one. Among the rest, it looks for a possible accent that is far enough away. The selection begins like this: ```js const candidates = [...bins.values()] .map((bin) => { const color = { r: bin.r / bin.count, g: bin.g / bin.count, b: bin.b / bin.count, } const maximum = Math.max(color.r, color.g, color.b) const minimum = Math.min(color.r, color.g, color.b) const saturation = maximum === 0 ? 0 : (maximum - minimum) / maximum return { ...color, count: bin.count, saturation } }) .sort((left, right) => right.count - left.count) .slice(0, 128) const selected = [] const dominant = candidates[0] if (dominant) selected.push(dominant) const accent = candidates .filter((candidate) => ( candidate.count >= minimumAccentPixels && candidate.saturation >= 0.28 && selected.every((color) => colorDistance(color, candidate) >= 64) )) .sort((left, right) => ( (right.saturation ** 2 * Math.sqrt(right.count)) - (left.saturation ** 2 * Math.sqrt(left.count)) ))[0] ``` The remaining colors try to balance presence, saturation, and distance from those already selected. The result is not presented as the brand palette. It is sent with an explicit warning: **these colors were measured from the drawing and may include the paper or ink**. > [!NOTE] > **Measuring is not deciding** > Extracting the pixels is useful because it gives the vision model concrete values. The analysis can keep one of those colors or discard it. It can also replace it when the brief says otherwise. ### The visual language contract The response has to feed the interface and prepare the following stages. This is the complete schema used by the call: ```js const languageSchema = { name: 'visual_language', strict: true, schema: { type: 'object', additionalProperties: false, required: ['language'], properties: { language: { type: 'object', additionalProperties: false, required: [ 'title', 'essence', 'palette', 'shape', 'motifs', 'treatment', 'type', 'mood', 'surfaces', ], properties: { title: { type: 'string', minLength: 2, maxLength: 48 }, essence: { type: 'string', minLength: 12, maxLength: 160 }, palette: { type: 'array', minItems: 2, maxItems: 6, items: { type: 'object', additionalProperties: false, required: ['name', 'hex'], properties: { name: { type: 'string', minLength: 2, maxLength: 30 }, hex: { type: 'string', pattern: '^#[0-9A-Fa-f]{6}$' }, }, }, }, shape: { type: 'string', minLength: 12, maxLength: 200 }, motifs: { type: 'array', minItems: 1, maxItems: 3, items: { type: 'object', additionalProperties: false, required: ['name', 'note'], properties: { name: { type: 'string', minLength: 3, maxLength: 50 }, note: { type: 'string', minLength: 8, maxLength: 160 }, }, }, }, treatment: { type: 'string', minLength: 12, maxLength: 200 }, type: { type: 'string', minLength: 8, maxLength: 160 }, mood: { type: 'array', minItems: 2, maxItems: 5, items: { type: 'string', minLength: 3, maxLength: 24 }, }, surfaces: { type: 'array', minItems: 5, maxItems: 5, items: { type: 'object', additionalProperties: false, required: ['label', 'product'], properties: { label: { type: 'string', minLength: 3, maxLength: 40 }, product: { type: 'string', minLength: 8, maxLength: 200 }, }, }, }, }, }, }, }, } ``` `shape`, `motifs`, `treatment`, `type`, and `mood` explain the reading in the interface. The following calls directly consume two parts: **the palette and the five surfaces**. The shape does not travel as text because we send the sketch again as a visual reference. `strict: true` asks the model to follow the contract, but does not turn it into a guarantee. The server checks that the necessary fields are present and validates the collections used later. If the response is not valid JSON or is incomplete, the analysis runs one more time. The current configuration uses `temperature: 0.35`, `thinkingLevel: 'off'`, and `maxTokens: 2600`. As in the other experiments, these are pragmatic parameters rather than the result of a benchmark. ![The Analog Frequency visual language with its blue and cream palette, three motifs, shape, treatment, type, and mood.](https://www.felixsanz.dev/assets/language.JWb0Fd3z_oskTX.jpg) *The first stage turns the reading of the sketch into decisions we can inspect.* ## Redesigning the mark, not tracing it The second stage uses the original sketch again, this time as a reference for [FLUX.2 \[klein\] 9B](https://runware.ai/models/bfl-flux-2-klein-9b?utm_source=felixsanz.dev&utm_medium=blog&utm_campaign=sketch-to-visual-system&utm_content=flux-model). The goal is not to clean up every stroke, but to **preserve the idea and rebuild it as a designed mark**. The base prompt makes that difference clear: ``` Redesign this rough logo sketch into a polished, professional brand logo mark. Simplify and balance the forms, perfect the geometry and proportions. Do not trace the rough pen strokes or paper; reinterpret the concept as a clean, designed mark. ``` On top of this base, we run three predefined approaches: ```js const DIRECTIONS = [ { label: 'Refined', approach: 'Keep the original composition and motif, faithfully refined and cleaned up.', }, { label: 'Minimal', approach: 'A minimal, reductive interpretation — the simplest confident version of the mark, monoline or single consistent stroke weight.', }, { label: 'Emblem', approach: 'A bold emblem interpretation — the mark locked into a solid circular badge.', }, ] ``` `Refined` tries to preserve the composition. `Minimal` looks for the most reductive version of the motif. `Emblem` forces it to work inside a circular badge. **All three options are defined in the experiment's code**, not by the Gemma analysis. This means every run starts from the same types of transformation. The palette extracted in the first phase is added with names and hexadecimal values. All three requests run in parallel at `1024 × 1024` pixels and `4` steps. ### Removing the paper without losing the drawing The negative prompt tries to stop the model from treating the sketch as the finish it should imitate: ``` hand-drawn, sketchy, rough, ballpoint pen, scribble, traced, uneven wobbly lines, construction lines, paper texture, notebook, photograph, product mockup, 3d render, gibberish text, misspelled text, watermark, signature, jpeg artifacts, lowres, blurry ``` `paper texture` and `construction lines` separate the idea from its medium. We also block the `hand-drawn` finish. Photographs and mockups are excluded because this stage needs an isolated mark. The text-related terms try to prevent notes from the sketch returning as meaningless letters. ![The three interpretations of the Night Signal logo: Refined, Minimal, and Emblem.](https://www.felixsanz.dev/assets/logos.D1qlZpgy_1AqMbs.jpg) *The three directions preserve the central motif with different levels of simplification.* ## Turning a logo into a rollout When we choose a direction, that image replaces the sketch as the reference. **Every mockup receives the same selected logo image**, together with the palette and the five surfaces proposed during the analysis. Each surface is described by two fields. `label` is the visible name in the interface. `product` describes the physical object without adding style or copy. The endpoint combines that description with a shared instruction: ``` Professional product mockup photography, soft even studio lighting, clean minimal neutral background, shallow depth of field, the brand logo and its {palette} color identity printed cleanly on the product, crisp, premium, realistic materials. ``` At this point we no longer try to describe the geometry of the mark again. **The selected image contains much more information than a list of motifs**. Using it as a reference reduces the chance that each surface rebuilds a different version of the brand. The five requests run in parallel. Each one generates a `1024` pixel square image in `4` steps. If one surface fails, it keeps its position in the panel and the others remain available. The negative prompt focuses on the failures that would break the presentation: ``` gibberish text, misspelled text, garbled logo, extra logos, watermark, signature, jpeg artifacts, lowres, blurry, deformed hands, extra fingers, duplicate product, collage, contact sheet, mockup grid, split panels ``` The term `logo` is not part of the negative prompt because that is exactly the reference we want to apply. We do block any additional logo and unreadable text. Compositions with several surfaces inside one image are excluded as well. ![The selected Night Signal logo applied to an event ticket, a T-shirt, a phone, a sign, and a record sleeve.](https://www.felixsanz.dev/assets/board.Gqgkz7Xc_1bAcWc.jpg) *The five surfaces let us check whether the direction remains recognizable outside the isolated logo.* ## Adding any other surface The five proposals make up the first panel, but they are not the end of the system. The studio lets us type another object, such as `a neon sign` or `an enamel pin`, and send it through the same flow. The request uses the currently selected logo, the same palette, and the photographic treatment from the other mockups. The result is stored inside that direction. If we switch to another logo and return later, each panel restores only the surfaces we generated for it. This final call is small, but it proves the idea behind the experiment: **the reference can keep expanding without going back to the sketch or repeating the entire analysis**. ![Three surfaces added to the Night Signal panel: a skateboard, an enamel pin, and a neon sign.](https://www.felixsanz.dev/assets/studio.DO-kf_S8_Z1PedQ1.jpg) *The studio applies the same direction to any other surface we enter.* ## What survives from the sketch All three directions preserve the large circle, the smaller offset circle, the antenna, and the Night Signal name. *Refined* stays closest to the drawing. *Minimal* simplifies the skyline and signal lines. *Emblem* reverses the contrast and locks the composition into a badge. None traces the ballpoint strokes, but all three clearly start from the same idea. Across the panel, the deep blue and cream carry through all five applications, and the mark remains recognizable on the ticket, T-shirt, phone, sign, and record sleeve. It is not an exact reproduction. The line weight, skyline, and relationship between the circle and antenna change slightly from one surface to another. An attractive panel is not enough. The test is whether we can still recognize the idea in the drawing and whether the applications appear to use the same brand. **A nice mockup with a different mark would be a failure of the process**. ## What it actually builds Sketch to Brand does not deliver a vector file or a type family. Nor does it produce the complete rules for a production-ready identity. It generates a structured interpretation and three rasterized marks. One of them is then used to prepare a collection of mockups for exploring the chosen direction. The thread that holds the process together is not a textual style description. It is **a chain of visual references**. The sketch carries its geometry into the logos, then the selected logo carries that decision into the products. The drawing stops being an image to fix and becomes a reference to follow.