Branding Customization
Relevant source files
The following files were used as context for generating this wiki page:
Branding Customization in the EVI3_0 project (Promethean Conduit) involves two primary objectives: the systematic suppression of default "Emergent" platform watermarks and the implementation of a high-fidelity "Promethean" aesthetic. The system utilizes aggressive CSS selectors and DOM MutationObservers to ensure a white-labeled experience while applying premium themes across landing pages and chat interfaces.
Sources: frontend/src/HideBranding.css:1-55, frontend/src/App.js:78-140
Branding Suppression Techniques
The project implements a multi-layered approach to remove existing platform branding from the user interface. This is achieved through static CSS rules, inline styles, and dynamic JavaScript observers.
CSS-Based Removal
The system target specific selectors associated with the "Emergent" branding, including IDs and classes containing the string "emergent" or "watermark". These elements are set to display: none !important to ensure they do not appear in the layout or occupy space.
Sources: frontend/src/HideBranding.css:1-35
Dynamic DOM Observation
Because some branding elements may be injected into the DOM after the initial page load, the system uses a MutationObserver in the root HTML template to detect and hide new elements matching branding criteria.
Sources: frontend/public/index.html:62-72
Visual Identity Implementation
The project replaces standard branding with the "Promethean Conduit" identity, characterized by cosmic imagery and premium typography.
Core Assets and Themes
The branding is centered around specific high-quality assets and CSS variables that define the "Athena EVI" persona.
| Component | Asset / Style | Description |
|---|---|---|
| Avatar | 2e60e426.webp | Profile image for "Athena EVI" used in headers and chat. |
| Background | 06318b75.webp | 2K Quality Cosmic Background optimized for high DPI displays. |
| Typography | Inter, DM Sans | High-quality rounded typography for a premium feel. |
| Colors | Purple-600 to Pink-600 | Gradient used for buttons and status badges. |
Sources: frontend/src/App.js:33-40, frontend/src/App.js:84-95, frontend/src/App.css:1-12
Navigation and Header Branding
The navigation header is customized to display the "Promethean Conduit" text alongside the Athena avatar. It utilizes a fixed position with backdrop blurring for a modern UI effect.
Sources: frontend/src/App.js:20-65
Thematic Stylesheets
The project maintains separate stylesheets to handle specific visual modes and branding requirements.
Perplexity-Inspired Premium UI
The PerplexityStyle.css provides a clean, white-background alternative focused on a centered chat interface. This style includes custom animations for message bubbles and typing indicators.
HideBranding Configuration
The suppression logic is centralized in a dedicated CSS file that targets fixed-position elements often used for support widgets or badges.
| Selector | Target | Action |
|---|---|---|
[id*="emergent"] | ID-based branding | display: none !important |
iframe[src*="emergent"] | External branding widgets | opacity: 0 !important |
div[style*="z-index: 9999"] | High-level overlays | pointer-events: none |
Sources: frontend/src/HideBranding.css:1-50
Deployment Branding Variables
During deployment, branding behavior is influenced by environment variables. For example, REACT_APP_ENABLE_VISUAL_EDITS determines if the Babel metadata plugin and Tailwind CDN are loaded, which can impact the rendering of brand elements in the development environment.
Sources: frontend/public/index.html:36-54, DEPLOYMENT_GUIDE.md:145-155
Branding customization in EVI3_0 effectively transforms the underlying platform into a sovereign "Promethean Conduit" environment by combining aggressive removal of third-party identifiers with a specialized cosmic visual theme.