✦ Enhanced Brand Identity System v2.0

IT LIVE — Brand Guide

Complete brand identity system for IT Live digital solutions

🔷 Logo Variants

Professional logo variants for different backgrounds and contexts

ITLive
IT LIVE DIGITAAL BUREAU
Primary · Dark Navy
ITLive
IT LIVE DIGITAAL BUREAU
Secondary · White

🎨 Color System

Complete color palette with usage guidelines

Primary Colors
Gold 500#F2C14FPrimary CTA, accents, highlights
Gold 400#FFD97ALight accents, hover states
Gold 600#C8922ADark accents, borders
Navy Backgrounds
Navy 950#020917Main background, hero sections
Navy 800#0C1B38Cards, sections, navigation
Navy 700#102348Borders, dividers, hover states
Status Colors
Success#10B981Success states, confirmations
Warning#F59E0BWarnings, pending states
Error#EF4444Errors, critical alerts
Info#3B82F6Information, new features

🚦 Status System

Clear visual communication for different states

✅
Success
#10B981
Use for:
  • Form submitted successfully
  • Payment completed
  • Active / Online status
  • Operation successful
⚠️
Warning
#F59E0B
Use for:
  • Action required
  • Expiring soon
  • Pending approval
  • Limited availability
🚨
Error
#EF4444
Use for:
  • Payment failed
  • Account blocked
  • Delete actions
  • Critical errors
ℹ️
Info
#3B82F6
Use for:
  • Tips & help
  • In progress
  • New features
  • Notifications
⚡ Badge Examples
★ Popular ℹ New ✓ Active ⚠ Expires ✕ Failed

🔤 Typography

Professional typography system with clear hierarchy

H1Montserrat 900, clamp(2rem,5vw,3.5rem)
IT Live Digital Solutions
H2Montserrat 800, clamp(1.5rem,3vw,2.5rem)
Professional Web Development
BodyDM Sans 400, 1rem, line-height 1.7
We build digital products that work – fast, smart, and scalable for your business success.

🔘 Button System

Interactive button variants with clear hierarchy

Primary CTA
Secondary
Ghost

🗂️ Icon System

Consistent iconography for all categories

🤖AI Solutions
🌐Web Development
📈Marketing
🎨Design
💼Business
⚙️IT Support
🖥️Hosting
🚀Sales

⚙️ Design Tokens

CSS custom properties for consistent design

CSS Variables 
:root {
  --navy-950: #020917;  --navy-800: #0C1B38;  --navy-700: #102348;
  --gold-500: #F2C14F;  --gold-600: #C8922A;  --gold-400: #FFD97A;
  --cyan-500: #00C8FF;
  --success: #10B981;   --warning: #F59E0B;   --error: #EF4444;   --info: #3B82F6;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-md: 8px;     --radius-lg: 12px;    --radius-xl: 16px;    --radius-pill: 999px;
  --text-primary: #FFFFFF;  --text-secondary: #6B92B8;  --text-muted: #3A567A;
}

✅ Design Guidelines

✓ DO
  • Use Montserrat 900 for H1/H2 headings
  • Primary CTA buttons use gold gradient
  • Logo always includes cube + text
  • Navy backgrounds for navigation/footer
  • Gold accents maximum 10% of design
  • Use backdrop-blur on cards
  • Maintain consistent spacing system
  • Responsive design first approach
✕ DON'T
  • Never use red for primary CTAs
  • Never use heart icon without cube
  • Maximum 2 font families
  • Never gold as full background
  • Don't distort or modify logo
  • Avoid excessive animations
  • Don't use stock photography
  • Avoid mobile-unfriendly designs

🤖 AI System Prompt

Copy-paste into ChatGPT/Claude for consistent IT Live style

AI Prompt 
ITLive brand style: Colors: #F2C14F (gold) accent, #020917–#0C1B38 (navy) background.
Text on dark: #FFF primary, #6B92B8 muted. Status: green #10B981, orange #F59E0B, red #EF4444.
Typography: Montserrat 700–900 for headings, DM Sans for body. Maximum 2 fonts.
Style: Dark space theme, glassmorphism effects, border-radius 8–16px, golden glow on hover.
Logo: Always cube icon + "IT LIVE"; on dark use white+gold, on light use navy+dark gold.
UI: Professional, modern, trustworthy. Smooth animations, responsive design.