hierarchy

| Product | Category | Page | Featured Components | Generic Components | Data | Connections | Comments | |-----------|----------|----------|--|-------------------|------|-------------| | V1| Core Brand Identity | | | | | | | | | Mission & Vision | | Texts fields: Company Goal: "We exist to [purpose] for [audience]." or select from pre-written options) | Purpose (string), audience (string) | Informs tagline and target audience | | | | Brand Values & Personalities | | Dropdown: Industry (Technology, Retail, Education, Healthcare, Finance, Non-Profit, Entertainment) | Industry (string) | | | | | | Multi-select: Personality (Hero (Bold, Determined, Strong), Caregiver (Warm, Supportive, Selfless), Explorer (Curious, Brave, Free-spirited), Creator (Innovative, Expressive, Original), Innocent (Wholesome, Honest, Optimistic), Sage (Intelligent, Thoughtful, Insightful), Jester (Witty, Energetic, Irreverent), Magician (Mysterious, Inspiring, Charismatic), Rebel (Bold, Rebellious, Unapologetic), Ruler (Powerful, Confident, Responsible), Everyman (Approachable, Honest, Friendly), Lover (Sensual, Warm, Devoted)) | Personality (name), traits (value, value, value) | | | | | | | Multi-select: Values (Sustainability, Growth, Community, Customer-first, Efficiency, Creativity) | Values (string) | | | | | | Target Audience | | Dropdown: demographic | Age, Location | | A defined audience (e.g., young professionals) could limit imagery to modern, urban styles | | | | | | Dropdown: psychographic | Interests, Behaviors, | | | | | | | Dropdown: gains | What they want to achieve, goals, needs, aspirations | | | | | | | | Dropdown: pains | What they want to avoid, fears, frustrations, obstacles | | | | | | Brand name & Tagline | Thesaurus | | | | Synonyms for and that align with industry/personality/values/mission | | | | | | Radio button: Tagline | TaglineUsed (not set, yes, no) | | | | | | | Text input: Tagline | Tagline | Tagline (string) | | | Brand Voice & Tone | | | | | | | | | Messaging | | Text fields: "We solve [problem] with [solution]" | problem (string), solution (string) | | Goals of the messaging | | | | | | Dropdown: differentiators | | benefit(value) | | What sets you apart from competitors | | | | Voice & Tone | | | Use the personality from Core Brand Identity to suggest initial slider positions | The way how the message is delivered | | | | | | Slider (casual to professional) | formality (percentage) | | The level of polish and professionalism in the message | | | | | | Slider (serious vs playful) | playfulness (percentage) | | The balance between a lighthearted or formal approach | | | | | | Slider (respectful vs irreverent) | respect (percentage) | | The degree of boldness in communication | | | | | | Slider (matter-of-fact vs enthusiastic) | emotion (percentage) | | The level of excitement or passion | | | | Copywriting | | Editable text fields | | Pull data from the brand name, problem, messaging and voice/tone sections to pre-populate templates | Pick or customize templates for pages like “About Us” or product descriptions | | | Visual Identity | | | | | | | | | Logo | | | | Appears across all preview views | Use a logo maker with templates or upload a custom design with logo variations (e.g., primary, secondary, icon-only) | | | | Color | | | | | Provide a color palette generator that suggests colors based on previous choices | | | | | | Multi-select: Industry/Personality/Values | | | | | | | | Color Picker | | | | Colors are highlighted based on industry/personality/values, color with highest correlation is pre-picked, user can still change hue/sat/lum | | | | | | Dropdown: Color scheme | Tone (hue minus saturation) = professional, Shades (hue plus black), tint (hue plus white), Analogous (adjacent hues), Complementary (2 hues, +180 degrees), Triad (3 hues, +120/+240 degrees) | | | | | | | | Color preview | | Tone/Shades/Tint | | | | | | Color results test (Contrast & WCAG compliance) | | | | | | Typography | | Include options for headings, body text, and accents | | Curate font pairs that align with the brand personality (e.g., modern sans-serif for "Explorer," classic serif for "Ruler") | Select font pairs from a curated list or upload custom fonts | | | | Imagery | | | | Offer filters based on the target audience and personality. For example, a "Lover" personality might see romantic, warm imagery, while "Everyman" sees relatable, everyday scenes | Choose styles (e.g., “minimalist photos”) or pick from a filtered stock library | | | Application & Implementation | | | | | | | | | Website & UI Components | | Include a component library (e.g., buttons, forms, cards) that users can customize with their brand colors and fonts | | | Select layouts (e.g., single-page vs. multi-page) and UI elements (e.g., button styles) | | | | Social Media Style Guide | | Dropdown: promotional, educational, etc. | | | Customize post templates (e.g., image size, text placement), determine schedule and goals of posts | | | | Print & Offline Materials | | | | | Pick templates (e.g., business card layout) and tweak details (e.g., contact info), Include placeholders for dynamic content (e.g., "[Product Name] now available!") | | Deliverables | Brand Core Identity | Brand Story | | | | | summarizing the mission, vision, values, personality traits, target audience profiles (or personas), and the final brand name and tagline | | | Brand Voice & Tone | Brand Tone of voice | | | | | examples of messaging, tone attributes, and sample copy for different contexts (e.g., social media, customer support) | | | Visual Identity | Brand Style Guide | | | | | including logo variations, color palettes, typography rules, and imagery guidelines (e.g., photo filters, illustration styles) | | | Application & Implementation | Brand Assets | | | | | UI Component kit (e.g., buttons, forms, icons), social media templates, and print design templates (e.g., business cards, brochures) | | | | Brand Templates | | | | | Atomic Design system (Atoms > Molecules > Organisms > Templates > Pages, for instance: typography, form field, form, contact section, contact page) | | User Documentation | | | | | | |