Brand Identity & Design System

AlgoTrade Brand Assets & Logo Suite

The complete identity kit generated from the master brand artwork. Includes pure scalable vector SVGs, high-resolution raster PNGs with alpha transparency, app icons, favicons, and ready-to-use React components.

React Component Usage

Import and use the responsive, zero-CLS <Logo /> component anywhere in the application. It automatically switches between light and dark themes.

import { Logo } from "@/components/ui/Logo";

// Standard horizontal navbar logo (adapts to dark/light theme automatically)
<Logo variant="horizontal" size="sm" withLink />

// Full logo with domain (ideal for footers & marketing hero)
<Logo variant="full" size="md" />

// Icon only (app mark, mobile headers, avatars)
<Logo variant="icon" size="sm" />

// Text wordmark only (without the icon / "without a")
<Logo variant="text" size="sm" />

// Using extracted 100% original master raster PNGs instead of vector
<Logo variant="horizontal" size="md" useRaster />

Light Mode Color Architecture

Zero washed-out mint greens and zero violet/purple bleeding. Saturated, high-contrast fintech palettes tested against white light backgrounds.

Option 1 Active Default

OPTION 1 (ACTIVE)

Electric Royal Blue

7.5:1 AAA

Royal Blue (#1D4ED8 to #2563EB) & Deep Cyan (#0284C7). Bold, high-trust classic fintech aesthetic.

Option 1

OPTION 2

Deep Bull Emerald

4.8:1 AA

Deep Pine / Forest Emerald (#047857 to #059669). Solid bull-market green with zero pale mint.

Option 2

OPTION 3

Deep Ocean Cyan & Azure

5.2:1 AA

Deep Ocean Cyan (#0284C7 to #0891B2) with Slate Navy left leg. Crisp modern marine vibe.

Option 3

OPTION 4

Stealth Dark Slate

12:1 AAA

Full monochrome dark slate text with vibrant Electric Blue chart bars & arrow mark.

Option 4

1. Full Brand Logos & Horizontal Lockups

Primary Brand

Horizontal Navbar Lockup

Optimized for navigation bars, headers, and app shells

Full Brand

Full Logo with Domain (.co.in)

Complete brand lockup with official country-code domain

2. Symbol Mark & App Icons (Icon Only)

Icon Mark

Symbol Mark (Transparent)

Stylized A-mark with rising bars & trendline arrow

App Icon

App Icon (Rounded Squircle)

512x512 rounded container icon for desktop & mobile

Store Icon

Square Icon (Transparent)

512x512 centered icon mark with generous padding

3. Wordmark / Typography Only (Without Icon)

Wordmark

Wordmark 'algotrade'

Clean geometric sans with dual-tone gradient on 'trade'

Wordmark Domain

Wordmark with Domain (.co.in)

Text lockup with .co.in domain suffix, without the symbol mark

4. Sizing Matrix (XS to XL)

Size: xs

20px (compact / status)

Size: sm

28px (navbar standard)

Size: md

36px (cards / headers)

Size: lg

48px (auth / hero)

Size: xl

64px (brand display)

5. Favicons & Browser Manifest Specs

16x16Classic Tab

32x32Retina Tab

48x48Desktop Shortcut

180x180Apple Touch

192x192Android PWA

512x512Splash Screen