Color Palette
Relevant source files
The following files were used as context for generating this wiki page:
The FOSSBilling color palette defines the visual identity for brand assets, including logos, icons, and wordmarks. These colors ensure consistent brand representation across different display environments, such as light, dark, and black backgrounds.
Core Brand Colors
The palette consists of specific hex codes assigned to individual components of the FOSSBilling artwork. The "wallet" icon contains the primary brand colors, while wordmark colors vary based on the background treatment.
| Element | Hex Color | Description |
|---|---|---|
| Card | #0785BC | The primary blue color used for the card element. |
| Chip | #FAC965 | The gold/yellow color for the chip element. |
| Chip divisions | #94712D | Muted brown used for lines within the chip. |
| Wallet | #000000 | Black used for the wallet body on light backgrounds. |
| Clasp separator | #FFFFFF | White used for the clasp and dark wordmarks. |
| Wallet outline | #83909E | Muted grey used for the wallet outline on dark backgrounds. |
Sources: README.md:46-53
Contextual Background Treatments
The project manages colors through "variants" defined in the configuration. These variants determine which SVG source files the generation script processes to maintain color accuracy for different UI themes.
Variant Logic
- Light Background: Uses a black (
#000000) wordmark and wallet body. - Dark/Black Background: Uses a white (
#FFFFFF) wordmark and a muted wallet outline (#83909E) to ensure visibility.
Sources: README.md:19-24, export.config.json:13-22
The following diagram illustrates how the background context determines the color application for brand elements:
Sources: README.md:19-24, README.md:46-53
Automated Color Processing
The generate-assets.ts script and svgo.config.ts handle color data during the optimization and export process.
SVGO Optimization
The optimization pipeline includes the convertColors plugin. This plugin standardizes color representations within the SVG source files without altering the intended brand hues.
Sources: scripts/svgo.config.ts:18
Preview Generation
The create-preview.ts script uses specific background colors to simulate UI environments for asset validation:
- Preview Background:
#E8EBEF - Dark Background Simulation:
#171C24 - Black Background Simulation:
#000000 - Label Text (Standard):
#171C24 - Label Text (Muted):
#596371
Sources: scripts/create-preview.ts:16-21, scripts/create-preview.ts:32-33, scripts/create-preview.ts:51
Implementation Reference
The createPreview function applies these colors dynamically when generating the reference sheet:
// Example of background application in preview generation
const rows = variants.flatMap(variant => {
if (variant.name === 'dark-background') return [
{ variant, background: '#171C24', foreground: '#FFFFFF', label: 'Dark Background' },
{ variant, background: '#000000', foreground: '#FFFFFF', label: 'Black Background' },
];
return [{ variant, background: '#FFFFFF', foreground: '#171C24',
label: variant.name === 'light-background' ? 'Light Background' : `${variant.name} / White` }];
});
Sources: scripts/create-preview.ts:16-24
Summary
The FOSSBilling color palette is a strict set of hex values designed for high contrast and brand recognition. The system automates the application of these colors by separating source files into light and dark variants, ensuring that every exported asset adheres to the defined color specifications.