HCTI Image Generation Assets

This directory contains optimized assets for use with the HTML/CSS to Image (HCTI) API to generate social media images, documentation graphics, and marketing materials.

Directory Structure

hcti-assets/
├── logos/
│   ├── petabridge/    # Petabridge company logos
│   ├── akka-net/      # Akka.NET project logos
│   └── phobos/        # Phobos product logos
└── backgrounds/       # Background images and patterns

Available Assets

Petabridge Logos

• petabridge-logo-full.png - Full company logo with text
• petabridge-logo-square.png - Square format logo
• petabridge-text-only.png - Text-only version

Akka.NET Logos

• akka-net-logo.png - Standard Akka.NET logo
• akka-net-logo.svg - Vector version for scaling
• akka-net-social.png - Optimized for social media
• akka-net-white-text.png - White text variant for dark backgrounds

Phobos Logos

• phobos-logo.png - Standard Phobos logo
• phobos-logo-white.png - White text variant
• phobos-icon.png - Icon-only version

Public URLs

All assets are available via GitHub Pages at:

https://petabridge.github.io/images/hcti-assets/[path-to-file]

Examples:

• Petabridge Logo: https://petabridge.github.io/images/hcti-assets/logos/petabridge/petabridge-logo-full.png
• Akka.NET Logo: https://petabridge.github.io/images/hcti-assets/logos/akka-net/akka-net-logo.png
• Phobos Logo: https://petabridge.github.io/images/hcti-assets/logos/phobos/phobos-logo.png

Usage with HCTI API

These assets can be referenced directly in HTML templates for HCTI image generation:

<img src="https://petabridge.github.io/images/hcti-assets/logos/petabridge/petabridge-logo-full.png"
     style="width: 200px; height: auto;">

Brand Guidelines

Colors

• Petabridge Purple: #667eea
• Petabridge Dark Purple: #764ba2
• Akka.NET Blue: #0e7490
• Phobos Orange: #f97316

Recommended Image Dimensions

• Social Cards (Twitter/LinkedIn): 1200x630px
• Instagram Posts: 1080x1080px
• Blog Headers: 1920x1080px
• Email Headers: 600x200px

Adding New Assets

When adding new assets:

1. Optimize images for web (use PNG for logos with transparency, JPG for photos)
2. Follow naming convention: [product]-[type]-[variant].ext
3. Create multiple sizes if needed (e.g., -small, -medium, -large)
4. Update this README with new additions
5. Commit and push to make available via GitHub Pages

CORS & CDN

GitHub Pages serves these assets with:

• Proper CORS headers for cross-origin usage
• Fastly CDN for global distribution
• HTTPS for secure embedding
• Appropriate cache headers

Related Tools

• Command: /generate-image - Claude Code command for generating images
• API: HCTI (htmlcsstoimage.com) - Converts HTML/CSS to images
• Memory: See memorizer ID 4c85f7ab-87ce-4092-815b-b7d81a8cfbdd for HCTI tips