Marca
Haz tuyos el sitio web y el panel: el nombre, los logotipos e iconos, los colores y la tipografía, las tarjetas para compartir, los temas, y los lugares donde la API escribe el nombre del producto.
Para el paquete Full Stack
Dónde está la marca
| Qué | Sitio web (website/) | Panel (dashboard/) |
|---|---|---|
| Nombre y metadatos | messages/layout/<locale>.json (Metadata, Common.brand), src/config/site.ts | src/config/brand.config.ts, messages/metadata/<locale>.json |
| Logotipo y marca | public/brand/, con el tamaño definido en src/components/Logo.tsx | public/brand/, con el tamaño definido en src/config/brand.config.ts |
| Iconos | src/app/icon.svg | src/app/ y los dos archivos web-app-manifest en public/ |
| Tarjeta para compartir | public/meta_image.png | meta.ogImage en src/config/brand.config.ts |
| Colores | src/styles/theme-variables.css | src/styles/theme-variables.css |
| Formas | public/shapes/ | public/shapes/ |
| Fuentes | src/fonts/ y public/fonts/ | src/fonts/ |
| Textos | messages/ y src/content/ | messages/ |
Cada color es un token definido una vez para el tema claro y otra para el tema oscuro. Los componentes leen solo tokens, así que un token cambiado llega a todas las pantallas. Cambia un color de marca en ambos bloques, o un tema conservará el anterior.
El nombre y los textos del sitio web
- El nombre en los títulos de pestaña y en las tarjetas para compartir es
Metadata.siteNameenmessages/layout/en.jsonyar.json, junto con el título por defecto, la descripción y el texto alternativo de la imagen para compartir. El nombre accesible del logotipo esCommon.brand, y la línea de derechos de autor esFooter.copyright. - El título y la descripción de cada página están bajo
metaen su espacio de nombres demessages/, comoPricingPage.metaenmessages/pricing/. - El nombre del producto también aparece en frases, escrito
Northstacken letras latinas en ambos idiomas: busca enmessages/ysrc/content/y reescribe esas líneas. La documentación, el diario y el registro de cambios desrc/content/describen el propio Northstack y puedes reescribirlos.
El logotipo, el icono y las formas del sitio web
| Archivo | Se usa para |
|---|---|
public/brand/logo-light.svg, public/brand/logo-dark.svg | El logotipo (marca y nombre dibujados juntos) en el encabezado, el pie y la vista previa del espacio de trabajo, en páginas claras y oscuras. El mismo logotipo sirve para ambos idiomas. |
src/app/icon.svg | El icono de la pestaña del navegador |
public/meta_image.png | La tarjeta para compartir, de 1200 por 630, nombrada en ogImage en src/config/site.ts, para todas las páginas. |
public/shapes/ | Los cuadrados, círculos, cuartos de círculo y triángulos dibujados alrededor de las secciones, por src/components/Shape.tsx |
Sustituye los dos archivos del logotipo por los tuyos con los mismos nombres. Sus proporciones están escritas en LOCKUP_RATIO en src/components/Logo.tsx (379.24 por 68 tal como se entrega): define el ancho de tu logotipo dividido por su alto, para que el encabezado conserve su tamaño.
Los colores y la tipografía del sitio web
| Token | Claro | Oscuro | Rol |
|---|---|---|---|
--background, --surface | #f1ece3 | #171717, #202020 | Página y paneles |
--text, --text-muted | #111111, #5d5e63 | #f1ece3, #b9b8b2 | Texto |
--border, --border-strong | #b8b5ad, #111111 | #696761, #b8b5ad | Líneas y contornos |
--primary | #111111 | #f1ece3 | Botones principales |
--brand-action | #c7492c | #c7492c | Los botones rojos de llamada a la acción |
--link, --focus | #1151d8 | #82a8ff | Enlaces y anillo de foco |
--red, --cobalt, --sunflower | #c7492c, #1151d8, #efbf43 | Lo mismo | Las formas y las marcas de estado |
--errorColor | #a83a20 | #e0714f | Errores |
Los colores de la barra del navegador (#f1ece3 y #171717) son themeColor en src/app/[locale]/layout.tsx. Comprueba que el texto sobre tus colores se sigue leyendo con una proporción de 4.5 a 1 en ambos temas.
Las fuentes se entregan con la aplicación, así que una construcción nunca las descarga: Inter para el texto latino (src/fonts/InterVariable-latin.woff2, cargada en src/fonts/fonts.ts), Noto Sans Arabic para el texto árabe y Almarai para los titulares árabes (public/fonts/, declaradas en src/styles/fonts.css y precargadas en las páginas árabes). Cada una lleva al lado su licencia SIL Open Font License. Para cambiar una, pon su archivo .woff2 en la misma carpeta, apunta la declaración a él y conserva su licencia a su lado.
Resultados de búsqueda, compartir y el dominio
NEXT_PUBLIC_SITE_URLes la base de cada dirección canónica, de las alternativas de idioma, de las tarjetas para compartir, de robots.txt y del mapa del sitio. Defínela con tu dirección real antes de construir.- Los precios se escriben igual en ambos idiomas, con el signo del dólar primero y dígitos latinos, mediante
src/lib/format/formatUsd.ts. - Los metadatos de la página nombran a Aniq-UI como autor (
authorsensrc/app/[locale]/layout.tsx): pon ahí tu propio nombre.
Claro y oscuro
- El sitio web ofrece System, Light y Dark en su menú Theme. System sigue el sistema operativo. La elección se guarda en el localStorage del navegador como
northstack-theme, y un script en la cabecera de la página la aplica antes del primer pintado, así que al recargar nunca parpadea el otro tema. - El panel tiene un botón de tema en su barra superior, un disco medio lleno etiquetado Toggle theme para los lectores de pantalla, que alterna entre claro y oscuro. Hasta que se pulsa, el panel sigue el sistema operativo. La elección se guarda en localStorage como
themey se aplica antes del primer pintado de la misma forma. - Nada del tema se envía a la API.
El nombre, el logotipo y los colores del panel
- Nombre:
nameenBRAND_CONFIG(src/config/brand.config.ts) es la parte de marca de cada título de pestaña (Team | Northstack), el texto alternativo del logotipo y el nombre de la aplicación instalada. Es el mismo en ambos idiomas. El título de cada página está bajopagesenmessages/metadata/en.jsonyar.json, y el título y la descripción por defecto bajosite. El nombre del producto también aparece en frases enmessages/, en letras latinas en ambos idiomas. - Metadatos:
meta.keywords,meta.author(Aniq-UI tal como se entrega: pon el tuyo) ymeta.ogImage, la imagen que muestra un enlace compartido, con su tamaño. Tal como se entrega es el icono de la aplicación de 512 por 512, que se comparte como una tarjeta pequeña; una imagen de 1200 por 630 se comparte como una grande.theme.lightytheme.darkson los colores de la barra del navegador, ymanifestlos colores e iconos de la aplicación instalada. - Logotipo y marca: sustituye
logo-light.svg,logo-dark.svg,mark-light.svgymark-dark.svgenpublic/brand/, conservando los nombres, y definelogo.widthylogo.heightcon las proporciones del nuevo logotipo. La marca sola se muestra en la barra lateral contraída y en el encabezado del móvil, dibujada con proporciones de 100 por 48 ensrc/components/ui/BrandLogo.tsx. - Iconos:
src/app/favicon.ico(la pestaña),src/app/icon0.svgesrc/app/icon1.png,src/app/apple-icon.png(pantallas de inicio de iPhone e iPad), ypublic/web-app-manifest-192x192.pngypublic/web-app-manifest-512x512.pngpara la aplicación instalada. - Colores: la paleta (
--paper,--ink,--red,--cobalt,--sunflower), las superficies y el texto, las líneas (--border,--border-strong), las acciones, las marcas de estado (--status-progress,--status-review,--status-blocked,--status-done) y el color de los gráficos, ensrc/styles/theme-variables.css, una vez por tema. Las formas las dibujasrc/components/ui/Shape.tsxa partir depublic/shapes/, y las personas sin imagen aparecen como cuadrados con sus iniciales. - Fuentes: Inter para el texto latino e IBM Plex Sans Arabic para el árabe, desde
src/fonts/(con sus licencias), cargadas ensrc/styles/fonts.ts. - Direcciones:
NEXT_PUBLIC_BASE_URLes la dirección propia del panel (robots.txt, el mapa del sitio, los metadatos y la dirección del espacio de trabajo en el alta inicial y en los ajustes) yNEXT_PUBLIC_WEBSITE_URLla del sitio web (los enlaces Documentation, Privacy y Terms).
El panel mantiene todas las páginas fuera de los buscadores (noindex en la cabecera de la página y una cabecera X-Robots-Tag), como corresponde a un panel de administración.
Dónde escribe la API el nombre del producto
| Dónde | Archivo |
|---|---|
El remitente de cada correo, SMTP_FROM (Northstack <no-reply@localhost> cuando está vacío) | back-end/.env, back-end/src/modules/mail/mail.service.ts |
| El asunto del correo de restablecimiento de contraseña | back-end/src/modules/auth/account.service.ts |
| El asunto del correo de invitación | back-end/src/modules/workspaces/services/invitations.service.ts |
| El encabezado y las líneas de la factura en PDF | back-end/src/modules/billing/services/billing.service.ts |
| El nombre del plan en la página de pago de Stripe | back-end/src/modules/billing/providers/stripe.provider.ts |
| Los nombres de las licencias en la página de pago y en el recibo | back-end/src/modules/licenses/constants/license-offers.ts |
Los ajustes de la plataforma cargan un Product name, una Tagline y una Support address (back-end/src/database/seeders/app-settings.seeder.ts), que se editan en la página Settings de la plataforma del panel. De ellos, solo el asistente de IA lee el Product name y la Support address, para nombrar el producto en sus respuestas; las pantallas toman el nombre de los archivos de arriba.
Textos y páginas legales
Cada frase visible está en messages/ (y los textos largos del sitio web en src/content/), con un en.json y un ar.json. Reescribe el texto en ambos archivos. La política de privacidad, las condiciones de uso, la política de cookies y la página de derechos sobre los datos de messages/legal son textos de ejemplo, con una fecha de ejemplo "Last updated": reescríbelos para tu negocio y tu país antes de aceptar clientes reales.