Image de marque

Où se trouve la marque

Chaque couleur est un token défini une fois pour le thème clair et une fois pour le thème sombre. Les composants ne lisent que des tokens : un token modifié atteint donc chaque écran. Changez une couleur de marque dans les deux blocs, sinon un thème garde l'ancienne.

Le nom et les textes du site

• Le nom dans les titres d'onglet et les cartes de partage est Metadata.siteName dans messages/layout/en.json et ar.json, avec le titre par défaut, la description et le texte alternatif de l'image de partage à côté. Le nom accessible du logo est Common.brand, et la ligne de copyright est Footer.copyright.
• Le titre et la description propres à chaque page se trouvent sous meta dans son namespace de messages/, par exemple PricingPage.meta dans messages/pricing/.
• Le nom du produit apparaît aussi dans des phrases, écrit Northstack en lettres latines dans les deux langues : cherchez-le dans messages/ et src/content/ et réécrivez ces lignes. La documentation, le journal et le changelog de src/content/ décrivent Northstack lui-même et vous pouvez les réécrire.

Le lockup, l'icône et les formes du site

Remplacez les deux fichiers de lockup par les vôtres, sous les mêmes noms. Leurs proportions sont écrites dans LOCKUP_RATIO dans src/components/Logo.tsx (379.24 par 68 tel que livré) : réglez-le sur la largeur de votre lockup divisée par sa hauteur, pour que l'en-tête garde sa taille.

Les couleurs et la typographie du site

Les couleurs de la barre du navigateur (#f1ece3 et #171717) sont themeColor dans src/app/[locale]/layout.tsx. Vérifiez que le texte sur vos couleurs reste lisible à 4,5 pour 1 dans les deux thèmes.

Les polices sont livrées avec l'application, un build ne les télécharge donc jamais : Inter pour le texte latin (src/fonts/InterVariable-latin.woff2, chargée dans src/fonts/fonts.ts), Noto Sans Arabic pour le texte arabe et Almarai pour les titres arabes (public/fonts/, déclarées dans src/styles/fonts.css et préchargées sur les pages arabes). Chacune a sa licence SIL Open Font License à côté. Pour en changer une, placez son fichier .woff2 dans le même dossier, faites pointer la déclaration vers lui, et gardez sa licence à côté.

Résultats de recherche, partage et domaine

• NEXT_PUBLIC_SITE_URL est la base de chaque adresse canonique, des alternatives de langue, des cartes de partage, de robots.txt et du sitemap. Définissez-la avec votre vraie adresse avant le build.
• Les prix sont écrits de la même façon dans les deux langues, le signe dollar en premier avec des chiffres latins, par src/lib/format/formatUsd.ts.
• Les métadonnées de la page nomment Aniq-UI comme auteur (authors dans src/app/[locale]/layout.tsx) : mettez-y votre propre nom.

Clair et sombre

• Le site propose System, Light et Dark dans son menu Theme. System suit le système d'exploitation. Le choix est gardé dans le localStorage du navigateur sous northstack-theme, et un script de l'en-tête de la page l'applique avant le premier affichage : un rechargement ne fait donc jamais clignoter l'autre thème.
• Le tableau de bord a un seul bouton de thème dans sa barre supérieure, un disque à moitié plein nommé Toggle theme pour les lecteurs d'écran, qui bascule entre clair et sombre. Tant qu'on n'appuie pas dessus, le tableau de bord suit le système d'exploitation. Le choix est gardé dans localStorage sous theme et appliqué avant le premier affichage de la même façon.
• Rien du thème n'est envoyé à l'API.

Le nom, le lockup et les couleurs du tableau de bord

• Nom : name dans BRAND_CONFIG (src/config/brand.config.ts) est la moitié « marque » de chaque titre d'onglet (Team | Northstack), le texte alternatif du logo et le nom de l'application installée. Il est identique dans les deux langues. Le titre de chaque page se trouve sous pages dans messages/metadata/en.json et ar.json, et le titre et la description par défaut sous site. Le nom du produit apparaît aussi dans des phrases de messages/, en lettres latines dans les deux langues.
• Métadonnées : meta.keywords, meta.author (Aniq-UI tel que livré : mettez le vôtre) et meta.ogImage, l'image qu'affiche un lien partagé, avec sa taille. Telle que livrée, c'est l'icône d'application de 512 par 512, qui se partage en petite carte ; une image de 1200 par 630 se partage en grande carte. theme.light et theme.dark sont les couleurs de la barre du navigateur, et manifest les couleurs et icônes de l'application installée.
• Lockup et symbole : remplacez logo-light.svg, logo-dark.svg, mark-light.svg et mark-dark.svg dans public/brand/, en gardant les noms, et réglez logo.width et logo.height sur les proportions du nouveau lockup. Le symbole seul s'affiche dans la barre latérale réduite et l'en-tête du téléphone, dessiné aux proportions 100 par 48 dans src/components/ui/BrandLogo.tsx.
• Icônes : src/app/favicon.ico (l'onglet), src/app/icon0.svg et src/app/icon1.png, src/app/apple-icon.png (écrans d'accueil de l'iPhone et de l'iPad), et public/web-app-manifest-192x192.png et public/web-app-manifest-512x512.png pour l'application installée.
• Couleurs : la palette (--paper, --ink, --red, --cobalt, --sunflower), les surfaces et le texte, les filets (--border, --border-strong), les actions, les marques de statut (--status-progress, --status-review, --status-blocked, --status-done) et la couleur des graphiques, dans src/styles/theme-variables.css, une fois par thème. Les formes sont dessinées par src/components/ui/Shape.tsx à partir de public/shapes/, et les personnes sans photo apparaissent comme des carrés avec leurs initiales.
• Polices : Inter pour le texte latin et IBM Plex Sans Arabic pour l'arabe, depuis src/fonts/ (avec leurs licences), chargées dans src/styles/fonts.ts.
• Adresses : NEXT_PUBLIC_BASE_URL est l'adresse propre du tableau de bord (robots.txt, sitemap, métadonnées et adresse de l'espace de travail dans l'onboarding et les paramètres) et NEXT_PUBLIC_WEBSITE_URL celle du site (les liens Documentation, Privacy et Terms).

Le tableau de bord écarte chaque page des moteurs de recherche (noindex dans l'en-tête de la page et un en-tête X-Robots-Tag), comme il se doit pour un panneau d'administration.

Où l'API écrit le nom du produit

Les paramètres de la plateforme initialisent un Product name, un Tagline et une Support address (back-end/src/database/seeders/app-settings.seeder.ts), modifiés dans la page Settings de la plateforme du tableau de bord. Parmi eux, seul l'assistant IA lit le Product name et la Support address, pour nommer le produit dans ses réponses ; les écrans prennent le nom dans les fichiers ci-dessus.

Textes et pages légales

Chaque phrase visible se trouve dans messages/ (et les longs textes du site dans src/content/), avec un en.json et un ar.json. Réécrivez le texte dans les deux fichiers. La politique de confidentialité, les conditions d'utilisation, la politique de cookies et la page des droits sur les données de messages/legal sont des textes d'exemple, avec une date « Last updated » d'exemple : réécrivez-les pour votre activité et votre pays avant d'accueillir de vrais clients.

• Langues