Gobernación del Magdalena

Integración por tecnología

AdminLTE, Bootstrap, Tailwind, Angular Material, PrimeNG, React, Vue, Laravel, Node, Java, WordPress y móvil: cómo aplicar la marca en cada uno.

URL base de este sitio: Todos los ejemplos de código y la tabla usan esta URL. Si el sitio se publica en otro dominio, escríbalo aquí y copie.

01. URLs directas de cada archivo

Basta con un <link> a la URL del CSS para usar la marca. Cada archivo es autosuficiente (incluye sus variables).

ParaURL
Todo en uno (tokens + degradados + la línea + componentes)dist/css/magdalena.min.css ⬇
Solo variables CSS (--mg-*)dist/css/magdalena-tokens.min.css ⬇
AdminLTE 4 / Bootstrap 5.3dist/adminlte/magdalena-adminlte4.min.css ⬇
AdminLTE 3 / Bootstrap 4dist/adminlte/magdalena-adminlte3.min.css ⬇
Bootstrap 5.3 (CSS)dist/bootstrap/magdalena-bootstrap5.min.css ⬇
Bootstrap 4 (CSS)dist/bootstrap/magdalena-bootstrap4.min.css ⬇
Bootstrap 5 (variables Sass)dist/bootstrap/_magdalena-bootstrap-variables.scss ⬇
Tailwind v3 (preset)dist/tailwind/magdalena.tailwind.preset.cjs ⬇
Tailwind v4 (@theme)dist/tailwind/magdalena.tailwind-v4.css ⬇
Angular Material M2 + M3 (SCSS)dist/angular-material/_magdalena-theme.scss ⬇
Angular Material (degradados y la línea)dist/angular-material/magdalena-material-extras.min.css ⬇
PrimeNG 18+ / PrimeVue 4 (preset)dist/primeng/magdalena-preset.ts ⬇
PrimeNG (degradados, ≤17 compatible)dist/primeng/magdalena-primeng.min.css ⬇
MUI (React)dist/mui/magdalena-mui-theme.mjs ⬇
Vuetify 3dist/vuetify/magdalena-vuetify.mjs ⬇
Variables SCSSdist/scss/_magdalena-tokens.scss ⬇
Variables Lessdist/less/magdalena-tokens.less ⬇
Tokens JSON (hex, rgb, cmyk, degradados)dist/tokens/magdalena-tokens.json ⬇

02. Guías por tecnología

HTML / CSS puro

Funciona en cualquier stack (PHP, Java, .NET, Django, Rails, estáticos…). Un solo archivo CSS con tokens, estilo sobrio (superficies blancas y azul-noche), cristal, la línea y componentes.

1. Enlazar el CSS (una sola URL)
index.html
<!-- Todo en uno: tokens + degradados + la línea + componentes (incluye la tipografía Montserrat) -->
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/css/magdalena.min.css">

<!-- Solo variables CSS (si usted ya tiene sus propios componentes) -->
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/css/magdalena-tokens.min.css">
2. Activar estilos base y usar clases mg-*
HTML
<body class="mg-base">
  <header class="mg-navbar">           <!-- barra superior de cristal -->
    <a class="mg-navbar__brand" href="/"><img src="https://TU-HOST/manual_de_marca/assets/logos/svg/logo-horizontal-color.svg" alt="Gobernación del Magdalena"></a>
  </header>

  <section class="mg-hero">            <!-- azul-noche con brillo cian discreto -->
    <h1>Servicios digitales</h1>
    <a class="mg-btn" href="#">Ingresar</a>
  </section>

  <div class="mg-card mg-card--accent-top"><div class="mg-card__body">Tarjeta con filete azul</div></div>
  <hr class="mg-stripe">               <!-- La línea multicolor del logotipo -->
</body>
3. Usar las variables en su propio CSS
app.css
.mi-banner {
  background: var(--mg-gradient-sky);       /* degradado de la gama azul */
  color: #fff;
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-md);
}
.mi-boton { background: var(--mg-gradient-action); }
.mi-titulo { color: var(--mg-primary-700); }   /* escalas 50…950 de cada color */
.mi-linea  { height: 6px; background: var(--mg-gradient-stripe); }
Para no depender de internet (intranet), descargue dist/ y sirva los archivos desde su propio servidor; la tipografía Montserrat se puede alojar localmente (ver README).

Ver en Markdown →

AdminLTE 4 (Bootstrap 5)

Reemplaza el azul de Bootstrap por la marca: sidebar azul-noche, cabecera de cristal, tarjetas blancas con filete, indicadores (small-box) limpios con acento de color.

1. Cargar los CSS en este orden
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.9.1/dist/css/adminlte.min.css">
<!-- Marca Magdalena: SIEMPRE después de AdminLTE -->
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/adminlte/magdalena-adminlte4.min.css">
2. Marcado recomendado
HTML
<aside class="app-sidebar shadow" data-bs-theme="dark">
  <div class="sidebar-brand">
    <a href="/" class="brand-link"><img src="https://TU-HOST/manual_de_marca/assets/logos/svg/logo-horizontal-blanco.svg" height="34" alt="Gobernación del Magdalena"></a>
  </div>
  ...
</aside>

<div class="small-box text-bg-primary">...</div>   <!-- blanca con filete azul -->
<div class="small-box text-bg-info">...</div>      <!-- blanca con filete cian -->
<div class="card card-primary card-outline">...</div>
Con npm: npm i admin-lte@4 y luego importe magdalena-adminlte4.css después del CSS de AdminLTE.

Ver en Markdown →

AdminLTE 3 (Bootstrap 4)

Para proyectos AdminLTE 3.x (incluye los paquetes Laravel/PHP basados en AdminLTE 3, como jeroennoten/laravel-adminlte).

1. Cargar los CSS en este orden
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2.0/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/adminlte/magdalena-adminlte3.min.css">
2. Clases AdminLTE que quedan con la marca
HTML
<aside class="main-sidebar sidebar-dark-primary elevation-4">...</aside>   <!-- azul-noche oscuro -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">...</nav> <!-- cristal claro -->
<div class="card card-primary">...</div>
<div class="small-box bg-info">...</div>
<button class="btn btn-primary">Guardar</button>
AdminLTE 3 usa Bootstrap 4, que NO tiene variables CSS: por eso este archivo sobrescribe clases (.btn-primary, .bg-primary, etc.).

Ver en Markdown →

Bootstrap 5 y 4

Dos caminos: CSS precompilado (rápido) o Sass (recomendado si compilan Bootstrap).

A. CSS precompilado (Bootstrap 5.3)
HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://TU-HOST/manual_de_marca/dist/bootstrap/magdalena-bootstrap5.min.css" rel="stylesheet">
B. Bootstrap 4
HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://TU-HOST/manual_de_marca/dist/bootstrap/magdalena-bootstrap4.min.css" rel="stylesheet">
C. Sass (Bootstrap 5): variables antes de importar
custom.scss
// copie dist/scss/_magdalena-tokens.scss y dist/bootstrap/_magdalena-bootstrap-variables.scss
@import "magdalena-bootstrap-variables";   // define $primary, $info, fuentes, radios…
@import "bootstrap/scss/bootstrap";

.btn-primary { background-image: $mg-gradient-action; }

Ver en Markdown →

Tailwind CSS (v3 y v4)

Colores `mg-*` con escala 50–950, alias `primary`, degradados como utilidades `bg-mg-grad-*`, sombras y radios de marca.

Tailwind v3 — preset
tailwind.config.js
module.exports = {
  presets: [require('./magdalena.tailwind.preset.cjs')],   // copie dist/tailwind/magdalena.tailwind.preset.cjs
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
};
Tailwind v4 — tema CSS
app.css
@import "tailwindcss";
@import "./magdalena.tailwind-v4.css";   /* copie dist/tailwind/magdalena.tailwind-v4.css */
Clases disponibles
HTML
<button class="bg-mg-grad-action text-white font-bold px-6 py-3 rounded-full shadow-mg-md">Ingresar</button>
<div class="bg-mg-grad-sky text-white rounded-mg-lg p-8">Hero con degradado</div>
<div class="h-1.5 bg-mg-grad-stripe"></div>          <!-- la línea multicolor -->
<h1 class="text-mg-primary-700 font-display font-black">Título</h1>
<span class="bg-mg-cyan-100 text-mg-cyan-800 rounded-full px-3">Etiqueta</span>
<p class="mg-text-gradient text-5xl font-black">Texto con degradado</p>
Opcional: use también magdalena.min.css para tener componentes mg-card, mg-btn, etc. junto a Tailwind.

Ver en Markdown →

Angular Material

Tema Material 3 (v19+) y Material 2 (v15–18) con las paletas oficiales, probado compilando contra la librería real.

1. Copiar el tema
BASH
# copie dist/angular-material/_magdalena-theme.scss  →  src/styles/_magdalena-theme.scss
# copie dist/angular-material/magdalena-material-extras.css  →  src/styles/magdalena-extras.css (opcional)
# copie dist/css/magdalena-tokens.css → src/styles/ (variables --mg-*)
2. styles.scss — Material 3 (Angular Material 19+)
src/styles.scss
@use '@angular/material' as mat;
@use './styles/magdalena-theme' as mg;

html { @include mg.magdalena-m3(); }          // define --mat-sys-* con la marca
@import './styles/magdalena-tokens.css';        // --mg-* para degradados y la línea
@import './styles/magdalena-extras.css';        // opcional

body { font-family: var(--mg-font-sans); margin: 0; }
2b. styles.scss — Material 2 (Angular Material 15–18)
src/styles.scss
@use '@angular/material' as mat;
@use './styles/magdalena-theme' as mg;

@include mat.core();
@include mg.magdalena-m2();
3. index.html — fuente
src/index.html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
4. Usar degradados y la línea con componentes Material
HTML
<mat-toolbar color="primary" class="mg-toolbar-gradient mg-toolbar-stripe">Gobernación del Magdalena</mat-toolbar>
<button mat-flat-button class="mg-btn-gradient">Guardar</button>
<mat-card class="mg-card-stripe">...</mat-card>
<mat-sidenav class="mg-sidenav-deep">...</mat-sidenav>
Los logos van en src/assets/ (o public/ en Angular 18+): copie assets/logos/svg/*.

Ver en Markdown →

PrimeNG / PrimeVue

Preset de tema para PrimeNG 18+ y PrimeVue 4 (mismo preset). Incluye variante CSS pura y compatibilidad con PrimeNG ≤ 17.

1. PrimeNG 20+ (Angular) — app.config.ts
src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import { MagdalenaPreset } from './magdalena-preset';   // copie dist/primeng/magdalena-preset.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({ theme: { preset: MagdalenaPreset, options: { darkModeSelector: false } } }),
  ],
};
1b. PrimeNG 18/19
BASH
npm i @primeng/themes
# en magdalena-preset.ts cambie los imports a '@primeng/themes' y '@primeng/themes/aura' (hay un comentario en el archivo)
2. PrimeVue 4
main.js
import PrimeVue from 'primevue/config';
import { MagdalenaPreset } from './magdalena-preset.mjs';

app.use(PrimeVue, { theme: { preset: MagdalenaPreset, options: { darkModeSelector: false } } });
3. Degradados y la línea (CSS opcional)
src/styles.scss
@import './styles/magdalena-tokens.css';
@import './styles/magdalena-primeng.css';   // botones con degradado, tabla con cabecera de marca, menubar con la línea
PrimeNG ≤ 17 (temas CSS clásicos)
HTML
<!-- cargue su tema (p. ej. lara-light-blue) y luego: -->
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/primeng/magdalena-primeng.min.css">   <!-- pisa --primary-color y agrega degradados -->

Ver en Markdown →

Angular (general)

Sin librería de componentes: tokens + utilidades en `styles.scss`, o por URL en `index.html`.

Opción 1 — por URL (más simple)
src/index.html
<link rel="stylesheet" href="https://TU-HOST/manual_de_marca/dist/css/magdalena.min.css">
Opción 2 — dentro del proyecto
angular.json
"styles": [
  "src/styles/magdalena.css",      // copiado de dist/css/magdalena.css
  "src/styles.scss"
]
Uso en plantillas
HTML
<div class="mg-card mg-card--stripe-top">
  <div class="mg-card__header mg-card__header--gradient">Trámites</div>
  <div class="mg-card__body">...</div>
</div>
<button class="mg-btn" (click)="guardar()">Guardar</button>
Tokens en TypeScript
TS
import tokens from './magdalena-tokens.json';   // dist/tokens/magdalena-tokens.json  (activar resolveJsonModule)
const azul = tokens.colors.primary.hex;     // "#0071BB"
const degradado = tokens.gradients.sky;     // "linear-gradient(135deg, ...)"

Ver en Markdown →

React / Next.js

CSS directo, MUI o Tailwind. Los tokens están disponibles como JSON/ESM tipado.

CSS global
src/main.jsx
import './styles/magdalena.min.css';     // copiado de dist/css/

export default function Hero() {
  return <section className="mg-hero"><h1>Bienvenido</h1><button className="mg-btn mg-btn--accent">Ingresar</button></section>;
}
Material UI (MUI)
src/theme.jsx
import { ThemeProvider, CssBaseline } from '@mui/material';
import magdalenaTheme from './magdalena-mui-theme.mjs';   // dist/mui/ (incluye magdalena-tokens.mjs)

<ThemeProvider theme={magdalenaTheme}><CssBaseline /><App /></ThemeProvider>
Next.js (app router)
app/layout.tsx
import '../styles/magdalena.min.css';
export default function RootLayout({ children }) { return <html lang="es"><body className="mg-base">{children}</body></html>; }

Ver en Markdown →

Vue / Nuxt

CSS directo, Vuetify 3 o PrimeVue.

CSS global
src/main.js
import './assets/magdalena.min.css';   // copiado de dist/css/
Vuetify 3
src/plugins/vuetify.js
import 'vuetify/styles';
import vuetify from './magdalena-vuetify.mjs';    // dist/vuetify/ (incluye magdalena-tokens.mjs)
app.use(vuetify);
Nuxt
nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/magdalena.min.css'],
  app: { head: { link: [{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&display=swap' }] } },
});

Ver en Markdown →

Laravel (Blade, Vite, Livewire)

Copie los archivos a `public/brand` o impórtelos con Vite. Compatible con Breeze/Jetstream (Tailwind) y con AdminLTE.

A. Archivos estáticos en public/
BASH
mkdir -p public/brand
cp -r dist/css assets/logos public/brand/
resources/views/layouts/app.blade.php
<link rel="stylesheet" href="{{ asset('brand/css/magdalena.min.css') }}">
<body class="mg-base">
  <img src="{{ asset('brand/logos/svg/logo-horizontal-color.svg') }}" alt="Gobernación del Magdalena" height="48">
  <hr class="mg-stripe">
B. Vite (resources/css/app.css)
resources/css/app.css
@import "./magdalena.css";          /* copiado de dist/css/magdalena.css */
/* Con Tailwind v4 (Laravel 12): */
@import "tailwindcss";
@import "./magdalena.tailwind-v4.css";
C. Tailwind v3 (Breeze clásico)
tailwind.config.js
presets: [require('./magdalena.tailwind.preset.cjs')],
D. AdminLTE 3 (jeroennoten/laravel-adminlte)
resources/views/page.blade.php
@push('css')
  <link rel="stylesheet" href="{{ asset('brand/adminlte/magdalena-adminlte3.min.css') }}">
@endpush

Ver en Markdown →

Node.js / Express / bundlers

Servir los estáticos, importar en Vite/Webpack, o consumir los tokens como módulo.

Express
server.js
import express from 'express';
const app = express();
app.use('/brand', express.static('manual_de_marca'));   // /brand/dist/css/magdalena.min.css
app.listen(3000);
Vite / Webpack / esbuild
src/main.js
import './styles/magdalena.min.css';
import tokens from './magdalena-tokens.mjs';
console.log(tokens.colors.primary.hex);
Handlebars / EJS / Pug
HTML
<link rel="stylesheet" href="/brand/dist/css/magdalena.min.css">
Sass / Less
SCSS
@use 'magdalena-tokens' as *;   // dist/scss/_magdalena-tokens.scss
.hero { background: $mg-gradient-sky; @include mg-stripe(6px); }
// Less: @import "magdalena-tokens.less";  .x { color: @mg-primary-700; }

Ver en Markdown →

Java (Spring, Thymeleaf, JSF/PrimeFaces, Vaadin)

Los CSS son estáticos: no dependen de la tecnología de servidor.

Spring Boot + Thymeleaf
BASH
# copie dist/css y assets/logos a  src/main/resources/static/brand/
templates/layout.html
<link rel="stylesheet" th:href="@{/brand/css/magdalena.min.css}">
<img th:src="@{/brand/logos/svg/logo-horizontal-color.svg}" alt="Gobernación del Magdalena" height="48">
JSF / PrimeFaces
template.xhtml
<h:outputStylesheet name="brand/css/magdalena.min.css" />
<!-- PrimeFaces usa variables de tema: sobrescriba el color primario en su theme.css con #0071BB -->
Vaadin (Lumo)
frontend/themes/mi-app/styles.css
@import url('./magdalena-tokens.css');
html {
  --lumo-primary-color: #0071BB;
  --lumo-primary-text-color: #0071BB;
  --lumo-primary-color-50pct: rgba(0, 113, 187, .5);
  --lumo-primary-color-10pct: rgba(0, 113, 187, .1);
  --lumo-primary-contrast-color: #fff;
  --lumo-font-family: 'Montserrat', sans-serif;
}
ASP.NET / Razor / Blazor
_Layout.cshtml
<link rel="stylesheet" href="~/brand/css/magdalena.min.css" asp-append-version="true" />

Ver en Markdown →

WordPress

Encolar el CSS y declarar la paleta en theme.json para que aparezca en el editor de bloques.

functions.php
functions.php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('magdalena', get_template_directory_uri() . '/brand/css/magdalena.min.css', [], '1.0.0');
});
theme.json (paleta en el editor)
theme.json
{
  "version": 3,
  "settings": { "color": { "palette": [
    { "slug": "primario", "color": "#0071BB", "name": "Azul institucional" },
    { "slug": "cian",     "color": "#00B7D9", "name": "Cian" },
    { "slug": "celeste",  "color": "#9FD7E5", "name": "Celeste" },
    { "slug": "rojo",     "color": "#F7003C", "name": "Rojo" },
    { "slug": "amarillo", "color": "#FEC800", "name": "Amarillo" },
    { "slug": "verde",    "color": "#69B75E", "name": "Verde" }
  ] } }
}

Ver en Markdown →

Móvil (Android / Flutter / iOS)

Archivos de colores listos para pegar en el proyecto.

Android (res/values/colors.xml)
BASH
cp dist/tokens/android-colors.xml app/src/main/res/values/magdalena_colors.xml
Flutter
DART
// copie dist/tokens/flutter_magdalena_colors.dart a lib/theme/
import 'theme/flutter_magdalena_colors.dart';
ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: MagdalenaColors.primary), fontFamily: 'Montserrat');
iOS / otros
BASH
# use dist/tokens/magdalena-tokens.json (hex, rgb, cmyk) para generar su asset catalog

Ver en Markdown →