Imagery
Photography, illustration, and iconography guidelines for consistent visual language across all Ontopix communications.
Draft
Ontopix imagery conveys our brand personality through authentic photography, purposeful illustration, and consistent iconography. Every visual element should feel professional yet approachable.
Photography
Style Attributes
| Attribute | Guideline |
|---|---|
| Description | Ontopix photography emphasizes authentic human connection |
| with technology. We show real people solving real problems, | |
| not stock-photo perfection. | |
| Mood | Confident, warm, professional but approachable |
| Lighting | Natural, bright, clean |
| Color Treatment | Slightly desaturated, warm undertones |
Subject Guidelines
People
- Show diverse teams and individuals
- Capture genuine expressions, not posed smiles
- Focus on collaboration and problem-solving moments
- Include people of various ages, ethnicities, abilities
- Avoid stereotypical tech bro imagery
Technology
- Technology as tool, not hero
- Show screens in context of use
- Avoid generic floating UI mockups
- Include both modern and everyday devices
- Show AI as invisible helper, not robot
Workspaces
- Modern but realistic offices
- Home offices and remote setups
- Clean but lived-in spaces
- Good lighting and organization
- Include both individual and collaborative spaces
Abstract
- Use sparingly for backgrounds or textures
- Align with brand color palette
- Avoid cliché tech imagery (circuit boards, binary)
- Prefer geometric patterns over generic tech
Technical Requirements
| Use Case | Resolution | Format |
|---|---|---|
| Web hero | 2400×1600px min | WebP, JPG |
| Blog/article | 1600×1067px min | WebP, JPG |
| Social media | Platform-specific | PNG, JPG |
| 300 DPI min | TIFF, PNG |
Accessibility
- All images must have descriptive alt text
- Decorative images should have empty alt attribute
- Avoid text embedded in images
- Ensure sufficient contrast for overlaid text
Illustration Style
- Aesthetic: Clean and geometric
- Colors: Brand palette
- Complexity: Simple to moderate
Icon System
Primary Library: Heroicons (Outline style by default)
Icon Styles
| Style | Use Case |
|---|---|
| Outline | Default for UI; navigation, buttons, indicators |
| Solid | Selected/active states; emphasis |
| Mini | Compact interfaces; badges; inline with text |
Sizing
| Size | Pixels | Usage |
|---|---|---|
| standard | {'xs': 12, 'sm': 16, 'md': 20, 'lg': 24, 'xl': 32}px | - |
| touch_contexts | {'minimum': 24, 'recommended': 24, 'touch_target': 44}px | - |
| decorative | {'feature': 48, 'hero': 64, 'large': 96}px | - |
Color Usage
- Default: Inherit text color (
currentColor) - Interactive: Use brand primary for clickable icons
- Status: Use semantic colors (success, warning, error)
- Decorative: Can use brand palette
Best Practices
- Consistency: Use same style throughout a view
- Meaningful: Every icon should aid understanding
- Paired with text: Important actions should have labels
- Touch targets: Ensure 44x44px minimum tap area
- Accessibility: Include appropriate ARIA labels
Custom Icons
When Heroicons doesn't have what you need:
- Match the visual weight and style of Heroicons
- Use 24x24px artboard with 2px stroke
- Align to pixel grid
- Test at all intended sizes
- Submit for design review