---

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:

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 | 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; /* 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

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

| 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

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

| 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:

• [ ] 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:

| 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.