Skip to content

Instantly share code, notes, and snippets.

@htuzel

htuzel/# Flalingo Brand Guidelines & Design System

Created January 28, 2026 06:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save htuzel/c836c09db3161bca0ce6d8a11ef8bebc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save htuzel/c836c09db3161bca0ce6d8a11ef8bebc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
# Flalingo Brand Guidelines & Design System
# Flalingo Brand Guidelines & Design System
**Version:** 1.0
**Last Updated:** January 2026
**Purpose:** Claude Code skill reference for premium onboarding design
---
## 1. 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.
---
## 2. Color Palette
### Primary Colors
| Role | Variable | Hex Value | Usage |
|------|----------|-----------|-------|
| **Navy (Trust)** | `--text-navy` | `#1E3A5F` | Primary headings, authority elements, key text |
| **Navy Dark** | `--text-navy-dark` | `#0F172A` | Maximum emphasis, dark mode elements |
| **Orange (Accent)** | `--primary-purple` | `#F97316` | CTA highlights, progress bars, accent elements |
| **Orange Dark** | `--primary-purple-dark` | `#EA580C` | Hover states, pressed states |
| **Orange Light** | `--primary-purple-light` | `#FB923C` | Subtle accents, secondary highlights |
### Background Colors
| Role | Variable | Hex Value | Usage |
|------|----------|-----------|-------|
| **Cream Background** | `--background` | `#FDF8F3` | Primary page background |
| **Warm Background** | `--background-warm` | `#FEF7F0` | Alternative warm background |
| **Card White** | `--card-white` | `#FFFFFF` | Card surfaces, elevated elements |
### Accent Colors
| Role | Variable | Hex Value | Usage |
|------|----------|-----------|-------|
| **Soft Orange** | `--accent-purple-soft` | `#FED7AA` | Highlighted badges, soft accents |
| **Muted Orange** | `--accent-purple-muted` | `#FFEDD5` | Stat card backgrounds, subtle fills |
| **Coral** | `--accent-coral` | `#F97316` | Progress gradients, quote marks |
| **Peach** | `--accent-peach` | `#FDBA74` | Gradient endpoints |
### CTA & Success Colors
| Role | Variable | Hex Value | Usage |
|------|----------|-----------|-------|
| **Green CTA** | `--cta-green` | `#10B981` | Primary action buttons |
| **Green Dark** | `--cta-green-dark` | `#059669` | Button hover, success indicators |
| **Green Light** | `--cta-green-light` | `#D1FAE5` | Success backgrounds |
### Text Colors
| Role | Variable | Hex Value | Usage |
|------|----------|-----------|-------|
| **Navy** | `--text-navy` | `#1E3A5F` | Primary headings |
| **Slate** | `--text-slate` | `#475569` | Body text, descriptions |
| **Muted** | `--text-muted` | `#64748B` | Secondary text, captions |
### Color Psychology Application
| Emotional State | Color Approach |
|-----------------|----------------|
| **Pain/Problem** | Navy tones, subtle grays |
| **Solution/Hope** | Light backgrounds, green accents |
| **Trust/Guarantee** | Green with shield icons |
| **Urgency (soft)** | Amber/Orange - never red |
| **Premium/Value** | Navy + Orange combination |
---
## 3. Typography System
### Font Family
```css
font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
```
### Type Scale
| Element | Size | Weight | Line Height | Usage |
|---------|------|--------|-------------|-------|
| **H1 - Hero** | `text-2xl` to `text-3xl` | `font-bold` (700) | 1.2-1.3 | Main screen titles |
| **H2 - Section** | `text-xl` to `text-2xl` | `font-bold` (700) | 1.3 | Section headers |
| **H3 - Card Title** | `text-lg` | `font-semibold` (600) | 1.4 | Card headers |
| **Body Large** | `text-base` (16px) | `font-medium` (500) | 1.5 | Primary descriptions |
| **Body Regular** | `text-sm` (14px) | `font-normal` (400) | 1.6 | Standard body text |
| **Caption** | `text-xs` (12px) | `font-medium` (500) | 1.4 | Labels, metadata |
| **Micro** | `text-[10px]` | `font-medium` (500) | 1.3 | Badges, footnotes |
### Typography Rules
1. **Headlines**: Use `text-[var(--text-navy)]` for maximum authority
2. **Descriptions**: Use `text-[var(--text-slate)]` for readable body copy
3. **Secondary Info**: Use `text-[var(--text-muted)]` for captions
4. **Numbers/Stats**: Bold weight, larger size - specific numbers (87%, 4.2 months) not rounded
5. **Personalization**: User names in orange with `styled-name` class
---
## 4. Spacing System
### Base Unit
The design uses a **4px base unit** with Tailwind's spacing scale.
### Common Spacing Patterns
| Context | Value | Tailwind Class |
|---------|-------|----------------|
| **Card Padding** | 24px | `p-6` |
| **Section Gap** | 32px | `mb-8` |
| **Element Gap** | 16px | `gap-4` |
| **Tight Gap** | 8px | `gap-2` |
| **List Item Gap** | 12px | `gap-3` |
| **Container Max Width** | 512px (mobile) | `max-w-lg` |
| **Container Max Width** | 1024px (desktop) | `max-w-4xl` |
### Whitespace Philosophy
Premium design requires **generous whitespace**. When in doubt, add more space. Cramped layouts = cheap perception.
---
## 5. Shadow System
| Type | Variable | Value | Usage |
|------|----------|-------|-------|
| **Soft** | `--shadow-soft` | `0 4px 20px rgba(249, 115, 22, 0.08)` | Default card shadow |
| **Card** | `--shadow-card` | `0 8px 32px rgba(30, 58, 95, 0.08)` | Elevated cards |
| **Hover** | `--shadow-hover` | `0 12px 40px rgba(249, 115, 22, 0.15)` | Interactive hover state |
---
## 6. Border Radius System
| Element | Radius | Tailwind Class |
|---------|--------|----------------|
| **Large Cards** | 24px | `rounded-3xl` |
| **Standard Cards** | 16px | `rounded-2xl` |
| **Buttons** | 16px | `rounded-2xl` |
| **Small Elements** | 12px | `rounded-xl` |
| **Badges** | Full | `rounded-full` |
| **Inputs** | 12px | `rounded-xl` |
---
## 7. Component Patterns
### Primary CTA Button
```css
.cta-primary {
background: var(--primary-purple); /* #F97316 */
color: white;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 1rem;
box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}
.cta-primary:hover {
background: var(--primary-purple-dark); /* #EA580C */
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.cta-primary:active {
transform: scale(0.98);
}
```
**CTA Text Rules:**
- Always include directional arrow icon
- Action-oriented: "Devam Et", "Planini Gor", "Ogretmenimi Bul"
- Never passive or vague
### Option Cards (Selection)
States:
1. **Default**: White background, `border-slate-200`, subtle shadow
2. **Hover**: Elevated shadow, border transitions to primary color
3. **Selected**: Primary border (2px), light tinted background, ring effect
4. **Micro-interaction**: Scale 0.98 on press, smooth transition
```jsx
<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)]'}
`}>
```
### Bento Cards
Variants:
- **default**: White background
- **stat**: Muted orange background (`--accent-purple-muted`)
- **insight**: White with green left border accent
- **testimonial**: White with quote styling
### Progress Bar
```css
.progress-gradient {
background: linear-gradient(90deg, var(--accent-coral) 0%, var(--accent-peach) 100%);
}
```
Position: Sticky top with smooth fill animation on page transitions.
### Trust Badge
```jsx
<div className="bg-gradient-to-br from-emerald-50 to-blue-50 border-2 border-emerald-300 rounded-2xl p-6">
<div className="flex items-start gap-4">
<span className="text-4xl">shield-icon</span>
<div>
<h3 className="font-bold">Title</h3>
<p className="text-gray-700">Description</p>
</div>
</div>
</div>
```
### Sticky CTA Footer
```css
.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;
}
```
---
## 8. Animation Patterns
### Transition Defaults
```css
transition-all duration-300 ease-out
```
### Entrance Animations
```css
/* Fade in up */
@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
```css
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
/* ... up to 6 */
```
### FLAI Character Effects
```css
/* Breathing animation */
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
/* Glow pulse */
@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); }
}
```
### Match Score Ring
Animated SVG circle with `stroke-dashoffset` transition for reveal effect.
### Page Transitions
- Forward navigation: Slide left
- Back navigation: Slide right
- Creates sense of progress/direction
---
## 9. Neuromarketing Principles
### Applied Principles
| Principle | Application | Design Implementation |
|-----------|-------------|----------------------|
| **Pain-Pleasure** | Show problem first, then solution | Dark tones for pain, bright for solution |
| **Ownership Effect (IKEA)** | Users "build" their own plan | Interactive checkboxes, visual "adding" animations |
| **Commitment & Consistency** | Micro-commitments at each step | Progress bar, checkmarks, "Plan being prepared" messages |
| **Social Proof** | Testimonials match user's pain point | Real photos, company logos, specific numbers |
| **Authority** | Expert credentials, AI analysis | Badges, certifications, methodology citations |
| **Paradox of Choice** | Smart Matching shows THE perfect teacher | One hero result, others secondary/blurred |
| **Risk Reversal** | 30-day guarantee prominently displayed | Green shield badge near CTA |
| **Scarcity (Ethical)** | "This week" bonuses, not countdown timers | Soft urgency badges |
| **Reciprocity** | Free analysis before asking for payment | "Free" and "Gift" words highlighted |
| **Personalization** | Name usage, dynamic content | `{{name}}` interpolation, orange styled names |
| **Loss Aversion** | "Don't let your career wait" | Amber warnings, not red panic |
| **Anchoring** | Crossed-out original price | Strikethrough old price, bold new price |
### Psychological Color Usage
| Emotion | Trigger | Color |
|---------|---------|-------|
| Trust | Stability, authority | Navy `#1E3A5F` |
| Action | Growth, positivity | Green `#10B981` |
| Energy | Warmth, urgency | Orange `#F97316` |
| Premium | Sophistication | Navy + Orange combination |
| Safety | Guarantee, security | Green gradients |
---
## 10. Critical Design Rules
### DO
1. **One decision per screen** - Never overwhelm with choices
2. **Generous whitespace** - Premium = breathing room
3. **Specific numbers** - "87%" not "many", "4.2 months" not "few months"
4. **Real testimonials** - Actual photos, name + company + position
5. **Progress visibility** - User always knows where they are
6. **Mobile-first** - 70%+ users are on mobile
7. **Touch-friendly** - Min 48px tap targets
8. **Engaging loading states** - Never static spinners, always meaningful animations
9. **Typography hierarchy** - Clear visual order guiding the eye
10. **Consistent component usage** - Same patterns throughout
### DON'T
1. **Never use aggressive urgency** - No "only 2 hours left" countdown
2. **Never use stock photo aesthetics** - Authenticity is key
3. **Never crowd elements** - Cramped = cheap
4. **Never use pure black** - Use navy for depth
5. **Never leave loading states bare** - Always show progress/activity
6. **Never mix too many colors** - Stick to navy + orange + green palette
7. **Never skip mobile testing** - Every screen must work on 375px width
8. **Never use generic CTA text** - "Submit" is weak, be specific
---
## 11. Reference Screens
These screens represent the 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 |
---
## 12. Implementation Checklist
Before shipping any new screen:
- [ ] Does it align with marketing_criterias.md 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?
---
## 13. 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
```
---
## 14. Quick Reference: CSS Variables
```css
/* Copy-paste ready variables */
--background: #FDF8F3;
--text-navy: #1E3A5F;
--text-slate: #475569;
--text-muted: #64748B;
--primary-purple: #F97316; /* Orange accent */
--primary-purple-dark: #EA580C;
--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);
--shadow-hover: 0 12px 40px rgba(249, 115, 22, 0.15);
```
---
*This document serves as the single source of truth for design decisions in the Flalingo onboarding funnel. All new screens and components must adhere to these guidelines to maintain premium quality and psychological effectiveness.*
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment