Skip to main content

​
Iconography & Illustrations

​
Icon Style

Design System: Lucide Icons (primary set)
PropertyValue
Style24px grid, 2px stroke weight, rounded joins
RationaleModern, consistent, extensive library
Custom iconsMatch Lucide style exactly

​
Icon Sizes

SizeDimensionsUsage
Small16px × 16pxInline with text
Medium24px × 24pxStandard UI elements
Large32px × 32pxFeature callouts
Hero48px × 48pxLanding pages, empty states

​
Icon Colors

StateColor
DefaultGray 600 #475569
ActiveIntelligence Blue #0052CC
SuccessForest Green #16A34A
WarningSunset Orange #EA580C
ErrorCrimson #DC2626

​
Custom Icons — Agent Avatars

Each agent has a distinctive geometric icon that visually represents their function.

Emma — Requirements Agent

Color: Emerald #10B981Icon: Checklist with sparkle — square grid with checkmarks, AI sparkle overlayRepresents: Validation, quality assurance

Sarah — Stakeholder Agent

Color: Sapphire #3B82F6Icon: Connected people nodes — three circles connected in triangleRepresents: Collaboration, alignment

Jack — Process Agent

Color: Amber #F59E0BIcon: Flowchart symbol — simplified BPMN-style flow diagramRepresents: Structure, systematic flow

David — Compliance Agent

Color: Ruby #DC2626Icon: Shield with checkmark — protection + validation combinedRepresents: Rules, authority, enforcement

Paul — Traceability Agent

Color: Violet #7C3AEDIcon: Network graph nodes — connected dots forming a path/trailRepresents: Connection, mapping, insight

CORE — Orchestration Agent

Color: Silver #64748BIcon: Central hub with radiating connections — star/hub pattern with six points (one per agent)Represents: Coordination, synthesis

​
Illustration Style

Primary Style: Geometric abstract
PropertyValue
TechniqueSimplified shapes, gradient overlays, subtle depth
ColorBrand colors + gradients (no illustrative “realistic” colors)
CompositionAsymmetric balance, generous whitespace

​
Illustration Types

Hero Illustrations (Marketing pages)
  • Format: 1200px × 800px
  • Complex compositions showing product value
  • Subjects: Knowledge Graph visualization, multi-agent collaboration, Before/After transformation
Feature Illustrations (Product pages, docs)
  • Format: 600px × 400px
  • Single concept focus
  • Subjects: Emma validating requirements, RTM auto-generation, Jira integration flow
Empty State Illustrations (Product UI)
  • Format: 240px × 180px
  • Friendly, encouraging tone
  • Subjects: “No documents yet,” “No validation reports,” “Graph is empty”
Error State Illustrations (Product UI)
  • Format: 240px × 180px
  • Calm, non-alarming tone
  • Subjects: “Connection failed,” “Validation error”

​
Illustration Guidelines

Use brand color palette exclusively
Maintain geometric, abstract style
Include subtle gradients for depth
Align to 8px grid
Export as SVG (scalable)
DON’T: Use photorealistic styles
DON’T: Include people/faces (too specific, dates quickly)
DON’T: Use drop shadows (flat design philosophy)
DON’T: Use textures, patterns, or off-brand colors