Logos
Decision Guide
How to choose the right logo variant for your context
Production
Logo Decision Guide
Use this guide to select the correct Ontopix logo variant for any context.
The Core Rule
Arrow color follows background luminance:
- Light background → black arrow (
onlight/onwhitevariants)- Dark background → white arrow (
ondark/onblackvariants)
Decision Flowchart
Step 1: What format do you need?
| Need | Group | Description |
|---|---|---|
| Brand identity, Website headers, Marketing materials, Presentations | Full Logo | Target icon + 'ontopix' wordmark for primary brand identification |
| Favicons, App icons, Social media profiles, Small UI elements | Avatar | Square target icon only (1:1 ratio) for compact contexts |
| Loading states, Processing indicators, Animated spinners | Spinner | Target ring without arrow for loading animations |
Step 2: What is your background?
| Background Type | Transparent Variant | Solid Variant |
|---|---|---|
| White or light (#e0e0e0+) | *-onlight (black arrow) | *-onwhite (white bg, black arrow) |
| Black or dark (#404040-) | *-ondark (white arrow) | *-onblack (black bg, white arrow) |
Step 3: Do you need a color variation?
| Style | When to Use | Variant Suffix |
|---|---|---|
| Standard (magenta wordmark) | Primary brand use | onlight / ondark |
| Grey (#aaaaaa wordmark) | Secondary placements, footers, watermarks | grey-onlight / grey-ondark |
| Monochrome (black or white) | Single-color print, fax, limited color | black-onlight / white-ondark |
Variant Rules Reference
Black Avatar on Light
File: ontopix-avatar-black-onlight.svg
Rules:
- Wordmark is BLACK — monochrome variant for single-color contexts
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- Monochrome black square icon for light-background contexts
Valid backgrounds: white, light, imagery
Avatar on Black
File: ontopix-avatar-onblack.svg
Rules:
- Solid black background — use for maximum contrast or dark contexts
- Arrow is WHITE — requires dark or black background for visibility
- Self-contained with black background — no transparency needed
- Preferred for favicons — dark browser tabs provide best contrast
Valid backgrounds: black
Avatar on Dark
File: ontopix-avatar-ondark.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Default square icon for dark-background UIs and favicons
Valid backgrounds: black, dark, imagery
Avatar on Light
File: ontopix-avatar-onlight.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- Default square icon for light-background UIs and app icons
Valid backgrounds: white, light, coloured-light
Avatar on White
File: ontopix-avatar-onwhite.svg
Rules:
- Solid white background — use when transparency is not supported
- Arrow is BLACK — requires light or white background for visibility
- Self-contained with white background — no transparency needed
- Self-contained square icon when transparency is not supported
Valid backgrounds: white
White Avatar on Dark
File: ontopix-avatar-white-ondark.svg
Rules:
- Wordmark is WHITE — monochrome variant for dark contexts
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Monochrome white square icon for dark social media profiles
Valid backgrounds: black, dark, imagery
Black Favicon on Light
File: favicon-black.svg
Rules:
- Wordmark is BLACK — monochrome variant for single-color contexts
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- Black monochrome favicon for light browser tabs
Valid backgrounds: white, light, imagery
Favicon on Dark
File: favicon.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Default favicon — color variant for dark browser tabs
Valid backgrounds: black, dark, imagery
Grey Favicon on Dark
File: favicon-grey.svg
Rules:
- Wordmark is GREY (#aaaaaa) — subdued variant for secondary placements
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Subdued grey favicon for dark browser tabs
Valid backgrounds: black, dark, imagery
White Favicon on Dark
File: favicon-white.svg
Rules:
- Wordmark is WHITE — monochrome variant for dark contexts
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- White monochrome favicon for minimal appearance on dark tabs
Valid backgrounds: black, dark, imagery
Icon Logo
File: icon-logo.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Use as i-ontopix-logo in Nuxt UI components
Icon Spinner
File: icon-spinner.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Use as i-ontopix-spinner in Nuxt UI components
Black Logo on Light
File: ontopix-black-onlight.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- Wordmark is BLACK — monochrome variant for single-color contexts
- Use for black-and-white documents, fax, single-color print
Valid backgrounds: white, light, coloured-light
Black Logo on White
File: ontopix-black-onwhite.svg
Rules:
- Solid white background — use when transparency is not supported
- Arrow is BLACK — requires light or white background for visibility
- Self-contained with white background — no transparency needed
- Wordmark is BLACK — monochrome variant for single-color contexts
- Self-contained monochrome for limited-color print or formal documents
Valid backgrounds: white
Grey Logo on Black
File: ontopix-grey-onblack.svg
Rules:
- Solid black background — use for maximum contrast or dark contexts
- Arrow is WHITE — requires dark or black background for visibility
- Self-contained with black background — no transparency needed
- Wordmark is GREY (#aaaaaa) — subdued variant for secondary placements
- Subdued self-contained variant for solid black backgrounds
Valid backgrounds: black
Grey Logo on Dark
File: ontopix-grey-ondark.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Wordmark is GREY (#aaaaaa) — subdued variant for secondary placements
- Subdued variant for dark-background secondary placements
Valid backgrounds: black, dark
Grey Logo on Light
File: ontopix-grey-onlight.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- Wordmark is GREY (#aaaaaa) — subdued variant for secondary placements
- Subdued variant for footers, watermarks, secondary brand mentions
Valid backgrounds: white, light
Grey Logo on White
File: ontopix-grey-onwhite.svg
Rules:
- Solid white background — use when transparency is not supported
- Arrow is BLACK — requires light or white background for visibility
- Self-contained with white background — no transparency needed
- Wordmark is GREY (#aaaaaa) — subdued variant for secondary placements
- Subdued self-contained variant for white backgrounds
Valid backgrounds: white
Logo on Black
File: ontopix-onblack.svg
Rules:
- Solid black background — use for maximum contrast or dark contexts
- Arrow is WHITE — requires dark or black background for visibility
- Self-contained with black background — no transparency needed
- Use for maximum visual impact or when solid dark background is needed
Valid backgrounds: black
Logo on Dark
File: ontopix-ondark.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- DEFAULT variant for most dark-background contexts
- Use for dark mode interfaces, hero sections, overlays on photos
Valid backgrounds: black, dark
Logo on Light
File: ontopix-onlight.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is BLACK — requires light or white background for visibility
- For light backgrounds (lighter than #e0e0e0)
- DEFAULT variant for most light-background contexts
- Use for website headers, documents, light-themed applications
Valid backgrounds: white, light, coloured-light
Logo on White
File: ontopix-onwhite.svg
Rules:
- Solid white background — use when transparency is not supported
- Arrow is BLACK — requires light or white background for visibility
- Self-contained with white background — no transparency needed
- Use when transparency is not supported (email, print on colored paper)
Valid backgrounds: white
White Logo on Black
File: ontopix-white-onblack.svg
Rules:
- Solid black background — use for maximum contrast or dark contexts
- Arrow is WHITE — requires dark or black background for visibility
- Self-contained with black background — no transparency needed
- Wordmark is WHITE — monochrome variant for dark contexts
- Self-contained monochrome for maximum contrast on black
Valid backgrounds: black
White Logo on Dark
File: ontopix-white-ondark.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- Arrow is WHITE — requires dark or black background for visibility
- For dark backgrounds (darker than #404040)
- Wordmark is WHITE — monochrome variant for dark contexts
- Monochrome white for dark backgrounds or overlays on imagery
Valid backgrounds: black, dark, coloured-dark, imagery
Spinner
File: ontopix-spinner.svg
Rules:
- Transparent background — place on surfaces that provide their own color
- MUST be animated — never display static
- Use CSS: animation: spin 1.2s linear infinite
Valid backgrounds: white, black, light, dark, coloured-light, imagery