Branding

Where the brand lives

Every colour is a token defined once for the light theme and once for the dark theme. Nothing in the markup holds a colour of its own, so a changed token reaches every page.

The website's name

In storefront/src/config/brand.config.ts, each name has an English and an Arabic value:

name:      { en: "Food Studio", ar: "فود ستوديو" },   // the restaurant
company:   { en: "Food Studio", ar: "فود ستوديو" },   // legal or trading name
shortName: { en: "Food Studio", ar: "فود ستوديو" },   // tab titles and the app icon label
storeName: "Food Studio",                    // the logo link's accessible name

The name reaches the page titles, the footer copyright, the installable app's manifest and the structured data search engines read.

The website's logo and icons

The header shows one logo file per language and theme, in storefront/public/brand/. Each is the whole lockup, mark and lettering in one image.

• Replace them with your own and set each file's width, at a height of 176, in LOCKUPS in src/layouts/app/NavBar/components/Logo.tsx.
• The home-screen icons are public/web-app-manifest-192x192.png and public/web-app-manifest-512x512.png; the browser icons are favicon.ico, icon0.svg, icon1.png and apple-icon.png in src/app/.
• The star in the rewards section is public/brand/rewards-star.svg.

The website's colours and type

Both are in storefront/src/styles/theme-variables.css, once per theme. Check that text on your new brand colour still reads at 4.5 to 1 in both themes. The type is Montserrat for the display headings, Inter for Latin body text and IBM Plex Sans Arabic for Arabic, loaded in src/app/layout.tsx. The browser bar and splash colours are theme and manifest in the brand config.

Search results, sharing and the domain

• meta in the brand config holds the home page's title, description and keywords in both languages, and the sharing image, public/og-image.jpg at 1200 by 630. Replace that image with your own.
• Every other page takes its title and description from messages/seo/en.json and messages/seo/ar.json. A dish page uses the dish's own name, description and first picture.
• domain.url is the base of every canonical address, the sitemap and the robots file. Set it to your real address before you deploy.

Contact details and links

contact in the brand config holds the restaurant-wide email, phone and address, and links the website and social links. The address shows only when the API has no kitchen to show: kitchen addresses, phone numbers and hours on the contact and locations pages come from the kitchens you edit in the dashboard.

The dashboard's name, logo and colours

• Name: messages/layouts/en.json and ar.json, under brand and navbar, hold the name, the page title, the description and the footer line. name and company in src/config/brand.config.ts are the same names where text is needed outside a translation. Search messages/ for "Food Studio" to catch the rest.
• Logo: replace mark.svg, wordmark-white.webp, wordmark-master.webp, wordmark-ar-white.webp and wordmark-ar-master.webp in public/brand/, keeping the names, or point logo in the brand config at new files with their width at a height of 176. The installable app's icons are the two web-app-manifest files in public/, and the favicon is src/app/icon.svg.
• Colours: --primaryColor and --on-primary (the brand colour and the text on it), --brand-highlight and --brand-text (the brand colour as text or an outline), --background, --surface and --border, --text and --text-muted, and --errorColor, --success and --warning, in src/styles/theme-variables.css, once per theme.
• Type: the --font-sans token in src/styles/base.css, Inter Variable by default.
• Address: NEXT_PUBLIC_DASHBOARD_URL in the dashboard's .env.

The restaurant's own details

The seed stores the restaurant's name, tagline, support email and phone as settings: site_name, site_tagline, support_email and support_phone. Staff change them in the dashboard under Settings, Restaurant, All settings by key. The kitchens' names, addresses and contact details are edited there too.

Wording and legal texts

Every visible sentence is in messages/, one folder per area with en.json and ar.json. Rewrite the copy in both files. The privacy policy and terms of service in messages/legal are written for a fictional restaurant: replace them with texts that fit your business and your country before you go live.

• Languages