Usage Guidelines¶

This section establishes best practices and common mistakes when using Bluu's brand elements. Following these guidelines ensures a coherent and professional visual identity.

Logo Usage¶

✅ Do's¶

Use official versions of the logo provided in brand resources
Maintain minimum clearance area around the logo
Use on appropriate backgrounds that provide sufficient contrast
Respect minimum size to ensure legibility
Use the correct version according to context (color, white, black)
Maintain proportions when scaling the logo
Center the logo when used alone (isotype)

❌ Don'ts¶

❌ Don't modify colors of the logo (use only official ones)
❌ Don't rotate the logo at arbitrary angles
❌ Don't stretch or compress altering proportions
❌ Don't add effects (shadows, gradients, unauthorized glows)
❌ Don't place on backgrounds that reduce legibility
❌ Don't use old versions or unofficial logos
❌ Don't recreate or redraw the logo
❌ Don't use in sizes smaller than the specified minimum

Visual Examples¶

✅ Correct Usage¶

┌─────────────────────────┐
│                         │
│       [BLUU LOGO]       │  ← Centered logo
│                         │     White background
│                         │     Clearance area
└─────────────────────────┘

❌ Incorrect Usage¶

┌─────────────────────────┐
│[BLUU]                   │  ← No clearance area
│ B L U U                 │  ← Modified spacing
│ [BLUU ROTATED]          │  ← Arbitrary rotation
│ [BLUU STRETCHED]        │  ← Altered proportions
└─────────────────────────┘

Color Usage¶

✅ Do's¶

Use exact color values specified (Hex, RGB, CMYK)
Verify contrast to comply with WCAG AA accessibility
Use Bluu Blue (#3747B0) for main brand elements
Apply functional colors correctly (success, error, warning)
Maintain hierarchy using primary colors before secondary
Use established grayscale for texts and neutral elements

❌ Don'ts¶

❌ Don't use similar tones that aren't official
❌ Don't apply Bluu Blue to long texts (can strain eyes)
❌ Don't mix functional colors arbitrarily
❌ Don't use saturated colors not specified in the palette
❌ Don't ignore required minimum contrast
❌ Don't create new colors without authorization

Recommended Combinations¶

✅ Good Combinations¶

Background	Text	Use
White (#FFFFFF)	Bluu Blue (#3747B0)	Titles, buttons
White (#FFFFFF)	Black (#1A1A1A)	Body text
Bluu Blue (#3747B0)	White (#FFFFFF)	Primary buttons
Black (#1A1A1A)	White (#FFFFFF)	Footer, dark header
Light Gray (#F5F5F5)	Black (#1A1A1A)	Alternating sections

❌ Combinations to Avoid¶

Background	Text	Problem
Light blue	Bluu Blue	Low contrast
Medium gray	Dark gray	Low contrast
Saturated colors	Any	Not part of palette

Typography Usage¶

✅ Do's¶

Use Plus Jakarta Sans as primary typeface
Apply correct weights according to hierarchy (400 for body, 700 for titles)
Maintain adequate line-height (1.5-1.7 for text, 1.2-1.3 for titles)
Respect minimum sizes (16px for body, 14px minimum)
Use established type scale
Left-align long texts for better readability

❌ Don'ts¶

❌ Don't use alternative fonts without authorization
❌ Don't use unspecified or non-existent weights
❌ Don't use arbitrary sizes outside the scale
❌ Don't compress or expand typography (extreme letter-spacing)
❌ Don't use all caps in long paragraphs
❌ Don't justify text without proper hyphenation
❌ Don't use line-height less than 1.2 in text
❌ Don't mix multiple typeface families

Correct Hierarchy¶

✅ Correct Example¶

[H1: Bold 48px] Main Title
[H2: Bold 36px] Important Subtitle
[Body: Regular 16px] Paragraph text with relevant
information and good readability.
[Small: Regular 14px] Additional note or metadata

❌ Incorrect Example¶

[H1: Regular 48px] Title without adequate weight
[H2: Bold 36px + Italic] Subtitle with multiple styles
[Body: Light 12px] Text too small and thin
[ALL CAPS] COMPLETE TEXT IN UPPERCASE

Composition and Layout¶

✅ Do's¶

Use 12-column grid system
Apply consistent spacing in multiples of 8px
Maintain uniform margins and paddings
Align elements to the grid
Use white space strategically
Maintain breathing room around important elements
Apply clear visual hierarchy

❌ Don'ts¶

❌ Don't crowd elements without sufficient space
❌ Don't use arbitrary spacing (13px, 27px, etc.)
❌ Don't misalign elements from the grid
❌ Don't fill all available space without breathing room
❌ Don't create asymmetric layouts without clear intention
❌ Don't use unequal paddings on similar elements

Buttons and CTAs¶

✅ Do's¶

Use Bluu Blue for primary buttons
Apply 8px border-radius (standard)
Use SemiBold (600) text in buttons
Maintain consistent padding (12px 24px for regular)
Provide clear hover and active states
Use appropriate icons when necessary

❌ Don'ts¶

❌ Don't use multiple primary buttons together (max 1 per section)
❌ Don't create very small buttons (smaller than 44x44px on mobile)
❌ Don't use unspecified colors for CTAs
❌ Don't omit interactive states (hover, focus, active)
❌ Don't use only icons without text in important actions

Button Hierarchy¶

✅ Correct¶

[Primary: Bluu Blue]  CONFIRM
[Secondary: Outline]  Cancel

❌ Incorrect¶

[Primary]  CONFIRM
[Primary]  CANCEL  ← Two primaries together

Images and Photography¶

✅ Do's¶

Use high-quality images with adequate resolution
Apply 8px border-radius to contained images
Maintain consistent aspect ratios (16:9, 1:1, 3:4)
Optimize file size for web
Use subtle filters if consistent with brand
Provide descriptive alt text for accessibility

❌ Don'ts¶

❌ Don't use pixelated or low-quality images
❌ Don't distort images when scaling
❌ Don't apply saturated filters or extreme effects
❌ Don't place text over images without sufficient contrast
❌ Don't use images without rights or appropriate licenses

Iconography¶

✅ Do's¶

Use consistent icon style (outline or filled, don't mix)
Maintain standard sizes (16px, 24px, 32px)
Use Bluu Blue or Black for main icons
Vertically align icons with adjacent text
Provide adequate space between icon and text (8px)
Use universally recognized icons

❌ Don'ts¶

❌ Don't mix different icon styles
❌ Don't use arbitrary sizes outside the system
❌ Don't rotate icons confusingly
❌ Don't use overly complex icons in small sizes
❌ Don't color icons with unspecified colors

Interactive Elements¶

✅ Do's¶

Provide visual feedback on all interactions
Use clear hover states (color change, elevation)
Visually indicate clickable elements
Maintain sufficient click areas (minimum 44x44px on mobile)
Use pointer cursor on interactive elements
Provide loading states in asynchronous actions

❌ Don'ts¶

❌ Don't omit hover or focus states
❌ Don't create very small click areas
❌ Don't use elements that appear clickable if they aren't
❌ Don't change cursor inconsistently

Forms¶

✅ Do's¶

Use clear labels for each field
Provide useful placeholder text
Clearly indicate required fields
Show inline errors with specific messages
Use red (#EF4444) for errors
Apply visible focus states (blue outline)

❌ Don'ts¶

❌ Don't omit labels (not just placeholders)
❌ Don't use generic error messages ("Error")
❌ Don't disable paste in password/email fields
❌ Don't use only color to indicate errors (add icons)
❌ Don't create very long forms without grouping

Accessibility¶

✅ Do's¶

Verify minimum contrast WCAG AA (4.5:1)
Provide alt text on all images
Use correct semantic HTML
Ensure functional keyboard navigation
Provide visible focus on interactive elements
Use ARIA labels when necessary

❌ Don'ts¶

❌ Don't use only color to convey information
❌ Don't omit alt text on informative images
❌ Don't create keyboard traps
❌ Don't use text smaller than 14px without good justification
❌ Don't disable zoom on mobile

Responsive Design¶

✅ Do's¶

Design mobile-first
Use standard breakpoints (768px, 1024px)
Adapt spacing according to device
Test on multiple devices before publishing
Use responsive images (srcset, picture)
Optimize for touch on mobile (44x44px buttons minimum)

❌ Don'ts¶

❌ Don't design only for desktop
❌ Don't use arbitrary breakpoints
❌ Don't maintain same spacing across all devices
❌ Don't make elements too small on mobile
❌ Don't load heavy images on mobile

Animations and Transitions¶

✅ Do's¶

Use subtle transitions (200-300ms)
Apply ease-in-out or ease-out for natural movements
Animate performance-friendly properties (transform, opacity)
Provide instant feedback (<100ms)
Respect prefers-reduced-motion

❌ Don'ts¶

❌ Don't use very long animations (>500ms)
❌ Don't animate width/height (use transform scale)
❌ Don't use extreme or flashy effects without reason
❌ Don't ignore reduced motion preferences

Content and Tone¶

✅ Do's¶

Use clear and concise language
Be direct and helpful in messages
Maintain professional but approachable tone
Use consistent terms from glossary
Provide contextual help when necessary

❌ Don'ts¶

❌ Don't use unnecessary jargon or obscure technical terms
❌ Don't be condescending to the user
❌ Don't use inappropriate or unprofessional humor
❌ Don't provide vague or incomplete information

Review Checklist¶

Before publishing any brand material, verify:

Quality over speed: Take the necessary time to apply these guidelines correctly. A consistent visual identity builds trust and brand recognition.