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 and fallbacks

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

// brand.config.ts
name: { en: "Hollina", ar: "Hollina" },     // tab titles, sharing cards, the wordmark, the manifest
tagline: { en: "...", ar: "..." },           // until the dashboard's settings answer
description: { en: "...", ar: "..." },       // the installable app's description
contactEmail: "hello@example.com",           // until the dashboard's settings answer
contactPhone: "+1 202 555 0147",             // until the dashboard's settings answer
keywords: ["vacation rental", ...],          // the meta keywords

// booking.config.ts
DEFAULT_TIMEZONE = "America/New_York";       // calendar days, "today", the i18n clock
DEFAULT_CURRENCY = "USD";                    // prices without a currency of their own

The wordmark beside the mark is live text set in Outfit (src/components/BrandMark.tsx), so it follows name. The company's name also appears in sentences, in both languages: search messages/ for Hollina and rewrite those lines. The reply time on the contact page and in the question dialog ("usually within a day") is copy in messages/contact and messages/inquiry.

The website's mark, icons and photographs

Replace the files and keep their names, or change mark.color and mark.white in the brand config. The company's own photographs are served by the API from public/media/hollina/site/ in the API's folder: 01-hero.webp (the sharing image of every page without a photograph of its own), how-dates.webp, how-pay.webp and how-arrive.webp (the three steps of "How it works") and host-desk.webp (the host team's card on the contact page). Replace them under the same names. Stay and destination photographs are uploaded in the dashboard.

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 font files ship in src/fonts/ and load with next/font/local, so a build never downloads them and the site makes no request to Google: Outfit for Latin text and the wordmark, Instrument Serif for the display headings, and Noto Sans Arabic for Arabic text, all under the SIL Open Font License. The map's area colour is STAY_AREA_COLOR in src/lib/map/mapConfig.ts, and the browser bar colours are themeColor.light and themeColor.dark in the brand config.

Search results, sharing, prices 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 stay page uses the stay's own SEO title and description, written in the editor, and its cover photograph.
• Prices are formatted in one place, src/lib/utils/formatPrice.ts, as the currency code followed by the amount in Latin digits (USD 240), and drawn by src/components/PriceDisplay. A nightly rate adds its period from the translations (/ night, common.stay.perNight in messages/common).

Light, dark and system

Both apps have a theme control with System, Light and Dark. System follows the operating system and changes when it does. The choice is kept in the browser's localStorage (hollina-theme on the website, hollina-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 (Bookings | Hollina); meta holds the default title, description, keywords and author, 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/, and the label beside the header's wordmark is header.workspace in messages/dashboard.
• Mark: replace public/brand/hollina-mark.svg and hollina-mark-white.svg, keeping the names; BrandMark paints them from the --logo-bg-image token in src/styles/theme-variables.css. 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, --on-primary, --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: Outfit and Noto Sans Arabic, shipped in src/fonts/, loaded in src/app/layout.tsx and assigned in src/styles/base.css.

The company's own details

What guests read about the company is data, not code. It is edited in the dashboard's settings and read by the website from GET /api/settings/public, which falls back to the brand config only until it answers.

The currency is USD and the time zone America/New_York, the only options the dashboard offers. 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. Rewrite the copy in both files. The privacy policy in messages/privacy is template copy and says so on the page: rewrite it for your company and your country before you go live, then remove that note (the framed panel in src/features/privacy/components/PrivacyHeader.tsx, and its templateNote key in both files). Its contact line shows the email from the dashboard's settings.

• Languages