---
sidebar_position: 10
---

# Imagery and Graphic Language

## Purpose

The Tech Ops PH brand should look grounded in real operations, not abstract tech theater.

This section defines the supporting visual language around the logo, color, and typography system.

## Photography Direction

- Prefer real operations, planning sessions, workshops, field activity, teams in coordination, and visible work artifacts.
- Show tools, documents, devices, whiteboards, workflows, and environments where work actually happens.
- Favor clarity, structure, and believable business context over generic startup poses.
- Use images that suggest momentum, visibility, coordination, and execution.

## Photography Avoid

- Generic stock images of people pointing at floating holograms.
- Overly polished call-center smiles with no operational context.
- Dark neon cyberpunk imagery.
- Random server racks or code-on-screen images used as empty tech shorthand.
- Overcrowded collage treatments with no clear focal point.

## Image Treatment

- Keep color grading natural to slightly warm.
- Use ink overlays only when needed to stabilize text contrast.
- Avoid aggressive filters, oversaturation, or trendy duotone treatments as a default.
- Crop for clear focal hierarchy and space for headlines or captions.

## Illustration and Diagram Style

Use diagrams when they clarify flow, handoff, visibility, or system structure. The approved default for prominent explanatory graphics is the Tech Ops PH **2.5D operational illustration** style below. Flat diagrams remain useful for dense or technical information, but should not be stretched into decorative hero artwork.

### Approved 2.5D Direction

2.5D is the middle ground between flat line art and rendered 3D. It gives an operating system enough depth to feel tangible while staying calm, precise, and credible.

- Build one shallow axonometric scene from platforms, panels, documents, schedules, dashboards, workflows, and system modules.
- Use recognizable operational artifacts instead of abstract cubes, generic cloud networks, or decorative tech symbols.
- Give every scene a clear story: **input or friction -> controlled system -> visible result**.
- Use one continuous Brand Green path to show movement, handoff, control, or improvement.
- Keep one viewpoint and one light direction across the entire scene.
- Use flat front planes, slightly darker side planes, restrained Ink outlines, and short contact shadows only.
- Keep important meaning in the composition, not in tiny labels or text baked into the image.
- Preserve enough open space for adjacent page copy and responsive crops.

Approved visual references:

- [`techops-operational-system-light-v01.webp`](../../assets/illustrations/2-5d/techops-operational-system-light-v01.webp): the primary light-surface hero direction.
- [`techops-operating-loop-dark-v01.webp`](../../assets/illustrations/2-5d/techops-operating-loop-dark-v01.webp): the approved dark-surface workflow direction.

### Depth, Line, and Shadow

- Keep depth shallow. Side faces should explain form, not make the scene feel cinematic.
- Use Ink `#13283A` for the main structural outline and Ink Soft `#365061` for secondary faces and details.
- Use Brand Green `#42A84A` for active paths, confirmed states, selected modules, and outcome signals.
- Use Paper `#F7F4EE`, Warm Paper `#F5EFE4`, and white for the primary surfaces.
- Derive shadows from Ink at low opacity. Shadows should sit immediately under objects and platforms; avoid long cast shadows, dramatic light beams, glow, or glossy reflections.
- Maintain enough contrast for the system to remain understandable when the image is reduced to card or mobile size.

### Composition by Use

- **Homepage hero:** show several fragmented inputs becoming one controlled operating system and a visible business result.
- **Service section:** show a bounded operational capability, such as planning, workflow design, implementation, adoption, support, or measurement.
- **Process explanation:** show a small number of connected stages with a clearly readable start, control point, and outcome.
- **Proof section:** prefer real screenshots, artifacts, metrics, or photography. Use 2.5D illustration only when real proof is unavailable or the concept is genuinely abstract.

### Relationship to Motion and Backgrounds

The 2.5D scene is the explanatory foreground. Existing brand backgrounds may provide subtle motion or atmosphere behind it.

- Retain approved animated grids, orbit lines, and background images when replacing a foreground diagram.
- Keep background movement slow and low-contrast; the foreground system should remain visually stable.
- Do not animate every object. One path pulse, state change, or slow parallax layer is enough.
- Respect reduced-motion preferences and keep the full message legible without animation.

### Do

- Show real operational nouns: forms, calendars, approvals, workflows, modules, dashboards, evidence, and results.
- Make the green path carry the narrative from left to right or around a clearly controlled loop.
- Let depth organize hierarchy and grouping.
- Keep each section illustration distinct while retaining the same camera, palette, line, and lighting logic.

### Avoid

- Glossy CGI, glassmorphism, neon light, metallic materials, deep perspective, or photorealistic rendering.
- Flat clip-art assemblies with no scene, platform, or spatial hierarchy.
- Excessive shadows, floating objects, random cubes, cloud icons, server racks, or generic network webs.
- Human faces as the primary explanation for a workflow or system message.
- Tiny UI labels, pseudo-text, logos, or unreadable lettering generated inside the image.
- Different illustration styles or camera angles from one section to the next.

### Reusable Art-Direction Brief

> Create a clean 2.5D Tech Ops PH operational-system illustration using a shallow axonometric view. Build the story from recognizable work artifacts on restrained platforms, connected by one clear green operating path. Use Ink outlines, paper and white front planes, slightly darker side faces, and short low-opacity contact shadows. The composition must communicate a specific operational change without relying on text. Avoid glossy 3D, heavy shadows, neon, glass, generic cloud or server imagery, floating decorative objects, faces, logos, and embedded words.

Before approval, verify that the illustration answers five questions: What enters the system? What control is introduced? What changes? What becomes visible? Does it still read clearly at mobile size?

## Iconography

- Product and UI icons should be simple, geometric, and readable at small sizes.
- Favor outline or lightly filled icons with consistent stroke logic.
- Avoid mixing hand-drawn icons, emoji-like icons, and overly glossy icon packs.
- The brand hex symbol is not a substitute for every category icon.

## Backgrounds and Surfaces

- Prefer paper, paper warm, white, and restrained ink surfaces.
- Use gradients as supporting atmosphere in hero sections, campaign visuals, or section dividers only.
- Avoid relying on flat pure-black or loud saturated backgrounds as a default brand style.
- Use subtle structure, grids, panels, and spacing rhythm before introducing decorative texture.

## Pattern and Texture

- If pattern is used, derive it from hex geometry, system grids, or workflow-line motifs.
- Keep patterns low-contrast and secondary to content.
- Patterns should support hierarchy, not compete with text or data.
- Do not create decorative pattern noise just to fill empty space.

## Data Visualization

- Primary series: Ink
- Highlight series: Brand Green
- Secondary series: Ink Soft
- Background grid and dividers: warm neutral lines
- Reserve alert colors for actual state meaning, not decoration

## Graphic Language Summary

- Operational, not theatrical
- Structured, not ornamental
- Confident, not noisy
- Human and real, not stock-tech generic