Brand Guidelines
The Block AI Visual Identity System
This guide defines the visual language, design tokens, and usage rules that make up the Block AI brand. Use it to maintain consistency across all communications, products, and partner materials.
Brand Identity
Block AI is a full-service crypto growth infrastructure provider. Since 2018, we combine expert live traders with proprietary AI to deliver market making, launch services, social growth, and custom development.
To provide crypto projects with the infrastructure, tools, and expertise they need to build healthy markets, engaged communities, and sustainable growth — powered by AI and backed by human expertise.
Core Values
Every algorithm, every trade, every pixel is built with precision. We don't ship half-measures.
Markets should look alive, not manipulated. We build tools that create real, measurable growth — not vanity metrics.
From proprietary AI trading algorithms to on-chain escrow, we push the boundary of what crypto infrastructure can do.
24/7 coverage across all time zones. 300+ clients trust us with their growth because we deliver consistently.
We work alongside projects as long-term partners, not one-off vendors. Your growth is our growth.
Decisions are backed by data. Our 70+ custom scripts and AI systems analyze markets in real time.
Brand Personality
Professional
Expert-level, no fluff
Technical
Crypto-native, speaks the language
Confident
Proven track record, clear authority
Direct
Clear communication, no jargon-heavy walls
Color Palette
The Block AI palette is built on a dark foundation with green as the primary accent. All colors are defined as HSL CSS custom properties for consistency across components.
Primary
Primary
#22C55E
Primary actions, CTAs, active states, brand accent
Primary Dark
#02834C
3D lighting, deep accents
Primary Medium
#00844C
Mobile CTA buttons
Primary Foreground
#052E16
Text on primary backgrounds
Backgrounds & Surfaces
Background
#09090B
Page background (body override)
Card
#1A1816
Card surfaces
Footer
#0B0C0F
Footer background
Popover
#171717
Dropdowns, tooltips, overlays
Text & Foreground
Foreground
#F2F2F2
Primary text
Muted Foreground
#9DA3AE
Secondary text, descriptions, labels
White/70
rgba(255,255,255,0.7)
Body copy on dark sections
White/60
rgba(255,255,255,0.6)
Tertiary text, card descriptions
Semantic
Destructive
#7F1D1D
Errors, destructive actions, failed states
Border
#272729
Default borders, dividers
Ring
#15803D
Focus rings on interactive elements
Muted
#262626
Muted backgrounds, tab bars
Extended Palette
Zinc 900/50
rgba(24,24,27,0.5)
Standard card background
Black/60
rgba(0,0,0,0.6)
Feature card background
White/10
rgba(255,255,255,0.1)
Subtle card borders, dividers
Primary/10
rgba(34,197,94,0.1)
Icon container backgrounds, tinted areas
Chart / Data Visualization
Chart 1
#2563EB
Primary chart series
Chart 2
#2DB882
Secondary chart series
Chart 3
#E68A2E
Tertiary chart series
Chart 4
#A855F7
Quaternary chart series
Gradients & Overlays
Section Overlay
from-primary/5 to-transparent
Card Hover Gradient
radial-gradient rgba(5,101,64,1) → transparent
Section Separator
linear-gradient rgba(0,255,163)
Typography
Two typefaces form the Block AI type system. Headings use Alpino for distinctive display presence; body text uses Geist Sans for clean readability.
Font Families
Headings
Alpino Medium
The quick brown fox jumps over the lazy dog
Usage: h1 — h6, section titles, hero text
Variable: --font-alpino
Weights: Medium (500)
Format: TTF (local)
Body
Geist Sans
The quick brown fox jumps over the lazy dog
Usage: Body text, buttons, labels, inputs, all UI
Variable: --font-geist-sans
Weights: 100 — 900 (variable)
Format: WOFF (local, variable)
Type Scale
Hero
4.5rem / 72px (desktop) · 3rem / 48px (mobile)
Bold (700)
text-5xl md:text-7xl
Block AI
Section Title
3rem / 48px (desktop) · 2.25rem / 36px (mobile)
Bold (700)
text-4xl md:text-5xl
Market Making
Subsection
1.875rem / 30px (desktop) · 1.5rem / 24px (mobile)
Semibold (600)
text-2xl md:text-3xl
Token Launch Solutions
Card Title
1.25rem / 20px
Semibold (600)
text-xl
Utility Market Making
Body
1.25rem / 20px
Regular (400)
text-xl text-white/70
AI-powered Market Making & Launch Services for Crypto. 300+ clients, 120+ exchanges.
Secondary
0.875rem / 14px
Regular (400)
text-sm text-muted-foreground
Secondary text for descriptions, labels, and supporting content.
Micro
0.75rem / 12px
Medium (500)
text-xs text-muted-foreground
BADGE · LABEL · METADATA
Font Weights
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Spacing & Layout
Consistent spacing creates visual rhythm. All spacing follows a 4px base unit via Tailwind's default scale.
Container Widths
max-w-6xl (72rem / 1152px) — Standard page container
max-w-4xl (56rem / 896px) — Narrow content
max-w-3xl (48rem / 768px) — Text blocks
Section Padding
5rem / 80px
Major sections
4rem / 64px
Sub-sections
3rem / 48px
Compact sections
Border Radius
rounded-sm
4px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
rounded-full
9999px
Breakpoints
Mobile
mobile: (max-width: 768px)
Single column, compact spacing, bottom nav
Tablet / Desktop
md: (min-width: 768px)
Two columns, sidebar nav, larger spacing
Large Desktop
lg: (min-width: 1024px)
Three+ columns, full horizontal nav
Cards & Components
Core UI components built on shadcn/ui with Radix primitives. All cards use the dark variant by default.
Card Variants
bg-zinc-900/50 border-white/10
hover:border-primary/50 transition-all
border-primary/50 + Badge positioned top-right
Feature Card (Gradient Hover)
Gradient Reveal Card
Hover to see the radial green gradient appear from the bottom left. Used for feature showcases on the homepage and tools page.
Specification
Background: bg-black/60
Gradient: radial-gradient from rgba(5,101,64,1)
Default opacity: 15%
Hover opacity: 40%
Transition: 700ms
Gradient size: 600x600px, offset bottom-left
Badges
default
secondary
outline
destructive
status
status
status
status
Accordion
Icons
50 custom AI-themed SVG icons are available via the SVGIcon component. For UI chrome (arrows, menus, actions), use lucide-react as the supplementary icon set.
Custom Icon Library (50 icons)
simulation
brain
superintelligence
motion
system
pattern
architecture
big-data
algorithm
interaction
artificial-life
wireless-charger
pets
smart-home
agent
choice
human-brain
quantum-computing
neural
planning
control-panel
problem-solving
interaction-2
filter
neural-2
noosphere
decision
ambient
intelligent-assistant
pattern-recognition
3d-model
performance
research
network
knowledge
graphene
brain-2
augmentation
interface
computational
prioritize
analysis
decision-2
embedded
recognition
knowledge-2
machine-learning
deep-learning
natural-language-processing
intelligent
Usage Patterns
Card Header Icon
Feature Title
Icon in p-3 rounded-lg bg-primary/10 container
Colored Accent Icons
bg-[color]/10 container + text-[color] icon
Inline with Text
Feature highlight textAnother feature pointsize=20, flex items-center gap-2
Component API
import { SVGIcon } from "@/components/ui/svg-icon";
<SVGIcon name="performance" size={24} className="text-primary" />
All icons are inverted white SVGs rendered via next/image. Default size is 24px. Use className for color overrides.
Logo Usage
The Block AI logo is the primary brand mark. It should always be displayed with adequate clear space and on appropriate backgrounds.
Primary Logo
Clear Space
Maintain minimum clear space equal to the height of the logo mark on all sides. The dashed border indicates the exclusion zone.
Size Guidelines
Large (Header Default)
h-14 (56px)
Medium (Collapsed Header)
h-10 (40px)
Small (Minimum)
h-8 (32px)
Favicon
%2Fandroid-chrome-192x192.png&w=128&q=75&dpl=dpl_49RsBEGbYuP2gvRL1C1oGo9o9cFz)
192x192
%2Ffavicon-32x32.png&w=64&q=75&dpl=dpl_49RsBEGbYuP2gvRL1C1oGo9o9cFz){kind=small}
32x32
%2Ffavicon-16x16.png&w=32&q=75&dpl=dpl_49RsBEGbYuP2gvRL1C1oGo9o9cFz){kind=small}
16x16
Do's and Don'ts
Use the logo on dark backgrounds (#09090B or darker)
Maintain minimum clear space around the logo
Use the official logo files — never recreate from scratch
Keep the logo horizontal and level
Don't place the logo on light or white backgrounds
Don't stretch, distort, or rotate the logo
Don't change the logo colors or apply effects
Don't place the logo on busy or patterned backgrounds
Imagery & Visual Effects
Visual effects, gradients, and image treatment rules that create the Block AI aesthetic. Dark, premium, and technology-forward.
Background Treatments
bg-black (default)
bg-zinc-900/30 (alternate)
bg-[#0b0c0f] (footer)
Rule
Alternate between plain black and bg-zinc-900/30 for visual rhythm between page sections. The footer uses a distinct #0b0c0f. Never use white or light backgrounds on the marketing site.
Glass-morphism & Blur
backdrop-blur-sm
Subtle Blur
Mobile header, card backgrounds
backdrop-blur-md
Medium Blur
Scrolled header, floating elements
backdrop-blur-lg
Heavy Blur
Mobile menu, modal overlays
Image Treatment
Photo / Illustration
Border radius: rounded-2xl (16px) or rounded-[3rem]
Fit: object-cover for hero images
Container: bg-primary/10 rounded-[3.5rem] p-3
Format: WebP preferred, JPG/PNG acceptable
Aspect: aspect-square for testimonials
Partner / Client Logos
Size: w-20 h-20 (80px square)
Default opacity: opacity-60
Hover opacity: opacity-100
Transition: transition-opacity
Grid: 4 cols mobile, 8 cols desktop
3D & Motion
3D Block Animation (Hero)
Engine: Three.js with React Three Fiber
Textures: PBR metal plates (1K resolution)
Lighting: Directional green lights (#02834c, #22C55F)
Environment: "forest" preset, 0.15 intensity
Motion: Continuous rotation on all axes, sin-wave spacing
Scroll Animations
Library: GSAP + ScrollTrigger
Default: Fade up from 40px, 0.5s duration
Trigger: Element enters 80% of viewport
Stagger: 0.05s delay per item index
Component: AnimateElement wrapper
Tone of Voice
How we communicate is as important as what we communicate. The Block AI voice is professional, technical, confident, and direct.
Voice Characteristics
Professional
Expert-level communication that builds trust. We know the space — our language reflects deep industry knowledge without being exclusionary.
"Our AI algorithms analyze market conditions in real time to maintain healthy liquidity."
Technical
Crypto-native language that speaks directly to builders and project teams. We use the terminology our audience uses.
"Direct node access for liquidation without red candles on DEX charts."
Confident
Backed by a proven track record (300+ clients, 120+ exchanges). We state capabilities clearly and let results speak.
"Cutting-Edge Market Making & Launch Services — Since 2018."
Direct
Clear, concise communication. No unnecessary jargon walls, no filler. Every sentence should carry meaning.
"Grow Every Tweet. Grow Every Day."
Writing Do's and Don'ts
Do
Lead with outcomes and results, not just feature lists
Use specific numbers: "300+ clients", "120+ exchanges", "24/7 coverage"
Be concise — short sentences, active voice
Use crypto-native terminology correctly
Frame services around value to the client project
Keep CTAs action-oriented: "Get Started", "Tweet Boost", "Contact Us"
Don't
Don't use hype language: "to the moon", "guaranteed gains", "revolutionary"
Don't make promises about price action or financial outcomes
Don't use walls of text — break content into scannable sections
Don't use generic stock marketing language
Don't be informal or use slang in product descriptions
Don't use emojis in headlines or product copy (acceptable in Telegram bot)
Key Brand Messages
Tagline
AI-Powered Crypto Market Making & Growth Infrastructure
Hero Line
All-In-One Crypto Growth Services for Market Making, Launch Tools, DeFi Automations & Crypto Marketing
Philosophy
Markets should look alive, not manipulated. Communities should be active, not inflated. Growth should be measurable, not theatrical.
Stats Format
300+ Clients Served · 120+ Exchanges · 24/7 Coverage
Brand Naming
Correct Usage
✓Block AI — full brand name (two words, capital B and AI)
✓BlockAI — acceptable in URLs and code
✓BlockMM — domain/URL context (blockmm.ai)
✓Block AI Bot — the Telegram bot product
Incorrect Usage
✗block ai — always capitalize
✗BLOCK AI — don't use all caps
✗Block-AI — no hyphen
✗Block A.I. — no periods