Skip to content

Panel Domain Docs

Public marketing and auth surfaces

The /, /auth, and /business routes share one visual system: only semantic tokens from apps/panel/src/index.css (Tailwind theme colors such as primary, secondary, accent, muted, card, border, success, and *-foreground). Avoid raw hex or default palette utilities (for example text-white, bg-white, green-500) on these flows.

Conventions

  • Orange / high-intent CTAs map to secondary / secondary-foreground (brand orange in :root). Hero emphasis lines and orange→purple gradients use from-secondary to-primary with bg-clip-text where applicable, not accent (pale purple) for the orange stop.
  • Purple brand surfaces map to primary / primary-foreground.
  • Text and glass panels on the auth left column use primary-foreground with opacity, not hardcoded white.
  • Success states use the success token, not arbitrary greens.

On white card surfaces, prefer primary for icons and tinted wells (primary/10, primary/20). accent is intentionally pale in light mode and is a poor choice for small icons on white (low contrast).

Agency subdomain vs apex on the landing page

When the hostname is an agency tenant subdomain (see isAgencySubdomain() in apps/panel/src/shared/lib/agency-subdomain.ts; excludes www, panel, app, etc.), the marketing landing does not show the “Construye Tu Agencia IA” card—visitors are already on a white-label host. The “Potencia Tu Negocio” path and adjusted section copy remain.

Relevant implementation paths:

  • Landing: apps/panel/src/features/onboarding/welcome-landing.tsx
  • Subdomain detection: apps/panel/src/shared/lib/agency-subdomain.ts
  • Agency auth: apps/panel/src/features/auth/auth.tsx and apps/panel/src/features/auth/components/*
  • Business auth: apps/panel/src/features/auth/business-auth-flow.tsx