Reglas de Diseño - Presupuesto Público Bolivia

Identidad Visual

Este proyecto sigue las directrices del Manual de Identidad Gráfica del MEFP, adaptadas para una experiencia web moderna y de primer nivel.

Paleta de Colores

Colores Principales (Institucionales)

Nombre	Hex	Uso
Dorado	#C9A751	Acentos, títulos destacados, líneas divisorias
Rojo Institucional	#B91817	Alertas, elementos de énfasis
Grafito	#363534	Texto principal, fondos oscuros

Colores de la Bandera Nacional

Nombre	Hex	Uso
Rojo Bandera	#DB281C	Decorativo, acentos nacionales
Amarillo	#F4E410	Highlights, estados activos
Verde	#007C38	Estados de éxito, indicadores positivos

Colores Secundarios / Neutros

Nombre	Hex	Uso
Crema (Eggshell)	#F3EAD8	Fondos suaves, cards, secciones alternadas
Gris	#676767	Texto secundario, iconos

Escalas de Grises UI

• Fondo página: #FAFAFA o #F5F5F5
• Bordes: #E5E5E5
• Texto muted: #9CA3AF

Tipografía

Tipografía Principal: Qanelas

• Uso: Toda la interfaz (headings, body, UI)
• Pesos disponibles: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)
• Fallback: system-ui, -apple-system, sans-serif

Tipografía Institucional: Archivo Condensed

• Uso: Logo del producto, elementos de marca específicos
• Pesos disponibles: SemiBold, Bold, Black
• Nota: Usar con moderación, principalmente para branding

Escala Tipográfica

text-xs:   12px / 0.75rem
text-sm:   14px / 0.875rem
text-base: 16px / 1rem
text-lg:   18px / 1.125rem
text-xl:   20px / 1.25rem
text-2xl:  24px / 1.5rem
text-3xl:  30px / 1.875rem
text-4xl:  36px / 2.25rem
text-5xl:  48px / 3rem

Logos

Ubicación de archivos

static/
├── logos_claro/
│   ├── 04_Imagotipo MEFP espacio positivo.png  ← Fondos claros
│   └── 06_Isologo MEFP escala de grises.png
└── logos_oscuro/
    ├── 05_Imago MEFP horizontal espacio negativo.png  ← Fondos oscuros
    └── 05_Imagotipo MEFP espacio negativo.png

Uso del Logo

• Navbar fondo claro: Logo positivo (colores originales)
• Footer fondo oscuro: Logo negativo (blanco/dorado)
• Tamaño mínimo navbar: altura 40-48px

Principios de Diseño

Modernidad

• Espaciado generoso (padding, margins)
• Bordes redondeados suaves (rounded-lg, rounded-xl)
• Sombras sutiles (shadow-sm, shadow-md)
• Transiciones suaves (transition-all duration-200)

Jerarquía Visual

• Dorado para elementos de jerarquía (títulos, líneas, acentos)
• Grafito para texto principal
• Gris para texto secundario
• Crema para secciones de fondo alternado

Accesibilidad

• Contraste mínimo WCAG AA
• Tamaño de texto base 16px
• Áreas de toque mínimo 44x44px en móviles
• Focus visible en elementos interactivos

Componentes Clave

Navbar

• Fondo: blanco con borde dorado inferior sutil
• Logo MEFP a la izquierda
• Links con hover dorado
• Menú móvil con transición suave

Buscador

• Input con borde redondeado
• Focus ring dorado
• Resultados con fondo crema al hover

Cards

• Fondo blanco
• Borde sutil border-gray-200
• Hover con sombra elevada
• Padding generoso (p-6)

Botones

• Primario: fondo dorado, texto grafito
• Secundario: borde dorado, fondo transparente
• Estados hover con oscurecimiento sutil

Footer

• Fondo grafito (#363534)
• Texto claro
• Logo versión negativa
• Franja tricolor (rojo, amarillo, verde) arriba

Responsividad

Breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Mobile First

• Diseño base para móviles
• Mejoras progresivas en pantallas grandes
• Navegación colapsable en móviles
• Grids fluidos con grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Iconografía

• Usar Heroicons (outline) para consistencia
• Tamaño base: h-5 w-5
• Color: heredar del texto o usar gris

Animaciones

• Duración estándar: 200ms
• Easing: ease-in-out
• Usar para: hover states, transiciones de página, aparición de modales
• Evitar: animaciones excesivas que distraigan

---

Documento de referencia para mantener consistencia visual