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: "Ticketory",                    // the manifest and search engines' structured data
description: "...",                   // the installable app's description
mark: "/brand/mark.svg",              // structured data for search engines
lockups: { en: {...}, ar: {...} },    // the header and footer logo, with each file's size
themeColor: { light: "#FFFBF0", dark: "#111111" }, // the browser bar
contactEmail: "support@example.test", // until the API's settings answer
market: {
  currency: "USD",           // money with no currency of its own
  timeZone: "Europe/London", // dates with no time zone of their own
},
keywords: ["events", "tickets", ...],

The name as each language writes it, used in tab titles and sharing cards, is meta.siteName in messages/layouts/en.json and ar.json. The product name also appears in sentences, in both languages: search messages/ for Ticketory and for its Arabic spelling, تيكيتوري, and rewrite those lines.

The website's lockups, icons and decorations

Each lockup is one finished image with a transparent background, trimmed to its content. Replace them with your own at any size and write each file's width and height into lockups in the brand config, so the header keeps its proportions.

The stars, waves, triangles, circles, dots and zigzags around the sections are the SVG files in public/decor/. Each section lists where its shapes sit in its feature's constants/ folder (the footer's in src/layouts/app/SiteFooter/constants/): delete a row to drop a shape, or put your own SVG in public/decor/ and add its file name to DecorAsset in src/components/Decorations/types.ts.

The website's colours and type

Text on the pink, yellow and teal fills is black (--on-accent), on blue and ink it is cream. Check that text on your colours still reads at 4.5 to 1 in both themes. Each event also carries its own ticket colour, chosen in the event editor.

The font files ship in src/fonts/ of each app, so a build never downloads them: Archivo Black for headlines (Lalezar in Arabic) and DM Sans for text (Noto Sans Arabic), all under the SIL Open Font License in src/fonts/OFL.txt. To change one, put the .woff2 file in src/fonts/, point the localFont call at it, and add its licence to OFL.txt.

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.
• The default title, description and sharing text are under meta in messages/layouts; each page's own are under meta in its namespace of messages/. An event page uses the event's title and summary.
• The sitemap lists the home, events, venues, organisers, pricing, FAQ, contact and legal pages, every public event, venue and organiser, each in both languages with its alternate. robots.txt keeps the account, checkout, order and sign-in pages out.
• Money is written the same way in both languages, the symbol first in Latin digits ($41.20), by src/lib/format/formatMoney.ts.

Light, dark and system

Both apps offer System, Light and Dark. System follows the operating system and changes when it does. The choice is kept in the browser's localStorage (ticketory-theme on the website, ticketory-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 browser bar colours are themeColor on the website and theme in the dashboard's brand config.

The dashboard's name, lockups and colours

• Name: name in src/config/brand.config.ts, in English and Arabic (Ticketory and تيكيتوري, also in company, shortName, the logo's alternative text and manifest), is the brand half of every page title (Events | Ticketory) and the lockup's alternative text; meta holds the default title, description and keywords and the sharing picture (public/og-image.jpg, 1200 by 630), domain.url the base of absolute metadata URLs (NEXT_PUBLIC_DASHBOARD_URL wins over it), manifest the installable app. Each page's own title is under meta.titles in the dashboard and auth namespaces of messages/.
• Lockups and icons: replace the four lockup-*.webp files and mark.svg in public/brand/, keeping the names, or change the paths and sizes in BRAND_LOCKUPS. 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: --background, --surface and --surface-elevated, --surface-hover, --surface-sunken, --text, --text-muted, --border, --primaryColor, the accents, --ink-button and --on-ink, --errorColor, --shadow-ink, and 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: DM Sans, Noto Sans Arabic, Archivo Black and Lalezar, loaded from src/fonts/ in src/app/layout.tsx and assigned in src/styles/base.css.

The organiser's own details

Each workspace's name, support email, currency (USD, EUR, GBP, SAR or AED), time zone and booking fee, which the attendee always pays at checkout, are settings, edited in the dashboard under Settings, General. The website reads them from GET /api/public/settings, with the seat hold length (ten minutes as seeded) and the payment methods on offer. Every event also carries its own time zone.

The brand lockups are not uploaded in the dashboard: they come from the files above.

Wording and the legal pages

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, terms and cancellation policy in messages/legal are sample texts: rewrite them for your business and your country before you sell real tickets.

• Languages