Branding
Where the shop's name, logo, icons, colours and fonts live in each app, 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 the admin. The storefront and the admin dashboard keep their own copies, so change each app you ship.
| What | Storefront (storefront/) | Admin dashboard (admin-dashboard/) |
|---|---|---|
| Name, description, contact, links | src/config/brand.config.ts | src/config/brand.config.ts |
| Logo | The name, written as text by src/layouts/app/NavBar/components/Logo.tsx | public/assets/images/logo-for-lightmode.png and logo-for-darkmode.png |
| 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 same files in its own src/app/ and public/ |
| Colours | src/styles/theme-variables.css | src/styles/theme-variables.css |
| Fonts | src/app/layout.tsx and src/styles/base.css | None set: the system font stack |
| Wording | messages/<namespace>/<locale>.json | messages/ and the sidebar labels in 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 on the storefront
The shop ships as STORE (ستور in Arabic). Everything is in BRAND_CONFIG, in storefront/src/config/brand.config.ts; text fields have an en and an ar value.
| Field | Where it shows |
|---|---|
storeName | The logo: a text wordmark in the navbar and the footer, and the footer's copyright. |
name | The browser tab (Page | Name), the sharing preview's site name and the website details search engines read. |
company | The organisation name search engines read. |
meta.title, meta.description, meta.keywords, meta.author | The home page's title and the default description and keywords. |
meta.ogImage, meta.twitterImage | The picture shown when a page is shared, a path under public/. It ships as the home page's hero photo. |
logo.icon | The organisation logo search engines read. |
theme.light, theme.dark | The browser's toolbar colour on phones. |
manifest | The installed app's name, colours and icons. |
contact.email, contact.phone, contact.address | The footer's contact column and the contact page. They ship as placeholders: replace them. |
links.instagram, links.twitter, links.facebook, links.linkedin | The footer's social icons, as full URLs (twitter shows as X). Each filled one gets an icon; empty ones are hidden. They ship empty, so a new shop shows no social row. The same URLs are listed as the organisation's profiles for search engines. |
The site's public address comes from NEXT_PUBLIC_SITE_URL, not from this file. The shipped copy describes a menswear shop: the descriptions in brand.config.ts, the home page in messages/home/ and the page titles in messages/seo/ are the places to rewrite it.
The name in the admin dashboard
The dashboard ships as Aniq Dashboard. Everything is in BRAND_CONFIG, in admin-dashboard/src/config/brand.config.ts; text fields have an en and an ar value.
| Field | Where it shows |
|---|---|
name | The browser tab's title on every page, the name in the header, the sharing preview's site name and the footer. |
company | The footer's "by" line, and the organisation search engines read. |
version | The footer. |
logo.alt | The screen-reader label of the logo on the sign-in page. |
logo.icon | The organisation logo search engines read. It is not drawn on screen. |
meta | The default title, description, keywords and author, and the image shown when a link to the dashboard is shared. |
domain.url | The base for absolute links in the metadata. It ships as https://yourdomain.com: set it to the admin's own address. |
theme, manifest | The browser's toolbar colour, and the installed app's name, colours and icons. |
contact, links | The organisation's email, phone and profiles for search engines only. |
The dashboard ships as Aniq Dashboard, with its app icon (/web-app-manifest-512x512.png) as the sharing image. Point meta.ogImage and meta.twitterImage at your own file under public/; a 1200 by 630 picture fills the large preview cards best.
Logo and icons
- The storefront's logo is its name in text, from
storeName, in the navbar (src/layouts/app/NavBar/components/Logo.tsx) and the footer (src/layouts/app/footer/components/FooterBrandIntro.tsx). To use an image instead, put your own image inLogo.tsx. The storefront'slogo-for-lightmode.pngandlogo-for-darkmode.pngfiles are not used. - The admin's logo, in the header and on the sign-in page, is two images, one per theme: replace
public/assets/images/logo-for-lightmode.pngandlogo-for-darkmode.png, keeping their names.src/styles/theme-variables.csspoints at them through--logo-bg-image. - Replace the favicon and app icons in each app's
src/app/andpublic/, keeping the file names, so the manifests and the browser keep finding them.
Colours and themes
Each app defines its colours as CSS variables in src/styles/theme-variables.css: one set under :root for the light theme and one under .dark for the dark theme. The accent is --primaryColor, #ee8038 in both apps.
| Variable | What it colours |
|---|---|
--primaryColor, --primaryColorHover | Buttons, links and highlights |
--accent-text | Accent-coloured text on light surfaces (storefront only) |
--background | The page |
--surface, --surface-hover | Cards, panels and their hover (the storefront adds --surface-elevated) |
--text, --text-muted | Body text and secondary text |
--border | Dividers and input outlines |
- Change a colour in both sets, so the two themes stay in step.
- The theme follows the visitor's system until they pick one with the toggle, which is then remembered in the browser.
themeinbrand.config.tsis only the browser's toolbar colour, not the interface's.
Fonts
The storefront loads three Google Fonts with one link in src/app/layout.tsx: Plus Jakarta Sans for all Latin text, set on body in src/styles/base.css; Zain for Arabic text, in the same file; and IBM Plex Sans Arabic for Arabic headlines, through the .font-display-ar class in src/styles/utilities.css.
To change one, replace its family in the Google Fonts link in layout.tsx, then the matching font-family in those CSS files. Pick an Arabic font that has the weights the pages use.
The admin dashboard loads no web font and uses the system font stack. Add one the same way if you want it.
Find every mention of the name
The storefront's messages do not repeat the name: the footer's copyright fills it in from storeName. The dashboard's name appears in its own copy. Check both apps:
storefrontgrep -rn "STORE\|ستور" src messagesadmin-dashboardgrep -rn "Aniq\|أنيق" src messagesThe API
The API carries no brand of its own and sends no email. Its sign-in and error messages are plain text in back-end/src/i18n/translations/<locale>/.