01 — COLOR SYSTEM
Color Palette
High-energy colors that demand attention and create impact. Built for movement, excitement, and confidence.
PRIMARY
Electric Blue
#00D9FF
Primary brand color. Use for headlines, CTAs, borders, and key UI elements. High visibility and energy.
BASE
Deep Navy
#0A1128
Background base color. Provides depth and contrast. Use for dark mode, overlays, and foundations.
ACCENT
Flame Orange
#FF4500
High-impact accent. Use sparingly for urgent CTAs, alerts, and attention-grabbing elements.
HIGHLIGHT
Gold
#FFB800
Premium accent. Use for highlights, success states, badges, and featured content.
NEUTRAL
Steel Gray
#4A5568
Secondary text and subtle UI elements. Provides balance without competing for attention.
LIGHT
Off White
#F8F9FA
Primary text on dark backgrounds. Clean, readable, and crisp.
02 — TYPOGRAPHY
Type System
Bold, condensed typefaces that command attention and create hierarchy. Built for impact and readability.
DISPLAY FONT
Bebas Neue
UNSTOPPABLE
USE FOR
Large headlines, hero text, major section titles
WEIGHT
Regular (400)
TRANSFORM
Always uppercase
SPACING
0.05em - 0.08em
Oswald
BUILT FOR PERFORMANCE
USE FOR
Subheadings, labels, navigation, buttons
WEIGHTS
Regular (400), SemiBold (600), Bold (700)
TRANSFORM
Uppercase for labels/buttons
SPACING
0.1em - 0.3em
Rajdhani
High-performance body copy that maintains readability while keeping that energetic, technical edge. Perfect for paragraphs, descriptions, and UI text.
USE FOR
Body text, descriptions, UI labels, captions
WEIGHTS
Regular (400), SemiBold (600), Bold (700)
SIZE RANGE
0.9rem - 1.3rem
LINE HEIGHT
1.6 - 1.8
03 — SPACING
Spacing System
Consistent spacing creates rhythm and hierarchy. Use these values for padding, margins, and gaps.
04 — COMPONENTS
UI Components
Reusable components that maintain consistency across all interfaces.
Buttons
Cards
FEATURED
Card Title
High-impact card design with hover effects.
05 — PRINCIPLES
Design Principles
Core values that guide every design decision in the TrustedWest V2 brand.
⚡
High Energy
Bold colors, dynamic gradients, and energetic typography create momentum and excitement.
🎯
Confidence
Strong hierarchy, condensed typefaces, and clear calls-to-action communicate authority.
🚀
Forward Motion
Gradients flow left-to-right, hover states lift up, and animations push forward.
💎
Premium Feel
Gold accents, smooth transitions, and polished details elevate the experience.
06 — IMPLEMENTATION
CSS Variables
Copy and paste these CSS variables into your project to get started.
:root {
/* Colors */
--electric-blue: #00D9FF;
--deep-navy: #0A1128;
--flame-orange: #FF4500;
--steel-gray: #4A5568;
--off-white: #F8F9FA;
--gold: #FFB800;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
/* Typography */
--font-display: 'Bebas Neue', sans-serif;
--font-heading: 'Oswald', sans-serif;
--font-body: 'Rajdhani', sans-serif;
}
/* Gradients */
.gradient-primary {
background: linear-gradient(135deg, #00D9FF, #0080FF);
}
.gradient-accent {
background: linear-gradient(135deg, #FF4500, #CC3700);
}
.gradient-gold {
background: linear-gradient(135deg, #FFB800, #FFA000);
}
/* Text Gradient */
.text-gradient {
background: linear-gradient(90deg, #00D9FF, #FF4500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
Google Fonts Import
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">