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:

1. Premium Simplicity - Clean, minimal design with generous whitespace. Think Apple/Airbnb level sophistication. "Nothing cheap could exist here."
2. Human-AI Hybrid - Balance cold technology (FLAI AI) with warm human connection (teachers). FLAI uses glowing, tech-forward aesthetics; humans use warm, approachable photography.
3. 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:

1. Human + AI Hybrid (FLAI AI Coach)
2. Oxford University Press materials
3. Smart Matching Algorithm (18 criteria)
4. 2500+ certified teachers
5. 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 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:

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

Emotional Color Mapping

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

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

Spacing

Base Unit: 4px

Border Radius

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; /* Green for primary CTAs */
  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

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>
  {/* Content */}
</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

/* Core Colors */
--background: #FDF8F3;
--text-navy: #1E3A5F;
--text-navy-dark: #0F172A;
--text-slate: #475569;
--text-muted: #64748B;

/* Brand Accents */
--accent-coral: #F97316;
--accent-coral-dark: #EA580C;
--accent-royal: #1E40AF;
--accent-amber: #F59E0B;
--accent-purple: #6366F1;

/* Kids Vibrant Colors */
--kids-cyan: #06B6D4;
--kids-magenta: #EC4899;
--kids-yellow: #FACC15;
--kids-lime: #84CC16;

/* CTA */
--cta-green: #10B981;
--cta-green-dark: #059669;

/* Shadows */
--shadow-soft: 0 4px 20px rgba(249, 115, 22, 0.08);
--shadow-card: 0 8px 32px rgba(30, 58, 95, 0.08);

Neuromarketing Principles

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

1. Full color (primary)
2. Single color navy (light backgrounds)
3. White (dark backgrounds)
4. 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; }
/* ... up to 6 */

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

Implementation Checklist

Before shipping any new screen:

• Does it align with neuromarketing principles?
• Does it maintain reference screen quality level?
• Is the visual hierarchy guiding toward CTA?
• Is there clear psychological engagement strategy?
• Does it minimize friction in the conversion path?
• Does it communicate premium quality and trust?
• Is it consistent with established design language?
• Will it measurably improve engagement/conversion?
• Does it work flawlessly on mobile (375px)?
• Are all animations smooth and purposeful?
• Is the correct segment color palette applied?

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:

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.