UNPKG

aiwg

Version:

Cognitive architecture for AI-augmented software development with structured memory, ensemble validation, and closed-loop correction. FAIR-aligned artifacts, 84% cost reduction via human-in-the-loop, standards adopted by 100+ organizations.

875 lines (632 loc) 24.1 kB
# Brand Guidelines Template --- **Document ID**: BRD-001 **Template Version**: 1.0.0 **Last Updated**: 2025-11-28 **Owner**: Brand Team **Status**: Living Document --- ## Purpose This template provides a comprehensive framework for establishing and maintaining brand standards across all touchpoints. These guidelines are designed as a living system that evolves with your brand while maintaining consistency and recognition. ## How to Use This Template 1. Complete each section with your brand-specific information 2. Remove placeholder text (marked with [BRACKETS]) 3. Customize sections based on your brand needs 4. Publish to a web-based platform for accessibility 5. Review and update quarterly 6. Use design tokens for automated sync to code --- ## 1. Core Brand Foundation ### 1.1 Brand Purpose & Vision **Why We Exist** (Beyond Profit): [Describe your brand's fundamental reason for being. What problem do you solve? What change do you bring to the world?] Example: "We exist to democratize professional design tools, enabling anyone to create beautiful visual content regardless of technical skill." **Vision Statement** (Aspirational Future): [What does the world look like when your brand succeeds?] **Mission Statement** (How You'll Get There): [What you do day-to-day to achieve the vision] ### 1.2 Brand Values List 3-5 core values with behavioral examples: **Value 1: [Name]** - Definition: [What this means to us] - Behaviors: - We [specific action] - We [specific action] - We [specific action] - Example: [Real scenario demonstrating this value] **Value 2: [Name]** - Definition: - Behaviors: - Example: **Value 3: [Name]** - Definition: - Behaviors: - Example: ### 1.3 Brand Positioning **Target Audience**: - **Primary**: [Detailed persona: demographics, psychographics, pain points] - **Secondary**: [Additional audience segments] **Competitive Differentiation**: - **Category**: [What market/category you compete in] - **Unique Value**: [What makes you different/better] - **Proof Points**: [Evidence supporting your differentiation] **Positioning Statement**: For [target audience], [Brand Name] is the [category] that [unique value proposition] because [reason to believe]. ### 1.4 Brand Personality **Archetypal Framework**: [Select 1-2 primary archetypes] - [ ] Hero (Nike): Inspirational, courageous, achievement-oriented - [ ] Sage (Google): Knowledge-seeking, thoughtful, authoritative - [ ] Jester (Ben & Jerry's): Playful, fun-loving, irreverent - [ ] Creator (Adobe): Innovative, imaginative, expressive - [ ] Caregiver (Johnson & Johnson): Compassionate, nurturing, protective - [ ] Ruler (Mercedes): Authoritative, responsible, organized - [ ] Explorer (Patagonia): Adventurous, independent, pioneering - [ ] Magician (Disney): Transformative, visionary, charismatic - [ ] Innocent (Dove): Pure, optimistic, honest - [ ] Lover (Chanel): Passionate, intimate, appreciative - [ ] Rebel (Harley-Davidson): Revolutionary, disruptive, provocative - [ ] Everyperson (IKEA): Down-to-earth, relatable, authentic **Personality Attributes** (Select position on each scale): | Dimension | Position | Rationale | |-----------|----------|-----------| | Formal Casual | [e.g., 70% Casual] | [Why this fits our audience] | | Respectful Irreverent | [Position] | [Rationale] | | Enthusiastic Matter-of-fact | [Position] | [Rationale] | | Serious Funny | [Position] | [Rationale] | | Expert Friend | [Position] | [Rationale] | ### 1.5 Brand Story **Origin Narrative**: [How did the brand start? What problem did the founder(s) experience that led to creation? Keep it human and specific.] **Evolution**: [Key milestones in brand journey. What changed? What stayed constant?] **Present Day**: [Where are you now? What are you building toward?] **Future Vision**: [Where is the brand heading in the next 3-5 years?] --- ## 2. Visual Identity System ### 2.1 Logo System #### Primary Logo **Full-Color Horizontal** (Default Usage): - Use Case: Headers, presentations, default applications - Minimum Size: 120px width (digital), 0.5in (print) - File Formats: `.svg` (web), `.eps` (print), `.png` (fallback) **Full-Color Stacked** (Vertical Spaces): - Use Case: Square social profiles, narrow layouts - Minimum Size: 100px height (digital), 0.75in (print) **Monochrome Variations**: - Black: Light backgrounds, single-color printing - White: Dark backgrounds, reversed applications - Single-Color: When brand colors unavailable #### Specialty Variations **Favicon**: 16x16, 32x32, 64x64px (simplified icon mark) **App Icon**: 512x512px, 1024x1024px (iOS/Android) **Social Media**: - Profile: 400x400px (circular safe zone) - Cover: Platform-specific dimensions #### Clearspace & Protection **Clearspace Rule**: Minimum clearspace = [X height of logo element] [DIAGRAM: Show logo with clearspace grid] **Isolation Zone**: No other graphic elements, text, or edges within clearspace **Exceptions**: When clearspace creates excessive white space, prioritize legibility over rigid adherence #### Logo Usage Rules **DO**: - Use provided file formats (never recreate) - Maintain original proportions - Ensure adequate contrast with background - Use appropriate variation for context **DON'T**: - Stretch, skew, or distort proportions - Change colors outside approved palette - Add effects (shadows, glows, gradients on flat logos) - Rotate or tilt - Place on busy backgrounds without treatment - Outline or add strokes - Use low-resolution files #### File Naming Convention ``` [brand-name]-logo-[variation]-[color]-[orientation].[ext] Examples: - acme-logo-primary-full-color-horizontal.svg - acme-logo-icon-monochrome-black.png - acme-logo-wordmark-white-stacked.eps ``` ### 2.2 Color Palette #### Primary Colors (2-3 colors) **Brand Anchor**: [Name] - Hex: `#000000` - RGB: `rgb(0, 0, 0)` - CMYK: `C0 M0 Y0 K100` - Pantone: [PMS ####] - Usage: [Primary CTAs, headlines, brand moments] **Supporting Primary**: [Name] - Hex: `#000000` - RGB: `rgb(0, 0, 0)` - CMYK: `C0 M0 Y0 K0` - Usage: [Secondary elements, accents] #### Secondary Colors (4-6 colors) **[Color Name 1]**: - Hex: `#000000` - Usage: [Specific use cases] **[Color Name 2]**: - Hex: `#000000` - Usage: [Specific use cases] [Continue for all secondary colors] #### Neutral Colors (3-5 grays + black/white) **Text Dark**: `#2C2C2C` (not pure black for readability) **Background Light**: `#FAFAFA` (off-white) **Border Gray**: `#CCCCCC` (mid-tone) **Pure White**: `#FFFFFF` **Pure Black**: `#000000` #### Semantic Colors (Functional) **Success**: Green `#00A86B` - Usage: Confirmations, success states - Contrast Ratio: 4.5:1 with white background **Warning**: Amber `#FFA500` - Usage: Cautions, pending states - Contrast Ratio: 4.5:1 with white background **Error**: Red `#D32F2F` - Usage: Errors, destructive actions - Contrast Ratio: 4.5:1 with white background **Info**: Blue `#1976D2` - Usage: Informational messages, tips - Contrast Ratio: 4.5:1 with white background #### Color Usage Guidelines **Hierarchy Rule (60-30-10)**: - 60% Dominant (often neutral): Backgrounds, large surfaces - 30% Secondary: Supporting elements, sections - 10% Accent: CTAs, highlights, focal points **Accessibility Requirements**: - WCAG AA: 4.5:1 contrast for normal text, 3:1 for large text (18pt+) - WCAG AAA (aspirational): 7:1 for normal text - Color Blindness: Never use color alone to convey information - Tools: WebAIM Contrast Checker, Colorable **Dark Mode Palette** (if applicable): - Invert hierarchy: Dark backgrounds, light text - Desaturate colors by 20-30% for dark backgrounds - Elevated surfaces use lighter grays, not pure white #### Design Tokens (JSON) ```json { "color": { "brand": { "primary": "#000000", "secondary": "#FFFFFF" }, "semantic": { "success": "#00A86B", "warning": "#FFA500", "error": "#D32F2F", "info": "#1976D2" }, "neutral": { "text-dark": "#2C2C2C", "background-light": "#FAFAFA", "border-gray": "#CCCCCC" } } } ``` ### 2.3 Typography #### Typeface Selection **Primary Typeface**: [Font Name] (Headlines, UI Elements) - Weights: 300 (Light), 400 (Regular), 600 (Semibold), 700 (Bold) - License: [Google Fonts / Adobe Fonts / Commercial] - Fallback Stack: `[Primary], -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif` **Secondary Typeface**: [Font Name] (Body Copy, Long-Form) - Weights: 400 (Regular), 400 Italic, 700 (Bold) - License: [Source] - Fallback Stack: `[Secondary], Georgia, 'Times New Roman', serif` **Monospace** (Code, Technical Specs): - Font: [Monospace Font] - Fallback Stack: `[Mono], 'Courier New', monospace` #### Type Scale (Modular Scale: 1.25 - Major Third) | Style | Size | Line Height | Weight | Usage | |-------|------|-------------|--------|-------| | H1 | 48px (3rem) | 1.2 (120%) | Bold 700 | Page titles | | H2 | 36px (2.25rem) | 1.2 | Semibold 600 | Section headers | | H3 | 28px (1.75rem) | 1.3 | Semibold 600 | Subsection headers | | H4 | 21px (1.313rem) | 1.4 | Semibold 600 | Minor headings | | Body Large | 18px (1.125rem) | 1.6 | Regular 400 | Intro paragraphs | | Body | 16px (1rem) | 1.5 | Regular 400 | Default text | | Body Small | 14px (0.875rem) | 1.5 | Regular 400 | Captions, labels | | Caption | 12px (0.75rem) | 1.4 | Regular 400 | Fine print | #### Responsive Typography **Fluid Type Sizing** (Modern Approach): ```css /* H1: Scales from 32px (mobile) to 48px (desktop) */ h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); } /* Body: Scales from 16px (mobile) to 18px (desktop) */ body { font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); } ``` **Breakpoint-Based** (Traditional): - Mobile (320-767px): Base 16px, H1 32px - Tablet (768-1023px): Base 16px, H1 40px - Desktop (1024px+): Base 18px, H1 48px #### Typography Specifications **Letter Spacing**: - Headlines (H1-H3): `-0.02em` (tighter for large text) - Body Text: `0` (default) - All-Caps: `+0.05em` (looser for readability) - Buttons/Labels: `+0.01em` **Paragraph Spacing**: - Between paragraphs: `1em` (one line height) - After headings: `0.5em` **Line Length** (Optimal Readability): - Body Text: 50-75 characters per line (CPL) - Max Width: 33em (approx. 600-700px) #### Web Font Loading ```css @font-face { font-family: 'Brand Sans'; src: url('brand-sans-variable.woff2') format('woff2-variations'); font-weight: 300 700; font-display: swap; /* Avoid flash of invisible text */ } ``` ### 2.4 Iconography **Icon Style**: [Outline / Filled / Duotone] **Grid System**: [8px / 16px / 24px base] **Stroke Weight**: [2px / 3px] **Corner Radius**: [0px sharp / 2px rounded] **Sizes**: - Small: 16x16px (inline with text) - Medium: 24x24px (standard UI) - Large: 48x48px (feature icons) **Usage Guidelines**: - Use consistent style across all icons - Maintain optical balance (not mathematical precision) - Ensure 3:1 contrast ratio with background - Provide text labels for accessibility **Icon Library**: [Reference to icon set location] ### 2.5 Photography & Imagery #### Photography Style **Subject Matter**: - **People**: Diverse representation, authentic (not overly posed), engaged - **Products**: Clean backgrounds, consistent lighting, multiple angles - **Lifestyle**: Environmental context, aspirational but realistic **Composition**: - **Rule of Thirds**: Position subjects on grid intersections - **Negative Space**: Allow breathing room for text overlays - **Depth of Field**: [Shallow for portraits / Deep for products] - **Perspective**: [Eye-level approachable / Low-angle powerful / High-angle vulnerable] **Color Treatment**: - **Vibrant**: Saturate +10% (energetic, youthful) - **Muted**: Desaturate -15% (sophisticated, calm) - **Black & White**: High contrast (timeless, dramatic) **Technical Specs**: - Resolution: 300dpi (print), 72dpi (web), 2x Retina (@2x) - Aspect Ratios: 16:9 (hero), 4:3 (standard), 1:1 (social), 9:16 (stories) - File Formats: `.jpg` (photos), `.png` (transparency), `.webp` (modern web) #### Illustration Style (if applicable) **Style Definition**: - [Line Art / Flat Illustration / Isometric / 3D Rendered] - Stroke Weight: [2-4px] - Corner Style: [Rounded / Sharp] - Color Palette: [Limited to brand colors / Extended palette] **Character Guidelines**: - Proportions: [Realistic / Stylized] - Diversity: [Representation requirements] - Gestures: [Pose library reference] ### 2.6 Motion & Animation #### Animation Principles **Easing Curves**: **Ease-Out** (UI Entering): - Curve: `cubic-bezier(0, 0, 0.2, 1)` - Feel: Responsive, quick to start - Usage: Modals, dropdowns, tooltips appearing **Ease-In** (UI Exiting): - Curve: `cubic-bezier(0.4, 0, 1, 1)` - Feel: Natural, accelerating - Usage: Closing modals, hiding elements **Ease-In-Out** (Subtle Transitions): - Curve: `cubic-bezier(0.4, 0, 0.2, 1)` - Feel: Smooth, balanced - Usage: Looping animations, page transitions #### Duration Standards - **Micro-interactions**: 100-200ms (button hover, checkbox) - **Small UI elements**: 200-400ms (dropdown, tooltip) - **Medium UI elements**: 400-600ms (modal, drawer) - **Large transitions**: 600-800ms (route change, hero animation) - **Avoid**: >1000ms (feels sluggish) #### Animation Use Cases **When to Animate**: - Feedback: Confirm user action (button press, form submit) - Orientation: Show spatial relationships (drawer sliding) - Guidance: Direct attention (pulsing notification) - Delight: Reinforce brand personality (playful micro-interactions) **Accessibility**: ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ### 2.7 Layout & Grid **Grid System**: [12-column / 8-column / Custom] **Gutter Width**: [16px / 24px] **Margin**: [16px mobile / 24px tablet / 48px desktop] **Spacing Scale** (Consistent Rhythm): - XS: 4px - SM: 8px - MD: 16px - LG: 24px - XL: 32px - 2XL: 48px - 3XL: 64px **Responsive Breakpoints**: - Mobile: 320-767px - Tablet: 768-1023px - Desktop: 1024-1439px - Large Desktop: 1440px+ --- ## 3. Verbal Identity ### 3.1 Messaging Framework **See**: `messaging-framework-template.md` (BRD-003) ### 3.2 Voice & Tone **See**: `voice-tone-guide-template.md` (BRD-002) ### 3.3 Writing Style **Grammar Preferences**: - **Oxford Comma**: [Yes / No] - **Numbers**: [Spell out one-nine, numerals for 10+] - **Contractions**: [Use freely / Avoid in formal contexts] - **Active Voice**: Preferred over passive **Terminology**: - [List of preferred terms] - [Capitalization rules for products/features] - [Abbreviations and acronyms] **Inclusive Language**: See Section 4.5 --- ## 4. Application Guidelines ### 4.1 Digital Applications **Website**: - Header: [Logo placement, navigation style] - Hero Sections: [Typography scale, image treatment] - Buttons: [Style, hover states, sizes] - Forms: [Input styles, validation states] **Mobile App**: - Navigation: [Tab bar / Hamburger menu] - Typography: [Scaled for mobile readability] - Touch Targets: Minimum 44x44px **Email**: - Header: [Logo, layout] - Typography: Web-safe fonts fallback - CTA Buttons: [Style, size] - Footer: [Legal, unsubscribe] **Social Media**: - Profile Images: [Logo variation] - Cover Images: [Template reference] - Post Templates: [Link to asset library] ### 4.2 Print Applications **Business Cards**: - Dimensions: [Standard 3.5" x 2"] - Paper Stock: [Material, finish] - Layout: [Template reference] **Letterhead**: - Logo Placement: [Top left / Centered] - Margins: [Specifications] - File Format: [PDF template] **Packaging** (if applicable): - [Specifications] ### 4.3 Environmental **Signage**: - [Indoor / Outdoor specifications] **Office Branding**: - [Wall graphics, wayfinding] ### 4.4 Merchandise **Apparel**: - Logo Placement: [Chest, sleeve, back] - Colors: [Approved apparel colors] **Promotional Items**: - [Guidelines for giveaways] ### 4.5 Inclusive Language Guidelines #### Core Principles **Person-First Language**: - Use: "person with a disability" (unless community preference differs) - Avoid: "disabled person," "handicapped" - Exception: Deaf community often prefers "Deaf person" **Gender-Neutral Defaults**: - Use: "they/them" singular, "folks," "everyone," "team" - Avoid: "guys," "he or she," gendered job titles ("salesman") - Rewrite: "Each user can manage their account" (not "his account") **Race & Ethnicity**: - Capitalize: Black, Indigenous, White (when referring to race) - Use: Specific ethnicity when known ("Mexican American" not "Hispanic") - Avoid: "minority," "non-white," "urban" as euphemisms **Age**: - Use: Specific age ranges, "older adults," "young people" - Avoid: "elderly," "seniors," "millennials" as shorthand for negative traits **Socioeconomic**: - Use: "people experiencing homelessness," "low-income communities" - Avoid: "the homeless," "the poor," "disadvantaged" **Mental Health**: - Use: "person with depression," "mental health condition" - Avoid: "crazy," "insane," "OCD" as hyperbole, "committed suicide" (use "died by suicide") **Ableist Metaphors to Avoid**: - "blind spot" "oversight" - "tone deaf" "insensitive" - "falling on deaf ears" "being ignored" - "crippled by" "hindered by" **Checking Tools**: - Alex.js: CLI tool for insensitive language - Grammarly Business: Inclusive language checks - Hemingway Editor: Readability (accessibility proxy) --- ## 5. Governance & Compliance ### 5.1 Approval Workflows **Tier 1: Pre-Approved** (No Review): - Using existing assets exactly as documented - Example: Downloading logo from brand portal **Tier 2: Standard Review** (2-3 days): - New applications of existing elements - Approver: [Brand Manager / Designated Champion] **Tier 3: Extended Review** (1-2 weeks): - New brand elements or significant variations - Approvers: [Brand Director, Legal, Executive Stakeholder] **Tier 4: Strategic Review** (2-4 weeks): - Major brand evolution or rebranding - Approvers: [Executive Team, Board] ### 5.2 Brand Contacts **Brand Guardian**: [Name, email] **Design Support**: [Name, email] **Legal/Trademark**: [Name, email] **Office Hours**: [When brand team available for consultation] ### 5.3 Legal Requirements **Trademark Usage**: - Always use ® or symbol on first prominent use - [List of trademarked terms] **Copyright**: - All brand assets © [Year] [Company Name] - Do not use brand assets to imply endorsement without permission **Disclaimers**: - [Required legal disclaimers for specific industries] ### 5.4 Accessibility Standards **WCAG Compliance**: Level AA minimum (4.5:1 contrast) **Assistive Technology**: Test with screen readers **Alternative Text**: All images require descriptive alt text **Keyboard Navigation**: All interactive elements must be keyboard-accessible --- ## 6. Version Control & Change Management ### 6.1 Version History **Current Version**: [2.0.0] **Changelog**: **[2.0.0] - 2025-01-15** - Major visual rebrand - New logo system - Updated color palette - Added dark mode guidelines **[1.3.0] - 2024-09-01** - Added motion guidelines - Expanded icon library - Social media templates **[1.2.1] - 2024-06-15** - Fixed logo clearspace specification - Typo corrections ### 6.2 Update Process **Quarterly Reviews**: [Schedule] **Feedback Mechanism**: [How to submit suggestions] **Approval Authority**: [Who approves guideline changes] ### 6.3 Deprecation Policy **Deprecated Elements**: - [List of phased-out logos, colors, etc.] - **Sunset Date**: [When old elements can no longer be used] - **Migration Path**: [How to transition to new elements] --- ## 7. AI Content Governance ### 7.1 When to Use AI **Approved Use Cases**: - First drafts for internal documentation - Idea generation and brainstorming - SEO meta descriptions and variations - Translation starting points - Data summaries and reports **Requires Human Review**: - All customer-facing copy - Legal or compliance communications - Crisis management or apology statements - Executive voice content - Highly creative/branded campaigns ### 7.2 AI Brand Voice Training **Custom Model Guidelines**: - Train on approved brand content corpus - Include voice dimension definitions - Provide positive and negative examples - Test across scenarios before production **Prompt Engineering Standards**: Template: "Write in [Brand]'s voice: [casual 70%], [helpful 90%], [expert 60%]. Context: [user situation]." ### 7.3 AI Pattern Avoidance **AI Markers to Avoid**: - Overuse of transitions: "Moreover," "Furthermore," "In conclusion" - Hedging language: "It's important to note," "It's worth mentioning" - Lists without narrative flow - Formulaic structure (claim evidence restatement) - Lack of specificity and examples - No opinions or perspective **Authenticity Markers to Include**: - Specific examples and anecdotes - Clear opinions and perspective - Conversational asides - Acknowledgment of trade-offs - Varied sentence structure - Domain-specific terminology used naturally - Humor or personality (where appropriate) --- ## 8. Measurement & Success Metrics ### 8.1 Usage Analytics Track via brand platform (Frontify, Notion, custom): - Guideline page views (most/least visited sections) - Asset downloads (which assets used most) - Search queries (reveals gaps) - Time on page (engagement) ### 8.2 Compliance Metrics **Brand Audit Scorecard** (Quarterly): - Logo usage compliance: [Target >95%] - Color compliance: [Target >90%] - Typography adherence: [Target >90%] - Voice & tone consistency: [Target >85%] **Violation Response Time**: - Critical: <48 hours - Moderate: <1 week - Minor: Next update cycle ### 8.3 Team Metrics - Onboarding Time: New team members to productive [Target <1 week] - Support Tickets: Brand-related questions [Decreasing trend] - Time to Find Asset: [Target <2 minutes] --- ## 9. Resources & Asset Library ### 9.1 Asset Downloads **Logo Package**: [Link to ZIP or asset portal] **Color Swatches**: [.ase, .clr files] **Font Files**: [Web fonts, desktop fonts] **Template Library**: [Presentation, social, print templates] ### 9.2 Design Tools **Figma Library**: [Link] **Sketch Library**: [Link] **Adobe CC Libraries**: [Link] ### 9.3 Training Resources **Onboarding Video**: [Link] **Brand Workshop Deck**: [Link] **Quick Reference PDF**: [Link] --- ## 10. Contact & Support **Brand Team Email**: brand@[company].com **Slack Channel**: #brand-support **Office Hours**: [Schedule for live consultations] **Feedback**: [Form or email for guideline suggestions] --- ## Appendix ### A. Glossary of Terms **Brand Anchor**: The most recognizable brand color **Clearspace**: Minimum protected area around logo **Design Tokens**: Structured data (JSON/YAML) storing brand decisions **Semantic Colors**: Functional colors (success, error, warning, info) **Type Scale**: Systematically sized typography hierarchy ### B. File Format Reference - **SVG**: Scalable vector, best for web logos/icons - **EPS**: Universal vector, print-ready - **PNG**: Raster with transparency, web/presentation - **JPG**: Raster without transparency, photography - **PDF**: Print-ready documents - **WOFF2**: Web font format (modern, compressed) ### C. Accessibility Checklist - [ ] All text has 4.5:1 contrast ratio (WCAG AA) - [ ] Color not sole means of conveying information - [ ] All images have descriptive alt text - [ ] All interactive elements keyboard-accessible - [ ] Animations respect `prefers-reduced-motion` - [ ] Inclusive language throughout ### D. Brand Audit Template [Downloadable checklist for quarterly brand reviews] --- **Document Ownership**: Brand Team **Review Cycle**: Quarterly **Next Review Date**: [Date] **Living Document URL**: [Link to web-based guidelines] --- *These brand guidelines are a living system. For questions, exceptions, or suggestions, contact the Brand Team. Last updated: [Date]*