UIUXHero Brand Guidelines
Welcome to the UIUXHero brand guidelines. Here you'll find everything you need to properly represent our brand — from logo usage to color palettes and design principles.
Tagline: Your vision. Perfectly designed.
Positioning: Strategist. Designer. Builder.
Promise: No compromise.
Our Logo System
The UIUXHero logo embodies our three core pillars: Strategist, Designer, and Builder. The design integrates a pen nib (representing design precision), flowing waves (creativity), and circuit patterns (technical building), all unified in our signature gradient.
Full logo
logo mark
Logo Variations
Primary Logo (Full Wordmark)
Use the full logo with "Strategist, Designer, Builder" tagline for maximum brand recognition. Ideal for websites, presentations, and marketing materials where space allows.
Icon Mark (Logo Symbol)
The icon mark features the stylized "U" with integrated pen nib and flowing design elements. Use this when space is limited, such as social media avatars, app icons, or small applications.
Usage Guidelines
- ✓Always use the full logo when sufficient space is available
- ✓The icon mark is acceptable for small-scale applications (below 100px width)
- ✓Maintain adequate clear space around the logo equal to the height of the "U"
- ✓Minimum size: 120px width for full logo, 40px for icon mark
Clear Space & Sizing
Clear space = Height of 'U' letter
Clear space = 25% of icon height
Minimum Sizing
Full Logo
Icon Mark
Important Guidelines
- ✓Never scale the logo below minimum sizes to maintain legibility
- ✓Always maintain the specified clear space on all sides
- ✓Use the icon mark for small applications where the full logo cannot meet minimum sizing
- ✓Ensure adequate contrast when placing logos on colored backgrounds
Logo on Different Backgrounds
On Light Backgrounds
On Dark Backgrounds
Background Guidelines
- ✓Use the standard colored logo on light backgrounds (white, light gray, soft pastels)
- ✓Use white/inverted version on dark backgrounds or brand color backgrounds
- ✓Ensure sufficient contrast (4.5:1 ratio minimum) between logo and background
- ✗Avoid placing logo on busy patterns or low-contrast backgrounds
What Not to Do
Don’t change the logo color
Don’t stretch or squeeze
Do not rotate
Don’t make the opacity too low
Typography
Font Family
Heading Font
Space Grotesk
"Space Grotesk", Helvetica, sans-serifBody Font
Inter
"Inter", -apple-system, sans-serifType Scale
Aa
Regular
400
Body text
Aa
Medium
500
Labels, buttons
Aa
SemiBold
600
Subheadings
Aa
Bold
700
Hero headings
Typography Guidelines
- ✓Use sentence case for headings (not ALL CAPS)
- ✓Maintain 60-75 character line length for body text
- ✓Use proper heading hierarchy (H1 → H2 → H3)
- ✓Navy (#0B0A49) for text on light backgrounds
- ✓White for text on dark/colored backgrounds
Voice & Tone
Confident
We know our craft. No hedging language.
Client-focused
"Your vision" not "Our expertise"
Premium
Quality over quantity, always.
Direct
Clear communication, no fluff.
✓ Do Say
- •"We design experiences that convert."
- •"Your vision, our expertise."
- •"40%+ conversion improvements."
- •"Measurable results, premium design."
- •"No compromise on quality."
✗ Don't Say
- •"We try to create..." (uncertain)
- •"We're the best..." (arrogant)
- •"Cheap" or "affordable" (not premium)
- •"We do everything" (not focused)
- •"Hopefully..." (weak language)
Tagline Usage Guide
| Context | Copy to Use |
|---|---|
| Website Hero | Your vision. Perfectly designed. |
| LinkedIn Headline | UI/UX Design Agency | Strategist. Designer. Builder. |
| Email Signature | UIUXHero — Your vision. Perfectly designed. |
| Case Study Header | "No compromise on quality." |
| Company Deck | We're UIUXHero. Strategist. Designer. Builder. No compromise. |
Good Example
"We design experiences that convert. 40%+ average conversion improvement across 50+ projects."
Weak Example
"We try to create beautiful designs that we hope will help improve your business metrics."
Brand Color Palette
Primary Brand Colors
These are the core colors that define the UIUXHero brand identity. Use them consistently across all brand materials.
Navy
Primary Dark
#0B0A49
Royal Blue
Brand Accent
#1A0DEB
Cyan
Secondary Accent
#19BEF1
Purple
Primary Purple
#9966FF
Supporting Colors
These supporting colors complement our primary palette and provide flexibility for various design needs.
Light Purple
Highlights
#C673E7
Soft Blue
Backgrounds
#9BA1D8
Lavender
Subtle Accents
#DCC6EC
Color Usage Guidelines
Gradient Applications
Our signature gradient flows from Purple (#9966FF) → Blue (#0001FC) → Cyan (#19BEF1). Use this gradient for:
- Logo highlights and special elements
- Call-to-action buttons and important UI elements
- Decorative backgrounds and brand materials
Accessibility
- Ensure all text meets WCAG 2.1 AA contrast standards (4.5:1 for normal text, 3:1 for large text)
- Navy (#0B0A49) is recommended for body text on light backgrounds
- Use white text on Navy, Royal Blue, and Purple backgrounds
Best Practices
- Maintain brand consistency by using exact hex values
- Avoid creating new color variations without approval
- Use supporting colors sparingly to maintain visual hierarchy
- White (#FFFFFF) and Navy (#0B0A49) can be used as neutral bases