Branding Guidelines for Proudly

Status

Not started

Assign

Stephane Boghossian

Date

Role

Research

1. Logo and Name Usage

• Logo: The Proudly logo appears in the top left corner of the interface. It is a simple, modern, and professional design, with an emphasis on minimalism. The colors should be consistent throughout usage, focusing on the chosen primary palette.
• Tagline: The tagline "Early Adopters Premium" gives a sense of exclusivity and innovation. Use this in marketing materials and presentations when targeting early-stage users or exclusive beta programs.

2. Color Palette

Proudly’s design revolves around a clean and vibrant color palette, reflecting innovation, professionalism, and approachability.

• Primary Colors:
• Purple (#6E3CBC): Represents creativity, leadership, and empowerment. Used predominantly for action buttons (e.g., “My Profile”, “Prepare for my next conversation”) and important UI elements.
• Gold (#F4B400): Associated with success, value, and achievement. Used for elements like points and progress to highlight accomplishments (e.g., “Anchoring your Leadership” progress circle).
• White (#FFFFFF): Provides a clean and professional background for text and elements, making the interface feel open and easy to navigate.
• Secondary Colors:
• Green (#28A745): Used to indicate successful completion or positive actions (e.g., “Today's Quick Win” checklist).
• Yellow (#FDC500): Used for notifications, progress points, or minor achievements.
• Light Grey (#F7F7F7): Used as a background color for neutral elements or secondary features (e.g., section dividers).

3. Typography

• Primary Typeface: Use a modern sans-serif font such as Montserrat or Open Sans for headers, CTAs, and body text. These fonts reflect the professional and forward-thinking nature of the brand while maintaining readability.
• Headers: Bold and clean to catch attention. The main headline “Welcome back [Name]” uses a welcoming, large, and friendly tone.
• Body Text: Use regular weight and medium size for better readability (e.g., “Anchoring your Leadership,” “Today's Quick Win”).
• Emphasis/Highlights: Use bold and uppercase for key actions and important details, such as points accumulation and time duration (e.g., "15min", "10pts").

4. Tone of Voice

• Empowering and Friendly: Proudly’s tone is encouraging, supportive, and friendly. For example, “Welcome back, Steve!” shows a personal and engaging interaction with the user.
• Professional Yet Accessible: While the platform provides serious leadership tools, it maintains a friendly, approachable tone. The use of phrases like “Quick Win” makes the platform feel practical and results-oriented.
• Action-Oriented: Prompts like "SEE DRILL," "REFLECT," and "PREPARE" encourage users to take specific actions, reinforcing Proudly’s emphasis on continuous improvement and leadership growth.

5. Iconography and Visual Elements

• Checkmarks and Icons: The checkmark next to “Today's Quick Win” provides clear visual confirmation of task completion. Icons such as the clock and fire next to action points and durations emphasize efficiency and gamified progress.
• Circular Progress Indicators: Circular progress bars (e.g., “Anchoring your Leadership”) are simple yet effective in showing growth and goals. Use these to reinforce the concept of leadership development.
• Gamification Elements: Points, stars, and badges should be used to reinforce accomplishments and progress in a fun, motivational way.

6. Buttons and CTAs

• Primary Buttons: Purple buttons with white text (e.g., “PREPARE FOR MY NEXT CONVERSATION”) are used for important CTAs. These should always be clear and action-driven.
• Secondary Buttons: Less prominent actions can use the gold/yellow color with darker text for contrast (e.g., “REFLECT 4min | 8pts”).
• Hover State: Ensure buttons have a subtle hover state that increases contrast, such as darkening the purple or adding a shadow, to provide visual feedback to the user.

7. Imagery and Media

• Clean, Simple Graphics: As seen in the interface, the emphasis is on clarity and user interaction rather than complex imagery. Graphics should be minimalistic and directly related to the user’s journey.
• Illustrations: Use friendly, flat-style illustrations that align with the light-hearted, engaging tone of Proudly. These illustrations can represent leadership, teamwork, and progress.

8. Layout and Spacing

• Centered Alignment: The layout uses centered elements (e.g., “Anchoring your Leadership” progress) to focus the user’s attention on the most important features.
• Clear Sections: Each section, like “Today's Quick Win” and “Instant Coaching,” is clearly divided with generous whitespace. This keeps the interface clean, preventing it from feeling cluttered or overwhelming.
• Consistent Margins: Ensure consistent padding and spacing between elements to maintain a balanced and harmonious layout.

9. Interactive Elements

• Responsive Design: Ensure all interactive elements (buttons, chat features) respond instantly with visual feedback (e.g., hover effects, loading animations).
• Chat with Artus: The chat feature should be emphasized with a clear CTA in the upper-right corner. Ensure it feels like a seamless part of the user experience, providing real-time assistance when needed.

10. Gamification and Progress Tracking

• Points System: Points should be prominently displayed (e.g., “20pts/100”) to motivate users to take action and track their leadership development.
• Achievements and Badges: Incorporate badges and rewards for milestones (e.g., “Anchoring your Leadership” progress circle) to encourage continuous engagement.
• Time Management: Display task durations clearly to let users know how much time each activity will take, making it easy to fit into a busy schedule.

11. Accessibility

• Color Contrast: Ensure high contrast between text and background colors for readability (e.g., purple on white or gold on purple).
• Font Size: Maintain accessible font sizes for key UI elements and text, with a minimum of 16px for body text and larger sizes for headers.