Brightex Solutions
Brand & Design System
This document defines the visual language of Brightex Solutions - colors, typography, logos, components, and usage guidelines. Use this as the single source of truth for all brand communication and digital design.
Color Palette
The Brightex color system is anchored in deep navy and energized by warm amber gold. These two colors represent trust, clarity, and innovation - the core of what we deliver.
Primary Colors
Supporting Colors
CSS Variables
Typography
Two typefaces define the Brightex voice: Fraunces (editorial serif) for expressive headlines, and Plus Jakarta Sans (clean geometric sans-serif) for all UI text, body copy, and data.
Display Font - Fraunces
Building Digital Experiences
End-to-End Digital Solutions
Web Development & Design
Client-Centered Thinking
Body Font - Plus Jakarta Sans
We help startups, SMEs, and growing brands establish a powerful online presence through strategic web development, intuitive design, and data-driven digital solutions.
Brightex Solutions is a technology & digital services consultancy focused on helping businesses establish, optimize, and scale their online presence.
Clear communication, clear pricing, clear processes. We do what we say and stand by our work with integrity and professionalism.
Font Import
Logo System
The Brightex logo exists in two main forms: a full wordmark with icon, and a standalone icon mark for compact use cases (favicon, app icon, social avatar).
Full Logo Variations
Light background - no BG (PNG)
Dark background - no BG (PNG)
Light background - with BG
Icon Mark (Favicon / Avatar)
Light background
Dark background
Logo Usage Rules
Do
- Use the light-BG logo on white or light gray backgrounds
- Use the dark-BG logo on navy, dark, or photo backgrounds
- Maintain clear space equal to the height of the "B" icon on all sides
- Use the icon mark as favicon, WhatsApp profile, app icon
- Scale proportionally - never distort
Don't
- Don't change or add colors to the logo
- Don't place the logo on busy or low-contrast backgrounds
- Don't stretch, rotate, or distort the logo
- Don't add drop shadows or effects
- Don't use the full wordmark below 120px width
Buttons & CTAs
Buttons guide users to the most important actions. Use the primary (amber) button for the single most important CTA on a page. Secondary and ghost variants for supporting actions.
Button Variants
Button Sizes
Badges & Labels
Section Labels
Spacing System
Consistent spacing creates visual rhythm and breathing room. All spacing is defined as CSS variables on a scale from xs to 5xl.
Icon System
Brightex uses Font Awesome 6 for all iconography. Prefer solid variants for buttons and CTAs, regular for UI labels, and brand variants for social channels.
Brand Voice & Usage
Brightex communicates with clarity, confidence, and warmth. We are professional but approachable - never stiff, never generic.
Tagline
Official tagline
Building Digital Experiences That Drive Growth
Tone of Voice
We Sound Like
- Clear and direct - no fluff, no jargon overload
- Confident and results-focused
- Warm and approachable, not cold and corporate
- Specific - we mention outcomes, not just activities
- Partner-minded - "your goals" not "our services"
We Don't Sound Like
- Vague buzzwords ("synergy", "best-in-class")
- Overly formal or stiff language
- Boastful without evidence
- Generic agency copy that could apply to anyone
- Passive or uncertain language