Branding

Where the brand lives

Every colour is a token defined once for the light theme (:root) and once for the dark theme (:root[data-theme="dark"]). Components read tokens only, so a changed token reaches every page. Change a brand colour in both blocks, or one theme keeps the old one.

The website's name, contact email and market

In storefront/src/config/brand.config.ts:

name: { en: "Velra", ar: "فيلرا" },          // tab titles, sharing cards, the wordmark, the manifest
contactEmail: "hello@velra.example",          // until the dashboard's settings answer
market: {
  currency: "AED",        // prices without a currency of their own, budget ranges, the footer
  timeZone: "Asia/Dubai", // viewing slots and dates
  utcOffset: "+04:00",    // the offset a viewing's preferred time is sent in
  areaServed: "Dubai",    // the agency's structured data for search engines
},

The wordmark beside the mark is live text, so it follows name. The name and the city also appear in sentences, in both languages: search messages/ for Velra and فيلرا, and for Dubai and دبي, and rewrite those lines. The time zone hint in messages/viewing says UTC+4.

The website's mark, icons and photos

Replace the files and keep their names, or change mark.color and mark.white in the brand config. The agency's own photos (the studio, the reception, the buying and renting panels, the property type tiles) are served by the API from public/media/velra/site/ in the API's folder: replace them under the same names. agency-studio.webp is also the sharing image of every page that has no property of its own.

The website's colours and type

storefront/BRANDING.md lists every token. Check that text on your colours still reads at 4.5 to 1 in both themes. The fonts load with next/font/google, so they are served with the build: Manrope for Latin text, Noto Sans Arabic for Arabic text, and Cormorant Garamond and Noto Naskh Arabic for headings. The browser bar colours are themeColor.light and themeColor.dark in the brand config.

Search results, sharing and the domain

• NEXT_PUBLIC_SITE_URL is the base of every canonical address, the language alternates, the sharing cards, robots.txt and the sitemap. Set it to your real address before you build.
• Page titles and descriptions are under meta in each namespace of messages/ (the home page's in messages/home, the default in messages/layouts). A property page uses the property's own SEO title and description, written in the editor, and its cover photo.
• Prices are formatted in src/lib/utils/formatPrice.ts as the currency code followed by the amount in Latin digits (AED 4,850,000); rentals add the period from the translations. The budget ranges in the search are in src/constants/search/priceRanges.ts.

Light, dark and system

Both apps have a theme menu with System, Light and Dark. System follows the operating system and changes when it does. The choice is kept in the browser's localStorage (velra-theme on the website, velra-admin-theme in the dashboard), nothing is sent to the API, and a short script in the page head applies it before the first paint, so a reload never flashes the other theme.

The dashboard's name, mark and colours

• Name: name in src/config/brand.config.ts is the wordmark and the brand half of every page title (Properties | Velra); meta holds the default title, description and keywords, domain.url the base of absolute metadata URLs, manifest the installable app. Each page's own title is under meta.titles in the dashboard and auth namespaces of messages/.
• Mark: replace public/brand/velra-mark.svg and velra-mark-white.svg, keeping the names. The browser tab icon is src/app/icon0.svg, the iPhone icon src/app/apple-icon.png, and the installable app's icons the two web-app-manifest files in public/.
• Colours: --primaryColor, --primaryColorHover, --primary-foreground and --primary-tint, --background, --surface, --text, --text-muted, --border and --errorColor, plus the --tone-* pairs for status pills, in src/styles/theme-variables.css, once per theme. Which status takes which tone is in src/config/statusTones.ts.
• Fonts: Manrope, Noto Sans Arabic, Cormorant Garamond and Noto Naskh Arabic, loaded in src/app/layout.tsx and assigned in src/styles/base.css.

The agency's own details

The agency's name, tagline, description, contact email and city are settings, edited in the dashboard under Settings, Agency, and read by the website from GET /api/settings/public. The seed stores them as agency_name, agency_tagline_en, agency_tagline_ar, agency_description_en, agency_description_ar, contact_email and agency_city. The homes the home page features, and the home whose staged room it shows, are set under Settings, Homepage.

The brand logo itself is not uploaded in the dashboard: it comes from the files above.

Wording and the privacy policy

Every visible sentence is in messages/, one folder per area with en.json and ar.json; amenity names are in messages/amenities. Rewrite the copy in both files. The privacy policy in messages/privacy is template copy written for a fictional agency and says so on the page: rewrite it for your agency and your country before you go live, then remove that note (the last paragraph of src/features/privacy/components/PrivacyHeader.tsx and its templateNote key in both files).

• Languages