The Heartline Songsmith Character Guide

Complete guide to the Heartline Songsmith character—the superhero persona that anchors the Anvil Design System’s visual identity.

Character Overview

The Heartline Songsmith is a superhero-styled character who personifies the brand’s unique value proposition: the ability to hear what people truly mean and transform it into music.

Core Identity

Name: The Heartline Songsmith
Archetype: Superhero craftsman with empathic abilities
Visual Style: Classic comic book illustration (Silver Age aesthetic)
Color Palette: Red, yellow, blue, black (matches Anvil system)

Visual Design

Costume & Appearance

The Mask

• Style: Luchador/wrestling mask with superhero elements
• Primary Color: Yellow/gold
• Details:
  • Flame-like points at the top (3-5 peaks)
  • Red vertical stripe down the center
  • Eye cutouts with focused, intense expression
  • Covers entire head like a hood
• Symbolism: Helps him focus his ability to hear emotional frequency

The Costume

• Base: Red bodysuit (primary color)
• Cape/Collar: Blue cape or shoulder piece
• Emblem: Yellow treble clef symbol on chest
• Style: Classic superhero proportions with bold, clean lines
• Texture: Flat colors with occasional halftone shading

Physical Characteristics

• Build: Athletic, heroic proportions
• Hands: Often shown in expressive gestures (listening, working, performing)
• Posture: Confident, focused, purposeful
• Skin Tone: Warm tan/beige (visible on hands and lower face)

Character Poses & Expressions

1. The Listener (songsmith-listening.png)

Pose: Hand cupped to ear, head tilted slightly
Expression: Focused, attentive, hearing beyond words
Background: Dark with red/yellow curved lines, halftone thought bubbles
Symbolism: The core superpower—hearing emotional frequency
Usage: Hero sections, value proposition, “we hear you” messaging

Key Elements: - Hand gesture emphasizes listening - Closed eyes or focused gaze - Treble clef emblem prominent on chest - Warm, approachable body language

2. At the Mixer (songsmith-mixer.png)

Pose: Hands on audio mixing board, leaning forward
Expression: Intense concentration, serious, professional
Background: Dark blue with glowing red/yellow heartline waveforms
Symbolism: The craft—transforming emotion into music
Usage: Process explanations, “how it works,” expertise demonstration

Key Elements: - Mixer board with colorful faders and buttons (red, blue, green, yellow) - Heartline waveforms behind head (visual representation of emotional frequency) - Direct eye contact with viewer - Professional, focused demeanor

3. The Thinker (songsmith-thought.png)

Pose: Hand on chin, contemplative stance
Expression: Thoughtful, processing, considering
Background: Solid blue (clean, simple)
Symbolism: Finding the song within the story
Usage: About page, process steps, “we understand” messaging

Key Elements: - Classic “thinking” pose - Serious but not stern expression - Clean composition focuses on character - Approachable yet professional

4. The Performer (songsmith-guitar-2.png)

Pose: Playing guitar, energetic stance, reaching toward viewer
Expression: Excited, passionate, delivering the goods
Background: Radial burst pattern (red/yellow/blue rays)
Symbolism: The delivery—your song is ready
Usage: Results sections, testimonials, “get your song” CTAs

Key Elements: - Yellow guitar with visible strings - Open mouth (singing/shouting) - Dynamic, energetic pose - Hand reaching out (connection with audience) - Radial burst creates energy and excitement

5. The Rejector (songsmith-bad-gifts-2.png)

Pose: Dramatic gesture, pushing away, mouth open (yelling “NO!”)
Expression: Frustrated, rejecting, emphatic
Background: Radial burst pattern (red/yellow/blue rays)
Foreground: Generic gifts scattered (gift box, heart, “World’s Best” mug, teddy bear)
Symbolism: Rejection of impersonal, generic gifts
Usage: Problem statement, pain points, “tired of the same old thing”

Key Elements: - Dramatic hand gesture (stop/push away) - Visible frustration/passion - Generic gift items in foreground - High energy, emotional scene

Visual Motifs & Symbols

1. The Treble Clef Emblem

• Appearance: Yellow/gold treble clef on red chest
• Style: Bold, simplified, comic book rendering
• Function: Hero emblem (like Superman’s S or Batman’s bat)
• Meaning: Music as the superpower

2. Heartline Waveforms

• Appearance: Red/orange/yellow waveforms (like EKG/heartbeat monitor)
• Style: Glowing, pulsing, organic curves
• Function: Visual representation of emotional frequency
• Usage: Backgrounds, especially with mixer scenes
• Meaning: The ability to “hear” emotion as sound waves

3. Radial Burst Backgrounds

• Appearance: Rays emanating from center point
• Colors: Alternating red, yellow, blue
• Style: Classic comic book “action” background
• Function: Creates energy, excitement, drama
• Usage: High-energy scenes (performing, rejecting, dramatic moments)

4. Halftone Textures

• Appearance: Dot patterns (like old comic book printing)
• Colors: Usually subtle, matching scene colors
• Function: Adds authenticity to comic book aesthetic
• Usage: Throughout all images, especially in shading

5. Heavy Black Outlines

• Appearance: Thick black borders around all shapes
• Style: Consistent width, clean edges
• Function: Defines forms, creates bold visual impact
• Usage: Every element in every image

Character Narrative

Origin Story

Before the Mask: - Quiet kid with unusual gift - Could always tell what people were trying to say - Heard the emotion beneath the words - Felt overwhelmed by the noise of unspoken meaning

The Transformation: - College audio engineering job - Experimental sound rig malfunction - Burst of harmonic light - Ability amplified—could now hear “emotional frequency”

Creating the Mask: - Crafted from sound-dampening materials - Retro recording parts - Pop-art design (bold lines, big colors) - Helps him focus on the “heartline” of meaning

Becoming the Songsmith: - Discovered every person has a frequency - Every story has a melody - Every moment has a perfect phrase - Decided to use gift to craft custom songs

Superpowers

1. Hearing Emotional Frequency

Description: Can detect what people truly want to express, beyond their words
Visual: Heartline waveforms, listening poses
Limitation: Needs the mask to focus the ability
Application: Understanding the real meaning in customer stories

2. Finding the Hidden Song

Description: Discovers the melody and lyrics within every story
Visual: Thoughtful poses, mixer work
Limitation: Requires collaboration—not precious about it
Application: Crafting the perfect custom song

3. Extreme Clarity

Description: Mask filters out noise, reveals the heartline of meaning
Visual: Focused expressions, intense concentration
Limitation: Only works when wearing the mask
Application: Zeroing in on what truly matters

Mission Statement

“Transform personal stories into lasting musical heirlooms that capture what words alone cannot express.”

Character Voice & Personality

Tone

• Professional but not stuffy: Knows his craft, doesn’t need to prove it
• Empathetic but not sappy: Understands emotion without being overly sentimental
• Confident but not arrogant: Secure in his abilities, collaborative approach
• Playful but not silly: Embraces the superhero aesthetic without being childish

Key Phrases

• “I hear what you mean, not just what you say”
• “Every story has a song hiding in it”
• “Not magic. Not templates. Just extreme clarity wrapped in old-school craft.”
• “The Songsmith is listening.”
• “Songs are witnesses—they remember when we forget”

What He Stands For

• ✅ Authentic expression over generic sentiment
• ✅ Collaboration over perfection
• ✅ Lasting impact over quick consumption
• ✅ Emotional truth over surface-level messaging
• ✅ Craft and care over mass production

What He Rejects

• ❌ Generic, impersonal gifts
• ❌ One-size-fits-all solutions
• ❌ Forgettable, disposable experiences
• ❌ Surface-level understanding
• ❌ Rushing the creative process

Usage Guidelines

When to Use the Character

✅ Appropriate Uses

1. Home page hero - Introduce the concept and superpower
2. About page - Tell the origin story
3. Process explanations - Show the craft in action
4. Problem/solution sections - Dramatize the pain points
5. Testimonial sections - Personify the service delivery
6. Email marketing - Create brand consistency
7. Social media - Build character recognition

❌ Inappropriate Uses

1. Admin interfaces - Internal tools should use Admin design system
2. Legal pages - Terms, privacy policies need straightforward presentation
3. Error pages - Don’t make light of technical problems
4. Financial transactions - Checkout should be clear and trustworthy
5. Customer support tickets - Professional, not theatrical

Image Selection Guide

Choose your image based on the message:

Pairing with Copy

Strong Pairings: ``` [Listening Image] “Your Story Has a Song In It. We Help You Hear It.”

[Mixer Image] “Not magic. Not templates. Just extreme clarity wrapped in old-school craft.”

[Performing Image] “Songs Outlast Everything”

[Rejecting Image] “Tired of Giving the Same Old Thing?” ```

Technical Specifications

Image Files

Location: /app/assets/images/songsmith/

Available Files: - songsmith-listening.png - Hero listening pose - songsmith-mixer.png - At the audio board - songsmith-mixer-2.png - Alternate mixer pose - songsmith-thought.png - Contemplative pose - songsmith-guitar-2.png - Performing with guitar - songsmith-bad-gifts-2.png - Rejecting generic gifts - songsmith-moment.png - Additional pose (legacy) - songsmith-moment-v2.png - Additional pose variant

Image Properties

Format: PNG
Color Mode: RGB
Typical Dimensions: ~800-1200px width
File Size: Optimized for web
Transparency: Some images have transparent backgrounds

Rendering Guidelines

```erb <%= image_tag ‘songsmith/songsmith-listening.png’, alt: ‘The Songsmith listening intently with hand cupped to ear’, class: ‘w-full rounded-lg shadow-lg’ %>

```

Accessibility

Alt Text Guidelines: - ✅ Describe the action and emotion: “The Songsmith listening intently with hand cupped to ear” - ✅ Include context when relevant: “The Songsmith working at an audio mixer with heartline waveforms” - ❌ Don’t just say “The Songsmith” or “Songsmith image” - ❌ Don’t describe decorative elements unless they convey meaning

Brand Consistency

Do’s

• ✅ Use character to personify the service
• ✅ Match image context to surrounding copy
• ✅ Maintain superhero/comic book aesthetic
• ✅ Show different emotions and actions
• ✅ Use heartline waveforms as recurring motif
• ✅ Keep heavy black outlines consistent
• ✅ Use Anvil color palette (red, yellow, blue, black)

Don’ts

• ❌ Don’t use character in admin interfaces
• ❌ Don’t mix with non-comic imagery styles
• ❌ Don’t use without proper context
• ❌ Don’t crop out important visual elements
• ❌ Don’t use low-resolution versions
• ❌ Don’t modify the character design
• ❌ Don’t use character for unrelated products

Future Expansion

Potential New Poses

1. Collaborating - Working with customer, reviewing drafts
2. Celebrating - Successful delivery, customer satisfaction
3. Recording - In the studio, creating the track
4. Meditating - Deep focus, finding the perfect phrase
5. Teaching - Explaining the process, educational content

Potential New Contexts

1. Email templates - Header images for transactional emails
2. Social media avatars - Profile pictures, story highlights
3. Merchandise - T-shirts, stickers, posters
4. Video content - Animated character for explainer videos
5. Print materials - Business cards, flyers, posters

Related Documentation

• Anvil Design System - Complete design system
• Visual Comparison - Admin vs Anvil comparison
• Quick Reference - Fast pattern lookup
• Component Inventory - All components

Maintenance

This character guide should be updated whenever: - New character images are created - Character narrative evolves - New usage patterns emerge - Brand positioning changes

Owner: Development Team & Marketing
Review Cycle: Quarterly or as needed