Brand Guidelines v2.4

Building a Unified Brand Experience

This guide outlines the visual, verbal, and experiential standards for LearnFlow. Use it to maintain consistency, build trust, and scale our identity across digital and physical touchpoints.

Last UpdatedOctober 2024
Maintained ByDesign & Brand Team
Version2.4.0

Brand Story & Values

LearnFlow exists to democratize education. Our identity reflects accessibility, innovation, and human-centered design.

Mission

To empower anyone, anywhere to master new skills through intuitive, high-quality, and affordable online learning experiences.

Vision

A world where geographic, economic, or academic barriers never limit a person's ability to learn, grow, and thrive in their career.

Core Values

Accessibility First. Design for everyone.
Radical Clarity. Eliminate confusion.
Community Driven. Learn together, succeed together.

Color Palette

Our colors communicate energy, trust, and growth. Use primary colors for brand identity, and neutrals for hierarchy and readability.

Primary Purple
#6C3CE1 / RGB(108,60,225)
Secondary Blue
#3B82F6 / RGB(59,130,246)
Success Green
#10B981 / RGB(16,185,129)
Warning Amber
#F59E0B / RGB(245,158,11)
Error Red
#EF4444 / RGB(239,68,68)
Dark Slate
#0F172A / RGB(15,23,42)
Neutral Gray
#64748B / RGB(100,116,139)
Light Background
#F8FAFC / RGB(248,250,252)

Typography

We use Inter as our typeface family. It offers exceptional readability across screens, supports multiple weights, and scales beautifully for UI and editorial content.

Display / Hero
900 / 48px / 1.1
H1 / Section Title
800 / 36px / 1.2
H2 / Card Title
700 / 28px / 1.3
H3 / Subtitle
600 / 22px / 1.4
Body / Standard Text
400 / 16px / 1.6
Small / Labels & Meta
500 / 14px / 1.5

The quick brown fox jumps over the lazy dog.

Inter is optimized for computer screens and designed to be legible in UI contexts. It features a tall x-height for excellent readability and open apertures for clarity at small sizes.

Tone & Voice

Our words should feel like a knowledgeable mentor: encouraging, clear, and always focused on the learner's success.

Encouraging & Supportive

DO You're making great progress! Let's review the next module.
DON'T You failed the quiz. Try again.

Clear & Direct

DO Click "Enroll" to start your free trial.
DON'T Please consider engaging with the enrollment interface.

Expert but Approachable

DO This technique uses CSS Grid for responsive layouts.
DON'T Leverage synergistic paradigms for optimal UX.

Inclusive & Accessible

DO Students can access materials on any device.
DON'T Guys, just grab it on your phone.

UI & Design Tokens

Consistent components create a seamless learning experience. Follow these patterns for buttons, cards, and spacing.

Button Variants

Use Primary for main CTAs (Enroll, Start Course). Use Secondary for supporting actions. Use Ghost for low-emphasis or destructive actions.

Design Tokens

TokenValueUsage
--radius-sm8pxInputs, badges
--radius-md12pxButtons, modals
--radius-lg16pxCards, sections
--shadow-md0 4px 12px rgba(0,0,0,0.08)Hover states, dropdowns
--transition0.3s easeMicro-interactions