DESIGN SYSTEM & BRAND GUIDELINES · VILALIA.COM

Manual de tokenización CSS &
dirección editorial Next.js.

Este manual establece las reglas visuales y técnicas de la web pública de Vilalia (vilalia.com) dentro de la carpeta /web montada en Next.js, garantizando coherencia absoluta con las referencias editoriales y separación total respecto al panel interno en /app (app.vilalia.com).

01 · ARQUITECTURA CROMÁTICA (`web/src/styles/tokens.css`)

Superficies cálidas y tintas orgánicas.

Nunca se utiliza blanco frío (#FFFFFF) como fondo de página. El sistema alterna entre papel marfil cálido (#FBFBF3) y piedra arena (#EEECE0), reservando el blanco táctil para elevar el botón de acción (Apply).

02 · SISTEMA DE SUBRAYADOS EDITORIALES (<mark>)

Caja de corte tipográfico & contraste exacto.

SOBRE LIENZO PIEDRA (#EEECE0)

La representación no es transaccional. Se considera con el tiempo.

03 · ARQUITECTURA DE DESPLIEGUE & DOMINIOS

Separación limpia: vilalia.com y app.vilalia.com

# Estructura del repositorio en Next.js:

vilalia/

├── web/ → vilalia.com (Landing page & PR editorial)

├── app/ → app.vilalia.com (Workspace & SynthAI Dashboard)

├── package.json → Monorepo con npm workspaces ("web", "app")

└── scripts/dev.js → Servidores concurrentes (:3000 y :3001)