CentroMIPC
Branding System
Sistema de identidad visual corporativa diseñado por Orlando Gómez. Colores, tipografía, componentes y tokens CSS listos para usar en todas las apps de CentroMIPC.
Logo & Variantes
Cuatro variantes oficiales según el fondo de aplicación. Servir siempre desde el archivo SVG original — nunca exportar ni reescalar manualmente.
Ícono corporativo & Favicon
El ícono de rejilla circular es la firma visual más reconocible de CentroMIPC. Úsalo como favicon, avatar, watermark, elemento decorativo en fondos y patrones.
- Usar siempre los archivos SVG originales
- Respetar espacio de protección = altura del logo
- Variante blanca solo sobre fondos oscuros sólidos
- Variante color sobre fondo oscuro o fondo blanco
- Mínimo 32px de altura en digital, 15mm en impresión
- Favicon en formato SVG para web moderna
- No deformar, rotar ni estirar el logo
- No cambiar colores corporativos del logo
- No añadir sombras ni efectos directamente al logo
- No usar logo blanco sobre fondo claro
- No usar logo color sobre fotografías de alto contraste
- No reescalar desde PNG — siempre SVG
Paleta de colores
Dos colores de marca con sus variantes funcionales. El naranja lidera las acciones; el azul estructura y confía.
Tipografía
Conthrax para impacto y marca. Dosis para legibilidad y UI. Nunca mezclar con otras familias.
Escala tipográfica
Botones
Todos los botones usan border-radius: 50–100px (pill). El naranja lidera la acción principal; el azul para acciones secundarias estructurales.
/* Botón principal — border-radius: var(--cm-radius-pill) = 100px */
.btn-primary {
background: var(--cm-orange);
color: #fff;
border-radius: var(--cm-radius-pill); /* 100px */
padding: 12px 28px;
font-family: var(--cm-font-body);
font-weight: 700;
box-shadow: 0 4px 24px rgba(239,120,0,0.35);
transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
background: var(--cm-orange-hover);
transform: translateY(-1px);
}Inputs y formularios
Todos los campos usan border-radius: 100px (pill) con efecto glassmorphism. El textarea usa border-radius: 24px.
/* Input corporativo — pill radius + glass */
.cm-input {
border-radius: var(--cm-radius-pill); /* 100px */
background: var(--cm-glass-bg); /* rgba(255,255,255,0.06) */
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--cm-glass-border);
padding: 12px 22px;
font-family: var(--cm-font-body);
color: var(--cm-text-primary);
transition: all 0.22s ease;
}
.cm-input:focus {
border-color: var(--cm-orange);
box-shadow: 0 0 0 3px var(--cm-orange-glow);
}
/* Textarea usa border-radius: 24px, no pill */
.cm-textarea { border-radius: var(--cm-radius-card); }Badges y etiquetas
Chips de estado, categorías y metadata. Siempre en pill (100px), con fondo translúcido de su color.
Cards
Glassmorphism como base. Hover con elevación sutil. Radius de 24px en todas las cards.
Efecto Glassmorphism
Inspirado en Apple. Fondos semi-transparentes con blur, bordes sutiles y sombras profundas. La firma visual de CentroMIPC.
saturate(180%)
rgba(255,255,255,0.12)
rgba(0,0,0,0.35)
/* Receta glassmorphism CentroMIPC */
.glass-card {
background: var(--cm-glass-bg);
border: 1px solid var(--cm-glass-border);
border-radius: var(--cm-radius-card); /* 24px */
backdrop-filter: var(--cm-glass-blur);
-webkit-backdrop-filter: var(--cm-glass-blur);
box-shadow: var(--cm-glass-shadow);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.glass-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 48px rgba(0,0,0,0.40);
}Login
Idéntico en todas las apps de CentroMIPC. Se clona desde /api/patterns/login.html — no se rediseña. Esto da cohesión visual a toda la suite.
<link rel="stylesheet" href="…/api/tokens/css"> <link rel="stylesheet" href="…/api/components/login"> <!-- pega el HTML de /api/patterns/login.html -->
Cero rediseño — mismo orden de campos y estilo en cada proyecto.
Magic link (passwordless) — solo email, sin contraseñas; estados de envío y error con --cm-error incluidos.
Listo para IA — vía MCP (get_login) y en /api/ai/instructions.
Iconos PWA
Mismo símbolo MIPC, un degradado glass distinto por app. Instaladas en el móvil se ven como una familia coherente. Generados en vivo desde /api/pwa.
<link rel="manifest" href="…/api/pwa/marketing/manifest.webmanifest"> <link rel="icon" type="image/svg+xml" href="…/api/pwa/marketing/icon.svg"> <link rel="apple-touch-icon" href="…/api/pwa/marketing/icon.svg">
Espaciado
Escala de 8px. Generoso en todos los componentes para evitar saturación visual.
Radios de borde
CSS Tokens — Referencia completa
Copia este bloque en cualquier proyecto de CentroMIPC. Todo lo demás deriva de aquí.
/* ═══════════════════════════════════════
CENTROMIPC DESIGN TOKENS — v1.0
branding.centromipc.es/api/tokens/css
═══════════════════════════════════════ */
:root {
/* Marca */
--cm-orange: #EF7800;
--cm-orange-hover: #d46c00;
--cm-orange-glow: rgba(239,120,0,0.25);
--cm-orange-light: rgba(239,120,0,0.12);
--cm-blue: #009FE4;
--cm-blue-hover: #0088c5;
--cm-blue-glow: rgba(0,159,228,0.25);
--cm-blue-light: rgba(0,159,228,0.12);
/* Fuentes */
--cm-font-display: 'Conthrax', 'Arial Black', sans-serif;
--cm-font-body: 'Dosis', 'Segoe UI', sans-serif;
/* Escala tipográfica */
--cm-text-xs: 0.70rem; /* 11px */
--cm-text-sm: 0.875rem; /* 14px */
--cm-text-base: 1rem; /* 16px */
--cm-text-lg: 1.125rem; /* 18px */
--cm-text-xl: 1.375rem; /* 22px */
--cm-text-2xl: 1.75rem; /* 28px */
--cm-text-3xl: 2.25rem; /* 36px */
--cm-text-4xl: 3rem; /* 48px */
--cm-text-5xl: 4rem; /* 64px */
/* Radios — glassmorphism / pill style */
--cm-radius-xs: 6px;
--cm-radius-sm: 12px;
--cm-radius-md: 20px;
--cm-radius-lg: 30px;
--cm-radius-xl: 50px; /* botones md/lg */
--cm-radius-pill: 100px; /* botones xl, inputs */
--cm-radius-card: 24px; /* cards glass */
/* Glassmorphism */
--cm-glass-bg: rgba(255,255,255,0.06);
--cm-glass-border: rgba(255,255,255,0.12);
--cm-glass-blur: blur(20px) saturate(180%);
--cm-glass-shadow: 0 8px 40px rgba(0,0,0,0.35);
/* Sombras de marca */
--cm-shadow-orange: 0 4px 24px rgba(239,120,0,0.35);
--cm-shadow-blue: 0 4px 24px rgba(0,159,228,0.35);
/* Espaciado */
--cm-space-xs: 4px;
--cm-space-sm: 8px;
--cm-space-md: 16px;
--cm-space-lg: 24px;
--cm-space-xl: 40px;
--cm-space-2xl: 64px;
--cm-space-3xl: 96px;
/* Transición universal */
--cm-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}
/* Dark mode (por defecto en CentroMIPC) */
[data-theme="dark"] {
--cm-bg-page: #080e1a;
--cm-surface: rgba(255,255,255,0.05);
--cm-text-primary: #f0f4f8;
--cm-text-second: rgba(240,244,248,0.60);
--cm-border: rgba(255,255,255,0.10);
}
/* Light mode */
[data-theme="light"] {
--cm-bg-page: #F8FAFC;
--cm-surface: rgba(255,255,255,0.80);
--cm-text-primary: #1E293B;
--cm-text-second: rgba(30,41,59,0.65);
--cm-border: rgba(0,0,0,0.08);
}Iconografía
Colección oficial: Lucide Icons. Coherente con la estética glassmorphism — trazo lineal limpio, stroke-width 1.5, siempre currentColor.
AI-INSTRUCTIONS del <head> de este documento.# React
npm install lucide-react
# HTML vanilla
npx lucide build
# Por icono (shadcn)
npx shadcn@latest add
@icons0/lucide/settingsimport {
Settings,
BarChart2,
Users
} from 'lucide-react'
// Tamaño estándar UI
<Settings
size={18}
strokeWidth={1.5}
/>- Tamaño UI estándar:
18px - Stroke-width:
1.5 - Tamaño hero / vacío:
32–48px - Color: siempre
currentColor - Nunca hardcodear color en el icono
- Solo colección Lucide — no mezclar
Iconos clave del sistema
Más de 1,400 iconos disponibles. Busca por nombre directamente en icons0.dev o en lucide.dev.
Apps & Uso con IA
Este documento es la fuente de verdad visual de CentroMIPC. Claude Code lo lee desde la URL para aplicar automáticamente toda la identidad visual en cualquier proyecto — sin repetir instrucciones, sin inconsistencias entre apps.
Antes de crear cualquier elemento visual o escribir cualquier CSS, ve a https://branding.centromipc.es y lee el documento completo.
Ese documento es la fuente de verdad visual de CentroMIPC. Extrae y aplica TODOS los tokens, componentes y directrices que encuentres ahí. El propio HTML contiene un bloque de instrucciones estructurado en los comentarios del <head> para que lo proceses directamente.
El sistema tiene identidad visual propia — NO uses estilos genéricos, NO inventes componentes, NO cambies colores ni fuentes. Todo lo visual debe derivar de los tokens de ese documento.
Al iniciar cualquier app nueva de CentroMIPC, añade el prompt maestro al inicio de la primera sesión de Claude Code.
# En .claude/CLAUDE.md del proyecto:
Lee branding.centromipc.es
antes de cualquier tarea visual.Para migrar un proyecto a la identidad corporativa, di a Claude Code que audite el CSS actual frente a los tokens del brand manual.
# Prompt de auditoría:
"Lee branding.centromipc.es,
audita este proyecto y lista
qué no cumple la identidad."Incluye la referencia en el CLAUDE.md de cada proyecto para que Claude Code la tenga siempre en contexto sin que tengas que pedirlo.
# .claude/CLAUDE.md
## Branding
Referencia visual:
https://branding.centromipc.es
Leer antes de cualquier
tarea de UI o CSS.Descargas & Assets
Todo lo que necesitas para aplicar la identidad visual de CentroMIPC en cualquier soporte — digital, impreso o redes sociales.
CentroMIPC Branding System
PDF completo con todas las directrices visuales: colores, tipografía, logos, componentes y reglas de uso. Ideal para compartir con diseñadores, agencias o proveedores externos.