lgj-graphics

name: LGJ-graphics description: Lead Gen Jay brand illustration and motion graphics style system - flat SVG with floating UI, Framer Motion animations, consistent design tokens version: 1.0.0 tags: [illustration, svg, motion-graphics, brand-style, LGJ, framer-motion, n8n, workflow]

LGJ Graphics — Illustration & Motion Style System

This skill encodes the exact visual style used across Lead Gen Jay's landing pages, tool pages, and marketing materials. Use it whenever creating new illustrations, feature graphics, hero visuals, workflow diagrams, or animated sections.

Style Identity: "Floating Product UI"

The LGJ illustration style is flat SVG illustrations with floating UI card elements — a stylized "product screenshot" aesthetic that suggests the product experience without being a literal screenshot.

Core principles:

• Illustrations are abstract representations of features, not screenshots
• Elements float and overlap in a loose spatial composition suggesting depth
• The feeling is clean, modern, trustworthy, and approachable
• Motion is subtle and spring-based, never flashy or distracting

Design Tokens (Exact Values)

Brand Colors

Semantic Colors

Slate Neutral Scale

Background Blobs (Tool Illustrations)

Each tool illustration uses a different tinted ellipse background:

Shared Component Library

The project has a reusable illustration library at src/components/illustrations/. Always use shared helpers instead of hand-coding primitives.

Shared Primitives (shared.tsx)

Import from ../shared (relative) or @/components/illustrations/shared:

Import Pattern

import { ShadowDefs, Card, Badge, AvatarDot, N8nNode, BezierConnector } from "../shared";

Backgrounds (backgrounds.tsx)

Logo Icons (logos.tsx)

30 simplified brand logo icons:

AI & Dev Tools: ClaudeLogo, OpenAILogo, GitHubLogo, VSCodeLogo, CursorLogo, VercelLogo, SupabaseLogo Automation & Email: N8NLogo, ZapierLogo, MakeLogo, GmailLogo, OutlookLogo, SlackLogo Social: LinkedInLogo, InstagramLogo Cold Email & Outreach: InstantlyLogo, ApolloLogo, AimfoxLogo, PhantomBusterLogo Data & Enrichment: ApifyLogo, ClayLogo, HyrosLogo, EmailBisonLogo CRM & Marketing: HighLevelLogo, ConsultiLogo Domains: DynadotLogo Payments & Commerce: StripeLogo, PayPalLogo, WhopLogo, ZoomLogo

SVG Construction Rules

ViewBox & Sizing

• Feature illustrations: viewBox="0 0 400 300" (4:3 landscape)
• Stats/wide illustrations: viewBox="0 0 400 200" (2:1 wide)
• Tool illustrations: viewBox="0 0 256 192" (4:3 landscape, smaller)
• Empty states: viewBox="0 0 200 200" (1:1 square)
• Always use fill="none" on the root SVG
• Apply className={cn('w-full h-auto', className)} for responsive sizing

Shadow Filters

Use the <ShadowDefs /> component. It provides three filter levels:

<ShadowDefs />
// Then apply: filter="url(#shadow-sm)" | filter="url(#shadow-md)" | filter="url(#shadow-lg)"

Shadow parameters (using feDropShadow):

• shadow-sm: dy=1, stdDeviation=2, opacity=0.08
• shadow-md: dy=2, stdDeviation=4, opacity=0.1
• shadow-lg: dy=4, stdDeviation=8, opacity=0.12

All use floodColor="#0f172a" (slate-900).

Card Foundations

Use the Card component:

<Card x={40} y={30} width={320} height={240} rx={8} shadow="md">
  {/* Card content */}
</Card>

• Border radius: rx={8} for cards (default), rx={6} for inner elements, rx={12} for large panels
• Stroke: slate-200 at 1px (built into Card component)
• Fill: always white

Content Line Placeholders

Use TextLine for placeholder text:

<TextLine x={60} y={115} width={280} />
<TextLine x={60} y={130} width={240} />
<TextLine x={60} y={145} width={180} />

• Default height: 8, color: slate-200
• Vary widths to look natural (280, 240, 260, 180)

Avatar Dots

Use AvatarDot component:

<AvatarDot cx={30} cy={50} r={10} initials="JF" color={colors.pink} />

Colors cycle: pink, blue, emerald, amber (use getAvatarColor(index)).

Status Badges

Use Badge for filled pills:

<Badge x={0} y={0} label="Valid" color={colors.emerald} />

Use OutlineBadge for bordered pills:

<OutlineBadge x={0} y={0} label="Draft" color={colors.pink} />

CTA Buttons

<rect x="60" y="185" width="120" height="36" rx="18" fill="#ED0D51" />
<text x="85" y="208" fontSize="12" fill="white" fontWeight="600">Send Campaign</text>

• Fully rounded: rx = half height
• Always #ED0D51 fill with white text

Sparkle/Star Icons

<path d="M8 0 L10 6 L16 8 L10 10 L8 16 L6 10 L0 8 L6 6 Z" fill="#ED0D51" />

8-point star shape. Use brand primary or purple (#8B5CF6) at 40-50% opacity for floating decorative sparkles.

Floating Accent Dots

Small colored circles at 30-40% opacity scattered around the composition:

<circle cx="145" cy="55" r="5" fill="#ED0D51" fillOpacity="0.3" />
<circle cx="50" cy="130" r="4" fill="#8B5CF6" fillOpacity="0.3" />
<circle cx="155" cy="120" r="3" fill="#10B981" fillOpacity="0.4" />

Sizes: r=3 to r=5. Always use fillOpacity not solid fills.

Checkmark Pattern

Use CheckIcon component:

<CheckIcon x={10} y={10} size={12} color={colors.emerald} />

Window Controls (for editor/app illustrations)

<circle cx="75" cy="55" r="6" fill="#EF4444" />
<circle cx="95" cy="55" r="6" fill="#F59E0B" />
<circle cx="115" cy="55" r="6" fill="#10B981" />

Dashed Connection Lines

<path d="M120 100 L160 100" stroke="#E5E7EB" strokeWidth="2" strokeDasharray="5,5" />
<path d="M155 95 L165 100 L155 105" fill="#E5E7EB" />

Use strokeDasharray="5,5" for connections, with small triangle arrowheads.

n8n-Style Workflow Nodes

Use the N8nNode component — rounded rectangle with colored left border:

<N8nNode x={20} y={40} label="Webhook" sublabel="POST /api" nodeType="trigger" />

Node type colors:

• Trigger: Pink #ED0D51
• HTTP/API: Blue #0144F8
• AI/Claude: Purple #8b5cf6
• Code: Slate #475569
• Database: Emerald #10b981
• Output/Email: Amber #f59e0b

Bezier Connectors

Use BezierConnector to link nodes:

<BezierConnector x1={140} y1={64} x2={180} y2={120} executionDot />

• Curved path from right side of one node to left side of the next
• showDots (default true): connection dots at each end
• executionDot: green dot at midpoint showing execution flow

Typography in SVGs

Headings:   fontSize="14" fontWeight="700" fontFamily="Inter, system-ui, sans-serif" fill="#0f172a"
Body:       fontSize="11" fontWeight="500" fontFamily="Inter, system-ui, sans-serif" fill="#334155"
Small:      fontSize="9"  fontWeight="500" fontFamily="Inter, system-ui, sans-serif" fill="#94a3b8"
Mono/Code:  fontSize="10" fontWeight="500" fontFamily="'SF Mono', 'Fira Code', monospace" fill="#334155"
Badge text: fontSize="10" fontWeight="600" fill="white"

Tool Illustration Pattern

Tool page illustrations use a distinct pattern from feature illustrations:

1. Background blob: Large ellipse in a tool-themed pastel color
2. Main element: The primary visual (envelope, globe, shield, server)
3. Secondary element: Supporting visual (magnifying glass, shield, code blocks)
4. Floating badges: Small labeled pills (SPF, DKIM, DMARC, TXT, MX)
5. Accent sparkles: 2-3 small colored circles

<svg viewBox="0 0 256 192" fill="none">
  <ShadowDefs />

  {/* 1. Background blob */}
  <ellipse cx="128" cy="96" rx="100" ry="80" fill="#E0F2FE" />

  {/* 2. Main element */}
  <Card x={48} y={50} width={120} height={90}>
    {/* Card inner content */}
  </Card>

  {/* 3. Secondary element */}
  <circle cx="175" cy="115" r="30" fill="#FFFFFF" stroke="#F97316" strokeWidth="3" />

  {/* 4. Floating badges */}
  <Badge x={35} y={50} label="SPF" color={colors.emerald} fontSize={8} />

  {/* 5. Accent sparkles */}
  <circle cx="200" cy="60" r="4" fill="#FCD34D" />
</svg>

Composition Rules

Spatial Layout

1. Main card is centered, taking ~80% of the viewBox width
2. Floating elements break out of the main card boundary (overlap edges)
3. Secondary cards float in corners, offset 10-20px from main card edges
4. Avatar dots cluster in groups of 2-4 with overlapping positions
5. Stat cards anchor to bottom-left or bottom-right corners
6. Cards should overlap by 10-20% for depth

Visual Hierarchy

1. Main card: White with shadow, largest element
2. CTA button: Brand primary, draws the eye
3. Status badges: Colored pills communicate meaning
4. Avatar dots: Add life and suggest users/activity
5. Floating elements: Sparkles, checkmarks create polish
6. Content lines: Gray rectangles fill space without distraction

Spacing

• Card padding: 20px internal margin
• Between content lines: 15px vertical gap
• Between sections: 20-30px
• Floating elements: 10-30px offset from card edges
• 12-16px between parallel elements
• Leave 20px margin inside the viewBox edges

Motion & Animation System

Existing Components (use these, don't recreate)

Import from @/components/ui/motion:

• FadeIn - Fade with direction (up/down/left/right)
• SlideIn - Configurable slide from any direction
• ScaleIn - Scale with optional bounce
• StaggerContainer - Parent for staggered children (fast/normal/slow)
• StaggerItem - Child with scale or slide variants
• HoverScale - Hover/tap scale effects
• AnimatedCounter - Number counting animation
• AnimatedProgressCircle - SVG progress ring

Import from @/lib/animations:

• Spring presets: springs.snappy, springs.smooth, springs.gentle, springs.bouncy
• Durations: durations.fast (0.15s), durations.normal (0.2s), durations.slow (0.3s)
• Easings: easings.easeOut, easings.emphasizedDecelerate
• Variants: fadeInUp, scaleIn, popIn, staggerContainer, staggerItem
• Viewport: viewportOnce (once: true, margin: "-50px", amount: 0.3)

Entrance Animation Patterns

Feature section illustration:

<FadeIn direction="up">
  <MyIllustration />
</FadeIn>

Stats with staggered reveal:

<StaggerContainer>
  <StaggerItem><StatCard value="95%" label="Accuracy" /></StaggerItem>
  <StaggerItem><StatCard value="10M+" label="Verified" /></StaggerItem>
</StaggerContainer>

Floating badge with bounce:

<ScaleIn bounce delay={0.3}>
  <Badge>Email Verified</Badge>
</ScaleIn>

Background Animations

Import from @/components/landing/decorative-backgrounds:

GlowOrbs - Slow-moving blurred orbs (22-25s loop):

<GlowOrbs variant="pink" />  // #ED0D51 + #FF3D71
<GlowOrbs variant="purple" /> // purple-500 + violet-600
<GlowOrbs variant="blue" />   // blue-500 + cyan-500

GridBackground - Dot grid pattern:

<GridBackground dotColor="rgba(237,13,81,0.07)" dotSize={1} gap={32} />

Glow Effects

Brand primary glow for interactive elements:

boxShadow: "0 0 20px 0 rgba(237, 13, 81, 0.3)"  // hover state

File Locations

Illustration Library (src/components/illustrations/)

Illustration Categories

Total: 27 illustrations + 15 logos + shared primitives + backgrounds

Other Motion/Animation Files

Demo Page

/demo/illustrations — showcases all illustration components, shared primitives, and logo icons.

Component Pattern

Every illustration follows this pattern:

interface IllustrationProps {
  className?: string;
}

export function IllustrationName({ className }: IllustrationProps) {
  return (
    <svg
      viewBox="0 0 400 300"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      role="img"
      aria-label="Description of the illustration"
    >
      <ShadowDefs />

      {/* Background elements */}
      {/* Main card(s) using Card component */}
      {/* Floating badges using Badge component */}
      {/* Detail elements */}
    </svg>
  );
}

Creating a New Illustration: Checklist

1. Determine type: feature illustration (400x300) or tool illustration (256x192)
2. Use shared helpers from shared.tsx — ShadowDefs, Card, Badge, AvatarDot, N8nNode, etc.
3. Start with the foundation: Card + ShadowDefs (feature) or background blob (tool)
4. Add the main element representing the feature
5. Add content lines using TextLine to fill space naturally
6. Add status badges or CTA buttons with brand colors
7. Add avatar dots using AvatarDot to suggest user activity (2-4 clustered)
8. Add floating elements: CheckIcon, sparkles, secondary cards
9. Add accent dots (2-3, different colors, low opacity) for polish
10. Wrap in a React component with IllustrationProps interface
11. Export from the appropriate category folder and register in index.tsx
12. Animate entrance with FadeIn, ScaleIn, or StaggerContainer

Anti-Patterns (Do NOT)

• Use raster images or external assets
• Use gradients (the style is flat solid fills)
• Add actual readable text content (use TextLine placeholders)
• Use heavy strokes (max strokeWidth="3" for emphasis, "2" standard, "1" subtle)
• Create illustrations wider than they are tall (always landscape or square)
• Use colors outside the defined palette
• Add CSS animations to SVG elements (use Framer Motion on the wrapper instead)
• Create overly complex illustrations with >50 SVG elements
• Use linear gradients on backgrounds (use solid fills or low-opacity radial blobs)
• Hand-code shadow filters — use ShadowDefs component
• Hand-code cards — use Card component from shared.tsx
• Use currentColor — specify exact hex values from colors object
• Use CSS classes inside SVGs — use inline attributes