Branding
Where the product's name, mark, icons, colours and fonts live, and what to change to make it your own brand.
For the Full Stack package
Where the brand lives
The brand is set in files, not in a settings screen. Paths are inside dashboard/.
| What | Where |
|---|---|
| Name, description, links, contact | src/config/brand.config.ts |
| The mark beside the name | src/components/icons/KinoraMark.tsx, drawn in code rather than an image file |
| Favicon and app icons | src/app/ (favicon.ico, icon0.svg, icon1.png, apple-icon.png) and public/web-app-manifest-192x192.png and -512x512.png |
| The footer credit | src/config/author.config.ts |
| Colours | src/styles/theme-variables.css |
| Fonts | src/app/layout.tsx |
| Wording | messages/<namespace>/<locale>.json, and the sidebar labels in src/layouts/dashboard/sidebar/config/navigationData.ts |
yarn dev shows a change straight away. A production build compiles the brand in, so run yarn build again, or docker compose up --build for the full stack.
The name
The product ships as Kinora (كينورا in Arabic). Everything is in BRAND_CONFIG, in src/config/brand.config.ts; text fields have an en and an ar value.
| Field | Where it shows |
|---|---|
name | The sidebar beside the mark, the top bar of the sign-in, register and password pages, the dashboard footer, the onboarding card's title, the activity insight banner, and the creator of an exported GPX route. |
version | The dashboard footer, after the name. |
company | The organisation name search engines read. |
meta.title, meta.description, meta.keywords, meta.author | The browser tab's title, and the description and keywords of every page. |
meta.ogImage, meta.twitterImage | The picture shown when a page is shared, a path under public/. Both ship as the 512 px app icon. |
domain.url | The base address for the sharing metadata. It ships as https://yourdomain.com: set your own. |
theme.light, theme.dark | The browser's toolbar colour on phones. |
manifest | The installed app's name, colours and icons. |
links, contact | The organisation details search engines read. They ship pointing at the template's maker: replace them. |
The name is also written in a few messages: the welcome card in messages/dashboard/en.json ("Welcome to Kinora") and the assistant's greetings in messages/ai-assistant/en.json ("Ask Kinora about…"), with their ar.json twins. Search both folders for Kinora and كينورا.
The mark and the icons
- The mark, two rising chevrons, is the SVG in
src/components/icons/KinoraMark.tsx. It takes its colour from the theme, so it stays right in light and dark. Replace its paths with your own mark, or render your own logo in its place insrc/layouts/dashboard/sidebar/components/SidebarBrand.tsxand on the sign-in page (src/layouts/auth/login/components/AuthTopBar.tsxandAuthPanel.tsx). - The browser tab icon is
src/app/favicon.icowithicon0.svgandicon1.png;apple-icon.pngis the iPhone home-screen icon. - The installed app uses
public/web-app-manifest-192x192.pngandpublic/web-app-manifest-512x512.png, whichbrand.config.tsalso uses as the sharing picture. Keep the file names, or change the paths inbrand.config.ts.
public/assets/images/logo-for-lightmode.png and logo-for-darkmode.png also ship, but no screen draws them: only the navbar in src/layouts/app/NavBar reads them, and no page shows that navbar. Replacing them changes nothing on screen.
The footer credit
The dashboard footer shows the year, name and version on one side and "by Aniq UI" on the other, a link to the template's maker. The search box's footer carries the same credit. Both read it from src/config/author.config.ts (name, url, byLabel) and draw it in src/layouts/dashboard/dashboardFooter.tsx and src/components/SearchModal/components/SearchFooter.tsx.
Colours
Every colour is a token in src/styles/theme-variables.css, with one block for the light theme and one for the dark. The accent is lime: --primaryColor is #9ae600 in both, with --primaryColorHover and the --accent-* tokens beside it for text, glow and gradients. Change those and every button, ring and chart that uses the accent follows.
- Each account can also pick its own accent and theme in Settings, under Appearance. That choice is saved with the account and rebuilds the accent tokens around it.
manifest.themeColor(#9AE600) andthemeinbrand.config.tsare the browser's own colours, outside the page: set them to match.
Fonts
Two Google fonts are loaded in src/app/layout.tsx through next/font: Inter for Latin text and IBM Plex Sans Arabic for Arabic. Swap either import there for another next/font/google font, keeping its variable name.
Wording
Every visible word is in messages/, one folder per namespace with an en.json and an ar.json in each. Change the value, keep the key, and change it in both files.
In the API
The API holds no logo or colour. The seed writes Kinora in two places you may want to change: the site_name app setting (stored, but nothing reads it), and the "Kinora Band Pro" device in back-end/src/database/seeders/fitness-devices-data.ts.