Illustration Guidelines
Illustrations help explain complex concepts, guide users through workflows, and add visual interest where photography isn't practical. Our illustration style is clean, professional, and purpose-driven - never decorative for its own sake.
When to Use Illustrations
Use Photography When...
- Showing real people, teams, or workplaces
- Building emotional connection and trust
- Featuring product in real-world context
- Marketing materials targeting decision-makers
Use Illustration When...
- Explaining abstract concepts or processes
- Representing data, workflows, or systems
- Creating UI elements (icons, empty states)
- Showing something that can't be photographed
Visual Deliverables Matrix: Mood vs. Facts
Alterspective strictly separates factual technical truth from atmospheric mood and metaphor. Our visual family is governed by four complementary runbooks. Never cross these boundaries: factual claims (architecture, schema, connections, and computed metrics) belong in precision vector runbooks, never in generative art.
| Runbook | Deliverable | Primary Purpose | Conveys | Sanctioned Medium | Governance Gate |
|---|---|---|---|---|---|
| AIRUN-034 | Hand-Authored Diagrams | Architecture, workflow & config visualization | Facts Structure & flow | Vector (Inline SVG) | 2-line technical labels, semantic brand palette |
| AIRUN-035 | Hand-Authored Data Charts | Analytics, telemetry & quantitative comparisons | Facts Computed numbers | Vector (Inline SVG / CAS) | Audit-reconciled data, zero hallucination |
| AIRUN-042 | AI-Generated Brand Imagery | Hero banners, editorial art & section covers | Mood & Metaphor Atmosphere only | Raster (JPEG data URI) | Step 2a continuous-line formula, no factual claims |
| AIRUN-044 | Hand-Authored Line UI Marks | Interactive buttons, launcher bubbles & empty states | UI Chrome Brand personality | Vector (Inline SVG < 2 KB) | Lift-off gap, exactly 1 Citrus accent, ICON-001 |
The Non-Negotiable Boundary Rule
Generated imagery is atmosphere and metaphor. No reader should ever need to—or be able to—extract a factual claim from it. Anything a client or developer must trust—component names, interface contracts, flow sequences, or metrics—belongs in an AIRUN-034 diagram or AIRUN-035 chart, never in a generated picture.
AI-Generated Brand Imagery: Continuous-Line Formula
Per team and leadership direction (established in the Flow mission program), Alterspective imagery defaults to the hand-drawn continuous single-line style matching our brand iconography. One loose, confident marker stroke, warm and human, with generous negative space.
The Continuous-Line Style Lock
"Single continuous-line drawing, hand-drawn with one loose confident marker stroke, in the style of minimalist line iconography — imperfect, warm, human. Lines in pale blue #E5EEEF with selective citrus green #ABDD65 accents on a deep navy #17232D background. Generous negative space, elegant, calm."
The Mandatory Negative Prompt
"No text, no letters, no words, no logos, no watermarks, no detailed faces (simple line silhouettes only), no shading, no gradients, no photorealism."
Human Figures are Encouraged
Unlike legacy corporate prompts, human figures are encouraged in the continuous-line style. The abstract line eliminates uncanny facial rendering. Figures should be simple line silhouettes: a person absorbed in flow at a workspace, hands shaping or passing a thread, or a team carrying one unified shape.
Storytelling with One Line & One Accent
Let one line do the storytelling: the same unbroken stroke forms the person and the idea flowing through their hands. Exactly one Citrus accent carries the narrative focal point—the thread of work, the chosen insight, or the point of absorption.
Live Editorial Hero Artwork (Continuous-Line House Style)
Hand-drawn line metaphor: Human craftsman in flow, unbroken stroke, single Citrus thread
Hand-Authored SVG Diagrams & Visual Flows
When explaining system architectures, approval workflows, or execution pipelines, Alterspective requires hand-authored inline SVG (never Mermaid, never AI-generated raster). Hand-SVG gives deterministic control over coordinate grids, exact brand color tokens, two-line technical labels, and graceful cubic Bézier edge routing.
1. Extract & Reduce Real Structure
Never invent fictional nodes. Walk the true code or workflow definition and collapse it to a linear narrative spine of 5–8 nodes with at most 1–2 decision branches.
2. Two-Line Technical Labels
Every node contains exactly two lines:
Line 1: Human Title (13–14px bold sans-serif) and
Line 2: Monospace Detail (11px JetBrains Mono variable/system name).
3. Semantic Brand Palette
Colors strictly encode node function, not decoration. Every hue must appear in the diagram legend and map to our functional color standard.
4. Bézier Edge Routing & Gutters
Maintain ≥40px gutters. Straight paths use L; branching paths use
cubic Bézier curves (C) to sweep cleanly around nodes. Label branch midpoints in color.
Live Interactive Architecture Diagram (AIRUN-034)
Automated AML Ingestion & Risk Triage Pipeline with 2-line labels & Bézier branches
Illustration Types
Spot Illustrations
Small, focused graphics that support specific content. Used for empty states, feature highlights, and inline explanations.
Hero Illustrations
Larger, more detailed graphics for landing pages and marketing. Can combine multiple elements.
Diagrams & Flows
Process explanations, architecture diagrams, workflow visualizations.
Icons
UI icons for navigation, actions, and status indicators.
Style Rules
Use outlined style, never filled
Aligns with brand icon guidelines (ICON-001) and maintains visual consistency.
Stroked paths with consistent weight
Solid filled shapes
Maintain consistent stroke weight
Creates visual harmony across all illustrations.
1.5px stroke for icons, 2-3px for larger illustrations
Mixed stroke weights in same illustration
Use brand color palette only
Ensures illustrations integrate with overall brand.
Marine, Navy, Green, Citrus as accents
Random colors, gradients outside palette
Keep it professional, not playful
Our audience is compliance professionals who expect seriousness.
Clean geometric forms, subtle details
Cartoonish characters, bouncy animations
Color in Illustrations
Marine - Primary
Use for main illustration elements, key focal points, and primary strokes.
Navy - Secondary
Use for supporting elements, backgrounds, and secondary details.
Accents - Sparingly
Green and Citrus for highlights, success states, and points of emphasis only.
Stroke & Line Guidelines
1.5px - Icons (16-48px)
Standard weight for UI icons at typical sizes.
2px - Spot Illustrations
Slightly heavier for medium-sized graphics.
3px - Hero Illustrations
Bolder strokes for large-scale graphics.
Line Caps
Use round for friendlier feel, square for technical diagrams.
Complexity Levels
Match illustration complexity to the context and importance of the content.
Level 1: Simple
Single element, minimal detail. Use for icons, inline graphics.
Level 2: Moderate
2-4 elements, some hierarchy. Use for spot illustrations, feature cards.
Level 3: Complex
Multiple elements, relationships shown. Use for diagrams, hero sections.
Visual Examples
Correct: Clean, outlined, brand colors
Incorrect: Off-brand colors, filled shapes
Correct: Professional, purposeful
Incorrect: Cartoonish, unprofessional
Animation Guidelines
When illustrations are animated, follow these principles:
Subtle Motion
Animations should be subtle and purposeful - a gentle fade, a smooth transition. Never bouncy or playful.
duration: 200-300ms easing: ease-out Respect Motion Preferences
Always check prefers-reduced-motion and provide a static fallback.
@media (prefers-reduced-motion: reduce) {
.animated-illustration {
animation: none;
}
}No Auto-Play Loops
Looping animations are distracting. If motion is needed, trigger on hover or interaction.
Performance
Use CSS transforms and opacity only. Avoid animating layout properties that cause repaints.
File Formats
| Format | Use Case | Notes |
|---|---|---|
| SVG | Web icons, illustrations, diagrams | Preferred for web. Scalable, small file size, supports animation. |
| PNG | Complex illustrations, social media | Use when SVG isn't practical. Export @2x for retina. |
| Print materials, presentations | Vector format preserves quality at any size. | |
| Lottie/JSON | Animated illustrations | For complex animations. Keep under 50KB. |