Design System MPF

Version: 0.2.0

Instalacion

npm install @mpf-sde/design-system

CSS

import "@mpf-sde/design-system/css";

Tokens De Color

| Token |Valor |Uso | | --- | --- | --- | | --mpf-blue-950 | #101821 | Bloques oscuros, asistente virtual, footer y superficies de alto contraste. | | --mpf-blue-700 | #155a8f | Estructura de marca, enlaces importantes y estados activos. | | --mpf-blue-400 | #76AADC | Iconos, micro-accentos y senales informativas digitales. | | --mpf-blue-100 | #e6f4fe | Fondos informativos, chips y estados de seleccion suaves. | | --mpf-red-600 | #D54140 | Acento editorial, palabras destacadas, alertas suaves y llamadas sensibles. | | --mpf-red-800 | #a52a32 | Hover, estados criticos y contraste rojo sobre fondos claros. | | --mpf-ivory | #faf8f3 | Fondo principal del sitio y textura institucional. | | --mpf-paper | #faf8f5 | Tarjetas, paneles y areas de lectura. | | --mpf-ink | #1c2024 | Texto principal, encabezados UI y lineas fuertes. | | --mpf-muted | #60646c | Bajadas, metadatos, notas y contenido secundario. |

Configuracion

Los agentes y proyectos consumidores deben completar estas decisiones antes de disenar o migrar una interfaz:

| Campo |Pregunta |Opciones | | --- | --- | --- | | colorMode | El sistema debe usarse en modo claro, oscuro o con ambos modos? | light: Claro, dark: Oscuro, system: Sistema | | theme | Que tema institucional debe guiar la interfaz? | institutional: Institucional, editorial: Editorial, service: Servicios | | experience | Que tipo de experiencia se esta construyendo? | institutional-site: Sitio institucional, dashboard: Dashboard, landing: Landing, content-system: Contenido/CMS, form-workflow: Formulario/Tramite | | delivery | Como se va a integrar el design system en el proyecto existente? | css-first: CSS y assets, tailwind: Tailwind, react-adapter: React/Next/Astro, wordpress-theme: WordPress |