Loading Page
Preparing your experience...
Brand Guidelines
Comprehensive visual identity and design system for Tuteur
Logo & Wordmark
Primary Logo (Full Color)
Uses actual brand logo imageWordmark with Icon
White Version
On Light Background
Minimum size: 120px width
Icon can be used independently
Clear space = 0.5x logo height
Typography System
Type Scale
Display
text-8xl (96px) · font-hero · Zen Dots · Hero sections
Heading 1
text-7xl (72px) · font-hero · Zen Dots · Main headlines
text-5xl (48px) · font-barlow · Barlow · Section headers
text-4xl (36px) · font-barlow · Barlow · Subsections
Heading 4
text-2xl (24px) · Inter (default) · Card titles
Large Text
text-xl (20px) · Inter · Subtitles & descriptions
Body Large
text-lg (18px) · Inter · Primary content
Body
text-base (16px) · Inter · Default text
Small
text-sm (14px) · Inter · Captions & metadata
Font Families
Primary Fonts
Zen Dots
font-heroFont: Zen DotsUsed for: Hero headlines, logo, impact text
Example: "Transform Any Content Into Interactive Learning"
font-barlowFont: BarlowUsed for: Section headings, subheadings
Example: "Everything You Need to Learn Smarter"
Inter
font-sansFont: Inter (default)Used for: Body text, UI elements, navigation
Example: This paragraph text you're reading
Accent Fonts
AUDIOWIDE
font-audiowideFont: AudiowideUsed for: Tech/futuristic accents, loading screens
Example: "GENERATING YOUR QUIZ..."
ORBITRON
font-orbitronFont: OrbitronUsed for: Modern/gaming accents, statistics
Example: "98% ACCURACY"
Note: We've streamlined our typography system to 5 carefully selected fonts. This ensures consistency while providing enough variety for visual hierarchy.
Font Weights
Light (300) - font-light
Regular (400) - font-normal
Medium (500) - font-medium
Semibold (600) - font-semibold
Bold (700) - font-bold
Extra Bold (800) - font-extrabold
Color Palette
CSS Custom Properties
Light Theme
--primary: 207 90% 54%; /* #3B82F6 */ --secondary: 262 52% 65%; /* #8B5CF6 */ --accent: 210 11% 96%; /* #F1F5F9 */ --background: 210 11% 98%; /* #F5F7FA */ --foreground: 210 11% 15%; /* #2D3748 */
Dark Theme
--primary: 207 90% 54%; /* #3B82F6 */ --secondary: 262 52% 65%; /* #8B5CF6 */ --accent: 250 15% 25%; /* Soft purple */ --background: 250 20% 15%; /* Soft dark */ --foreground: 210 11% 98%; /* #F8FAFC */
Blue 300
#93C5FD
Blue 400
#60A5FA
Blue 500
#3B82F6
Blue 600
#2563EB
Purple 300
#D8B4FE
Purple 400
#C084FC
Purple 500
#A855F7
Purple 600
#9333EA
Pink 300
#F9A8D4
Pink 400
#F472B6
Pink 500
#EC4899
Pink 600
#DB2777
Emerald 300
#6EE7B7
Emerald 400
#34D399
Emerald 500
#10B981
Emerald 600
#059669
Indigo 500
#6366F1
Violet 500
#8B5CF6
Teal 500
#14B8A6
Cyan 500
#06B6D4
Rose 500
#F43F5E
Amber 500
#F59E0B
Gray 200
#E5E7EB
Gray 300
#D1D5DB
Gray 400
#9CA3AF
Gray 500
#6B7280
Gray 600
#4B5563
Gray 700
#374151
Gray 800
#1F2937
Gray 900
#111827
Slate 900
#0F172A
Blue 950
#172554
Purple 950
#3B0764
Gradients
Primary Gradients
Brand Gradient
bg-gradient-to-r from-blue-400 to-purple-400Extended Brand Gradient
bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400Button Gradient
bg-gradient-to-r from-blue-500 to-purple-500CTA Gradient
bg-gradient-to-r from-emerald-500 to-blue-500Background Gradients
Dark Background
bg-gradient-to-br from-blue-950 to-purple-950Section Transition
bg-gradient-to-b from-gray-900 to-gray-800Subtle Hero Background
bg-gradient-to-br from-blue-600/15 via-purple-600/15 to-pink-600/15CTA Section Background
bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-pink-900/20Radial Gradients
Top Glow
bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]Bottom Glow
bg-[radial-gradient(ellipse_120%_120%_at_50%_120%,rgba(120,119,198,0.15),rgba(255,255,255,0))]Glass Morphism
Glass Effects
Opacity Variations
5% White
bg-white/510% White
bg-white/1020% White
bg-white/2030% White
bg-white/30Backdrop Blur
Blur SM
backdrop-blur-smBlur MD
backdrop-blur-mdBlur LG
backdrop-blur-lgCombined Effects
Glass with Gradient Overlay
bg-white/5 backdrop-blur-sm + gradient overlayGlass with Shadow
bg-white/10 backdrop-blur-md shadow-xlIcon System
We use Lucide React icons throughout the interface. Full icon set with color variations:
Sparkles
Brain
Zap
Target
Shield
Users
Star
Heart
Crown
Rocket
Award
Trending
Chart
File
Clock
Check
Icon Sizes
w-3 h-3
w-4 h-4
w-5 h-5
w-6 h-6
w-8 h-8
w-10 h-10
w-12 h-12
Animations & Transitions
Hero Entrance Animations
Badge Entrance
animate-hero-badge-entranceWhite Title Animation
animate-hero-title-whiteGradient Title Animation
animate-hero-title-gradientInteractive Animations
hover:scale-105hover:scale-110group-hover:translate-x-1animate-pulseBackground Animations
Animated Background Elements
animate-float, animate-gradient-xy, etc.
Transition Timing
Duration 150ms
duration-150Duration 200ms (Default)
duration-200Duration 300ms
duration-300Duration 500ms
duration-500Shadows & Effects
Box Shadows
Shadow SM
shadow-smShadow
shadowShadow MD
shadow-mdShadow LG
shadow-lgShadow XL
shadow-xlShadow 2XL
shadow-2xlColored Shadows
Blue Shadow
shadow-blue-500/25Purple Shadow
shadow-purple-500/25Emerald Shadow
shadow-emerald-500/25Text Effects
Gradient Text
bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparentText with Drop Shadow
drop-shadow-lg50% Opacity Text
text-white/50Spacing System
Padding Scale
p-1 (4px)
p-2 (8px)
p-3 (12px)
p-4 (16px)
p-6 (24px)
p-8 (32px)
Common Spacing Patterns
py-24 - Section vertical padding (96px)mb-16 - Section bottom margin (64px)gap-8 - Grid gap (32px)space-y-4 - Vertical spacing between elements (16px)px-4 sm:px-6 lg:px-8 - Responsive horizontal paddingComponent Patterns
Card Patterns
Feature Card
Hover for interactive effects
Feature/Service Card Pattern
Students
Transform learning materials
Knowledge SeekersUser Type Card Pattern
Badges & Pills
Active
Pending
Error
Featured
AI-Powered
Form Elements
Voice & Tone
Brand Personality
- •Encouraging: Support learners on their journey with positive reinforcement and celebration of progress
- •Clear: Simple, jargon-free communication that everyone can understand
- •Smart: Intelligent without being intimidating, approachable expertise
- •Playful: Learning should be enjoyable - we use color, animation, and delight
Content Guidelines
Do
- • Use active voice
- • Be conversational and friendly
- • Focus on benefits to the learner
- • Use "you" and "your"
- • Celebrate small wins
- • Provide clear next steps
Don't
- • Use technical jargon
- • Be overly formal
- • Focus only on features
- • Use passive voice
- • Overwhelm with options
- • Leave users confused
Accessibility
Color Contrast
All text must meet WCAG AA standards for contrast ratios:
- • Normal text: 4.5:1 minimum contrast ratio
- • Large text (18pt+): 3:1 minimum contrast ratio
- • Interactive elements: 3:1 minimum contrast ratio
Focus States
Interactive Elements
- • Minimum touch target size: 44x44px
- • Clear hover and focus states
- • Keyboard navigation support
- • Screen reader friendly labels
- • Proper ARIA attributes where needed
Brand Assets
Download logos, icons, and other brand assets
Design System Summary
Streamlined Typography
We've simplified our font system from 12 fonts to just 5 carefully selected typefaces:
- •Zen Dots (font-hero): Logo, hero headlines, impact text
- •Barlow (font-barlow): Section headings, subheadings
- •Inter (font-sans): Body text, UI elements, navigation
- •Audiowide (font-audiowide): Tech accents, loading screens
- •Orbitron (font-orbitron): Gaming/modern accents, stats
Logo Design
Our logo combines a Brain icon with the Zen Dots wordmark, representing the intersection of AI intelligence and learning:
Icon Mark
Gradient brain in rotated square
Tuteur
Wordmark
Zen Dots with gradient
Design Principles
Clarity
Clean, readable, focused
Intelligence
AI-powered, innovative
Trust
Professional, reliable
Engagement
Interactive, dynamic