StylingCV - Brand Identity Manual 2026

Introduction

Welcome to the Intelli StylingCV brand guidelines. This document ensures consistent brand representation across all touchpoints.

🎯 Our Mission

Empowering professionals worldwide to create stunning, AI-powered resumes that stand out and get results.

👥 Our Audience

Job seekers, career changers, and professionals in the GCC region and globally, with special focus on Arabic-speaking markets.

🌍 Our Reach

Serving over 6 million users globally across multiple platforms with bilingual support for Arabic and English.

Brand Values

🤖

Intelligence

AI-powered solutions that think ahead

✨

Innovation

Cutting-edge technology for modern careers

🎨

Creativity

Beautiful designs that make an impact

🌐

Accessibility

Inclusive design for global audiences

Brand Differentiator

The 11 Specialized AI Agents

Our neural network of specialized AI agents collaborate in real-time to create market-aligned, ATS-optimized resumes. This is the visual language of our core technology.

Download Roadmap Image (PNG)

Expert Agents

95%

ATS Pass Rate

97%

Truth Check

100%

Skills Verified

Meet the Agents

Writer

Crafts compelling, personalized content

Interrogator

Extracts key career achievements

Truth Check

Verifies claims with 97% accuracy

Market Scout

Analyzes live market demands

Architect

Structures optimal resume layouts

ATS

Optimizes for 95% pass rate

Translator

Localizes for global markets

Formatter

Perfects visual presentation

Orchestrator

Coordinates all agents in harmony

Verified Skills

Validates 100% of listed skills

Market Aligned

Ensures 95% market alignment

Brand Usage Guidelines

✓ Do

Use agents to explain AI capabilities
Feature in marketing & landing pages
Include in product documentation
Use for onboarding experiences

✗ Don't

Modify agent character designs
Use on dark backgrounds without contrast
Stretch or distort proportions
Use without brand context

Asset Location

All agent illustrations are available in:
/brand-assets/ai-agents/

Logo System

Our logo represents the fusion of artificial intelligence and human creativity in career development.

Primary Logos

English Logo - Light Background

Primary logo for light backgrounds. Official SVG with mesh gradient icon and dark text (#151412).

SVG Code

<svg viewBox="0 0 470.98 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="en-grad" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#1a3a4f"/>
      <stop offset="25%" stop-color="#2a7a8a"/>
      <stop offset="45%" stop-color="#5cd6d6"/>
      <stop offset="60%" stop-color="#618480"/>
      <stop offset="80%" stop-color="#d68a52"/>
      <stop offset="100%" stop-color="#b86a3a"/>
    </linearGradient>
    <radialGradient id="en-cyan" cx="30%" cy="0%" r="70%" fx="35%" fy="5%">
      <stop offset="0%" stop-color="#5ee8e8" stop-opacity="0.95"/>
      <stop offset="30%" stop-color="#5cd6d6" stop-opacity="0.7"/>
      <stop offset="60%" stop-color="#2a7a8a" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#1a3a4f" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="en-coral" cx="90%" cy="85%" r="55%" fx="85%" fy="80%">
      <stop offset="0%" stop-color="#e87850" stop-opacity="0.95"/>
      <stop offset="35%" stop-color="#d68a52" stop-opacity="0.7"/>
      <stop offset="70%" stop-color="#b86a3a" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#b86a3a" stop-opacity="0"/>
    </radialGradient>
    <clipPath id="en-icon-clip">
      <rect width="100" height="100" rx="9.07"/>
    </clipPath>
  </defs>
  <!-- Icon with mesh gradient background -->
  <g clip-path="url(#en-icon-clip)">
    <rect width="100" height="100" fill="url(#en-grad)"/>
    <rect width="100" height="100" fill="url(#en-cyan)"/>
    <rect width="100" height="100" fill="url(#en-coral)"/>
  </g>
  <!-- CV mark in white -->
  <path fill="#fff" d="M60.04,64.14l-1.69-2.27s-10.13-14.04-13.82-18.47c-1.92-2.31-4.93-3.61-8.17-3.61-6.18-.03-11.21,4.95-11.24,11.13-.03,6.18,4.95,11.21,11.13,11.24,4.28.02,8.19-2.4,10.09-6.23l6.45,8.58s-1,1.55-4.09,4c-2.82,2.24-7.73,3.93-12.33,3.93-11.85,0-21.46-9.61-21.46-21.46,0-11.85,9.61-21.45,21.46-21.46,4.56,0,9.19.93,12.24,3.87,1.21,1.16,17.04,22.59,17.04,22.59l-5.6,8.16Z"/>
  <polygon fill="#fff" points="69.89 49.72 64.4 42.58 74.46 27.58 85.05 27.58 69.89 49.72"/>
  <!-- STYLINGCV text in dark -->
  <path fill="#151412" d="M154.87,39.97h-1.77c-1.23.14-2.32-.77-2.46-2v-6.7c0-6.32-2.55-9.07-8.5-9.07s-8.5,2.75-8.5,9.07v4.61c0,4.44,1.52,5.75,5.95,8.21l9.42,5.18c5.09,2.83,8.5,6.32,8.5,11.9v8.79c0,9.62-5.18,13.76-15.2,13.76h-.2c-9.99,0-15.2-4.06-15.2-13.76v-8.5c-.14-1.2.69-2.32,1.89-2.46.17-.03.37-.03.57,0h1.77c1.23-.11,2.32.77,2.46,2,.03.14.03.31,0,.46v6.98c0,6.24,2.55,9.24,8.59,9.24s8.59-3.03,8.59-9.24v-5.29c0-4.44-1.69-6.12-6.24-8.67l-9.24-5.09c-5.75-3.21-8.41-5.95-8.41-11.7v-7.93c0-9.24,6.04-13.59,15.11-13.59h.2c9.07,0,15.11,4.32,15.11,13.59v7.73c.14,1.2-.72,2.29-1.92,2.46-.14.06-.31.06-.52.03"/>
  <!-- More paths for T, Y, L, I, N, G, C, V letters... -->
</svg>

English Logo - Dark Background

For dark backgrounds. Official SVG with white text (#FFFFFF) and mesh gradient icon.

SVG Code

<svg viewBox="0 0 470.98 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="en-grad-dark" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#1a3a4f"/>
      <stop offset="25%" stop-color="#2a7a8a"/>
      <stop offset="45%" stop-color="#5cd6d6"/>
      <stop offset="60%" stop-color="#618480"/>
      <stop offset="80%" stop-color="#d68a52"/>
      <stop offset="100%" stop-color="#b86a3a"/>
    </linearGradient>
    <radialGradient id="en-cyan-dark" cx="30%" cy="0%" r="70%" fx="35%" fy="5%">
      <stop offset="0%" stop-color="#5ee8e8" stop-opacity="0.95"/>
      <stop offset="30%" stop-color="#5cd6d6" stop-opacity="0.7"/>
      <stop offset="60%" stop-color="#2a7a8a" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#1a3a4f" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="en-coral-dark" cx="90%" cy="85%" r="55%" fx="85%" fy="80%">
      <stop offset="0%" stop-color="#e87850" stop-opacity="0.95"/>
      <stop offset="35%" stop-color="#d68a52" stop-opacity="0.7"/>
      <stop offset="70%" stop-color="#b86a3a" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#b86a3a" stop-opacity="0"/>
    </radialGradient>
    <clipPath id="en-icon-clip-dark">
      <rect width="100" height="100" rx="9.07"/>
    </clipPath>
  </defs>
  <!-- Icon with mesh gradient background -->
  <g clip-path="url(#en-icon-clip-dark)">
    <rect width="100" height="100" fill="url(#en-grad-dark)"/>
    <rect width="100" height="100" fill="url(#en-cyan-dark)"/>
    <rect width="100" height="100" fill="url(#en-coral-dark)"/>
  </g>
  <!-- CV mark in white -->
  <path fill="#fff" d="M60.04,64.14l-1.69-2.27s-10.13-14.04-13.82-18.47c-1.92-2.31-4.93-3.61-8.17-3.61-6.18-.03-11.21,4.95-11.24,11.13-.03,6.18,4.95,11.21,11.13,11.24,4.28.02,8.19-2.4,10.09-6.23l6.45,8.58s-1,1.55-4.09,4c-2.82,2.24-7.73,3.93-12.33,3.93-11.85,0-21.46-9.61-21.46-21.46,0-11.85,9.61-21.45,21.46-21.46,4.56,0,9.19.93,12.24,3.87,1.21,1.16,17.04,22.59,17.04,22.59l-5.6,8.16Z"/>
  <polygon fill="#fff" points="69.89 49.72 64.4 42.58 74.46 27.58 85.05 27.58 69.89 49.72"/>
  <!-- STYLINGCV text in white for dark backgrounds -->
  <path fill="#ffffff" d="M154.87,39.97h-1.77c-1.23.14-2.32-.77-2.46-2v-6.7c0-6.32-2.55-9.07-8.5-9.07s-8.5,2.75-8.5,9.07v4.61c0,4.44,1.52,5.75,5.95,8.21l9.42,5.18c5.09,2.83,8.5,6.32,8.5,11.9v8.79c0,9.62-5.18,13.76-15.2,13.76h-.2c-9.99,0-15.2-4.06-15.2-13.76v-8.5c-.14-1.2.69-2.32,1.89-2.46.17-.03.37-.03.57,0h1.77c1.23-.11,2.32.77,2.46,2,.03.14.03.31,0,.46v6.98c0,6.24,2.55,9.24,8.59,9.24s8.59-3.03,8.59-9.24v-5.29c0-4.44-1.69-6.12-6.24-8.67l-9.24-5.09c-5.75-3.21-8.41-5.95-8.41-11.7v-7.93c0-9.24,6.04-13.59,15.11-13.59h.2c9.07,0,15.11,4.32,15.11,13.59v7.73c.14,1.2-.72,2.29-1.92,2.46-.14.06-.31.06-.52.03"/>
  <!-- More paths for T, Y, L, I, N, G, C, V letters... -->
</svg>

Arabic Logo (RTL)

Arabic Logo - Light Background

Primary Arabic logo for RTL layouts. Official SVG with mesh gradient icon and dark text (#151412).

SVG Code

<svg viewBox="0 0 500.4 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ar-grad-light" x1="22" y1="124" x2="278" y2="-132" gradientTransform="translate(0 102) scale(1 -1)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#1a3a4f"/>
      <stop offset=".2" stop-color="#2a7a8a"/>
      <stop offset=".5" stop-color="#5cd6d6"/>
      <stop offset=".6" stop-color="#618480"/>
      <stop offset=".8" stop-color="#d68a52"/>
      <stop offset="1" stop-color="#b86a3a"/>
    </linearGradient>
    <radialGradient id="ar-cyan-light" cx="-430.1" cy="431.7" r=".6" gradientTransform="translate(110160 43167) scale(256 -100)">
      <stop offset="0" stop-color="#5ee8e8" stop-opacity=".9"/>
      <stop offset=".3" stop-color="#5cd6d6" stop-opacity=".7"/>
      <stop offset=".6" stop-color="#2a7a8a" stop-opacity=".4"/>
      <stop offset="1" stop-color="#1a3a4f" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="ar-coral-light" cx="-429.4" cy="430.8" r=".5" gradientTransform="translate(110160 43167) scale(256 -100)">
      <stop offset="0" stop-color="#e87850" stop-opacity=".9"/>
      <stop offset=".3" stop-color="#d68a52" stop-opacity=".7"/>
      <stop offset=".7" stop-color="#b86a3a" stop-opacity=".4"/>
      <stop offset="1" stop-color="#b86a3a" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <!-- Icon with mesh gradient -->
  <g>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-grad-light)"/>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-cyan-light)"/>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-coral-light)"/>
    <!-- CV mark in white -->
    <path fill="#fff" d="M60.04,64.14l-1.69-2.27s-10.13-14.04-13.82-18.47c-1.92-2.31-4.93-3.61-8.17-3.61..."/>
    <polygon fill="#fff" points="69.89 49.72 64.4 42.58 74.46 27.58 85.05 27.58 69.89 49.72"/>
  </g>
  <!-- Arabic STYLINGCV text in dark (#151412) -->
  <!-- Arabic typography paths... -->
</svg>

Arabic Logo - Dark Background

Arabic version for dark backgrounds. Official SVG with white text (#FFFFFF) and mesh gradient icon.

SVG Code

<svg viewBox="0 0 500.4 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ar-grad-dark" x1="22" y1="124" x2="278" y2="-132" gradientTransform="translate(0 102) scale(1 -1)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#1a3a4f"/>
      <stop offset=".2" stop-color="#2a7a8a"/>
      <stop offset=".5" stop-color="#5cd6d6"/>
      <stop offset=".6" stop-color="#618480"/>
      <stop offset=".8" stop-color="#d68a52"/>
      <stop offset="1" stop-color="#b86a3a"/>
    </linearGradient>
    <radialGradient id="ar-cyan-dark" cx="-430.1" cy="431.7" r=".6" gradientTransform="translate(110160 43167) scale(256 -100)">
      <stop offset="0" stop-color="#5ee8e8" stop-opacity=".9"/>
      <stop offset=".3" stop-color="#5cd6d6" stop-opacity=".7"/>
      <stop offset=".6" stop-color="#2a7a8a" stop-opacity=".4"/>
      <stop offset="1" stop-color="#1a3a4f" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="ar-coral-dark" cx="-429.4" cy="430.8" r=".5" gradientTransform="translate(110160 43167) scale(256 -100)">
      <stop offset="0" stop-color="#e87850" stop-opacity=".9"/>
      <stop offset=".3" stop-color="#d68a52" stop-opacity=".7"/>
      <stop offset=".7" stop-color="#b86a3a" stop-opacity=".4"/>
      <stop offset="1" stop-color="#b86a3a" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <!-- Icon with mesh gradient -->
  <g>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-grad-dark)"/>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-cyan-dark)"/>
    <rect width="100" height="100" rx="9.07" fill="url(#ar-coral-dark)"/>
    <!-- CV mark in white -->
    <path fill="#fff" d="M60.04,64.14l-1.69-2.27s-10.13-14.04-13.82-18.47c-1.92-2.31-4.93-3.61-8.17-3.61..."/>
    <polygon fill="#fff" points="69.89 49.72 64.4 42.58 74.46 27.58 85.05 27.58 69.89 49.72"/>
  </g>
  <!-- Arabic STYLINGCV text in white (#FFFFFF) for dark backgrounds -->
  <!-- Arabic typography paths... -->
</svg>

Icon Only Versions

Gradient Icon

White Icon

Black Icon

Reversed

🌊 Mesh Gradient Icons

Two mesh gradient variations for different use cases. The Static Mesh (Primary) uses high-contrast colors for maximum visual impact, while the Animated Mesh (Extended) uses softer tones for subtle applications.

Static Mesh Icon (Primary)

Primary palette mesh gradient with high contrast. Use for print, websites, and general brand materials.

Primary Palette

Animated Mesh Icon (Extended)

Extended palette mesh gradient. Softer tones for subtle applications.

Extended Palette

On Dark Backgrounds

Static Mesh (Primary)

Animated Mesh (Extended)

Size Variations

Static Mesh (Primary)

24px

32px

48px

64px

Animated Mesh (Extended)

24px

32px

48px

64px

💡 When to Use Each Mesh Gradient Icon

Static Mesh (Primary) — High Contrast

AI agent illustrations
Dashboard interfaces
App icons & favicons
High-impact digital experiences

Animated Mesh (Extended) — Soft Tones

Print materials & stationery
Website headers & footers
Marketing collateral
Email signatures

✨ Animated Logo Icon (Morphing Effect)

A dynamic animated SVG that smoothly transitions between Primary and Extended mesh gradients. Perfect for loading screens, hero sections, and AI interfaces.

6 second cycle • Smooth transition

Primary Palette

⟷

Extended Palette

Animation Speed Variations

Slow

10 seconds • Ambient

Normal ✓

6 seconds • Recommended

Fast

3 seconds • Dynamic

On Light Backgrounds

🎬 Best Use Cases for Animated Icon

🚀

Loading Screens
App splash & loaders

🎯

Hero Sections
Website headers

🤖

AI Interfaces
Processing states

📱

PWA Icons
App experiences

💻 Usage


          <img src="stylingcv-icon-animated-morph.svg" width="64" height="64" alt="StylingCV">

Clear Space

Maintain minimum clear space around the logo equal to the height of the "CV" mark (X).

X X X X

Minimum Sizes

24px (Digital)

32px (Favicon)

48px (App Icon)

64px (Touch Icon)

Logo Misuse

🚫

Don't stretch or distort

🚫

Don't change colors

🚫

Don't add effects

🚫

Don't rotate

🚫

Don't use on busy backgrounds

🚫

Don't crop the logo

📁 Official Logo Asset Files

Complete set of official SVG logo files for the Intelli StylingCV brand. All files are production-ready vector assets.

Intlli-icon.svg

Primary Intelli Icon

Full-color gradient icon with CV symbol. Features the signature blue-to-teal gradient with detailed intelli mark.

intelli.svg

English Full Logo

Complete horizontal logo with Intelli icon + StylingCV text. Dark text version for light backgrounds.

english-logo.svg

English STYLING CV Logo

Horizontal logo with CV icon and STYLING CV text. Dark version for light backgrounds.

icon.svg

Square App Icon

Square app icon with rounded corners. Perfect for favicons and app icons.

cv.svg

CV Lettermark

CV lettermark only. Use for minimal branding applications.

arabic-logo.svg

Arabic Logo

Full Arabic RTL logo for Saudi/GCC markets. Includes Arabic typography.

تصميم سي في

ar-gra-logo.svg

Arabic Gradient Logo

Arabic logo with brand gradient overlay. Premium version for marketing materials.

StylingCV-QR.svg

Brand QR Code

Official brand QR code for print materials, business cards, and marketing collateral.

📂 Logo Files Location

All official logo SVG files are stored in: /re-branding/logos/SVG/

Files include: Intlli-icon.svg, intelli.svg, english-logo.svg, icon.svg, cv.svg, arabic-logo.svg, ar-gra-logo.svg, ar-gra-logo-w.svg, StylingCV-QR.svg

Inline SVG Code Reference

These SVG logos can be embedded directly in HTML. Use CSS to control colors via the fill property or CSS variables like currentColor.

english-logo.svg

Full horizontal logo. Uses fill: currentColor for CSS control.

icon.svg

Square app icon. Perfect for favicons, app icons.

cv.svg

CV lettermark only. Use for minimal branding.

arabic-logo.svg

Arabic horizontal logo for RTL markets.

CSS Color Control Demo

Same SVG, different colors via CSS fill property:

#FFFFFF

#268599

#E8885E

Primary

Extended

/* CSS-controlled SVG example */

<svg class="logo" viewBox="0 0 100 100" style="fill: currentColor;">
  <path d="M90.94,0H9.07..."/>
</svg>

/* Then control color via CSS */
.logo { color: var(--stylingcv-teal-primary); }
.logo:hover { color: var(--stylingcv-coral-primary); }

/* Or use fill directly */
.logo-dark { fill: #151413; }
.logo-light { fill: #ffffff; }
.logo-teal { fill: #268599; }

Intelli-StylingCV Application Logos

Logos for the Intelli-StylingCV AI application at ai.stylingcv.com. Features the distinctive brain-circuit icon representing AI-powered career development.

Intelli-StylingCV Logo - Light Background

Primary logo for light backgrounds. Features the AI brain icon with cyan-to-teal gradient and dark STYLINGCV text.

SVG File

Intelli-StylingCV Logo - Dark Background

For dark backgrounds. White STYLINGCV text with cyan gradient CV mark and AI brain icon.

SVG File

Intelli-StylingCV Icon - Light Background

Standalone icon for light backgrounds. Features the AI brain with CV mark in mesh gradient colors.

SVG File

Intelli-StylingCV Icon - Dark Background

Standalone icon for dark backgrounds. Use for app icons, favicons, and compact branding applications.

SVG File

📁 SVG Source Files

english-logo.svg arabic-logo.svg icon.svg cv.svg intelli.svg intilli-logo-en.svg intilli-white.svg Intlli-icon.svg

Location: /brand-assets/logos/

Color Palette

Our color palette balances professional teal tones with warm coral accents, extracted from our signature gradient.

Official Brand Gradient

📸 Official Gradient Background

This is the official brand gradient image used across all Intelli StylingCV materials. Use this image for hero sections, backgrounds, and promotional materials when possible.

File: brand-gradient-background.png

Dimensions: 1344 × 768px

CSS Fallback: Use the CSS gradient below when the image cannot be used.

🎨 Primary Teal Family

Teal Primary

#268599

RGB(38, 133, 153)

Teal Bright

#2E8C9C

RGB(46, 140, 156)

Teal Deep

#155469

RGB(21, 84, 105)

Teal Green

#239E9B

RGB(35, 158, 155)

Transitional

#618480

RGB(97, 132, 128)

🔥 Secondary Warm Family

Coral Orange

#E8885E

RGB(232, 136, 94)

Warm Orange

#DAA579

RGB(218, 165, 121)

Coral Deep

#CD7858

RGB(205, 120, 88)

Coral Medium

#996B54

RGB(153, 107, 84)

🌙 Navy & Dark Family

Navy Dark

#16344C

RGB(22, 52, 76)

Navy Medium

#19384F

RGB(25, 56, 79)

Navy Slate

#1A3A4F

RGB(26, 58, 79)

⚪ Neutral Colors

White

#FFFFFF

Gray 100

#F5F5F5

Gray 200

#E5E5E5

Gray 300

#D4D4D4

Gray 500

#737373

Gray 700

#404040

Gray 900

#151413

🚦 Status Colors

Success

#239E9B

Warning

#DAA579

Error

#C44536

Info

#2E8C9C

03+

Extended Color Palette

Expanded color options for digital interfaces, AI agent illustrations, and high-contrast applications.

🎨 When to Use Extended Palette

Recommended For:

AI agent illustrations & icons
Dashboard interfaces
Interactive UI elements
Data visualizations
High-contrast digital displays

Key Benefits:

Wider tonal range for depth
Higher contrast accessibility
Vibrant digital presence
Consistent with AI agent branding
Complements primary palette

🌊 Extended Cyan Family

From deep navy anchors to vibrant cyan highlights - perfect for creating depth in digital interfaces.

Navy Anchor

#1A3A4F

RGB(26, 58, 79)

Ocean Teal

#2A7A8A

RGB(42, 122, 138)

Bright Cyan

#5CD6D6

RGB(92, 214, 214)

Electric Cyan

#5EE8E8

RGB(94, 232, 232)

🔥 Extended Warm Family

Rich terracotta to soft peach - adds warmth and approachability to digital experiences.

Terracotta

#B86A3A

RGB(184, 106, 58)

Warm Orange

#D68A52

RGB(214, 138, 82)

Sand

#F2C088

RGB(242, 192, 136)

Peach Cream

#F8D4A8

RGB(248, 212, 168)

Extended Palette Gradient

Extended Palette Mesh Gradient

Primary vs Extended Comparison

Primary Palette

Balanced, sophisticated, print-friendly

Extended Palette

Vibrant, high-contrast, digital-first

CSS Variables

Extended Palette CSS Variables

:root {
  /* Extended Cyan Family */
  --ext-navy-anchor: #1A3A4F;
  --ext-ocean-teal: #2A7A8A;
  --ext-bright-cyan: #5CD6D6;
  --ext-electric-cyan: #5EE8E8;
  
  /* Extended Warm Family */
  --ext-terracotta: #B86A3A;
  --ext-warm-orange: #D68A52;
  --ext-sand: #F2C088;
  --ext-peach-cream: #F8D4A8;
  
  /* Extended Gradient */
  --ext-gradient: linear-gradient(135deg, #1a3a4f 0%, #5cd6d6 50%, #d68a52 100%);
}

Recommended Use Cases

🤖

AI Agents

Icons & illustrations

📊

Dashboards

Data visualization

🎯

CTAs

High-impact buttons

✨

Highlights

Glow & emphasis

Gradients

Our signature gradients create visual depth and brand recognition across all materials.

📋 When to Use Image vs CSS

Use the Gradient Image:

Hero sections & landing pages
Marketing materials & ads
Social media graphics
Print materials
When mesh gradient quality matters

Use CSS Gradients:

Buttons & UI components
Text gradients
Borders & accents
Performance-critical areas
Dynamic/animated elements

Brand Diagonal (135°)

Primary Brand Gradient

linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%)

Horizontal (90°)

Horizontal Gradient

linear-gradient(90deg, #268599 0%, #618480 50%, #e8885e 100%)

Vertical (180°)

Vertical Gradient

linear-gradient(180deg, #268599 0%, #618480 50%, #e8885e 100%)

Mesh Background

Multi-Layer Mesh

radial-gradient(ellipse at top left, #268599...) + multiple layers

Teal Gradient

Teal Only

linear-gradient(135deg, #2E8C9C 0%, #155469 100%)

Warm Gradient

Warm Only

linear-gradient(135deg, #DAA579 0%, #E8885E 100%)

SVG Gradient Definition

          SVG
        

<linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#268599"/>
  <stop offset="50%" stop-color="#618480"/>
  <stop offset="100%" stop-color="#e8885e"/>
</linearGradient>
        

🎨 SVG Mesh Gradient

Scalable vector mesh gradient - infinitely scalable without quality loss. Use for hero sections, backgrounds, and any application requiring crisp gradients at any resolution.

♾️

Infinite Scale

No quality loss

📦

~2KB Size

93% smaller than PNG

🎯

CSS Animatable

Full control

🌐

Universal Support

All modern browsers

SVG Mesh Gradient - Full Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1344 768" preserveAspectRatio="xMidYMid slice">
  <defs>
    <!-- Base gradient - diagonal teal to coral -->
    <linearGradient id="base-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#268599"/>
      <stop offset="35%" stop-color="#1f6b7a"/>
      <stop offset="50%" stop-color="#2a5f6a"/>
      <stop offset="70%" stop-color="#618480"/>
      <stop offset="100%" stop-color="#e8885e"/>
    </linearGradient>
    
    <!-- Top-left bright teal glow -->
    <radialGradient id="teal-glow-tl" cx="5%" cy="5%" r="60%">
      <stop offset="0%" stop-color="#5ec4c4" stop-opacity="0.9"/>
      <stop offset="30%" stop-color="#3ba8a8" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#268599" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Top-right warm orange glow -->
    <radialGradient id="orange-glow-tr" cx="95%" cy="15%" r="50%">
      <stop offset="0%" stop-color="#e8a070" stop-opacity="0.95"/>
      <stop offset="40%" stop-color="#d99065" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#b07050" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Bottom-right coral glow -->
    <radialGradient id="coral-glow-br" cx="90%" cy="85%" r="45%">
      <stop offset="0%" stop-color="#e87850" stop-opacity="0.9"/>
      <stop offset="50%" stop-color="#d06848" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#b05840" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Bottom-left deep teal -->
    <radialGradient id="teal-deep-bl" cx="10%" cy="90%" r="50%">
      <stop offset="0%" stop-color="#1a5060" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#155469" stop-opacity="0"/>
    </radialGradient>
    
    <!-- Center transitional blend -->
    <radialGradient id="center-blend" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#4a7a78" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#2a5a5a" stop-opacity="0"/>
    </radialGradient>
  </defs>
  
  <!-- Render layers -->
  <rect width="100%" height="100%" fill="url(#base-gradient)"/>
  <rect width="100%" height="100%" fill="url(#teal-glow-tl)"/>
  <rect width="100%" height="100%" fill="url(#teal-deep-bl)"/>
  <rect width="100%" height="100%" fill="url(#center-blend)"/>
  <rect width="100%" height="100%" fill="url(#orange-glow-tr)"/>
  <rect width="100%" height="100%" fill="url(#coral-glow-br)"/>
</svg>

🎨 CSS Mesh Gradient

Pure CSS implementations - no external files needed. Choose the version that best fits your performance and quality requirements.

Static CSS Mesh

Simplified (5 layers)

Animated CSS Mesh

20s subtle animation

CSS - Simplified Version (Recommended)

.intelli-gradient-simple {
  background: 
    radial-gradient(ellipse at 0% 0%, rgba(94, 196, 196, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 20%, rgba(232, 160, 112, 0.9) 0%, transparent 45%),
    radial-gradient(ellipse at 95% 90%, rgba(232, 120, 80, 0.85) 0%, transparent 40%),
    radial-gradient(ellipse at 5% 95%, rgba(21, 84, 105, 0.7) 0%, transparent 45%),
    linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%);
}

CSS - Full Mesh (8 Layers)

.intelli-mesh-gradient {
  background: 
    /* Top-left bright teal glow */
    radial-gradient(ellipse 60% 60% at 5% 5%, 
      rgba(94, 196, 196, 0.9) 0%, 
      rgba(59, 168, 168, 0.6) 30%, 
      rgba(38, 133, 153, 0.3) 60%, 
      transparent 100%),
    /* Top center highlight */
    radial-gradient(ellipse 40% 40% at 35% 10%, 
      rgba(126, 206, 206, 0.4) 0%, 
      rgba(94, 176, 176, 0.2) 60%, 
      transparent 100%),
    /* Top-right warm orange glow */
    radial-gradient(ellipse 50% 50% at 95% 15%, 
      rgba(232, 160, 112, 0.95) 0%, 
      rgba(217, 144, 101, 0.7) 40%, 
      rgba(200, 128, 85, 0.4) 70%, 
      transparent 100%),
    /* Bottom-right coral glow */
    radial-gradient(ellipse 45% 45% at 90% 85%, 
      rgba(232, 120, 80, 0.9) 0%, 
      rgba(208, 104, 72, 0.5) 50%, 
      transparent 100%),
    /* Mid-right warm transition */
    radial-gradient(ellipse 35% 35% at 80% 50%, 
      rgba(200, 144, 112, 0.6) 0%, 
      rgba(160, 128, 104, 0.3) 60%, 
      transparent 100%),
    /* Bottom-left deep teal */
    radial-gradient(ellipse 50% 50% at 10% 90%, 
      rgba(26, 80, 96, 0.8) 0%, 
      rgba(21, 84, 105, 0.4) 50%, 
      transparent 100%),
    /* Center transitional blend */
    radial-gradient(ellipse 60% 60% at 50% 50%, 
      rgba(74, 122, 120, 0.5) 0%, 
      rgba(58, 106, 106, 0.3) 50%, 
      transparent 100%),
    /* Base diagonal gradient */
    linear-gradient(135deg, 
      #268599 0%, 
      #1f6b7a 35%, 
      #2a5f6a 50%, 
      #618480 70%, 
      #e8885e 100%);
}

CSS - Animated Version

@keyframes mesh-shift {
  0%, 100% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;
  }
  25% {
    background-position: 5% 5%, 95% 5%, 95% 95%, 5% 95%, 0% 0%;
  }
  50% {
    background-position: 10% 0%, 90% 10%, 90% 90%, 10% 90%, 0% 0%;
  }
  75% {
    background-position: 5% 5%, 95% 5%, 95% 95%, 5% 95%, 0% 0%;
  }
}

.intelli-gradient-animated {
  background: 
    radial-gradient(ellipse 60% 60% at 5% 5%, rgba(94, 196, 196, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 95% 15%, rgba(232, 160, 112, 0.9) 0%, transparent 45%),
    radial-gradient(ellipse 45% 45% at 90% 85%, rgba(232, 120, 80, 0.85) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(21, 84, 105, 0.7) 0%, transparent 45%),
    linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%);
  background-size: 150% 150%, 150% 150%, 150% 150%, 150% 150%, 100% 100%;
  animation: mesh-shift 20s ease-in-out infinite;
}

Usage Examples

          CSS Usage - Buttons, Text, Borders
        

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #268599 0%, #e8885e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Button with Mesh Gradient */
.btn-mesh {
  background: 
    radial-gradient(ellipse at 0% 50%, rgba(94, 196, 196, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 50%, rgba(232, 120, 80, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
}

/* Card with Gradient Border */
.card-gradient-border {
  position: relative;
  background: white;
  border-radius: 16px;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, #268599, #618480, #e8885e);
  z-index: -1;
}
        

Live Component Demos

Gradient Text

.gradient-text

.btn-mesh

Card Content

.card-gradient-border

Format Comparison

Format	File Size	Scalability	Animation	Best For
PNG Image	~29KB	Fixed	❌	Print, social media, emails
SVG Mesh	~2KB	♾️ Infinite	✅	Web backgrounds, responsive UI
CSS Mesh	0KB*	♾️ Infinite	✅	UI components, dynamic elements

* CSS is embedded in stylesheet, no additional HTTP request

Typography

Our typography system uses modern, readable fonts that work across all platforms and languages.

Playfair Display

Heading · Display & H1

Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800

Poppins

Primary · Headlines & UI

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700

Poppins

Secondary · Body Text

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800

أب

Tajawal

Arabic · RTL Headlines

Light 300 Regular 400 Medium 500 Bold 700

أب

29LT Zarid Sans

Arabic · RTL Body Text

Light Regular Medium Bold

Licensed Font

Type Scale

Display The quick brown fox 48px / 800 · Playfair Display

H1 The quick brown fox 36px / 700 · Playfair Display

H2 The quick brown fox 30px / 700

H3 The quick brown fox 24px / 600

H4 The quick brown fox 20px / 600

Body Large The quick brown fox jumps over the lazy dog 18px / 400

Body The quick brown fox jumps over the lazy dog 16px / 400

Small The quick brown fox jumps over the lazy dog 14px / 400

XSmall The quick brown fox jumps over the lazy dog 12px / 400

Arabic Typography

Tajawal · Headlines

استايلينج سي في

منشئ السيرة الذاتية الذكي

سيرتك المهنية تبدأ من هنا

29LT Zarid Sans · Body Text

أنشئ سيرتك الذاتية المهنية في دقائق مع قوة الذكاء الاصطناعي. منصتنا متوافقة مع رؤية المملكة العربية السعودية 2030 وأنظمة التوظيف المحلية.

نوفر لك قوالب احترافية مصممة خصيصاً لسوق العمل السعودي والخليجي، مع دعم كامل للغة العربية.

📝 Arabic Font Pairing

Headlines: Tajawal (Google Fonts) · Body: 29LT Zarid Sans AL (Licensed)
29LT Zarid Sans requires a commercial license from 29Letters. Tajawal serves as fallback.

📁 Font Files Location

Arabic font files are included in: /arabicFont
This folder contains 29LT Zarid Sans AL font files in WOFF2, WOFF, and TTF formats for web and desktop use.

UI Components

Consistent UI components ensure a cohesive user experience across all platforms.

Buttons

Input Fields

Cards

Standard Card

Basic card component with shadow and hover effect.

Gradient Border

Card with gradient border using brand colors.

Gradient Background

Card with subtle gradient background tint.

Tags & Badges

AI Powered New Default Success Error

Gradient Text

Build Your Future

Apply gradient text for hero headlines and feature highlights

Code Reference

Copy-paste ready code snippets for developers to implement brand styles.

CSS Variables

          CSS
        

:root {
  /* Brand Gradient Stops */
  --gradient-tl: #268599;     /* Top-Left: Bright Teal */
  --gradient-tr: #daa579;     /* Top-Right: Warm Orange */
  --gradient-bl: #239e9b;     /* Bottom-Left: Teal-Green */
  --gradient-br: #e8885e;     /* Bottom-Right: Coral-Orange */
  --gradient-center: #618480; /* Center: Transitional */
  
  /* Teal Family */
  --teal-bright: #2e8c9c;
  --teal-primary: #268599;
  --teal-deep: #155469;
  --teal-green: #239e9b;
  
  /* Warm Family */
  --orange-bright: #e8885e;
  --orange-warm: #daa579;
  --coral: #996b54;
  --coral-deep: #cd7858;
  
  /* Navy Family */
  --navy-dark: #16344c;
  --navy-medium: #19384f;
  
  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%);
  --gradient-horizontal: linear-gradient(90deg, #268599 0%, #618480 50%, #e8885e 100%);
  --gradient-teal: linear-gradient(135deg, #2e8c9c 0%, #155469 100%);
  --gradient-warm: linear-gradient(135deg, #daa579 0%, #e8885e 100%);
  
  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  --font-arabic: 'Tajawal', sans-serif;
  --font-arabic-body: '29LTZaridSansAL', 'Tajawal', sans-serif;
}
        

SCSS Variables

          SCSS
        

// Brand Colors
$teal-primary: #268599;
$teal-bright: #2e8c9c;
$teal-deep: #155469;
$orange-bright: #e8885e;
$orange-warm: #daa579;
$transitional: #618480;
$navy-dark: #16344c;

// Gradient Mixin
@mixin brand-gradient($direction: 135deg) {
  background: linear-gradient($direction, $teal-primary 0%, $transitional 50%, $orange-bright 100%);
}

// Usage
.hero {
  @include brand-gradient();
}
        

Tailwind CSS Config

          JavaScript
        

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        teal: {
          primary: '#268599',
          bright: '#2e8c9c',
          deep: '#155469',
          green: '#239e9b',
        },
        coral: {
          DEFAULT: '#e8885e',
          warm: '#daa579',
          deep: '#cd7858',
        },
        navy: {
          DEFAULT: '#16344c',
          medium: '#19384f',
        },
      },
      fontFamily: {
        'heading': ['Playfair Display', 'Georgia', 'serif'],
        'sans': ['Poppins', 'sans-serif'],
        'body': ['Poppins', 'sans-serif'],
        'arabic': ['Tajawal', 'sans-serif'],
        'arabic-body': ['29LTZaridSansAL', 'Tajawal', 'sans-serif'],
      },
      backgroundImage: {
        'brand-gradient': 'linear-gradient(135deg, #268599 0%, #618480 50%, #e8885e 100%)',
      },
    },
  },
}
        

Google Fonts Import

          HTML
        
<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=Playfair+Display:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">

29LT Zarid Sans AL (Licensed)

⚠️ 29LT Zarid Sans AL is a premium Arabic font from 29Letters. A commercial license is required. Self-host the font files after purchase.

          CSS @font-face
        

/* 29LT Zarid Sans AL - Self-hosted (requires license) */
/* Font files location: /arabicFont folder */
@font-face {
  font-family: '29LTZaridSansAL';
  src: url('/arabicFont/29LTZaridSans-Regular.woff2') format('woff2'),
       url('/arabicFont/29LTZaridSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '29LTZaridSansAL';
  src: url('/arabicFont/29LTZaridSans-Bold.woff2') format('woff2'),
       url('/arabicFont/29LTZaridSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Usage for Arabic body text */
.ar-body, [lang="ar"] p {
  font-family: '29LTZaridSansAL', 'Tajawal', sans-serif !important;
}
        

Usage Examples

Real-world applications of the brand identity across different touchpoints.

Social Media Profile

Use gradient avatar on social platforms with consistent handle across channels.

John Smith

Product Manager

Intelli StylingCV

[email protected]
+966 XX XXX XXXX

Email Signature

Gradient left border with brand text treatment for professional emails.

App Icons

Reversed color scheme for mobile app icons on gradient backgrounds.

Create Your Perfect CV

AI-powered resume builder for modern professionals

Website Hero Section

Full gradient background with white text and reversed CTA button.

📁 Logo File Formats

Format	Use Case	Background
SVG	Web, responsive applications	Any
PNG (with transparency)	Digital presentations, social media	Light/Dark
PNG (2x, 3x)	Retina displays, mobile apps	Light/Dark
PDF (Vector)	Print materials, large format	Any
ICO / ICNS	Favicon, desktop apps	Transparent
PNG (Gradient BG)	Hero sections, backgrounds, marketing	Self-contained (1344×768)