flalingo-brand-guidelines

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.