9-visual-identity.md 3 - Creative Development Draft Created: 2026-02-23

Visual Identity — Smartbound Custom Signal Engine

Executive Summary

This document defines the specific visual identity elements for Smartbound's Custom Signal Engine rebrand. It includes logo specifications, color palette with hex codes, typography system, and visual element standards. This serves as the foundation for all brand applications.

1. Logo System

Primary Logo

Logomark + Wordmark

The primary logo consists of the Smartbound logomark (signal/radar-inspired icon) paired with the wordmark "Smartbound" in the primary typeface.

Clear Space:

Minimum clear space = height of the "S" in Smartbound on all sides
No other elements should encroach this space

Minimum Size:

Digital: 120px width minimum
Print: 1 inch width minimum

Logo Versions

Version	Usage
Primary (dark)	Light backgrounds, white backgrounds
Inverse (light)	Dark backgrounds, navy backgrounds
Icon only	Favicons, app icons, small spaces
Wordmark only	When icon is already established

Logo Specifications

Construction:

Logomark should reference signal detection, radar, or targeting
Geometric, not organic
Balanced proportions
Works at small sizes

Icon Concept Options:

Concept	Description	Feel
Radar Pulse	Concentric circles with ping point	Detection, finding
Signal Wave	Ascending wave pattern	Signal, transmission
Target Focus	Crosshair with center point	Precision, targeting
Abstract Mark	Geometric signal representation	Modern, ownable

Recommendation: Radar Pulse or Target Focus — both connect to "finding who to call" outcome.

Logo Files Needed

Format	Use Case
SVG	Web, scalable applications
PNG (transparent)	Digital applications
PNG (white background)	Presentations
EPS	Print applications
ICO	Favicon

2. Color Palette

Primary Colors

Color Name	Hex Code	RGB	Usage
Navy Dark	#0f172a	15, 23, 42	Headers, primary text, logo
Navy Medium	#1e293b	30, 41, 59	Dark backgrounds, depth

Accent Colors

Color Name	Hex Code	RGB	Usage
Signal Orange	#f97316	249, 115, 22	CTAs, highlights, accents
Signal Yellow	#fbbf24	251, 191, 36	Secondary accents, alerts

Neutral Colors

Color Name	Hex Code	RGB	Usage
White	#ffffff	255, 255, 255	Backgrounds, text on dark
Off-White	#f8fafc	248, 250, 252	Card backgrounds
Gray 100	#f1f5f9	241, 245, 249	Borders, dividers
Gray 200	#e2e8f0	226, 232, 240	Disabled states
Gray 400	#94a3b8	148, 163, 184	Secondary text
Gray 600	#475569	71, 85, 105	Body text on light

Semantic Colors

Color Name	Hex Code	Usage
Success	#22c55e	Positive metrics, confirmations
Warning	#eab308	Attention, cautions
Error	#ef4444	Errors, negative indicators

Signal Type Colors

Signal Type	Color	Hex Code
Healthcare	Green	#10b981
Fintech	Blue	#3b82f6
Construction	Amber	#f59e0b
Cybersecurity	Purple	#8b5cf6
General	Orange	#f97316

Color Proportions

Primary applications:

70% Navy/Neutrals (backgrounds, text, structure)
20% White (breathing room, cards)
10% Accent Orange (highlights, CTAs)

Accent usage rule: Accent color should be used sparingly for maximum impact. Overuse dilutes effectiveness.

3. Typography System

Primary Typeface: Inter

Why Inter:

Highly readable at all sizes
Modern, clean, professional
Excellent web performance
Open source (free)
Multiple weights available

Typography Scale

Element	Weight	Size (Desktop)	Size (Mobile)	Line Height
H1	Bold (700)	48px	32px	1.2
H2	Semibold (600)	32px	24px	1.3
H3	Semibold (600)	24px	20px	1.4
H4	Medium (500)	20px	18px	1.4
Body Large	Regular (400)	18px	16px	1.6
Body	Regular (400)	16px	16px	1.6
Small	Regular (400)	14px	14px	1.5
Caption	Regular (400)	12px	12px	1.4

Font Weights

Weight	Value	Usage
Regular	400	Body text, paragraphs
Medium	500	Emphasis, subheads
Semibold	600	Headlines, CTAs
Bold	700	Hero headlines, emphasis

Typography Examples

H1: Your sales team knows who to call and why.
H2: We build custom signal engines.
H3: Primary source monitoring.
Body: We monitor government filings, regulatory databases, 
      and permit records — then deliver weekly feeds of 
      prospects with verifiable pain signals.

Fallback Fonts

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
             Roboto, 'Helvetica Neue', Arial, sans-serif;

4. Spacing System

Base Unit: 4px

All spacing values are multiples of 4px for consistency.

Name	Value	Usage
xs	4px	Tight spacing, inline elements
sm	8px	Small gaps, list items
md	16px	Standard spacing, paragraphs
lg	24px	Section breaks
xl	32px	Major section breaks
2xl	48px	Page sections
3xl	64px	Hero sections

Grid System

Container:

Max width: 1200px
Padding: 24px (mobile), 48px (desktop)
Centered on page

Columns:

12 columns on desktop
4 columns on mobile
24px gutter

5. Visual Elements

Buttons

Primary Button:

Background: Signal Orange (#f97316)
Text: White (#ffffff)
Padding: 12px 24px
Border-radius: 8px
Font: Inter Semibold, 16px

Secondary Button:

Background: Transparent
Border: 2px Navy Dark (#0f172a)
Text: Navy Dark (#0f172a)
Padding: 10px 22px
Border-radius: 8px
Font: Inter Semibold, 16px

Button States:

State	Primary	Secondary
Default	#f97316	Border only
Hover	#ea580c (darker)	#f97316 fill
Active	#c2410c (darkest)	#ea580c fill
Disabled	#94a3b8	#e2e8f0 border

Cards

Standard Card:

Background: White (#ffffff)
Border: 1px Gray 100 (#f1f5f9)
Border-radius: 12px
Padding: 24px
Shadow: 0 1px 3px rgba(0,0,0,0.1)

Elevated Card:

Background: White (#ffffff)
Border-radius: 12px
Padding: 24px
Shadow: 0 4px 6px rgba(0,0,0,0.1)

Signal Card Design

Structure:

┌─────────────────────────────────────────┐
│ [Signal Badge]           [Signal Date]  │
│                                         │
│ Signal Title (what happened)            │
│                                         │
│ Impact Summary (why it matters)         │
│                                         │
│ ─────────────────────────────────────── │
│                                         │
│ Outreach Angle (what to say)            │
│                                         │
│ ─────────────────────────────────────── │
│                                         │
│ Contact: Name | Title | Company         │
│ Email | Phone | LinkedIn                │
└─────────────────────────────────────────┘

Styling:

Signal Badge: Pill shape, color-coded by signal type
Signal Title: Inter Semibold, 18px
Impact Summary: Inter Regular, 14px
Outreach Angle: Inter Medium, 14px, italic
Contact Section: Inter Regular, 12px

Icons

Icon Style:

Style: Line icons
Stroke: 2px
Size: 24px (standard), 16px (small), 32px (large)
Corners: Rounded
Color: Navy Dark or Signal Orange

Icon Library: Use Lucide Icons or Phosphor Icons (both open source, consistent style)

Key Icons Needed:

Icon	Name	Usage
Signal/Radar	radar	Signal detection
Target	target	Precision targeting
Database	database	Primary sources
User	user	Contacts
Mail	mail	Email outreach
Phone	phone	Call outreach
Building	building	Companies
Trending Up	trending-up	Metrics, growth
Check	check	Success, completed
Alert	alert-triangle	Attention, warnings

6. Data Visualization

Chart Colors

Use	Color	Hex Code
Primary data	Navy Dark	#0f172a
Secondary data	Navy Medium	#1e293b
Highlight	Signal Orange	#f97316
Comparison	Gray 400	#94a3b8

Chart Style

Bar Charts:

Rounded corners (4px)
No gradients
Clear labels
Navy primary, Orange highlight

Line Charts:

Stroke width: 2px
Point markers: 6px circles
Smooth curves
Navy line, Orange points

Metrics Display:

┌─────────────────┐
│ 10.2%           │  ← Metric (Inter Bold, 32px)
│ Response Rate   │  ← Label (Inter Regular, 14px)
└─────────────────┘

7. Motion & Animation

Principles

Principle	Application
Subtle	Animations should enhance, not distract
Functional	Animate to show state changes or guide attention
Fast	Transitions 150-300ms maximum
Consistent	Same animation for same action type

Standard Transitions

Transition	Duration	Easing
Hover states	150ms	ease-out
Modal open/close	200ms	ease-in-out
Page transitions	300ms	ease-in-out
Loading states	1000ms+	linear (continuous)

Animation Examples

Button Hover:

.button {
  transition: all 150ms ease-out;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

Card Entrance:

.card {
  animation: fadeInUp 300ms ease-out;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

8. Responsive Breakpoints

Breakpoint	Width	Target
Mobile	< 640px	Phones
Tablet	640px - 1024px	Tablets, small laptops
Desktop	1024px - 1280px	Laptops, monitors
Large	> 1280px	Large monitors

Typography Scaling

Element	Mobile	Tablet	Desktop
H1	32px	40px	48px
H2	24px	28px	32px
H3	20px	22px	24px
Body	16px	16px	18px

9. Accessibility Standards

Contrast Requirements (WCAG 2.1 AA)

Combination	Ratio	Pass?
Navy Dark on White	16.8:1	Yes
Navy Medium on White	12.6:1	Yes
Signal Orange on White	3.0:1	Fail for text
White on Signal Orange	3.0:1	Fail for text
White on Navy Dark	16.8:1	Yes

Note: Signal Orange should NOT be used for body text. Use for large text (24px+) or graphical elements only.

Accessibility Checklist

[ ] All text meets 4.5:1 contrast ratio (3:1 for large text)
[ ] Focus states visible for all interactive elements
[ ] Images have alt text
[ ] Color is not the only way to convey information
[ ] Forms have proper labels
[ ] Keyboard navigation works

10. File Deliverables

Logo Files

File	Format	Dimensions	Use
logo-primary.svg	SVG	Scalable	Web, primary
logo-primary.png	PNG	2000px wide	Presentations
logo-inverse.svg	SVG	Scalable	Dark backgrounds
logo-inverse.png	PNG	2000px wide	Dark backgrounds
logo-icon.svg	SVG	Scalable	Favicon, app
logo-icon.png	PNG	512px	Social, app
favicon.ico	ICO	32px	Browser tab

Color Swatches

Provide as:

CSS variables file
Figma color styles
Adobe swatch exchange (.ase)

Font Files

Inter variable font (woff2)
Inter static fonts (woff2, ttf)
CSS @font-face declarations

11. Implementation Notes

CSS Variables

:root {
  / Primary Colors /
  --color-navy-dark: #0f172a;
  --color-navy-medium: #1e293b;
  
  / Accent Colors /
  --color-orange: #f97316;
  --color-yellow: #fbbf24;
  
  / Neutrals /
  --color-white: #ffffff;
  --color-off-white: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-400: #94a3b8;
  --color-gray-600: #475569;
  
  / Semantic /
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
  
  / Typography /
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  / Spacing /
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  / Border Radius /
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tailwind Config (if using Tailwind)

module.exports = {
  theme: {
    extend: {
      colors: {
        navy: {
          dark: '#0f172a',
          medium: '#1e293b',
        },
        signal: {
          orange: '#f97316',
          yellow: '#fbbf24',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

12. Design Review Checklist

Before finalizing any design:

[ ] Uses approved color palette
[ ] Typography follows hierarchy
[ ] Spacing uses 4px grid
[ ] Meets accessibility contrast requirements
[ ] Works at mobile and desktop sizes
[ ] Consistent with brand personality
[ ] Logo has proper clear space
[ ] Accent color used sparingly (10% max)

This visual identity document is the foundation for all brand applications. Update only with approval from Devon/Kevin.