BrandFlow

Layout UI
Layout implementation
Layout UI
Layout UI
Layout UI
Layout UI

Inspiration

Brand consistency is critical for businesses, but current workflows create chaos. Brand colors, logos, and guidelines scattered across multiple tools, folders, and documents, making them difficult to find and use consistently. So Designers manually verifying colors and logos comply with brand guidelines, leading to errors that damage brand perception and again .

What it does

The Old Way: Designer sends draft ➔Manager rejects (wrong blue) ➔ Designer fixes ➔ Manager rejects (logo too small) ➔ Repeats 5x

The BrandFlow Way: Designer clicks 'Check Compliance' ➔ BrandFlow fixes errors instantly ➔ Manager receives a perfect, on-brand design the first time.

How we built it

We utilized the Adobe Express Add-on SDK to build integration:

Frontend: React 18 & TypeScript for type safety; Adobe Spectrum Web Components for native UI.

Logic: Recursive algorithms to traverse the document tree (editor.context.insertionParent) to inspect nested groups and node types.

Data: Browser localStorage for fast, offline-capable, and private brand kit storage.

Key APIs: editor.makeColorFill, editor.createText, and node.fullContent.characterStyleRanges.

Challenges we ran into

--Color Normalization: Adobe Express stores colors differently for Shapes (fill), Strokes (stroke), and Text (characterStyleRanges). We built a normalizer to extract and compare all these formats against brand hex codes.

--Canvas Traversal: Scanning a complex design without freezing the UI was hard. We implemented an efficient recursive algorithm to handle nested groups and 50+ elements in under 3 seconds.

--Sandbox Limitations: The clipboard API is restricted in the iframe. We pivoted to direct canvas manipulation using the Document SDK to insert footers and logos programmatically.

Accomplishments that we're proud of

Deep Scanning: Unlike simple tools that check only selected items, BrandFlow checks the entire canvas.

Performance: Achieving sub-3-second compliance checks for complex documents.(logo size, shade ,size)

Zero-Inference: We don't just guess; we provide specific actionable fixes (e.g., "Change #FF3333 to Brand Red #FF0000").

What we learned

The "Review Ping-Pong" is the Real Villain: We realized the true pain point isn't just "finding colors"—it's the endless back-and-forth between designers and managers. This insight drove us to pivot from a simple asset library to a Compliance Engine that guarantees "first-time approval."

The Complexity of "Simple" Checks: We learned that checking a document's color isn't simple. It requires navigating a deep, complex tree of nodes (groups, text ranges, strokes). Writing recursive algorithms that scan 50+ elements without freezing the UI was a massive technical level-up.

Mastering the Sandbox: We discovered that standard web APIs (like Clipboard) are restricted in the add-on environment. This forced us to go deeper into the Document SDK to manipulate the canvas directly, resulting in a faster, more robust integration.

Guidance Over Tooling: Users got lost in our initial "dashboard" layout. We learned that a linear 3-Step Wizard reduced cognitive load significantly, proving that how features are presented is just as critical as the features themselves.