Introduction
Relevant source files
The following files were used as context for generating this wiki page:
FOSSBilling Branding serves as the central repository for all logo and icon assets associated with the FOSSBilling project. It provides optimized vector masters and an automated pipeline to generate raster exports, favicons, and metadata required for web and application use. The system ensures brand consistency across different backgrounds and use cases by defining specific visual treatments and automated transformation rules.
The repository functions as both a storage for source artwork and a build system. It converts high-quality SVG masters into web-ready formats including PNG, ICO, and Apple touch icons while maintaining a strict asset manifest for programmatic access.
Sources: README.md:1-12, scripts/generate-assets.ts:13-22
Asset Variants and Specifications
The project defines two primary visual variants based on the intended background color. Both variants maintain transparency but adjust the internal colors of the logo components for optimal contrast.
| Background Type | Treatment | Key Files |
|---|---|---|
| Light | Black wordmark and wallet | fossbilling-logo.svg, fossbilling-icon.svg |
| Dark / Black | White wordmark and muted wallet outline | fossbilling-logo.svg, fossbilling-icon.svg |
Sources: README.md:27-38, export.config.json:11-20
Color Palette
The branding utilizes a specific set of hex codes for its components:
- Card:
#0785BC - Chip:
#FAC965 - Chip Divisions:
#94712D - Wallet (Light):
#000000 - Wallet Outline (Dark):
#83909E - Clasp/Separator:
#FFFFFF
Sources: README.md:52-60
Asset Generation Pipeline
The generation system utilizes a TypeScript-based pipeline to transform source SVGs into optimized assets. It performs validation, optimization, and rasterization using svgo and sharp.
Pipeline Logic Flow
The following diagram illustrates the sequential steps taken by the generate-assets.ts script to process branding files.
The pipeline ensures that source masters remain untouched while generating optimized versions in the assets/ directory and distribution files in dist/.
Sources: scripts/generate-assets.ts:87-200, scripts/svgo.config.ts:5-18
Key Functions
- squareSvg: Adjusts the SVG viewport to be square by calculating the maximum dimension from the
viewBoxand centering the content. Sources: scripts/generate-assets.ts:43-58 - ico: Generates a standard ICO file by concatenating multiple independent RGBA PNG frames (16, 32, and 48 pixels). Sources: scripts/generate-assets.ts:61-78
- png: Renders vector data into buffers at 2x target resolution before downsampling to ensure high-quality rasterization. Sources: scripts/generate-assets.ts:145-151
Configuration and Metadata
The system behavior is controlled by export.config.json, which defines input paths, output directories, and desired dimensions for generated assets.
Configuration Structure
| Parameter | Type | Description |
|---|---|---|
assetsOutput | string | Target directory for optimized SVGs. |
output | string | Target directory for rasterized exports and manifest. |
iconSizes | number[] | Array of pixel dimensions for icon PNGs. |
logoWidths | number[] | Array of pixel widths for logo PNGs. |
variants | object | Mapping of variant names to source SVG file paths. |
Sources: export.config.json:1-21, scripts/types.ts:1-6
Asset Manifest
Every build generates a manifest.json file in the output directory. This file provides a machine-readable index of all exported assets, including their paths, formats, and dimensions.
This structure allows external applications to programmatically resolve the correct branding asset based on the required type (e.g., apple-touch-icon or favicon).
Sources: scripts/types.ts:8-24
Summary
The branding module provides a robust infrastructure for FOSSBilling's visual identity. By combining strict SVG optimization rules with a configurable rasterization pipeline, it ensures that high-quality, consistent assets are available for all distribution platforms. The inclusion of a detailed manifest and automated cleanup of obsolete files maintains a lean and accurate distribution package.
Sources: README.md:70-85, scripts/generate-assets.ts:202-210