I Built A Brand Archetype Maker App In Figma

What is Branding Saga?

Branding Saga is a web app that turns the 12 brand archetypes into a practical playbook. Pick an archetype and it shows the colours, fonts, shapes, motion, voice, taglines, hooks and content ideas that bring that brand character to life. It was designed in Figma, built with Claude Code and deployed on Vercel.

You can try it here: branding-saga.vercel.app

Key takeaways about brand archetypes

• Branding Saga covers all 12 brand archetypes, grouped into 4 human motivations.
• Every archetype has a Visual identity tab and a Verbal identity tab.
• You get real hex colours, font pairings, shapes, textures, motion ideas, taglines, hooks and post ideas.
• It is made for designers, copywriters and brand builders.
• The idea is to borrow principles from an archetype, never a personality wholesale.

What is a brand archetype?

A brand archetype is a familiar pattern of human motivation that a brand uses as its character. Think of the Hero’s courage, the Caregiver’s warmth or the Outlaw’s defiance. People recognize these characters before anyone explains them, which is why archetypes make brands easier to remember and choose.

The idea comes from Carl Jung’s work on universal archetypes. Marketers Margaret Mark and Carol Pearson later popularized the 12 brand archetypes in their 2001 book The Hero and the Outlaw.

What are the 12 brand archetypes?

There are 12 brand archetypes, grouped by what drives them. Branding Saga sorts them into four motivations: Independence, Mastery, Belonging and Stability.

Each of these brand archetypes has its own page in Branding Saga.

What are the 4 human motivations behind brand archetypes?

1. Independence: seek freedom, truth and a life on their own terms. This brand archetypes group holds the Innocent, Sage and Explorer.
2. Mastery: take risks, create change and leave a mark. This group holds the Hero, Outlaw and Magician.
3. Belonging: build connection through intimacy, joy and common ground. This group holds the Every man, Lover and Jester.
4. Stability: create order, care and things that endure. This group holds the Caregiver, Ruler and Creator.

What do you get inside each brand archetype page?

Every archetype page in Branding Saga is split into two tabs, Visual identity and Verbal identity, so you design the look and write the voice from the same character. Here is what sits inside.

1. Key visual and creative direction. One headline idea for how the archetype should look, plus the signature device to build around.
2. Colour palette. Named colours with roles such as Primary, Pop, Contrast, Accent and Outline, each with a hex code you can copy for each brand archetype.
3. Typography. A display font and a body font pairing, shown with a live specimen.
4. Shapes, motifs and textures. The forms and surface treatments that belong to the brand archetype.
5. Motion signature. How things should move so the animation matches the archetype’s emotional pace for your brand archetype.
6. Visual principles. A clear Do and a clear Don’t, so the look stays on character.
7. Verbal identity. Personality (core desire, deepest fear and the promise), voice notes, words to use and words to avoid, sample taglines, hooks that open doors, and content pillars with post ideas.

The site also has search, a filter by motivation, and one-click copy buttons for colours, directions and phrases. Every brand archetype gets the same treatment.

Example: what the Jester brand archetype playbook looks like

The Jester page shows how complete one archetype is. Its tagline is “Life’s too short to be boring” and its promise is “We make it fun.”

• Creative direction: a visual pun for this brand archetype, with something delightfully in the wrong place, with oversized squiggles and bursts escaping the grid.
• Colours: Hot Pink #FF3EA5, Lemon #FFE600, Electric Blue #2B59FF, Lime #9BFF3A and Ink Black #111111.
• Type: Bungee for display, DM Sans for body.
• Shapes: blob, zigzag, burst, confetti, squiggle and triangle.
• Textures: halftone, risograph, sticker edge and flat colour.
• Motion: wiggle, bounce, squash-and-stretch, the movement that suits this brand archetype.
• Do: make one joke land instantly.
• Don’t: follow the grid too obediently.
• Voice: casual, meme-literate and self-aware.
• Content ideas: industry memes, trend reactions, fake product launches, tier lists and self-roasts.

How do you use Branding Saga to apply brand archetypes in 3 steps?

1. Find the motivation. Start with what your audience wants to feel, not which brand archetype looks coolest.
2. Study both halves. Visual identity sets the scene. Verbal identity gives the character a voice.
3. Make it your own. Borrow principles, never a personality wholesale. Your story should still be unmistakably yours.

Who is Branding Saga for? A brand archetypes tool for builders

• Designers who need a colour, type and motif starting point for a brand archetype.
• Copywriters who need a voice, taglines and hooks that stay consistent.
• Brand builders such as founders and marketers who want a clear character for their brand before they hire anyone.

How was this brand archetypes playbook built?

I built Branding Saga, a brand archetypes playbook, with three tools, one for each stage of the job (see more of my Claude Code projects):

1. Figma for the design, including layout, type and the look of the playbook.
2. Claude Code to turn that design into a working web app.
3. Vercel to deploy the brand archetypes playbook, so anyone can open it with a link.

Design, build, ship. That is the whole flow, and it is a good example of how a non-traditional builder can launch a real product with AI tools. Brand archetypes are a great first project for that kind of builder.

Brand archetypes: frequently asked questions

What is Branding Saga?

Branding Saga is a web playbook for the 12 brand archetypes. It translates each archetype into practical guidance on colour, typography, imagery, voice, taglines, hooks and content.

How many brand archetypes are there?

There are 12 brand archetypes: Innocent, Sage, Explorer, Hero, Outlaw, Magician, Every man, Lover, Jester, Caregiver, Ruler and Creator.

How do I choose the right brand archetype?

Start with the motivation of your audience, meaning what they want to feel. Then read the visual and verbal pages of the brand archetypes in that group and see which one matches how your brand already behaves.

Can I combine more than one archetype?

Branding Saga advises borrowing principles from an archetype rather than copying a personality wholesale, so your brand still feels like itself.

What does each archetype page include?

A Visual identity tab (key visual, colour palette with hex codes, typography, shapes, textures, motion and Do/Don’t principles) and a Verbal identity tab (personality, voice, words to use and avoid, taglines, hooks and content ideas). Every brand archetype page follows the same layout.

Who is Branding Saga for?

Designers, copywriters and brand builders who want to put brand archetypes to work.

What tools were used to build Branding Saga?

Figma for design, Claude Code for building the app and Vercel for deployment. Together they turned the brand archetypes idea into a live app.

Try it: explore the 12 brand archetypes

Meet the full cast of 12 at branding-saga.vercel.app. Pick the brand archetype that sounds like your brand, then study both its look and its voice.

Vinita Mathreja is a crypto and AI marketer, Senior News Editor at RG Media, and the founder of WhatTheWeb, an India-focused publication on AI, crypto, marketing and emerging tech. She writes about brand archetypes and building with AI.