@supernal/brand-kit

Official brand assets for Supernal Intelligence products.

Installation

npm install @supernal/brand-kit

Quick Start

JavaScript/Node.js

const { getLogoPath, colors, favicons } = require('@supernal/brand-kit');

// Get logo paths
const ttsLogo = getLogoPath('tts');           // Standard TTS logo
const ttsLogoLarge = getLogoPath('tts', 'large');  // Large TTS logo
const companyLogo = getLogoPath('company');    // Company logo

// Access colors
console.log(colors.primary.deepBlue);  // '#0066ff'
console.log(colors.gradient.css);      // 'linear-gradient(...)'

// Get favicon paths
const favicon32 = getFaviconPath('32x32');

TypeScript

import { getLogoPath, colors, type Product, type Colors } from '@supernal/brand-kit';

const logo: string = getLogoPath('tts');
const palette: Colors = colors;

React Example

import { getLogoPath, colors } from '@supernal/brand-kit';

function Logo() {
  return (
    <img
      src={getLogoPath('tts')}
      alt="Supernal TTS"
      style={{ width: 40, height: 40 }}
    />
  );
}

function Button() {
  return (
    <button style={{ background: colors.gradient.css }}>
      Get Started
    </button>
  );
}

Next.js / Static Files

Copy logos to your public directory:

cp node_modules/@supernal/brand-kit/logos/* public/logos/

Or import directly in your build process.

Directory Structure

brand-kit/
├── logos/          # Logo files (SVG format)
├── favicons/       # Favicon files (PNG format, multiple sizes)
├── colors/         # Color palette documentation
├── fonts/          # Font files and guidelines
└── README.md       # This file

Logos

Company Logo (@/)

• File: supernal-company-logo.svg (40x40)
• Large: supernal-company-logo-large.svg (200x200)
• Symbol: @/
• Usage: Company-wide branding, general Supernal Intelligence materials

TTS Product Logo (~+)

• File: supernal-tts-logo.svg (40x40)
• Large: supernal-tts-logo-large.svg (200x200)
• Symbol: ~+
• Meaning: Sound wave (~) + Enhancement (+)
• Usage: Supernal TTS product, documentation, widget, API materials

Favicons

Multiple sizes generated from the TTS logo:

• favicon-16x16-new.png - Browser tabs
• favicon-32x32-new.png - Browser bookmarks
• favicon-192x192.png - Android home screen
• favicon-512x512.png - High-resolution displays, PWA

Colors

See colors/palette.md for the complete color system.

Primary Gradient

• Start: #0066ff (Blue)
• Mid: #4d94ff (Light Blue)
• End: #00ccff (Cyan)

Usage Guidelines

Logo Usage

1. Maintain aspect ratio - Never stretch or distort logos
2. Minimum size - Don't use smaller than 20x20px for clarity
3. Clear space - Maintain padding equal to 25% of logo size
4. Background - Works best on white or light backgrounds

File Format Selection

• SVG: Web, print, any scalable use (preferred)
• PNG: Favicons, social media, when SVG not supported

Product-Specific Guidelines

• Supernal TTS: Always use ~+ logo for product materials
• Company: Use @/ logo for company-wide materials
• Mixed Context: When both company and TTS are present, use TTS logo primarily

Editing Logos

All logos are text-based SVG files for easy customization:

<text>~+</text>  <!-- Change text here -->

To change colors, edit the gradient stops:

<stop offset="0%" style="stop-color:#0066ff;stop-opacity:1" />

API Reference

Functions

getLogoPath(product?, size?)

Get the file path for a logo.

• product: 'company' | 'tts' (default: 'company')
• size: 'standard' | 'large' (default: 'standard')
• Returns: Absolute path to the logo file

getFaviconPath(size?)

Get the file path for a favicon.

• size: '16x16' | '32x32' | '192x192' | '512x512' (default: '32x32')
• Returns: Absolute path to the favicon file

getColor(category, name?)

Get a color value from the palette.

• category: 'primary' | 'neutrals' | 'semantic' | 'gradient'
• name: Specific color name within category (optional)
• Returns: Color hex string or color object

Exports

• assets - All asset paths
• logos - Logo paths object
• favicons - Favicon paths object
• colors - Complete color palette
• PRODUCTS - Available product names array
• FAVICON_SIZES - Available favicon sizes array

License

See LICENSE.md for usage terms and trademark information.

Copyright © 2025 Supernal Intelligence, Inc. All rights reserved.

Support

• Issues: GitHub Issues
• Email: [email protected]
• Website: https://supernal.ai

Contributing

When adding new brand assets:

1. Place files in appropriate directory
2. Use consistent naming: product-name-asset-type-size.format
3. Update this README with new asset information
4. Include both standard and large versions for logos
5. Run npm version patch and publish updates