🎨 Frontend & Design

Guide to customizing BetterLearn's appearance, branding, and design system. Learn how to modify colors, typography, and component styling.

🎨 Design System

BetterLearn uses a modern, clean design system optimized for educational platforms. The design emphasizes clarity, accessibility, and professional aesthetics.

Color Palette

Color Hex Code Usage
Primary Blue #2A66FF Buttons, links, primary actions, accents
Primary Dark #1e54e6 Hover states, gradients
Text Primary #0F3547 Headings, body text
Text Secondary #0F3547 @ 70% Descriptions, secondary content
Background #FFFFFF Main background
Background Cream #FCFBF8 Cards, sections, subtle backgrounds
Background Light #F5F5F5 Input backgrounds, hover states
Border #E7E7E7 Card borders, dividers

Typography

BetterLearn uses system fonts with a focus on readability:

  • Primary Font – Inter (headings and body text)
  • Mono Font – JetBrains Mono (code blocks)
  • Weights – 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
Font Stack (tailwind.config.ts) 
fontFamily: {
  sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
  mono: ['JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'monospace'],
}

🧩 Component Styling

Buttons

Primary buttons use gradient backgrounds with shadow effects:

Primary Button Classes 
className="bg-gradient-to-r from-[#2A66FF] to-[#1e54e6] 
           hover:from-[#1e54e6] hover:to-[#2A66FF] 
           text-white font-semibold 
           shadow-xl shadow-[#2A66FF]/25 
           hover:shadow-2xl 
           rounded-xl 
           transition-all"

Cards

Cards use subtle borders with hover effects:

Card Styling 
className="bg-white 
           border border-[#E7E7E7] 
           rounded-xl 
           hover:border-[#2A66FF]/30 
           hover:shadow-lg 
           transition-all"

Inputs

Form inputs use clean borders with focus states:

Input Styling 
className="h-10 
           bg-white 
           border-2 border-[#E7E7E7] 
           rounded-xl 
           focus:border-[#2A66FF] 
           focus:ring-2 focus:ring-[#2A66FF]/10 
           transition-all"

🏷️ Branding & Logos

Customize branding through the Admin Panel or by modifying files directly.

Via Admin Panel (Recommended)

1

Go to Admin → Settings

Access the site settings page

2

Upload Logos

Upload site logo, favicon, and footer logo

3

Set Site Name

Enter your platform name

4

Save

Changes apply immediately across the platform

Via File Replacement

Replace these files in the /public directory:

  • site_logo.svg – Main site logo
  • favicon.svg – Browser tab icon
  • assets/ – Tool icons and illustrations
💡
Logo Recommendations

Use SVG format for logos when possible. Recommended dimensions: Logo (max 200x56px), Favicon (32x32 or 64x64).

⚙️ Tailwind Configuration

BetterLearn uses Tailwind CSS for styling. Customize in tailwind.config.ts.

Extending Colors

tailwind.config.ts 
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#2A66FF',
          dark: '#1e54e6',
          light: '#5a8aff',
        },
        text: {
          primary: '#0F3547',
          secondary: 'rgba(15, 53, 71, 0.7)',
        },
        bg: {
          cream: '#FCFBF8',
          light: '#F5F5F5',
        },
        border: {
          DEFAULT: '#E7E7E7',
        },
      },
    },
  },
}

🏠 Landing Page Customization

The landing page is built with modular sections in /components/landing/.

Section Components

  • hero-section.tsx – Main hero with headline and CTA
  • features-section.tsx – Feature highlights
  • pricing-section.tsx – Pricing cards
  • testimonials-section.tsx – User testimonials
  • faq-section.tsx – FAQ accordion
  • cta-section.tsx – Bottom call-to-action
  • tools-section.tsx – AI tools showcase

Landing Data

Content is managed in /components/landing/data/landing-data.ts:

  • Feature lists
  • Tool categories
  • Testimonials
  • FAQ items

📊 Dashboard Customization

Dashboard components are in /app/(preview)/dashboard/.

Quick Actions

Edit /app/(preview)/dashboard/page.tsx to modify quick action cards:

Quick Actions Array 
const quickActions = [
  { 
    title: "Quiz", 
    icon: "/assets/dashboard-user/quiz.svg", 
    href: "/dashboard/generate", 
    color: "#2A66FF" 
  },
  { 
    title: "Educator Tools", 
    icon: "/assets/dashboard-user/educator-tools.svg", 
    href: "/dashboard/educator-tools", 
    color: "#f59e0b" 
  },
  // Add more actions...
];

✨ Animations

BetterLearn uses Framer Motion for smooth animations.

Common Animation Patterns

Fade In Animation 
import { motion } from 'framer-motion';


  Content
Hover Scale Effect 

  Card Content

🎯 Icons

BetterLearn uses multiple icon sources:

  • Lucide React – UI icons (imported from lucide-react)
  • Custom SVGs – Tool icons in /public/assets/

Icon Directories

  • /public/assets/dashboard-user/ – Dashboard icons
  • /public/assets/educators-tools-user-dashboard/ – Educator tool icons
  • /public/assets/student-tools-dashboard-user/ – Student tool icons
  • /public/assets/admin-dashboard-pages/ – Admin panel icons

🌙 Dark Mode (Future)

🔮
Coming Soon

Dark mode support is planned for a future release. The design system is built with CSS variables to support easy theme switching.

✅ Customization Best Practices

🎨

Consistent Colors

Use the defined color palette. Avoid introducing too many new colors.

📱

Responsive Testing

Test all changes on mobile, tablet, and desktop viewports.

♿

Accessibility

Maintain color contrast ratios. Keep focus states visible.

🔧

Use Admin Panel

Prefer admin panel settings over code changes when possible.

💡
Need More Customization?

For extensive customization, consider creating a separate CSS file for overrides. This makes it easier to update the core platform in the future.