Branding

Where the brand lives

The brand is set in files, not in the admin. The student site and the admin dashboard keep their own copies, so change each app you ship.

The name on the student site

Paths are inside frontend/.

The site's public address comes from NEXT_PUBLIC_SITE_URL, not from these files.

• Student site and admin dashboard settings

The name also appears in the copy: the footer's copyright line, the logo's accessible name (brand.logoLabel in messages/layouts), the home and about pages, the sign-in pages and the legal pages. Find every occurrence in both languages:

grep -rn "Learnio" messages
grep -rn "ليرنيو" messages

• One string is written in code: the LearnioLMS hashtag in src/components/ui/ShareModal.tsx.
• The terms and the privacy policy in messages/legal carry sample contact details (legal@learnio.com, privacy@learnio.com, an address in Dubai). Replace them with your own before going live.

The name in the admin dashboard

Everything is in BRAND_CONFIG, in admin-dashboard/src/config/brand.config.ts. Text fields have an en and an ar value.

Every place that names the product reads BRAND_CONFIG, so renaming it there renames the sidebar, the sign-in card, both footers and the page titles together. The admin's message files do not contain the product name: the copyright line's sentence is a translation (layouts.footer.copyright) with the name filled in from the config.

Logo files

The simplest change is to replace each file with your own at the same path and name. Use a PNG with a transparent background.

• The student site draws one wordmark on light and dark pages, so pick artwork that reads on both.
• In the admin, the two theme files are chosen by --logo-bg-image in src/styles/theme-variables.css. They ship as the same image.
• The admin's own copy of learnio-wordmark.png is not used by any page.

To use a file with another name in the admin, point logo.icon in BRAND_CONFIG at it. If your artwork has a different shape, update the declared size so it is not stretched: the width and height in ASSETS in the student site's src/components/ui/BrandLogo.tsx, and width={512} and height={474} in src/layouts/dashboard/sidebar/components/SidebarBrand.tsx (both apps) and the admin's src/layouts/auth/components/FormPanel.tsx.

Favicon, app icons and sharing images

Next.js finds the files in src/app/ by name and writes the page tags for them, so replace the files and keep their names.

The admin has one web app manifest, served at /manifest.webmanifest from src/app/manifest.ts, which reads manifest in BRAND_CONFIG:

• manifest.icons lists the installed-app icons: /icon.png (512 × 512) and /apple-icon.png (180 × 180), the two files in src/app/. Replacing those files changes the browser icon and the installed app's icon together. If you point an entry at another file, give it that file's real size.
• meta.ogImage and meta.twitterImage are the link previews, /assets/brand/learnio-mark.png by default. The metadata declares the image as 512 × 474 and uses the small summary card, so a replacement of another size needs the width and height in src/app/layout.tsx changed with it.
• The admin tells search engines not to index it, in the page metadata and in public/robots.txt: it is a staff tool, not a public page.

Colours on the student site

The public pages read their colours from CSS variables in src/styles/theme-variables.css: the light values under :root, the dark ones under .dark. The brand orange is #FF6A3D.

• The signed-in student dashboard uses the admin's palette, copied into src/styles/dashboard-theme.css and limited to the dashboard. Its orange is #FF8A00. The copy is kept by hand: when a colour changes in the admin's theme-variables.css, change it in this file as well.
• A few illustrations write the orange directly instead of using a variable: the instructor profile and the home page's "How it works" steps. Search src/features for FF6A3D.
• The colour the browser paints around the page (the mobile address bar) is SITE.browserChrome in src/config/site.ts, one value per theme, each matching that theme's page background. The installed app's colours are SITE.themeColor and SITE.backgroundColor in the same file.

Colours in the admin dashboard

All colours are CSS variables in src/styles/theme-variables.css, light under :root and dark under .dark. The brand orange is --primaryColor, #ff8a00 in both themes, with --primaryColorHover for its hover.

• Shades of the orange are written out as their own values: the --accent-* family, the --chip-* family and --btn-primary-fill, which is #ff6a3d in the light theme. To change the brand colour, search the file for ff8a00, 255, 138, 0 and ff6a3d and rework the shades next to them.
• Apart from the browser colours below, this file is the only place the admin writes the orange. No component hardcodes it.
• Browser chrome colours are theme.light and theme.dark in BRAND_CONFIG. The installed app uses manifest.themeColor and manifest.backgroundColor.

Fonts

Both apps load Inter for English and IBM Plex Sans Arabic for Arabic through next/font/google in src/app/layout.tsx, which serves them from your own domain. src/styles/base.css switches to the Arabic face when the page language is ar.

To change a font, import another one from next/font/google and keep its variable name, so the stylesheets pick it up unchanged. On the student site:

import { IBM_Plex_Sans_Arabic, Manrope } from "next/font/google";

const inter = Manrope({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

A font that is not a variable font needs a weight list, as the Arabic one has. The student site's src/styles/base.css also names 'Inter' as a fallback; update it if you rename the variable.

Emails and the API

• Sender: MAIL_FROM in back-end/.env is the name and address every email comes from, for example Learnio <noreply@example.com>.
• Name: emails name the product through the {site} placeholder in src/i18n/translations/<locale>/mail.json, filled from the site_name setting. Change it in the admin's Settings, App Settings tab; it applies to the next email sent.
• Replies: the support_email setting is the reply-to address of every email, so a reply reaches a person rather than the no-reply sender.
• Wording: subjects and bodies are in src/i18n/translations/en/mail.json and src/i18n/translations/ar/mail.json.
• Look: emails carry no logo. Their colours are written in src/modules/mail/templates/layout.ts (INK, MUTED, PAGE, CARD), because mail clients drop stylesheets.
• Links in emails open the student site at FRONTEND_URL.

• Email settings