← BACK

HEARTLINE SONGSMITH

Anvil Design System

Version 1.0 Last Updated: December 6, 2025

The Anvil Design System defines the customer-facing design language for Heartline Songsmith, built on a bold comic book aesthetic with high-energy visuals, strong borders, and vibrant colors.

Note: For admin/internal tool design patterns, see the Admin Design System. This document covers customer-facing interfaces only.

Table of Contents

  1. Design Philosophy
  2. Color System
  3. Typography
  4. Layout Patterns
  5. Components
  6. Effects & Decorations
  7. Character Imagery & Storytelling
  8. Implementation Guidelines

Design Philosophy

Core Principles

Bold & Energetic: Comic book-inspired aesthetic with strong visual impact - Heavy borders (5px) create clear boundaries - High contrast color combinations - Dramatic shadows for depth - Uppercase headlines with italic styling

Playful Yet Professional: Fun without sacrificing trust - Vibrant primary colors balanced with clean layouts - Clear information hierarchy - Generous spacing for readability - Professional checkout experience

Mobile-First Responsive: Works beautifully on all devices - Flexible grid layouts - Touch-friendly interactive elements - Responsive typography scaling - Adaptive component layouts

The Heartline Songsmith Character

The visual identity is anchored by the Heartline Songsmith character—a superhero-styled persona that embodies the brand’s unique blend of craft, emotion, and pop culture.

Character Design: - Mask: Yellow/gold luchador-style mask with flame-like points at the top, red vertical stripe down center - Costume: Red bodysuit with blue cape/collar, yellow treble clef symbol on chest - Color Palette: Matches the Anvil system (red, yellow, blue, black) - Style: Classic comic book illustration with heavy black outlines, halftone textures, and bold flat colors - Expressions: Thoughtful, focused, intense—conveying deep listening and creative concentration

Character Poses & Contexts: 1. Listening (songsmith-listening.png) - Hand cupped to ear, hearing the emotional frequency 2. At the Mixer (songsmith-mixer.png) - Working the audio board with heartline waveforms behind 3. Thoughtful (songsmith-thought.png) - Contemplative pose, processing the story 4. Performing (songsmith-guitar-2.png) - Energetic, delivering the finished song 5. Rejecting Generic Gifts (songsmith-bad-gifts-2.png) - Dramatic rejection of impersonal presents

Visual Motifs: - Heartline Waveforms: Red/yellow/orange waveforms representing emotional frequency - Treble Clef Symbol: Yellow treble clef as the hero emblem - Radial Burst Backgrounds: Red/yellow/blue radiating lines for energy and impact - Halftone Textures: Comic book printing dots for authenticity - Sound Visualization: Audio equipment, waveforms, musical notation

Character Purpose: The Songsmith isn’t just a mascot—he’s the personification of the service’s unique value: the ability to hear what people truly mean and transform it into music. His superhero styling elevates custom songwriting from a service to an experience, making it feel special, memorable, and worth celebrating.

Color System

Primary Palette

The Anvil color system uses five core colors inspired by classic comic book printing:

css :root { --comic-red: #EF3E4A; /* Primary actions, headers */ --comic-yellow: #FFDE00; /* Highlights, accents */ --comic-blue: #0A32F4; /* Backgrounds, secondary elements */ --comic-black: #000000; /* Borders, text strokes */ --comic-white: #FFFFFF; /* Content backgrounds */ }

Color Usage

Comic Red (--comic-red)

  • Primary Use: Headers, primary buttons, call-to-action elements
  • Tailwind Classes: bg-comic-red, text-comic-red
  • Contrast: Always pair with yellow text or black stroke for readability
  • Example: Header bar, checkout button

Comic Yellow (--comic-yellow)

  • Primary Use: Text on red backgrounds, card headers, highlights
  • Tailwind Classes: bg-comic-yellow, text-comic-yellow
  • Contrast: Use with black stroke for emphasis
  • Example: Page titles, section headers, card titles

Comic Blue (--comic-blue)

  • Primary Use: Page backgrounds, icons, pricing
  • Tailwind Classes: bg-comic-blue, text-comic-blue
  • Contrast: Provides vibrant backdrop for white cards
  • Example: Body background, icon colors

Comic Green (--comic-green)

  • Primary Use: Success messages, confirmations, positive feedback
  • Tailwind Classes: bg-comic-green, text-comic-green
  • Contrast: Pairs well with white text
  • Example: Success badges, confirmation messages, completed states

Comic Black (--comic-black)

  • Primary Use: Borders, text strokes, emphasis
  • Tailwind Classes: bg-comic-black, text-comic-black, border-comic-black
  • Usage: 5px borders on all major components
  • Example: Card borders, button borders, text outlines

Comic White (--comic-white)

  • Primary Use: Card backgrounds, content areas
  • Tailwind Classes: bg-comic-white, text-comic-white
  • Usage: Clean canvas for content
  • Example: Card interiors, form backgrounds

Semantic Color Mapping

Element Type Background Text Border Notes
Page bg-comic-blue - - Vibrant backdrop
Header bg-comic-red text-comic-yellow border-b-5 border-comic-black High contrast
Card bg-comic-white text-comic-black border-5 border-comic-black Clean content area
Card Header bg-comic-yellow text-comic-black border-b-5 border-comic-black Section divider
Primary Button bg-comic-red text-comic-yellow border-5 border-comic-black Main actions
Icon - text-comic-blue or text-comic-red - Context dependent
Price - text-comic-red or text-comic-blue - Large, bold display

Typography

Font Families

Headline Font: Bangers

```html

```

  • Usage: Headlines, titles, buttons, emphasis
  • Characteristics: Comic book style, all caps friendly, high impact
  • Tailwind Class: font-headline
  • Typical Styling: Italic, uppercase, with text stroke

Body Font: Inter

```html

```

  • Usage: Body text, descriptions, form inputs
  • Weights: 400 (regular), 700 (bold), 900 (black)
  • Tailwind Class: font-body
  • Characteristics: Clean, readable, professional

Icon Font: Material Symbols Outlined

```html

```

  • Usage: Icons throughout interface
  • Settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
  • Tailwind Class: material-symbols-outlined

Type Scale

Display Text (Page Titles)

```html

YOUR SELECTION!

``` - Size: text-5xl (3rem / 48px) - Style: Italic, uppercase, heavy stroke - Usage: Main page headings in header

Section Headings

```html

PUMP UP THE VOLUME!

``` - Size: text-5xl (3rem / 48px) - Style: Italic, white text with black stroke - Transform: Optional -rotate-2 for dynamic feel - Usage: Section dividers, category headers

Card Titles

```html

BUNDLE TITLE

``` - Size: text-3xl to text-4xl (1.875rem - 2.25rem) - Style: Italic, black text - Usage: Card headers, component titles

Component Labels

```html

ADDON NAME

``` - Size: text-3xl (1.875rem / 30px) - Style: Uppercase, wide tracking - Usage: Product names, addon titles

List Items

html <span class="font-headline text-2xl uppercase tracking-wider text-comic-black"> COMPONENT NAME </span> - Size: text-2xl (1.5rem / 24px) - Style: Uppercase, wider tracking - Usage: Bullet lists, feature lists

Body Text

```html

Description text goes here.

``` - Size: text-base (1rem / 16px) - Style: Regular weight, relaxed leading - Usage: Descriptions, explanatory text

Price Display (Large)

```html

$99.99

``` - Size: text-7xl (4.5rem / 72px) - Style: Italic, red with black stroke - Usage: Main price display in cards

Price Display (Medium)

```html

$29.99

``` - Size: text-4xl (2.25rem / 36px) - Style: Blue, no stroke - Usage: Addon prices, secondary pricing

Button Text

html <button class="font-headline text-3xl italic tracking-wider text-comic-yellow" style="-webkit-text-stroke: 2px var(--comic-black); text-stroke: 2px var(--comic-black);"> SECURE CHECKOUT! </button> - Size: text-3xl (1.875rem / 30px) - Style: Italic, yellow with black stroke - Usage: Primary action buttons

Layout Patterns

Page Structure

Cart Layout Template

```erb <!DOCTYPE html>

<%= yield %>
<%= render ComicFooterComponent.new %>

```

Content Container

```html

``` - Max Width: max-w-5xl (64rem / 1024px) - Centering: mx-auto - Usage: Constrains content width for readability

Section Spacing

```html

``` - Between Sections: mb-12 (3rem / 48px) - Usage: Clear visual separation

Grid Layouts

```html

``` - Mobile: Single column - Desktop: 2 columns - Gap: gap-8 (2rem / 32px) - Usage: Product grids, addon displays

Components

ComicDetailCardComponent

The primary card component for displaying bundle information with optional pricing sidebar.

Component Definition

```ruby class ComicDetailCardComponent < ViewComponent::Base renders_one :sidebar

def initialize(title:, show_price: false, price: nil) @title = title @show_price = show_price @price = price end

def price_display return nil unless @show_price && @price “$#{number_with_precision(@price / 100.0, precision: 2)}” end end ```

Visual Structure

┌─────────────────────────────────────────────────────┐ │ TITLE (Yellow background, black border) │ ├─────────────────────────────────────┬───────────────┤ │ Content Area │ Price/Sidebar │ │ (White bg, halftone pattern) │ (White bg) │ │ │ │ └─────────────────────────────────────┴───────────────┘

Usage Example

```erb <%= render ComicDetailCardComponent.new( title: @product.title.upcase, show_price: true, price: @product.price_cents ) do %>

    <% @product.components.each do |component| %>
  • <%= component.title %>
    • <% end %>

<% end %> ```

Key Features

  • Hard Shadow: shadow-comic-hard (10px offset)
  • Heavy Border: border-5 border-comic-black
  • Halftone Background: Adds texture to content area
  • Responsive Layout: Stacks on mobile, side-by-side on desktop
  • Flexible Content: Accepts block content and optional sidebar

AddonCardComponent

Card component for displaying selectable add-on products.

Component Definition

```ruby class AddonCardComponent < ViewComponent::Base def initialize(addon:, selectable: true) @addon = addon @selectable = selectable end

def icon_name # Maps SKU to Material Symbol icon name end

def icon_color # Returns Tailwind color class based on SKU end

def formatted_price number_to_currency(@addon.price_cents / 100.0, precision: 2) end end ```

Visual Structure

┌─────────────────────────────┐ │ [✓] │ ← Checkbox (top-right) │ [ICON] │ ← Large icon (72px) │ │ │ ADDON TITLE │ ← Headline font │ Description text │ ← Body font │ $29.99 │ ← Price └─────────────────────────────┘

Usage Example

erb <%= render AddonCardComponent.new(addon: addon, selectable: true) %>

Key Features

  • Selectable Checkbox: Styled custom checkbox in top-right
  • Large Icon: 72px Material Symbol with contextual colors
  • Hard Shadow: shadow-comic-hard
  • Heavy Border: border-5 border-comic-black
  • Price Display: Blue headline font

Checkbox Styling

html <input type="checkbox" class="absolute top-3 right-3 h-8 w-8 cursor-pointer appearance-none border-5 border-comic-black bg-white checked:bg-comic-yellow checked:after:content-['\2713'] checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:text-3xl checked:after:font-black checked:after:text-comic-black addon-checkbox"/>

ComicFooterComponent

Multi-section footer with guarantee banner, link columns, and copyright.

Component Definition

```ruby class ComicFooterComponent < ViewComponent::Base def initialize(message: “100% SATISFACTION GUARANTEE!”, current_user: nil) @message = message @current_user = current_user end

def company_links # Returns array of company links end

def legal_links # Returns array of legal links end

def support_links # Returns array of support links (context-aware) end end ```

Visual Structure

┌─────────────────────────────────────────────────────┐ │ GUARANTEE MESSAGE (Red bg, white text, stroke) │ ├─────────────────────────────────────────────────────┤ │ [Brand] [Company] [Legal] [Support] │ │ (Blue background, white text) │ ├─────────────────────────────────────────────────────┤ │ © Copyright (Black bg, white text) │ └─────────────────────────────────────────────────────┘

Key Features

  • Three-tier Layout: Banner, links, copyright
  • Responsive Grid: 1 column mobile, 4 columns desktop
  • Context-Aware Links: Shows admin link for admins
  • Color Scheme: Red banner, blue links section, black copyright

Header Pattern

Standard Cart Header

```erb

<%= link_to products_path, class: "font-headline text-2xl italic text-comic-yellow hover:text-comic-white transition-colors" do %> ← BACK <% end %>

YOUR SELECTION!

```

Key Features

  • Fixed Height: py-4 for consistency
  • Three-column Layout: Back link, title, spacer
  • Heavy Border: border-b-5 border-comic-black
  • Text Stroke: 3px black stroke on yellow text

Structure

```erb

<%= form_with url: checkout_path, method: :post do |form| %>
Total: $0.00
<% end %>

```

Key Features

  • Sticky Positioning: sticky bottom-0
  • High Z-Index: z-40 stays above content
  • Two-column Layout: Total on left, button on right
  • Button Shadow: shadow-comic-button (5px offset, darker red)
  • Press Animation: Translates down on hover/active

Effects & Decorations

Shadows

Hard Shadow (Cards)

css .shadow-comic-hard { box-shadow: 10px 10px 0 0 var(--comic-black); } - Usage: Cards, major components - Effect: Dramatic offset shadow - Tailwind Class: shadow-comic-hard

Button Shadow

css .shadow-comic-button { box-shadow: 5px 5px 0 0 #A11821; } - Usage: Buttons - Effect: Smaller offset, darker red shadow - Tailwind Class: shadow-comic-button - Interaction: Reduces on hover, disappears on active

Borders

Standard Border

```html

``` - **Width**: 5px (custom utility) - **Color**: Black - **Usage**: All major components #### Border Utilities ```css .border-5 { border-width: 5px; } .border-comic-black { border-color: var(--comic-black); } ``` ### Halftone Background #### Pattern Definition ```css .halftone-bg { background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px); background-size: 8px 8px; } ``` #### Usage ```html
``` - **Effect**: Comic book print texture - **Implementation**: Absolute positioned overlay - **Opacity**: 70% for subtle effect - **Usage**: Card content backgrounds ### Text Stroke #### Heavy Stroke (Titles) ```css -webkit-text-stroke: 3px var(--comic-black); text-stroke: 3px var(--comic-black); ``` - **Width**: 3px - **Usage**: Page titles, section headers - **Colors**: Yellow or white text with black stroke #### Medium Stroke (Buttons) ```css -webkit-text-stroke: 2px var(--comic-black); text-stroke: 2px var(--comic-black); ``` - **Width**: 2px - **Usage**: Button text, prices - **Colors**: Yellow or red text with black stroke ### Transforms #### Rotation ```html

``` - **Angle**: -2 degrees - **Usage**: Section headers for dynamic feel - **Effect**: Slight tilt adds energy --- ## Implementation Guidelines ### CSS Custom Properties Add to `