Context
The Devarno ecosystem spans multiple products — each with its own brand identity needs (logos, color palettes, typography, tone-of-voice guidelines, social assets). Manually creating and maintaining brand kits across this portfolio was time-consuming, inconsistent, and impossible to scale. We needed a repeatable, agent-driven system that could generate cohesive brand identities from a single project definition. The Branding Assistant was built to solve this: a modular pipeline that takes a YAML project definition and produces a complete brand kit — from color tokens to generated media assets — without manual design intervention.Architecture Decisions
5-Layer Modular Design
The system is structured as five sequential layers, each with a single responsibility and a well-defined contract with the next.Project Definition
YAML files validated against JSON Schema. Each product declares its name, domain, personality traits, target audience, and constraints. This is the single source of truth for everything downstream.
Brand Normalization
The raw project definition is transformed into a Brand Anchor — a structured, model-agnostic representation of brand meaning. Color semantics, tone vectors, and visual direction are resolved here, decoupled from any specific model or output format.
Prompt Modules
Reusable prompt templates that consume the Brand Anchor and produce model-ready prompts. Each module targets a specific output type (logo, palette, typography, copy). The same modules work across different brands — only the Brand Anchor changes.
Model Router
Routes each prompt to the appropriate generative model based on output type, quality requirements, and cost constraints. Supports multiple providers with fallback chains.
Key Learnings
Separation of Concerns
Brand meaning must be decoupled from model-specific prompting. When these are tangled together, changing a model provider means rewriting your entire brand logic.
- Swapping from DALL-E to Midjourney requires changing only the Prompt Module, not the brand definition
- Adding a new output type (e.g., motion graphics) only requires a new Prompt Module that reads the existing Brand Anchor
- Brand consistency is enforced at the semantic level, not the prompt level
Schema-Driven Design
Every project definition is validated at ingest time against a strict JSON Schema. This catches errors early and ensures downstream layers can trust their inputs. The schema enforces:| Field | Type | Purpose |
|---|---|---|
name | string | Product display name |
domain | enum | Industry vertical (tech, finance, creative, etc.) |
personality | string[] | Brand trait vectors (e.g., ["bold", "technical", "warm"]) |
audience | object | Target demographic with age range, expertise level |
constraints | object | Color restrictions, accessibility requirements, format specs |
existing_assets | object[] | Optional — existing brand elements to preserve or evolve |
Agent-to-Agent Orchestration
The pipeline is implemented as a multi-agent system where each agent owns one layer. Agents communicate via structured messages and never reach into each other’s internal state. This architecture enables:- Independent scaling — the Model Router agent can be horizontally scaled without affecting upstream agents
- Isolated testing — each agent can be tested with mock inputs and verified outputs
- Audit trails — every inter-agent message is logged, creating a full trace from project definition to final output
Prompt Reusability
How the same prompt modules work across different brands
How the same prompt modules work across different brands
Each Prompt Module is a template that interpolates values from the Brand Anchor. For example, the logo prompt module contains structural instructions about composition, style, and format — but all brand-specific values (colors, personality, domain cues) come from the Brand Anchor injected at runtime.This means adding a new product to the pipeline requires only a new YAML project definition. The entire prompt library is shared infrastructure.
Technical Outcomes
TypeScript Engine
Core pipeline implemented in TypeScript with strict typing across all layer boundaries. Brand Anchor and inter-agent messages are fully typed interfaces.
React UI Integration
Brand kit preview and editing UI built in React, consuming the pipeline outputs via BFF API routes. Real-time preview of generated assets.
BFF API Routes
Backend-for-frontend API layer that orchestrates the pipeline and serves results to the UI. Handles authentication, rate limiting, and caching.
Playwright E2E Tests
Full end-to-end test suite validating the complete flow from project definition input to rendered brand kit output in the browser.
Metrics & Validation
The testing strategy mirrors the 5-layer architecture — each layer has its own validation, plus integration tests that span multiple layers.| Test Type | Scope | What It Validates |
|---|---|---|
| Smoke tests | Per layer | Each layer starts, accepts valid input, produces expected output shape |
| Schema validation | Layer 1 | Project definitions conform to JSON Schema; invalid inputs rejected with clear errors |
| Brand Anchor fidelity | Layer 2 | Normalized output preserves all semantic information from the project definition |
| Prompt correctness | Layer 3 | Generated prompts contain required brand elements and follow model-specific formatting |
| Integration tests | Layers 1-5 | Full pipeline execution with fixture inputs; outputs validated against expected structure |
| E2E tests (Playwright) | UI + Pipeline | User submits project definition in UI, receives complete brand kit; visual regression checks |
Campaign Trails
- Extend to motion/video: The Brand Anchor already captures enough semantic information to drive video generation prompts — adding a motion Prompt Module is the natural next step.
- Brand drift detection: Periodic re-evaluation of existing brand kits against their project definitions to detect drift as the product evolves.
- Community brand kits: Open-source the Prompt Modules and schema so external projects can generate brand kits using the same pipeline.