BRAND PACKAGE

Internal reference for all brand and style decisions

Typography

Gamay (Display Font)

Headings - 200% Stretch, Bold

The Quick Brown Fox

H1 - 170% Stretch

Jumps Over Lazy Dogs

H2 - Uppercase, Letter Spacing 0.02em

SAVE THAT AGAIN

Usage: All headings (H1-H6), logo text, display elements
Font Stretch: 60%-200% (variable)
Font Weight: 100-900 (variable)
Format: WOFF2, WOFF

Halyard Text (Body Font)

Body Text - Regular

The quick brown fox jumps over the lazy dog. This is body copy with excellent readability and clean letterforms designed for extended reading.

Body Text - Bold

Important information stands out with bold weight while maintaining the same clean aesthetic.

Usage: All body text, paragraphs, UI elements, buttons
Line Height: 1.4 (enforced globally)
Font Weight: 100-900 (variable)
Format: WOFF2, WOFF

Color Palette

Primary Colors

#000000

Background (True Black)

#e0e0e0

Foreground (Light Gray)

#2196f3

Accent Blue (Primary)

#1976d2

Accent Blue Hover

UI Colors

#1a1a1a

Card Background

#404040

Border Gray

Gradient

Text Gradient (Blue→Purple)

Usage Guidelines:
• Use true black (#000000) for backgrounds to optimize OLED displays
• Accent blue (#2196f3) for interactive elements, links, and CTAs
• Text gradient for hero headings and special emphasis
• Maintain WCAG AA contrast ratios for accessibility

Glassmorphism Effects

Glass Components

.glass-nav

Navigation bar with blur effect

.glass-card

Standard card with gradient border

.glass-button

Button with subtle glass effect

.glass-button-primary

Primary CTA with gradient

Technical Specs

backdrop-filter: blur(4px-12px)

background: rgba(30, 58, 138, 0.15-0.4)

border: 1px solid rgba(168, 162, 158, 0.2-0.5)

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)

Spacing & Layout

Container Widths

max-w-4xl: 56rem (896px) - Standard content

max-w-6xl: 72rem (1152px) - Wide content

Padding Standards

Section padding: py-16 px-6

Card padding: p-8

Button padding: px-6 py-3

Border Radius

Cards: rounded-xl (12px)

Buttons: rounded-lg (8px)

Inputs: rounded-md (6px)

Animations

.animate-float

6s ease-in-out infinite

hover:scale-105

Hover me for scale effect

.pulse-button

Pulsing opacity effect

Timing: Use 0.3s for UI transitions, 2-8s for ambient animations
Easing: ease-in-out for smooth, natural motion

Component Patterns

Navigation

Fixed top navigation with glass effect

<nav className="glass-nav fixed top-0 left-0 right-0 z-50">
  <div className="max-w-4xl mx-auto px-6 py-4">
    <Link href="/" className="text-xl font-bold">LOGO</Link>
  </div>
</nav>

Interactive Background

Animated gradient background component

<InteractiveBackground />

Footer

Standard footer with links and branding

<Footer />

Usage Guidelines

Do's

  • ✓Use Gamay for all headings with wide stretch (170%-200%)
  • ✓Maintain 1.4 line-height for optimal readability
  • ✓Use glassmorphism for depth and modern aesthetic
  • ✓Keep true black backgrounds for OLED optimization
  • ✓Use text gradient for hero headings and emphasis

Don'ts

  • ✗Don't use condensed font stretch for headings
  • ✗Don't override the 1.4 line-height without good reason
  • ✗Don't use pure white (#ffffff) - use #e0e0e0 instead
  • ✗Don't stack too many glass effects - maintain hierarchy
  • ✗Don't use the brand fonts outside the Save That Again product

Brand Voice

Personality

  • •Innovative: Forward-thinking and tech-savvy
  • •Approachable: Friendly without being casual
  • •Confident: Assured in our capabilities
  • •Clear: Direct and easy to understand

Tone

  • •Professional: Not corporate or stuffy
  • •Helpful: Always solution-oriented
  • •Enthusiastic: Passionate about the product
  • •Respectful: Value user's time and needs

Quick Reference

Typography

H1-H6: Gamay, 200% stretch
Body: Halyard Text
Line height: 1.4

Colors

BG: #000000
Text: #e0e0e0
Accent: #2196f3

Spacing

Container: max-w-4xl
Section: py-16 px-6
Radius: rounded-xl

Back to Home