| name | flalingo-brand-guidelines |
| description | Flalingo brand identity, design system, and neuromarketing principles for premium onboarding design. Use this skill when building or reviewing any UI component, screen, or page in the Flalingo onboarding funnel. |
Flalingo Brand Guidelines & Design System
Version: 2.0
Last Updated: February 2026
Purpose: Single source of truth for Flalingo brand identity and premium onboarding design
0. Design Philosophy
This onboarding funnel is not a simple registration form - it is a $600 commitment journey. Every pixel must communicate:
- Premium Simplicity - Clean, minimal design with generous whitespace. Think Apple/Airbnb level sophistication. "Nothing cheap could exist here."
- Human-AI Hybrid - Balance cold technology (FLAI AI) with warm human connection (teachers). FLAI uses glowing, tech-forward aesthetics; humans use warm, approachable photography.
- Frictionless Flow - Guide users effortlessly through the funnel. Make pressing "Continue" feel satisfying and inevitable.
Brand Identity
Brand Positioning
Flalingo is a premium online English learning platform that combines human expertise with AI technology. Unlike competitors:
- vs Cambly: More structured curriculum, not just casual conversation
- vs Preply: Integrated AI coaching (FLAI), Oxford materials
- vs iTalki: Premium quality assurance, Smart Matching algorithm
- vs Duolingo: Real human teachers, not just AI
Core USPs:
- Human + AI Hybrid (FLAI AI Coach)
- Oxford University Press materials
- Smart Matching Algorithm (18 criteria)
- 2500+ certified teachers
- 30-day unconditional guarantee
Brand Trust Metrics
- Trustpilot: 4.9/5 (380+ reviews)
- Google Reviews: 4.9/5 (400+ reviews)
- Sikayetvar: "Solution Focused Brand"
- EdTech Breakthrough Award winner
Logo Family
Endorsed Brand Architecture
Flalingo uses an Endorsed Brand model where the master brand endorses each sub-brand while allowing segment-specific differentiation.
FLALINGO (Master Brand)
|
|-- Flalingo (Adult/Individual)
|-- Flalingo Kids
|-- Flalingo Business
|-- Flalingo Exam
Logo Files
| Logo | File Path | Primary Use |
|---|
| Master | /generated_imgs/generated-2026-01-06T20-39-29-625Z-v0u299.png | General brand, Adult segment |
| Kids | /generated_imgs/generated-2026-01-06T20-39-55-586Z-nm4abh.png | Children's education |
| Business | /generated_imgs/generated-2026-01-06T20-40-21-553Z-k24dxr.png | Corporate/B2B |
| Exam | /generated_imgs/generated-2026-01-06T20-40-44-322Z-dvyfuy.png | Test preparation |
Logo Design Elements
Common Elements (Brand Unity):
- "flalingo" wordmark in navy blue (#1E3A5F)
- Speech bubble element on "a" (represents conversation)
- Bold, geometric sans-serif typography
- Lowercase, friendly approach
Segment Differentiation:
| Segment | Accent Color | Special Element | Personality |
|---|
| Master/Adult | Coral (#F97316) | Speech bubble | Professional, transformative |
| Kids | Electric Cyan (#06B6D4) | Star + Smiley | Playful, energetic, fun |
| Business | Royal Blue (#1E40AF) | Globe + Growth arrows | Corporate, global |
| Exam | Amber (#F59E0B) | Target checkmark | Goal-focused, achievement |
Colors
Core Palette
Primary Colors:
- Navy:
#1E3A5F - Primary text, headings, authority elements
- Navy Dark:
#0F172A - Maximum emphasis, dark mode, Business segment
- Cream:
#FDF8F3 - Primary page background
- White:
#FFFFFF - Card surfaces, elevated elements
Accent Colors:
- Coral Orange:
#F97316 - Master brand accent, Adult segment, CTA highlights
- Orange Dark:
#EA580C - Hover states, pressed states
- Green:
#10B981 - CTA buttons, success states
- Green Dark:
#059669 - Button hover, success indicators
Segment-Specific Colors
| Segment | Primary Accent | Secondary | Tertiary | Usage |
|---|
| Adult | Coral #F97316 | Navy #1E3A5F | - | Career transformation, energy |
| Kids | Electric Cyan #06B6D4 | Vivid Magenta #EC4899 | Sunshine Yellow #FACC15 | Playful, energetic, fun |
| Business | Royal Blue #1E40AF | Slate #475569 | - | Corporate authority, trust |
| Exam | Amber #F59E0B | Deep Orange #EA580C | - | Achievement, target focus |
Emotional Color Mapping
| Emotion/State | Color | Usage |
|---|
| Pain/Problem | Koyu navy, slate gray | Pain point screens |
| Solution/Hope | Light blue, green tones | Solution presentation |
| Trust/Guarantee | Green + shield icon | 30-day guarantee badge |
| Urgency (soft) | Amber #F59E0B | Deadline reminders |
| Premium/Value | Gold tones | Featured packages |
| AI/Technology | Purple gradients #6366F1 | FLAI animations |
Text Colors
- Navy:
#1E3A5F - Primary headings
- Slate:
#475569 - Body text, descriptions
- Muted:
#64748B - Secondary text, captions
Borders & Shadows
- Border Light:
#E5E7EB - Card borders, dividers
- Border Subtle:
#F1F5F9 - List dividers
- Shadow Soft:
0 4px 20px rgba(249, 115, 22, 0.08)
- Shadow Card:
0 8px 32px rgba(30, 58, 95, 0.08)
Typography
Font Family
Primary: Inter (with system-ui fallback)
Alternative: Plus Jakarta Sans (with sans-serif fallback)
Type Scale
| Element | Size | Weight | Usage |
|---|
| H1 Hero | 30-36px | Bold (700) | Main screen titles |
| H2 Section | 20-24px | Bold (700) | Section headers |
| H3 Card | 18px | Semibold (600) | Card headers |
| Body Large | 16px | Medium (500) | Primary descriptions |
| Body | 14px | Regular (400) | Standard text |
| Caption | 12px | Medium (500) | Labels, metadata |
| Micro | 10px | Medium (500) | Badges, footnotes |
Typography Rules
- Headlines: Navy (
#1E3A5F) for authority
- Body: Slate (
#475569) for readability
- Accents: Segment color for key numbers/highlights
- Never use pure black - use navy instead
- Specific numbers always highlighted (e.g., "360+", "%94", "89%")
Segment Typography Variations
| Segment | Style Notes |
|---|
| Adult | Standard, professional, confident |
| Kids | More rounded, softer edges, friendly |
| Business | Sharp, geometric, authoritative |
| Exam | Bold, urgent, goal-focused |
Spacing
Base Unit: 4px
| Context | Value | Class |
|---|
| Card Padding | 24-32px | p-6 to p-8 |
| Section Gap | 32-40px | mb-8 to mb-10 |
| Element Gap | 16px | gap-4 |
| Tight Gap | 8-12px | gap-2 to gap-3 |
| Max Width Mobile | 512px | max-w-lg |
| Max Width Desktop | 672px | max-w-2xl |
Border Radius
| Element | Radius | Class | Segment Note |
|---|
| Large Cards | 24px | rounded-3xl | All segments |
| Cards | 16px | rounded-2xl | Standard |
| Buttons | 16px | rounded-2xl | Standard |
| Small Elements | 12px | rounded-xl | Standard |
| Badges | Full | rounded-full | All segments |
| Kids Elements | 20px+ | rounded-2xl+ | Extra rounded for Kids |
Segment-Specific Design Guidelines
Adult/Individual Segment
Personality: Professional, transformative, career-focused
Tone: Semi-formal, empathetic, data-driven
Color Focus: Navy + Coral
Key Messages:
- Pain point validation ("Toplantilarda donup kalmak...")
- Specific success metrics ("87% resolved in 3 months")
- Career transformation focus
Kids Segment
Personality: Safe, playful, energetic, fun
Tone: Parent-focused (decision maker), warm, reassuring
Color Focus: Electric Cyan + Vivid Magenta + Sunshine Yellow
Color Palette:
- Primary: Electric Cyan
#06B6D4 - Energetic, modern, refreshing
- Secondary: Vivid Magenta
#EC4899 - Fun, attention-grabbing, playful
- Tertiary: Sunshine Yellow
#FACC15 - Happy, positive, cheerful
- Success: Lime Green
#84CC16 - Growth, achievement, vitality
Key Messages:
- Safety first ("All teachers background checked")
- Parent control ("Watch every lesson")
- Fun learning ("98% express themselves in 5 months")
Design Notes:
- Extra rounded corners (20px+)
- More whitespace
- Vibrant color combinations
- Child-friendly but premium feel
- Can use multi-color gradients and playful animations
- Emojis allowed in Kids segment
Business Segment
Personality: Corporate, authoritative, ROI-focused
Tone: Formal, B2B professional, metrics-driven
Color Focus: Navy Dark + Royal Blue
Key Messages:
- ROI and measurable results
- HR dashboard and tracking
- Sector-specific expertise
Design Notes:
- Sharper, more geometric forms
- Corporate reference logos
- Performance metrics prominent
Exam Segment
Personality: Goal-focused, achievement-oriented, urgent
Tone: Motivational, strategic, deadline-aware
Color Focus: Navy + Amber/Gold
Key Messages:
- Target score guarantee ("89% hit target on first attempt")
- Clear timelines ("5.5 to 7.0 in 16 weeks")
- Expert IELTS/TOEFL teachers
Design Notes:
- Progress bars and score visualizations
- Target/goal iconography
- Countdown elements (soft urgency)
Component Patterns
CTA Button
.cta-primary {
background: #10B981;
color: white;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 1rem;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}
.cta-secondary {
background: transparent;
color: #1E3A5F;
border: 1px solid #E5E7EB;
}
Segment CTA Variations
| Segment | Primary CTA Color | CTA Text Examples |
|---|
| Adult | Green #10B981 | "Planini Goster", "Devam Et" |
| Kids | Vivid Magenta #EC4899 | "Ucretsiz Ders Planla", "Hadi Baslayalim!" |
| Business | Royal Blue #1E40AF | "Demo Talep Et", "Teklif Al" |
| Exam | Amber #F59E0B | "IELTS Planini Goster", "Teste Basla" |
Trust Badge (30-Day Guarantee)
<div className="bg-white rounded-2xl p-6 border border-[#E5E7EB]">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 bg-[#10B981] rounded-xl flex items-center justify-center">
<ShieldIcon className="text-white w-5 h-5" />
</div>
<span className="font-bold text-[#1E3A5F]">30 Gun Kosulsuz Garanti</span>
</div>
<p className="text-[#475569] text-sm">
Memnun kalmazsan, soru sorulmadan paranin tamamini iade ediyoruz.
</p>
</div>
Quote Card
<div className="bg-white rounded-2xl p-6 md:p-8 border border-[#E5E7EB]">
<div className="w-12 h-12 bg-[#1E3A5F] rounded-xl flex items-center justify-center mb-6">
<QuoteIcon className="text-white" />
</div>
<h2 className="text-xl font-bold text-[#1E3A5F] mb-6">Title</h2>
{}
</div>
Progress Bar
<div className="h-1.5 bg-[#E5E7EB] rounded-full">
<div className="h-full bg-[#1E3A5F] rounded-full" style={{ width: `${progress}%` }} />
</div>
CSS Variables
--background: #FDF8F3;
--text-navy: #1E3A5F;
--text-navy-dark: #0F172A;
--text-slate: #475569;
--text-muted: #64748B;
--accent-coral: #F97316;
--accent-coral-dark: #EA580C;
--accent-royal: #1E40AF;
--accent-amber: #F59E0B;
--accent-purple: #6366F1;
--kids-cyan: #06B6D4;
--kids-magenta: #EC4899;
--kids-yellow: #FACC15;
--kids-lime: #84CC16;
--cta-green: #10B981;
--cta-green-dark: #059669;
--shadow-soft: 0 4px 20px rgba(249, 115, 22, 0.08);
--shadow-card: 0 8px 32px rgba(30, 58, 95, 0.08);
Neuromarketing Principles
| Principle | Design Application |
|---|
| Pain-Pleasure | Start with pain validation, transition to solution |
| Authority | Navy color, grayscale logos (Oxford, Cambridge, Forbes) |
| Social Proof | Real names, companies, specific results ("B1→C1 in 8 months") |
| Commitment | Sequential checkmarks, progress visibility |
| Risk Reversal | Green shield icon + guarantee text near CTA |
| Personalization | Dynamic numbers, user-specific criteria |
| Loss Aversion | Soft urgency with amber, never red panic |
| Smart Matching | "2500+ teachers" + "1 perfect match for you" |
| IKEA Effect | Let users "choose" features = ownership feeling |
Animation Patterns
- Fade-in-up entrance:
opacity: 0 → 1, translateY: 20px → 0
- Duration: 500-700ms with ease-out
- Staggered delays: 100-200ms between elements
- Checkmark animations: sequential reveal
- FLAI animations: Glowing orb, sound wave patterns
Critical Rules
DO
- One decision per screen
- Generous whitespace (premium = breathing room)
- Specific numbers ("87%" not "many")
- Segment-appropriate accent color
- Typography-driven design
- Grayscale authority logos
- Mobile-first (min 375px)
- Consistent speech bubble motif across segments
DON'T
- Mix more than 3 colors per screen
- Use emojis in premium screens (except Kids)
- Use colorful badges (except segment accents)
- Use pure black (use navy)
- Crowd elements
- Use aggressive urgency (red, countdown timers)
- Skip mobile testing
- Break logo proportions or colors
Reference Implementations
E7 Screen (Smart Matching Anticipation) - Minimal typography-focused design
E5.combined - Clinical report style
B3.1 - Social proof integration
Kids landing - Child-safe, parent-focused design
Logo Usage Guidelines
Clear Space
- Minimum clear space: Height of "f" in logo around all sides
- Never place other elements within this zone
Minimum Size
- Digital: 80px width minimum
- Print: 20mm width minimum
Color Variations
- Full color (primary)
- Single color navy (light backgrounds)
- White (dark backgrounds)
- Grayscale (special applications)
Prohibited Uses
- Stretching or distorting proportions
- Changing logo colors arbitrarily
- Adding effects (shadows, glows, outlines)
- Placing on busy backgrounds
- Combining with other logos (except co-branding)
Animation Patterns
Transition Defaults
transition-all duration-300 ease-out
Entrance Animations
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 0.5s ease-out forwards;
}
Staggered Animations
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
FLAI Character Effects
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.15); }
50% { box-shadow: 0 0 35px rgba(249, 115, 22, 0.35); }
}
Page Transitions
- Forward navigation: Slide left
- Back navigation: Slide right
- Creates sense of progress/direction
Component Code Examples
Option Cards (Selection States)
<button className={`
w-full bg-white border-2 rounded-2xl p-7
transition-all duration-300 ease-out
hover:shadow-xl hover:-translate-y-0.5
active:scale-[0.98]
${isSelected
? 'border-[var(--primary-purple)] bg-orange-50/50 ring-2 ring-[var(--primary-purple)] ring-offset-2'
: 'border-slate-200 hover:border-[var(--primary-purple)]'}
`}>
Sticky CTA Footer
.sticky-cta-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
padding-top: 2rem;
background: linear-gradient(to top, var(--background) 70%, transparent);
z-index: 50;
}
Progress Bar Gradient
.progress-gradient {
background: linear-gradient(90deg, var(--accent-coral) 0%, var(--accent-peach) 100%);
}
Bento Card Variants
- default: White background
- stat: Muted orange background (
--accent-purple-muted)
- insight: White with green left border accent
- testimonial: White with quote styling
Content Markup Syntax
JSON content files support inline markup for dynamic styling:
"title": "**3 Kat** Daha Fazla Kazan" // 3 Kat rendered in orange
"description": "ortalama ++%300++ daha fazla" // %300 bold only
"note": "~~kucuk not~~" // muted and small
| Syntax | Rendering | Usage |
|---|
{{variable}} | Plain text | Template variable interpolation |
**text** | Orange/coral highlight | Key numbers, emphasis |
__text__ | Navy bold | Strong emphasis |
++text++ | Bold (no color change) | Subtle emphasis |
~~text~~ | Muted gray, small | Footnotes, disclaimers |
Implementation Checklist
Before shipping any new screen:
File Structure Reference
/app/onboarding/
/components/
/screens/ # Screen-specific components
/ui/ # Reusable UI components
BentoCard.tsx # Card variants
OptionCard.tsx # Selection cards
ProgressBar.tsx # Progress indicator
StatBox.tsx # Metric display
TrustBadge.tsx # Trust signals
PricingCard.tsx # Pricing display
FLAICharacter.tsx # AI mascot
StyledText.tsx # Dynamic text styling
/app/globals.css # CSS variables and utilities
/public/content/
/logos/ # Trust logos
/mascots/ # FLAI character assets
/screens/ # Screen JSON configs
Reference Screens
Quality standard to maintain or exceed:
| Screen | URL | Key Pattern |
|---|
| B1.1 | /onboarding/B1.1 | Clean single-select with emoji options |
| B2.1 | /onboarding/B2.1 | Social proof carousel integration |
| B2 | /onboarding/B2 | Business insight with stat boxes |
| B1 | /onboarding/B1 | Text input with personalization |
| B3.1.beginner | /onboarding/B3.1.beginner | Level-appropriate content |
This document is the single source of truth for Flalingo brand identity and design. All segments must maintain premium quality while expressing their unique personality through accent colors and design variations.
