Brand Style Guide
The visual identity system for ArtificialIntelligence.ai — colors, typography, logo usage, and design principles.
Brand Identity
Brand Name
ArtificialIntelligence.ai
Learn AI. Build the Future.
Mission
Empower individuals and organizations worldwide with the knowledge, tools, and confidence to learn, build, and innovate with Artificial Intelligence.
Brand Personality
Logo
Horizontal (Primary)
Website header, email signatures, presentations, documents
Square (Icon)
Social media profiles, app icons, favicons at larger sizes
Favicon
Browser tabs, bookmarks, PWA icon
Usage Rules
Color Palette
CTAs, links, highlights, interactive elements
Gradients, accents, hover states
Success states, badges, positive indicators
Page backgrounds, dark surfaces
Cards, panels, elevated surfaces
Dividers, card borders, subtle separators
Secondary text, captions, placeholders
Body copy, descriptions
Headlines, primary text, icons on dark
Primary Gradient
Electric Blue → Deep Violet — used for CTAs, hero accents, and feature highlights
from-blue-600 to-violet-600Typography
Heading Font
Space Grotesk
All headings, display text, navigation labels, UI labels
Body Font
Inter
Body copy, descriptions, form inputs, captions
Type Scale
Design Principles
Clarity First
Every design decision should make content easier to understand. Remove anything that doesn't serve the user.
Generous White Space
Breathing room creates focus. Use ample padding and margins to let content breathe and guide attention.
Purposeful Motion
Animations should guide attention and provide feedback — never distract. Keep transitions under 400ms.
Accessible by Default
Minimum 4.5:1 contrast ratio for all text. Every interactive element must be keyboard navigable.
Mobile First
Design for the smallest screen first, then enhance for larger viewports. Every layout must work at 375px.
Consistent Depth
Use the card/border/background color system to create consistent visual hierarchy across all surfaces.
Voice & Tone
We Are
- Clear and direct
- Encouraging and supportive
- Expert without being intimidating
- Practical and action-oriented
- Friendly and human
We Are Not
- Jargon-heavy or technical for its own sake
- Condescending or oversimplified
- Sci-fi clichés (no 'robots taking over')
- Overly formal or corporate
- Vague or wishy-washy
Copy Examples
CTA Button
Do
Start Learning Free
Don't
Commence Your AI Journey
Error Message
Do
Something went wrong. Try refreshing the page.
Don't
An unexpected error has occurred in the system.
Feature Description
Do
Learn to build AI apps — no PhD required.
Don't
Leverage cutting-edge machine learning paradigms.