Branding

Where the brand lives

Every colour is a token defined once for the light theme and once for the dark theme. Components read tokens only, so a changed token reaches every screen. Change a brand colour in both blocks, or one theme keeps the old one.

The website's name and texts

• The name in tab titles and sharing cards is Metadata.siteName in messages/layout/en.json and ar.json, with the default title, description and the sharing picture's alternative text beside it. The logo's accessible name is Common.brand, and the copyright line is Footer.copyright.
• Each page's own title and description are under meta in its namespace of messages/, such as PricingPage.meta in messages/pricing/.
• The product name also appears in sentences, written Northstack in Latin letters in both languages: search messages/ and src/content/ for it and rewrite those lines. The documentation, journal and changelog in src/content/ describe Northstack itself and are yours to rewrite.

The website's lockup, icon and shapes

Replace the two lockup files with your own under the same names. Their proportions are written in LOCKUP_RATIO in src/components/Logo.tsx (379.24 by 68 as shipped): set it to your lockup's width divided by its height, so the header keeps its size.

The website's colours and type

The browser bar colours (#f1ece3 and #171717) are themeColor in src/app/[locale]/layout.tsx. Check that text on your colours still reads at 4.5 to 1 in both themes.

The fonts ship with the app, so a build never downloads them: Inter for Latin text (src/fonts/InterVariable-latin.woff2, loaded in src/fonts/fonts.ts), Noto Sans Arabic for Arabic text and Almarai for Arabic headlines (public/fonts/, declared in src/styles/fonts.css and preloaded on Arabic pages). Each has its SIL Open Font License beside it. To change one, put its .woff2 file in the same folder, point the declaration at it, and keep its licence beside it.

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.
• Prices are written the same way in both languages, the dollar sign first in Latin digits, by src/lib/format/formatUsd.ts.
• The page metadata names Aniq-UI as its author (authors in src/app/[locale]/layout.tsx): put your own name there.

Light and dark

• The website offers System, Light and Dark in its Theme menu. System follows the operating system. The choice is kept in the browser's localStorage as northstack-theme, and a script in the page head applies it before the first paint, so a reload never flashes the other theme.
• The dashboard has one theme button in its top bar, a half-filled disc labelled Toggle theme for screen readers, that switches between light and dark. Until it is pressed, the dashboard follows the operating system. The choice is kept in localStorage as theme and applied before the first paint the same way.
• Nothing about the theme is sent to the API.

The dashboard's name, lockup and colours

• Name: name in BRAND_CONFIG (src/config/brand.config.ts) is the brand half of every tab title (Team | Northstack), the logo's alternative text and the installed app's name. It is the same in both languages. Each page's title is under pages in messages/metadata/en.json and ar.json, and the default title and description under site. The product name also appears in sentences in messages/, in Latin letters in both languages.
• Metadata: meta.keywords, meta.author (Aniq-UI as shipped: put your own) and meta.ogImage, the picture a shared link shows, with its size. As shipped it is the 512 by 512 app icon, which shares as a small card; a picture of 1200 by 630 shares as a large one. theme.light and theme.dark are the browser bar colours, and manifest the installed app's colours and icons.
• Lockup and mark: replace logo-light.svg, logo-dark.svg, mark-light.svg and mark-dark.svg in public/brand/, keeping the names, and set logo.width and logo.height to the new lockup's proportions. The mark alone shows in the collapsed sidebar and the phone header, drawn at 100 by 48 proportions in src/components/ui/BrandLogo.tsx.
• Icons: src/app/favicon.ico (the tab), src/app/icon0.svg and src/app/icon1.png, src/app/apple-icon.png (iPhone and iPad home screens), and public/web-app-manifest-192x192.png and public/web-app-manifest-512x512.png for the installed app.
• Colours: the palette (--paper, --ink, --red, --cobalt, --sunflower), the surfaces and text, the rules (--border, --border-strong), the actions, the status marks (--status-progress, --status-review, --status-blocked, --status-done) and the chart colour, in src/styles/theme-variables.css, once per theme. The shapes are drawn by src/components/ui/Shape.tsx from public/shapes/, and people without a picture as squares with their initials.
• Fonts: Inter for Latin text and IBM Plex Sans Arabic for Arabic, from src/fonts/ (with their licences), loaded in src/styles/fonts.ts.
• Addresses: NEXT_PUBLIC_BASE_URL is the dashboard's own address (robots.txt, the sitemap, metadata and the workspace address in onboarding and settings) and NEXT_PUBLIC_WEBSITE_URL the website's (the Documentation, Privacy and Terms links).

The dashboard keeps every page out of search engines (noindex in the page head and an X-Robots-Tag header), as an admin panel should.

Where the API writes the product name

The platform settings seed a Product name, a Tagline and a Support address (back-end/src/database/seeders/app-settings.seeder.ts), edited on the dashboard's platform Settings page. Of these, only the AI assistant reads the Product name and the Support address, to name the product in its answers; the screens take the name from the files above.

Wording and the legal pages

Every visible sentence is in messages/ (and the website's long texts in src/content/), with an en.json and an ar.json. Rewrite the copy in both files. The privacy policy, terms of use, cookie policy and data rights page in messages/legal are sample texts, with a sample "Last updated" date: rewrite them for your business and your country before you take real customers.

• Languages