Logo
The ALFI wordmark is the primary visual identifier. Use it consistently across all applications.
Primary Logo
Logo on Brand Colors
Clear Space
Maintain a minimum clear space around the logo equal to the height of the "A" letterform.
Minimum Size
To ensure legibility, never use the logo smaller than these minimum sizes.
Digital
24px height
10mm height
Logo Misuse
Color Palette
Our color palette is built around deep blues that convey trust, expertise, and professionalism.
Primary Colors
Primary Blue
#2B35AF
Main brand color, CTAs, links, key UI elements
Navy
#0D1642
Dark sections, footer, text headlines
Primary Light
#5B8DEF
Hover states, gradients, accents
Primary Dark
#1E2580
Active states, dark accents
Secondary Colors
Sky Blue
#AEDCFF
Light backgrounds, section backgrounds, highlights
Cyan Accent
#00D4FF
Special highlights, data visualization accents
Light Blue Tint
#F5F7FF
Subtle backgrounds, alternating sections
Muted Gray
#6B7280
Secondary text, captions, descriptions
Color Ratios
Typography
We use two typefaces: Plus Jakarta Sans for headlines and Inter for body text.
Plus Jakarta Sans
Weights: Medium (500), Semibold (600), Bold (700), Extrabold (800)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Inter
Weights: Regular (400), Medium (500), Semibold (600), Bold (700)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Type Scale
Hero
96px
Scale Your Brand
Display
72px
Scale Your Brand
H1
60px
Scale Your Brand
H2
48px
Scale Your Brand
H3
36px
Scale Your Brand
H4
30px
Scale Your Brand
H5
24px
Scale Your Brand
Body Large
20px
Scale Your Brand
Body
16px
Scale Your Brand
Small
14px
Scale Your Brand
XSmall
12px
Scale Your Brand
Spacing System
Consistent spacing creates visual rhythm. We use a 4px base grid with specific increments.
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px
160px
192px
256px
Section Spacing
Cards & Glass Effects
Cards use generous border radius and glass-morphism effects for depth.
Glass Card (Light)
On colored/image backgrounds
bg-white/70 blur-xlSolid Card
Used on white backgrounds
bg-white shadow-lgDark Card
Used on light backgrounds
bg-navyGlass Card on Gradient (CTA Style)
Glass on Dark Gradient
Used for CTA sections and modal overlays
bg-white/10blur-[16px]border-white/15Border Radius
Small
0.5rem
Medium
1rem
Large
1.5rem
XL
2rem
2XL
2.5rem
Gradients
Gradients add depth and visual interest to hero sections, cards, and backgrounds.
Hero Gradient (4-Stop)
Used for hero sections and CTA backgrounds with a smooth blue-to-sky transition.
linear-gradient(160deg, hsl(235 60% 43%) 0%, hsl(235 55% 50%) 30%, hsl(220 70% 55%) 60%, hsl(205 80% 70%) 100%)Hero Gradient (3-Stop)
A more compact gradient for smaller hero sections or page headers.
linear-gradient(160deg, hsl(235 65% 45%) 0%, hsl(235 60% 50%) 50%, hsl(230 60% 52%) 100%)Card Gradients
Five approved gradient variations for testimonials, feature cards, and interactive elements.
Blue
Primary feature cards, testimonials
from-[#1e3a8a] via-[#2563eb] to-[#3b82f6]Indigo
Secondary cards, alternating content
from-[#312e81] via-[#4338ca] to-[#6366f1]Deep Blue
Premium/featured content, dark mode cards
from-[#0f172a] via-[#1e3a8a] to-[#3730a3]Bright Blue
CTAs, highlights, interactive elements
from-[#1e40af] via-[#3b82f6] to-[#60a5fa]Blue-Purple
Accent cards, special features
from-[#1e3a8a] via-[#4338ca] to-[#7c3aed]Simple 2-Stop Gradient
For subtle gradient effects on buttons, badges, and small UI elements.
linear-gradient(135deg, hsl(235 60% 43%) 0%, hsl(220 80% 65%) 100%)Visual Effects
Depth, texture, and ambient effects that bring the ALFI brand to life.
Geometric Curves
Concentric ellipse curves create a subtle sphere-like effect on hero sections. These are SVG ellipses with varying rotation and opacity.
SVG Ellipse Curves
10-14 layers, 0.5px stroke, varying opacity
rx: 50 + i*18, ry: 120 + i*14, opacity: 0.12 - i*0.008, rotate: -25 + i*2
Ambient Blur Blobs
Large, blurred gradient orbs create ambient depth behind content. Used on light backgrounds.
Blur Blob Colors
Sizing
40-50% width, 30-40% height
Blur
blur-3xl (48px)
Noise Texture Overlay
A subtle SVG noise filter adds grain texture to gradients, preventing color banding.
Implementation
opacity-[0.03] | feTurbulence baseFrequency="0.8" numOctaves="4"Center Glow Effect
A radial gradient creates a subtle luminous center on hero sections.
Imagery
Use high-quality imagery that feels authentic, professional, and aspirational.
Do
- Use natural lighting
- Show real people in professional settings
- Feature authentic Amazon seller environments
- Use images with depth and dimension
- Maintain consistent warm/cool balance
Don't
- Use obviously staged stock photos
- Use low-resolution or pixelated images
- Over-filter or over-saturate
- Use images that feel generic
- Crop awkwardly or cut off subjects
Image Treatment
Square 1:1
Landscape 4:3
Wide 16:9
Portrait 4:5
Layout Patterns
Consistent layout patterns ensure visual harmony across all applications.
Section Backgrounds Pattern
Grid System
12-column grid with 32px gutter
Presentation Templates
Ready-to-use slide layouts for Google Slides or PowerPoint. Each template follows the ALFI brand system.