Inspiration
My inspiration for BrandGuard AI came from a recurring and costly problem I've witnessed in large organizations. Adobe Express is a phenomenal tool for democratizing creativity, allowing anyone in a company—from marketing and sales to HR—to produce content with incredible speed. But this very speed and accessibility created a new challenge: a "governance gap."
I saw companies investing millions in their brand identity, only to have it diluted by a "patchwork quilt" of inconsistent materials. Sales teams were using stretched logos, social media posts had off-brand colors, and internal announcements used the wrong fonts. This forced a false and damaging choice: either slow down content creation with cumbersome manual reviews or risk eroding the brand's value and trust. I knew there had to be a better way—a way to embed the brand's guardian directly into the creative tool itself.
What it does
BrandGuard AI is an intelligent co-pilot for Adobe Express that acts as an AI-powered brand manager, living right inside the creative workflow. As a user designs a flyer, social post, or presentation, the BrandGuard AI add-on scans the content in real-time and provides a quantitative compliance score.
It functions as a "Design Guardian," checking every element against the organization's official brand guidelines. It verifies:
Brand Identity: Ensuring the correct logos, approved color palettes, and official brand fonts are being used correctly.
Accessibility: Automatically checking for critical accessibility issues, like whether the color contrast between text and its background meets WCAG 2.2 standards, making content inclusive for everyone.
Legal Compliance: Flagging if required legal text, like copyright notices or disclaimers, is missing from the document.
Essentially, it eliminates the need for manual review cycles, empowering every creator—designer or not—to build compelling, on-brand content with complete confidence and velocity.
How I built it
I built BrandGuard AI using a modern, decoupled architecture to ensure security and performance, adhering strictly to the guidelines provided by the Adobe Express Add-on SDK.
The system has three main parts:
The Frontend UI Panel: This is what the user sees inside Adobe Express. I built it using standard HTML, CSS, and Vanilla JavaScript, but most importantly, I used Adobe's Spectrum Web Components. This was crucial for creating a user interface that looks and feels completely native to the Adobe Express environment, adapting automatically to light and dark themes.
The Document Sandbox: This is the heart of the add-on's interaction with the user's work. Because Express add-ons run in a secure sandbox for safety, the UI panel cannot directly access the document. I wrote a dedicated script that runs in this secure sandbox environment. Its sole job is to traverse the document's structure, read properties like colors and fonts, and pass that information securely back to the UI panel.
The Backend Service: I set up a lightweight backend service to act as the compliance engine. The UI panel sends the extracted document data to this backend, which compares it against a defined brand profile (e.g., a list of approved colors and fonts) and returns a detailed JSON response with a list of violations.
The entire workflow is seamless: the user clicks "scan," the UI calls the sandbox, the sandbox extracts the data, the UI sends it to the backend, the backend scores it, and the UI dynamically updates to show the results.
Challenges I ran into
The biggest challenge was working with the highly secure design of Adobe Express. For safety, the add-on's user panel is kept completely separate from the actual design document. This meant I couldn't just have my panel "look" at the design to check for issues. I had to learn how to build a secure communication channel between the two, allowing them to pass messages back and forth without breaking Adobe's security rules. It was a fun puzzle that required a deep dive into the SDK documentation.
Another interesting challenge was the color contrast check for accessibility. It seems simple—compare the text color to its background color. But in a complex design with layered images and shapes, figuring out the exact background behind a piece of text can be surprisingly tricky. I built a solution that works well for common cases, and it highlighted a great opportunity to make the logic even more intelligent in the future.
Accomplishments that I’m proud of
I'm incredibly proud of building a functional, end-to-end prototype that proves the core concept is not only valuable but technically feasible. Seeing the compliance score update in real-time as a user corrects an issue is immensely satisfying.
I'm also proud of the user experience. By committing to Adobe's Spectrum Web Components, the add-on feels like a natural extension of Adobe Express, not a clunky, third-party tool. This seamless integration is key to user adoption.
Most importantly, I'm proud of incorporating an accessibility (WCAG) check from day one. It goes beyond just brand aesthetics and adds a layer of social responsibility to the tool, helping organizations create content that is inclusive for everyone. The "Locate Issue" feature, which highlights the non-compliant element on the canvas, was a final touch that I believe creates a truly intuitive and helpful feedback loop.
What I learned
This project was a fantastic learning experience. I gained a deep, practical understanding of the Adobe Express add-on architecture and the critical importance of its sandboxed security model. I also learned firsthand the power of a well-documented design system like Spectrum for building high-quality, consistent user interfaces at speed.
On a broader level, the project reinforced my understanding of the challenges faced by enterprise users. It's not enough for a tool to be powerful; it must also be safe, compliant, and governable. Features that might seem like edge cases for individual creators are mission-critical for large businesses.
What's next for BrandGuard AI
This prototype is just the beginning. My vision for BrandGuard AI is to make it the definitive governance engine for enterprise creation in Adobe Express. The post-hackathon roadmap is clear:
Expanding Core Features: I'll first implement the full suite of compliance checks, including sophisticated logo analysis (checking for distortion or versioning) and automated one-click "Fix" buttons to resolve common issues instantly.
Integrated Asset Library: Next, I'll build out a full-featured brand asset library directly within the add-on panel, allowing users to drag and drop pre-approved logos, icons, and images directly onto their canvas.
Strategic AI Integration: The most exciting next step is a deep integration with Adobe Firefly. I envision a workflow where BrandGuard AI uses its brand knowledge to help a user generate a perfect, brand-aligned prompt for the Firefly API, receives the AI-generated image, and then automatically validates it for compliance—a complete, self-governing creative loop.
Ultimately, my goal is to list BrandGuard AI on the Adobe Express Marketplace with a freemium model, offering core checks for free and unlocking the full enterprise feature set with a paid subscription.
My Commitment to Ship
I built BrandGuard AI with a clear path to market in mind. The technology I've developed for this hackathon is not just an experiment; it's the foundation of a real product, built on top of an existing and proven BrandGuard backend. My commitment is to see this through to a public launch.
The first step post-hackathon will be to leverage mentorship from the Adobe team to refine the product and align it with best practices. From there, I plan to launch a private beta program with a select group of enterprise testers to gather real-world feedback. Following a successful beta, I will navigate the official review process and launch BrandGuard AI on the public Adobe Express Marketplace, making it available to the millions of users who can benefit from creating with confidence.
Log in or sign up for Devpost to join the conversation.