lhi-assets

NPM Package: https://www.npmjs.com/package/lhi-assets

Lifehack Innovations shared branding and asset package (ASCII art, logos, etc.)

Overview

The lhi-assets package provides centralized access to all Lifehack Innovations branding assets including logos, icons, media files, and brand guidelines. This package ensures consistent branding across all LHI projects and applications.

Installation

npm install lhi-assets

Asset Collection

To populate this package with all LHI assets from various sources:

# Make scripts executable
chmod +x collect_assets.sh optimize_assets.sh

# Collect all assets from Google Drive and local projects
./collect_assets.sh

# Optimize assets for web use (requires ffmpeg, imagemagick, pngquant)
./optimize_assets.sh

Usage

Import in ES6/TypeScript

import { logos, icons, media, brand, colors } from 'lhi-assets';

// Use primary logo
<img src={logos.primary.logo} alt="Lifehack Innovations" />

// Use animated logo
<video src={logos.animated.spline} autoPlay loop />

// Get favicon by size
<link rel="icon" href={icons.favicons.getFavicon(32)} />

// Use brand colors
const primaryColor = colors.primary; // #00A8E8

Load ASCII Art

import { getAsciiArt, getLifehackAsciiArt } from 'lhi-assets';

// New method
const ascii = await getAsciiArt();
console.log(ascii);

// Legacy method (backward compatibility)
const asciiLegacy = await getLifehackAsciiArt();
console.log(asciiLegacy);

Get Logo with Specific Size

import { getLogoWithSize } from 'lhi-assets';

// Get 256px version of primary logo
const logo256 = getLogoWithSize('primary', 'logo', 256);

Direct File Import (Legacy)

import asciiArt from 'lhi-assets/ascii';

Asset Structure

assets/
├── logos/
│   ├── primary/        # Main logo files
│   ├── animated/       # Animated logos (GIF, MP4)
│   ├── text/          # Logos with text
│   ├── powered-by/    # "Powered by LHI" badges
│   ├── profile/       # Profile picture variations
│   └── watermarks/    # Watermark versions
├── icons/
│   ├── favicons/      # Website favicons
│   └── app/           # Mobile app icons
├── media/
│   ├── videos/        # Brand videos
│   └── splash/        # Splash screens
└── brand/
    ├── ascii/         # ASCII art
    ├── templates/     # Design templates
    └── backgrounds/   # Background images

Available Assets

Logos

• Primary: Standard logos in various formats
• Animated: GIF and video animations
• Text: Logos combined with company text
• Profile: Social media profile pictures
• Watermarks: For content protection

Icons

• Favicons: Multiple sizes (16px to 256px)
• App Icons: For mobile applications (512px, 1175px)

Media

• Videos: 4K intro videos and stings
• Splash: App splash screen assets

Brand

• ASCII Art: Terminal-friendly logo
• Templates: Design starting points
• Backgrounds: Login and presentation backgrounds

Brand Guidelines

Colors

• Primary: #00A8E8
• Secondary: #003459
• Accent: #007EA7
• Light: #00BBF9
• Dark: #003459

Usage Rules

• Minimum logo size: 32px height
• Clear space: Equal to the height of 'L' in wordmark
• Preferred backgrounds: White or light colors

Development

Building

npm run build

Asset Sources

Assets are collected from:

1. Google Drive: Brand Documents folder
2. Local projects: lhi-website, lhi_template
3. Existing package assets

Adding New Assets

1. Place new assets in appropriate directory
2. Update src/index.ts to export new assets
3. Run npm run build
4. Test and publish

Publishing

See /Users/patrickwatsonlhi/lhi_scripts/lhi_node_modules_manager/lhi_npm_package_manager/PUBLISHING_RULES.md for publishing instructions.

Asset Showcase

Simple Logo

Text Logo

App Icon

License

All assets are property of Lifehack Innovations LLC. Usage outside of LHI projects requires permission.