Imagery
Visual imagery reinforces our brand identity and creates emotional connections with our audience. This guide covers photography, illustrations, and video assets.
Photography Style
Our photography should feel modern, professional, and authentic.
Characteristics
Lighting
Natural, soft lighting preferred. Avoid harsh shadows or overly dramatic lighting.
Color Treatment
Slightly desaturated with cool undertones. Complements our blue primary color.
Subjects
Real people in authentic work environments. Diverse representation.
Composition
Clean, uncluttered frames with room for text overlay when needed.
Background Treatments
Dark Backgrounds
Dark backgrounds convey sophistication and work well for hero sections and feature highlights.
Light Backgrounds
Light backgrounds feel open and approachable, ideal for content-heavy pages.
Gradients
Our signature gradients blend our primary and secondary colors for dynamic visual interest.
Primary → Secondary
#169BDE → #7E57C2
Primary Dark → Primary → Secondary
#0B5A9F → #169BDE → #7E57C2
Video Assets
Motion graphics and animations bring our brand to life.
Available Animations
| Asset | Description | Usage |
|---|---|---|
| Line Animation | Flowing line paths | Transitions, loading states |
| Circle Animation | Expanding/contracting circles | Emphasis, highlights |
| Curve02 | Smooth curve motion | Background decoration |
| Curve04 | Complex curve patterns | Hero backgrounds |
Animation Guidelines
- Keep animations subtle and purposeful
- Use consistent easing (ease-out preferred)
- Limit duration to 300-500ms for UI, longer for decorative
- Respect reduced motion preferences
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition-duration: 0.01ms !important;
}
}Iconography
Icons should be simple, consistent, and recognizable at small sizes.
Style
- Line weight: 2px stroke
- Corner radius: 2px
- Style: Outlined (not filled)
- Grid: 24x24px base