Branding Guidelines Overview
Relevant source files
The following files were used as context for generating this wiki page:
The FOSSBilling branding repository manages official logo and icon assets. It provides a standardized pipeline to transform SVG masters into optimized vectors, raster PNGs, and web-ready favicons. The system ensures visual consistency across different background treatments and sizes through automated generation scripts.
Sources: README.md:1-10, scripts/generate-assets.ts:1-10
Visual Identity Standards
Color Palette
The brand utilizes a specific set of hex codes to ensure consistency across light and dark environments.
| Element | Hex Color |
|---|---|
| Wallet and light-background wordmark | #000000 |
| Card | #0785BC |
| Chip | #FAC965 |
| Chip divisions | #94712D |
| Clasp separator / dark-background wordmark | #FFFFFF |
| Dark-background wallet outline | #83909E |
Sources: README.md:50-58
Typography
The wordmark uses the Manrope font family. The "FOSS" portion uses a weight of 700, while "Billing" uses a weight of 450. Letter spacing remains at default values. SVG assets exported for production have lettering converted to paths to eliminate font dependencies.
Sources: README.md:62-65, scripts/generate-assets.ts:100-105
Asset Variants and Backgrounds
The system supports two primary variants based on the intended background:
- Light Background: Uses a black wordmark and wallet.
- Dark/Black Background: Uses a white wordmark and a muted wallet outline (
#83909E).
Both variants maintain transparency in their exported formats.
Sources: README.md:21-28, export.config.json:11-20
Technical Pipeline
Asset Generation Flow
The generate-assets.ts script orchestrates the transformation of source masters into final distribution files.
The pipeline validates that SVG masters contain no live <text> elements, ensuring all lettering is outlined for consistent rendering.
Sources: scripts/generate-assets.ts:98-110, scripts/svgo.config.ts:5-18
Data Structures
The generation script utilizes defined TypeScript interfaces to track asset metadata.
Sources: scripts/types.ts:1-21
Configuration Management
The export.config.json file controls the output behavior, including target dimensions and source paths.
| Parameter | Type | Description |
|---|---|---|
assetsOutput | string | Directory for optimized SVGs. |
output | string | Directory for PNGs, favicons, and manifest. |
iconSizes | number[] | Array of pixel widths for icon exports. |
logoWidths | number[] | Array of pixel widths for logo exports. |
variants | object | Mapping of variant names to source file paths. |
Sources: export.config.json:1-21
Usage and Limitations
Permitted Use
- Use the logo for truthful writing or linking to FOSSBilling.
- Maintain original forms and colors.
Prohibited Use
- Modifying the logo, capitalization, or punctuation.
- Using "FOSSBilling" in product, company, or domain names without permission.
- Distributing or selling the branding as your own.
- Placing the logo on busy or low-contrast backgrounds.
Sources: README.md:85-103
Conclusion
The branding system combines rigid visual standards with a flexible automated pipeline. By centralizing SVG masters and utilizing sharp and svgo, the project ensures that all FOSSBilling assets—from favicons to high-resolution logos—remain visually identical and technically optimized across all platforms.
Sources: README.md:67-80, scripts/generate-assets.ts:167-175