Logo Usage Guidelines

Follow these guidelines to ensure consistent and proper use of the Ontopix logo.

Clear Space

Maintain clear space around the logo equal to the height of the icon (the circular ring). This ensures the logo has breathing room and remains legible.

┌─────────────────────┐
│         ↕︎ x         │  ← Clear space = x
│   ←x→  🔵  ←x→     │
│         ↕︎ x         │
└─────────────────────┘

Minimum Sizes

Digital

Print

Background Types

Placement Guidelines

On Light Backgrounds

• Use onlight or onwhite variants
• Ensure sufficient contrast with background
• Minimum contrast ratio: 4.5:1 for accessibility

On Dark Backgrounds

• Use ondark or onblack variants
• Test visibility across different dark shades
• Consider adding subtle glow for very dark backgrounds

On Images/Textures

• Use solid background variants (onwhite or onblack)
• Avoid placing logo over busy textures
• Ensure logo doesn't compete with image content

Usage Rules

Do:

• Use provided logo files without modification
• Maintain proper clear space
• Use appropriate variant for background
• Scale proportionally
• Use vector (SVG) for web when possible
• Provide meaningful alt text for accessibility

Don't:

• Distort, stretch, or skew the logo
• Change colors outside the approved palette
• Add effects (drop shadows, gradients, glows)
• Place on busy backgrounds that reduce legibility
• Rotate the logo (except spinner variants)
• Modify or redraw logo elements
• Use low-resolution or pixelated versions
• Place logo inside shapes or containers that crop it

Incorrect Usage Examples

Color Modifications

Do not change the brand colors to match other design elements or use unapproved color combinations.

Effects

Do not add drop shadows, bevels, emboss, gradients, or glow effects to the logo.

Distortion

Do not stretch, compress, or skew the logo. Always scale proportionally.

Background Issues

Do not place the logo on busy backgrounds, patterns, or low-contrast surfaces.

File Formats

Asset Sources

All logo assets are generated from:

• Master SVG: brand/logo/master/logo.svg
• Variant config: brand/logo/variants.yaml
• Rasterization config: brand/logo/rasterize.yaml

Generated using the Stylebook CLI tool. See the stylebook repository for details.