v2.0.0

Design System DEFIM

Documentación viva de los componentes, tokens y patrones visuales del sitio. Esta página es la fuente de verdad para mantener consistencia en futuras iteraciones.

Última actualización: junio de 2026·Soporte completo Modo Claro / Oscuro

2. Tokens de color

2.1 Paleta Primitiva

Valores base que no cambian con el tema.

Navy 900

#0f1a36

Cream 50

#f6f5f0

Gold 500

#c9a04e

White

#ffffff

2.2 Tokens Semánticos

Variables CSS que se adaptan automáticamente al modo claro/oscuro.

Token	Uso	Ejemplo
--bg-page	Fondo principal de la página
--bg-surface	Fondo de cards y bloques
--bg-inverse	Fondo invertido intencional
--text-primary	Texto principal	Aa
--text-muted	Texto secundario/microcopy	Aa
--accent-primary	Dorado principal

3. Tipografía

Familias

Cormorant Garamond

Serif. Usada para títulos, headlines y citas.

Inter

Sans-serif. Usada para cuerpo, UI y microcopy.

Escala Tipográfica

H1 Hero (text-4xl md:text-5xl lg:text-6xl)

Defensa Tributaria

H2 Sección (text-3xl md:text-4xl)

Nuestros Servicios

H3 Card (text-xl md:text-2xl)

Caso Administrativo

Body Large (text-lg font-light)

La mayoría de los casos tributarios se pierden antes de empezar por errores estratégicos.

Eyebrow (text-xs uppercase tracking-widest text-accent)

NUESTRA HISTORIA

Italic Serif Destacado

experiencia interna

4. Espaciado y layout

Container: Ancho máximo 1200px (usando clase container). Para herramientas interactivas (Test de Riesgo) se usa max-w-[720px].
Padding de secciones: py-24 en desktop, py-16 en mobile.
Gaps: gap-8 o gap-12 para grids principales.
Breakpoints: Mobile-first. md: (768px) para tablet, lg: (1024px) para desktop.

5. Botones

Botón Primario

CTA principal. Usa color dorado constante.

Botón Ghost / Outline

Acciones secundarias.

Sobre Fondo Invertido

Link Button

6. Inputs y formularios

Input de texto

Buscador (con ícono)

Textarea

Select

Radio Group (Estilo Test)

Opción seleccionable

Opción seleccionada

6b. Uso del Logo

El logo de DEFIM se presenta en dos versiones según el fondo sobre el que se coloca. Nunca deformar, rotar ni cambiar su color manualmente.

Sobre fondo claro

className="brightness-0"

Usar sobre fondos blancos, crema o cualquier fondo claro.

Sobre fondo oscuro

className="brightness-0 invert"

Usar sobre fondos navy, oscuros o el hero del sitio.

Sobre fondo dorado (accent)

className="brightness-0"

Usar la versión oscura (navy) sobre el dorado. Evitar la versión blanca sobre dorado.

Reglas de uso

No cambiar las proporciones ni escalar de forma no uniforme.
Espacio mínimo alrededor del logo equivalente a la altura de la "D".
No colocar sobre fondos con poco contraste o imágenes muy complejas.
El logo no lleva contorno, sombra ni efecto adicional en ninguna versión.
En modo oscuro del sitio, usar siempre la versión blanca (brightness-0 invert).

7. Componentes de contenido

Acordeón (FAQ)

Cards de Especialista

Defensa Civil Tributaria

con Javier Undurraga

Item de lista

Defensa Penal Tributaria

con Francisca Cisternas

Item de lista

Pills de Zona (Test de Riesgo)

RIESGO BAJO

RIESGO ELEVADO

RIESGO CRÍTICO

CASO ADMINISTRATIVO

8. Componentes especializados

Termómetro de Riesgo

TU NIVEL

Selector 3 Tarjetas (Clasificador)

Theme Toggle

Implementado en el Navbar

9. Patrones de animación

Fade-up: Usado en todos los elementos al hacer scroll (AOS). Transición suave desde abajo.
Hover lift: Las tarjetas y botones se elevan -translate-y-1 o -translate-y-3 y proyectan sombra al hacer hover.
Auto-avance: En el Test de Riesgo, hay un delay de 380ms tras seleccionar una opción antes de avanzar.
Transición de tema: 0.3s ease en colores de fondo y texto al cambiar entre modo claro y oscuro.

10. Iconografía

Librería principal: lucide-react. Los íconos heredan currentColor.

11. Voz y tono

Idioma: Español neutro con tuteo (Chile). No usar voseo ni regionalismos.

Tono: Profesional, directo, consultor jurídico. Sin adjetivos vacíos como "premium" o "excelencia".

Estructura base: Problema del cliente → Diferenciador del estudio → CTA claro.

Regla estricta: Usar "Preguntas frecuentes", NUNCA la sigla "FAQ" en texto visible.

12. CTAs estandarizados

"Agenda tu diagnóstico gratuito": CTA principal en todo el sitio. Dispara el modal.
"Quiero saber más": CTA secundario en cards de especialista.
"Comenzar test": Entrada al Test de Riesgo.
"Ver mi diagnóstico completo": Submit del formulario de captura en /riesgo.
"Descargar informe en PDF": Acción secundaria post-captura.

13. Páginas especializadas

Home (/)Test de Riesgo (/riesgo)Preguntas (/preguntas-frecuentes)Nosotros (/nosotros)

14. Tracking y eventos

Evento	Ubicación
test_riesgo_iniciado	/riesgo
test_riesgo_captura_lead	/riesgo
clasificador_caso_seleccionado	Home (Clasificador)
preguntas_frecuentes_busqueda_realizada	/preguntas-frecuentes
tema_cambiado	Header (Toggle)

15. Accesibilidad

Contraste WCAG AA (4.5:1) validado en modo claro y oscuro.
Atributos ARIA en componentes interactivos (Acordeones, Toggles).
Focus visible en navegación por teclado.
Áreas táctiles mínimas de 44x44px en dispositivos móviles.