Appearance
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 usefrom-secondary to-primarywithbg-clip-textwhere applicable, notaccent(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-foregroundwith opacity, not hardcoded white. - Success states use the
successtoken, 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.tsxandapps/panel/src/features/auth/components/* - Business auth:
apps/panel/src/features/auth/business-auth-flow.tsx