Brand Foundations & Brand Kit Stage

Brand Foundations & Brand Kit Stage

The Brand Foundations & Brand Kit Stage is the creative identity phase of the roadmap, broken down into seven distinct sequential sub-stages accessed via the left-hand sidebar dropdown:

• Sub-Stage 1: Welcome to the Brand Foundations & Brand Kit Stage

  • This is the initial onboarding landing view that provides context, a core introduction video, and foundational directions before branding work begins.

• Sub-Stage 2: Brand Basics

  • The second item within the sequence, focusing on uploading a company logo, setting basic brand details, selecting baseline communication styles, and inputting your industry classification code.

• Sub-Stage 3: Core Values

  • The third item within the sequence, helping founders select or customize three to five key company tenets that define organizational culture and align marketing practices.

• Sub-Stage 4: Target Audience

  • The fourth item within the sequence, allowing creators to select or manually describe primary target audience segments to ensure visual branding connects with the right market.

• Sub-Stage 5: Fonts

  • The fifth item within the sequence, dedicated to testing, previewing, and assigning official typography configurations for both primary headlines and paragraph text.

• Sub-Stage 6: Color Palette

  • The sixth item within the sequence, focusing on selecting predefined themes or customizing individual hex codes to lock down a primary, secondary, and accent color palette.

• Sub-Stage 7: Export Brand Foundations & Brand Kit Results

  • The final technical milestone within this phase, presenting a read-only historical review layout of all branding asset selections with a tool to generate an exportable summary PDF report.

Stage Controls

• Next Button: A blue Next → link utility centered below the active canvas or anchored in the footer line allows users to save active configurations and cycle sequentially through the branding lifecycle steps.

Sub-Stage 1: Welcome to the Brand Foundations & Brand Kit Stage

This sub-stage screen serves as the formal onboarding gateway for the branding phase, introducing the founder to identity creation and visual asset generation.

Canvas Layout & Workspace Components

• Main Workspace Title: Displays "Welcome to the Brand Foundations & Brand Kit Stage".

• Instructional Subtitle: “This stage will help you confirm and generate your business details and generate your brand kit.”

• Branding Foundations Media Panel: Features a large, central display graphic or video asset set in an office hallway. The media asset displays the title text "Branding Foundations" on the upper-left area and features the official buildrunkit logo badge on the upper-right corner.

Navigation Controls

• Next Button: A blue Next → utility button is centered directly below the main media card workspace to lock down the introductory state and advance smoothly to Sub-Stage 2 (Brand Basics).

Sub-Stage 2: Brand Basics

This sub-stage screen focuses on defining your brand's foundational identity parameters. It establishes core visual traits, essential baseline information, and conversational values that dictate how your brand communicates with your audience.

Canvas Layout & Workspace Components

Brand Voice & Tone Configuration Suite

A wide, centralized setting segment located below the foundational data inputs allows creators to define market messaging styles:

Industry Classification Component

Navigation Controls

Sub-Stage 3: Core Values

This sub-stage centers on identifying and articulating the core foundational values that guide your business choices, shape your organizational culture, and keep your marketing messages clear and consistent.

Canvas Layout & Workspace Components

• Main Workspace Title: Displays "Core Values" with a guiding subtitle: “Identify and articulate up to core values that guide your business decisions and culture.”

• Educational Information Panel: A full-width light-blue callout container positioned at the top of the workspace:

  • Header: Why Core Values Matter

  • Bullet Points:

    • Guide decision-making and business practices

    • Help attract customers who share your values

    • Create consistency in your brand messaging

    • Build trust and authenticity with your audience

    • Define your company culture and hiring practices

Core Values Selection Suite

A comprehensive configuration area below the educational panel allows founders to choose and build out their cultural anchors:

• Selection Header: Select Your Core Values (accompanied by a target/compass icon)

• Instructional Label: “Choose 3-5 values that represent what your brand stands for. These will guide your decisions and communication.”

• Preset Values Grid: Twelve modular select buttons arranged in a clean, three-column layout:

  • Innovation | Integrity | Excellence

  • Collaboration | Sustainability | Transparency

  • Creativity | Empathy | Resilience

  • Accountability | Passion | Diversity

• Custom Core Value Utility: Includes an input field labeled “Add a custom core value” with an adjacent Add button, allowing users to define specific individual tenets that might not be captured by the defaults.

Navigation Controls

• Next Button: A blue Next → navigation action button sits at the lower right-hand corner of the workspace footer. Clicking this locks in your selections and moves directly forward to Sub-Stage 4 (Target Audience).

Sub-Stage 4: Target Audience

This sub-stage centers on refining and defining your primary target audience based on your market research insights. Selecting these audience tags ensures your upcoming visual identity and messaging connect with the right groups.

Canvas Layout & Workspace Components

Primary Target Audience Selection Suite

A wide configuration panel below the guide area allows creators to segment their primary user profiles:

Navigation Controls

Sub-Stage 5: Fonts

This sub-stage workspace lets founders select, preview, and assign their platform's official typography pairing, defining separate font styles for core marketing headlines and general readable body content.

Canvas Layout & Workspace Components

Font Selection & Discovery Tools

The workspace details three main interaction methods to browse and assign typography choices:

Final Font Assignment Matrix (Bottom Canvas)

Once specific options are selected from the menus above, the system locks them into the primary setup inputs:

Navigation Controls

Sub-Stage 6: Color Palette

This sub-stage workspace allows founders to design and implement a cohesive brand color system. By selecting primary, secondary, and accent colors, creators establish a visual hierarchy that ensures consistency across all digital and physical brand touchpoints.

Canvas Layout & Workspace Components

• Main Workspace Title: Displays "Color Palette".

• Instructional Subtitle: “Design your brand’s color system including primary, secondary, and accent colors.”

• Brand Application Preview Card: A sticky vertical container docked on the right side of the workspace to demonstrate real-time color application:

  • Header Title: Brand Application Preview (accompanied by a palette icon).

  • Live Render Content: Shows how the selected palette applies to a sample interface, including the brand name, descriptive text, and a primary action button labeled "Get Started Today".

Color Selection & Customization Suite

The workspace provides multiple ways to discover and lock in the brand's color identity:

• 1. Predefined Color Palettes (Top Left):

  • Description: A grid of eight professionally curated color schemes designed for different brand personalities:

    • Skybound, MindShift, NoirGlow, PastelBloom, ArcticWave, CitrusGrid, Oceanic, and SlateMist.

  • Interaction: Clicking a palette automatically updates the primary, secondary, and accent fields below.

• 2. Automated Generation:

  • Action Button: A "Generate Random Palette" utility button centered above the customization fields for rapid ideation.

• 3. Color Specification Matrix (Bottom Canvas):

  • A row of three interactive color-configuration blocks:

    • Primary Color (Blue Icon): Labeled for usage in “Buttons, links, and main elements.” Includes a Hex Color Code input (e.g., #0263fb) and a Lock toggle.

    • Secondary Color (Navy Icon): Labeled for usage in “Icons, borders, and subtle elements.” Includes a Hex Color Code input (e.g., #1e293b) and a Lock toggle.

    • Accent Color (Yellow Icon): Labeled for usage in “Highlights and call-to-action.” Includes a Hex Color Code input (e.g., #f5b02b) and a Lock toggle.

Navigation Controls

• Next Button: A blue Next → navigation utility button is located at the lower right margin of the footer. Clicking this saves the finalized color system and advances to the final sub-stage of this phase, Sub-Stage 7 (Export Brand Foundations & Brand Kit Results).

Sub-Stage 7: Export Brand Foundations & Brand Kit Results

This final checkpoint compiles all inputs, selections, and chosen brand identity assets from the Brand Foundations phase into a centralized review layout. It offers a read-only historical overview alongside file export features before finalizing the stage.

Canvas Layout & Workspace Components

• Main Workspace Title: Displays "Export Brand Foundations & Brand Kit Results" accompanied by an instructional subtitle: “This is an overview of what you told us in the brand foundations & brand kit stage, you can also export a brief summary of your findings as a pdf file.”

• Document Generation Panel: A full-width light-blue callout container positioned at the top of the canvas:

  • Description: Instructs the user to “Download a comprehensive PDF report containing all your brand foundations & brand kit findings”.

  • Action Button: Features a centered blue Generate PDF Report action key with an integrated download tray icon.

Core Identity Settings Summary Grid (Upper Panel)

The top half of the summary layout utilizes a two-column grid framework to display foundational identity selections:

• Brand Basics Card:

  • Label: “Your brand basics details”

  • Data Rows: Displays the confirmed brand name, tagline, description, chosen brand tone, and industry NAICS code classification.

• Core Values Card:

  • Label: “The core values for your brand”

  • Data Field: Displays the list of selected cultural anchors and operational principles.

• Target Audience Card:

  • Label: “The target audience classification for your brand”

  • Data Field: Displays the chosen audience segments and primary user profiles.

Visual Brand Kit Summaries (Lower Panel)

The bottom section tracks the visual assets, color systems, and typographic pairings logged throughout the creative development phase:

• Fonts Summary Block:

  • Header Title: Fonts Summary

  • Label: “Your chosen typography families for heading and body text”

  • Data Field: Displays the locked-in heading and body text font family designations.

• Color Palette Summary Block:

  • Header Title: Color Palette Summary

  • Label: “Your designed brand color system including primary, secondary, and accent colors”

  • Data Field: Displays the verified primary, secondary, and accent hexadecimal color codes.

Navigation Controls

• Next Button: A blue Next → navigation action button is anchored at the bottom right-hand margin of the footer. Clicking this seals your brand identity logs and advances the system into Stage 5 of the startup roadmap.