The Brand Box

An AI-guided branding platform that turns a business brief into a personalized creative direction, visual identity, color palette, typography, tagline, and ready-to-use brand system.

Comment

Inspiration

Professional branding is still inaccessible to many small businesses, independent professionals, and first-time founders.

A traditional branding process can be expensive, intimidating, and difficult to navigate. Many people know how they want their brand to feel, but struggle to translate that feeling into a coherent visual identity.

I created The Brand Box to make that process more accessible. Instead of starting with a blank page, users are guided through a structured creative journey that helps them understand their brand, make informed visual decisions, and leave with an identity they can actually use.

The project is based on the branding methodology I developed through more than a decade of working as a graphic designer with small businesses.

What it does

The Brand Box transforms a business briefing into a personalized visual identity through a guided, step-by-step experience.

Users describe their business, audience, goals, personality, visual preferences, and what they want to avoid.

The platform then helps them:

  • understand the essence and personality of their brand;
  • receive a personalized creative direction;
  • identify tensions or ambiguities in their briefing;
  • refine that direction through a short conversation with an AI Creative Director;
  • explore personalized color palettes;
  • choose typography and supporting fonts;
  • receive tagline suggestions adapted to the brand name and positioning;
  • select visual elements and icons;
  • create a brand pattern;
  • preview the complete identity on a visual brand board;
  • continue into a post-purchase delivery environment.

The experience is available in Portuguese and English.

How we built it

Before OpenAI Build Week, The Brand Box already had a structured branding questionnaire, a curated library of creative styles, a Gemini-based matchmaker, visual refinement steps, checkout, and a post-purchase delivery flow.

During Build Week, I used Codex to analyze and extend the existing Next.js repository safely and incrementally.

Codex helped me:

  • map the current architecture and data flow;
  • create isolated server-side API routes;
  • integrate the OpenAI Responses API;
  • define structured JSON schemas;
  • implement validation and safe fallbacks;
  • connect AI results to the existing application state;
  • improve multilingual behavior;
  • prevent duplicate requests;
  • add usage guards for the pre-purchase flow;
  • integrate personalized palettes into the existing palette-selection step;
  • improve tagline, typography, icon, and brand-board logic;
  • diagnose deployment and environment-variable issues;
  • document the Build Week architecture.

The new AI Creative Director adds a layer of interpretation after the Gemini style match.

It can:

  • generate a structured creative diagnosis;
  • explain why a direction fits the brand;
  • identify unresolved tensions in the briefing;
  • ask one personalized refinement question;
  • interpret the answer and adjust the direction;
  • personalize color palettes and tagline suggestions;
  • preserve the original flow when OpenAI is unavailable.

The AI does not replace the curated creative system. Gemini still selects from existing visual directions, while OpenAI interprets, explains, refines, and personalizes the result.

The application uses Next.js, React, Vercel, OpenAI Responses API, Gemini, Supabase, Stripe, GitHub, and Codex.

All OpenAI calls happen server-side, and keys are stored securely in Vercel environment variables.

Challenges we ran into

The biggest challenge was adding a new AI layer without breaking an existing product.

The application already had a long, stateful flow with saved progress, multilingual content, curated styles, checkout logic, and post-purchase delivery.

Some of the main challenges included:

  • preventing the old Gemini message from flashing before the OpenAI diagnosis loaded;
  • separating the contact name from the public brand name;
  • preventing a creative-style name from being interpreted as the brand name;
  • ensuring audience selection had priority over broad business categories;
  • preserving generated content across language changes;
  • avoiding unnecessary API calls before purchase;
  • integrating AI-generated palettes into the existing palette flow instead of creating a parallel experience;
  • handling Preview and Production environment variables separately in Vercel;
  • preserving fallbacks so the user could always continue.

Accomplishments that we're proud of

The Brand Box now feels less like an automated template selector and more like a guided creative consultation.

Users are not only shown a visual style. They receive an explanation, can question the recommendation, clarify priorities, and understand how those choices affect color, typography, composition, patterns, and applications.

I am especially proud that the new AI features were added without replacing the original curated system or blocking the user when an AI request fails.

I am also proud of how Codex helped transform a complex existing codebase incrementally, instead of forcing a complete rebuild.

What we learned

I learned that adding AI to a product is not about generating the maximum amount of content.

The most important decision is defining where AI should interpret, where it should explain, and where deterministic product logic should stay in control.

In The Brand Box:

  • AI interprets the briefing;
  • curated data defines the visual territory;
  • code validates structure and contrast;
  • the user confirms the final choices;
  • fallbacks protect the experience.

I also learned how useful Codex can be for tracing state through an existing repository, identifying hidden dependencies, implementing isolated routes, and making focused changes without rewriting the entire application.

What's next for The Brand Box

The next steps are:

  • collect feedback from beta users;
  • expand the curated style and icon libraries;
  • improve accessibility and mobile behavior;
  • connect selected AI recommendations more deeply to the post-purchase dashboard;
  • add more languages;
  • improve analytics and AI-cost monitoring;
  • continue developing The Brand Box as an accessible branding service for small businesses internationally.

The long-term goal is not to replace designers.

It is to make strategic branding guidance available to people who would otherwise have no access to it.

Built With

  • codex
  • gemini
  • next.js
  • openai-responses-api
  • supabase
  • vercel
Share this project:

Updates