CertifAI Design System Assets

Official SVG Asset Showcase

Complete collection of vector wordmarks, animated circuit shield icons, app icons, and interactive splash screens.

Brand Logos Wordmark + Tagline

CertifAI Logo – Light Mode

CertifAI Logo — Light

SVG Vector

certifai-logo-light.svg

Primary brand wordmark with electric-to-cyan gradient shield, Slate-900 typography, and live Inter tagline.

Open SVG ↗ Download
CertifAI Logo – Dark Mode

CertifAI Logo — Dark

Dark Mode

certifai-logo-dark.svg

High-contrast dark variant featuring crisp Slate-100 wordmark (#F1F5F9), luminous AI gradient, and Slate-400 tagline.

Open SVG ↗ Download

Animated Brand Icons Live SMIL Motion

CertifAI Shield Icon Animated – Light

Shield Icon Animated — Light

Animated

certifai-icon-animated-light.svg

Seamless circuit node motion sliding along traces with zero tearing or ghost rings. Gradient shifting on 405×405 viewbox.

Open SVG ↗ Download
CertifAI Shield Icon Animated – Dark

Shield Icon Animated — Dark

Animated

certifai-icon-animated-dark.svg

Dark mode animated shield icon with Electric Blue (#3B82F6) to Cyan (#06B6D4) gradient and floating circuit nodes.

Open SVG ↗ Download

Static & App Icons Vector & Squircles

CertifAI Icon – Light

Shield Icon — Light

Static

certifai-icon-light.svg

Pure vector shield icon with Electric Blue gradient for light UI headers and cards.

Open ↗ Download
CertifAI Icon – Dark

Shield Icon — Dark

Dark

certifai-icon-dark.svg

Luminous shield mark with ambient glow for dark navigation bars and headers.

Open ↗ Download
CertifAI Icon – White

Shield Icon — White

Mono

certifai-icon-white.svg

Solid monochrome white glyph for colored buttons, favicons, or single-tone branding.

Open ↗ Download
CertifAI App Icon – Blue Gradient

App Icon — Azure Squircle

512px App

certifai-icon-gradient-blue.svg

512×512 iOS/Android app icon with white glyph on radiant Electric Blue to Cyan gradient.

Open ↗ Download
CertifAI App Icon – Dark Midnight

App Icon — Midnight Squircle

512px Dark

certifai-icon-gradient-dark.svg

512×512 dark edition app icon with white glyph on deep midnight-to-cyan gradient.

Open ↗ Download

Mobile Splash Screens Interactive Preview

Mobile Splash — Light

390×844

certifai-splash-light.svg

Complete 10s entrance choreography: outline draw, specular shine, spark conduit, tagline reveal, and full-width footer with laser flash effect.

▶ Click phone or button below to replay animation
Fullscreen ↗ Download

Mobile Splash — Dark

390×844

certifai-splash-dark.svg

Deep midnight slate (#0B1220) edition with neon draw, crisp Slate-100 wordmark, glowing progress bar, and cyan beam flash on footer divider.

▶ Click phone or button below to replay animation
Fullscreen ↗ Download

Brand Gradients & Gradient Studio 14 Themes · 1-Click Copy

Interactive Gradient Studio

Live preview, angle tuner, and instant code copy for all CertifAI dark & light palettes.

App Icon Blue · 135°

CertifAI App Icon — Azure Squircle

Get certified in AI. Powered by asbots.com — official 512×512 gradient squircle.

CertifAI AI Verification Platform
Direction / Angle Tuner 135°
Live Generated CSS Code Ready to Paste
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 45%, #06B6D4 100%);
Tip: Click any card below to test drive its palette, or tap any color hex chip to copy it directly.
App Icon Blue

App Icon — Azure Squircle

Official 512px

certifai-icon-gradient-blue.svg

Official app squircle backdrop from certifai-icon-gradient-blue.svg: signature Electric Blue passing through deep cobalt into luminous Cyan.

0% #2563EB
45% #1D4ED8
100% #06B6D4
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 45%, #06B6D4 100%);
App Icon Dark

App Icon — Midnight Squircle

Official Dark 512px

certifai-icon-gradient-dark.svg

Official dark edition app icon squircle from certifai-icon-gradient-dark.svg: deep midnight navy into sapphire into glowing ocean cyan.

0% #0B132B
55% #14264A
100% #0E7490
background: linear-gradient(135deg, #0B132B 0%, #14264A 55%, #0E7490 100%);
Shield Mark

Brand Mark — Electric Cyan

Brand Vector

certifai-logo-light.svg & animated icons

The foundational brand gradient used across all official CertifAI shield icons, SVG wordmark AI glyphs, and animated node circuits.

0% #2563EB
100% #06B6D4
background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
Clean Canvas

Light Base — Azure Mist

Light Surface

CertifAI Design System

Airy, soft gradient for light theme page backgrounds, dashboard viewports, application canvases, and container backdrops.

0% #F0F7FF
50% #E0F2FE
100% #F8FAFC
background: linear-gradient(135deg, #F0F7FF 0%, #E0F2FE 50%, #F8FAFC 100%);
Hero Banner

Light Hero — Electric Frost

Light Hero

CertifAI Design System

High-energy light theme hero gradient with crisp blue undertones transitioning smoothly into refreshing cyan frost.

0% #EFF6FF
48% #DBEAFE
100% #CFFAFE
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 48%, #CFFAFE 100%);
Accent Glow

Light Accent — Cyan Dawn

Light Accent

CertifAI Design System

Luminous, high-visibility cyan gradient for interactive elements, feature callout boxes, and active notification badges.

0% #E0F2FE
50% #BAE6FD
100% #A5F3FC
background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 50%, #A5F3FC 100%);
Vibrant Action

Light Dynamic — Royal Daylight

Primary CTA

CertifAI Design System

Bold, saturated primary gradient tailored for conversion buttons, key metric stat cards, and highlighted action bars.

0% #2563EB
50% #3B82F6
100% #60A5FA
background: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
Midnight Base

Dark Base — Obsidian Cyber

OLED Dark

certifai-splash-dark.svg background

Ultra-deep OLED dark base transitioning from pitch obsidian through midnight slate into deep midnight cobalt.

0% #050914
50% #0B1220
100% #1E3A8A
background: linear-gradient(135deg, #050914 0%, #0B1220 50%, #1E3A8A 100%);
Cyan Glow

Dark Glow — Deep Aurora

Dark Glow

CertifAI Design System

Luminous cyberpunk midnight gradient with deep slate transitioning into intense cyber cyan glow. Superb for cards.

0% #0B1220
55% #0E2A47
100% #06B6D4
background: linear-gradient(135deg, #0B1220 0%, #0E2A47 55%, #06B6D4 100%);
Dark Card

Dark Card — Cobalt Nebula

Dark Elevation

CertifAI Design System

Rich midnight slate transitioning into rich cobalt blue. Crafted specifically for elevated dark-mode cards and modal backdrops.

0% #080D1A
50% #111C2E
100% #1D4ED8
background: linear-gradient(135deg, #080D1A 0%, #111C2E 50%, #1D4ED8 100%);
Deep Teal

Dark Edge — Quantum Abyss

Technical Dark

CertifAI Design System

Aquatic deep cyan aesthetic tailored for telemetry displays, technical badges, code views, and terminal consoles.

0% #02131F
45% #083344
100% #0E7490
background: linear-gradient(135deg, #02131F 0%, #083344 45%, #0E7490 100%);
Laser Line

Specialty — Laser Conduit Beam

Splash Laser

certifai-splash-dark.svg footer divider

Multi-stop laser beam line from the official dark mobile splash screen choreography. Used for luminous dividers and progress beams.

0% #1E293B
20% #1E3A8A
50% #06B6D4
80% #1E3A8A
100% #1E293B
background: linear-gradient(90deg, #1E293B 0%, #1E3A8A 20%, #06B6D4 50%, #1E3A8A 80%, #1E293B 100%);
Radial Spotlight

Specialty — Holographic Spotlight

Radial Glow

CertifAI Shield Lighting

Center-stage radial spotlight effect casting soft luminous cyan and electric blue aura behind shield assets and credential cards.

0% rgba(6,182,212,0.45)
45% rgba(37,99,235,0.25)
90% #0B1220
background: radial-gradient(circle at 50% 35%, rgba(6, 182, 212, 0.45) 0%, rgba(37, 99, 235, 0.25) 45%, #0B1220 90%);
Mesh Glow

Specialty — Bioluminescent Matrix

Dual Mesh

CertifAI Ambient Matrix

High-tech dual-point ambient mesh gradient with corner glows for next-generation web application hero sections.

Top-Left rgba(37,99,235,0.8)
Bottom-Right rgba(6,182,212,0.7)
Base #0B132B
background: radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.8) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.7) 0px, transparent 50%), #0B132B;

CertifAI Brand Specifications & Core Gradient Tokens

Electric Blue

#2563EB · Primary

Cyan

#06B6D4 · Accent

Midnight Slate

#0B1220 · Dark Base

Azure Squircle

#2563EB → #06B6D4

Midnight Squircle

#0B132B → #0E7490

Inter 500/700

Letter-spacing 0.09em

✓
Copied CSS code to clipboard!