Sistema de diseño COIIRM hub

Introducción

Referencia del frontend L3: fundamentos (tokens), criterios de uso y catálogo de componentes. Colores primitivos alineados con src/lib/tokens.ts para TypeScript, pruebas y documentación conjunta.

Fuente: Figtree (local, @fontsource/figtree)
Tokens TS: src/lib/tokens.ts
Logos: coiirm-logo-color.png · coiirm-logo-white.svg

Principios

Criterios transversales para piezas institucionales y producto.

Claridad

Priorizar comprensión inmediata: jerarquía tipográfica explícita, etiquetas legibles y carga de cognición baja en flujos críticos.

Consistencia

Reutilizar tokens y componentes del kernel; evitar hex, espaciados o radios ad hoc salvo casos documentados.

Marca y soporte

Identidad ING002 en color y degradados; extensiones digitales (azul, naranja, cobre) como capa de soporte, no como ruido visual.

Contenido primero

La interfaz ordena el mensaje: titulares, datos y acciones siguen un orden lógico al escanear y al tabular con teclado.

Densidad moderada

Escala en múltiplos de 4px; en vistas densas (tablas, listas) mantener alineación y respiración mínima sin sacrificar legibilidad.

Estados explícitos

Toda pieza interactiva comunica reposo, foco, carga, error, éxito o vacío; el usuario nunca adivina si la acción sigue viva.

Retroalimentación semántica

Resultados de API y validación: `Badge` (estado corto) o `Alert` / `.ui-feedback` (mensaje), nunca párrafos sin clase que parezcan labels.

Composición de formularios

Cada rol (paso, sección, etiqueta, control, hint) tiene tamaño, peso e interlineado fijos en `ui-form-composition.css`; no mezclar `Heading` de página con títulos de paso.

Mobile-first

Diseñar primero para viewport estrecho (320–480px): una columna, botones y campos a ancho útil, `--layout-gutter` fluido; ampliar con `min-width: 48rem` (tablet), no con `max-width` salvo excepción documentada.

Consentimiento al inicio

Términos legales y checkbox de aceptación al **principio** del flujo (nunca al final); enlace a página legible (`LEGAL_IDENTITY_TERMS_PATH` en `form-ux.ts`).

Barra de calidad (evolución del DS)

Nuevo componente: documentar props, estados y dependencia de tokens.
Revisar foco, contraste y orden de tabulación antes de fusionar.
Preferir composición de primitivos existentes antes de duplicar patrones.
Preferir hooks `data-*` para JS; clases `js-*` solo si el script añade la clase.
Animaciones cortas y con propósito; respetar `prefers-reduced-motion`.
Tras cambiar `tokens.css`, ejecutar `pnpm run tokens:catalog` (también en `prebuild`).
Si cambia el isotipo, regenerar rasters con `pnpm run icons:generate`.
Controles y botones: `box-sizing: border-box` global; carga ≠ deshabilitado (`Button.astro`).
Patrones sobre degradados: titulares con `onEnergyHero` / `--text-on-energy-hero`, no lima sobre energía.
Composición vitrina: ritmo con `--ds-vitrina-after-*`; `.ds-subhead` pegada al título de bloque.
Responsive: mobile-first con `min-width` y tokens `--bp-*`; ver `RESPONSIVE_CRITERIA` y `/ui#responsive`.
Feedback: badge/alert con color semántico; ver `FEEDBACK_UI_CRITERIA` y `/ui#responsive`.
Formularios: roles tipográficos fijos; ver `FORM_COMPOSITION_CRITERIA` y `/ui#form-composicion`.
Legal: consentimiento al inicio con enlace; ver `LEGAL_CONSENT_CRITERIA` y `/ui#form-composicion`.
Onboarding: cierre con perfil y sesión; ver `ONBOARDING_COMPLETION_CRITERIA`.

Capas y ritmo producto

Acciones: --radius-action (4px); pastilla lima conserva --radius-pill.
Superficies: --radius-surface (2px) en tarjetas, tablas y alertas.
Controles: --control-height-md 48px; campos rectos vía --control-radius.
Compaginación: --section-gap-*, --content-max 1088px, --layout-gutter, mobile-first (/ui#responsive).

Color

Variables CSS en :root. Cada muestra muestra token y valor activo.

Identidad (manual)

Rojo energía

--coiirm-red

Rojo hover

--coiirm-red-dark

Blanco aluminio

--coiirm-white

Blanco puro

--coiirm-white-pure

Burdeos profundo

--coiirm-bordeaux

Negro UI

--coiirm-black

Acentos y extensiones

Verde sostenibilidad

--coiirm-lime

Lima oscuro

--coiirm-lime-dark

Lima profundo

--coiirm-lime-deep

Texto sobre lima claro

--coiirm-lime-on-light

Amarillo impulso

--coiirm-impulse

Impulso (texto)

--coiirm-impulse-on-light

Naranja digital

--coiirm-orange

Extensión campaña

Azul institucional

--coiirm-blue

Extensión digital

Escala noche (UI)

Noche 950

--coiirm-navy-950

Noche 900

--coiirm-navy-900

Noche 800

--coiirm-navy-800

Cobre (degradados / piezas digitales)

Cobre

--coiirm-copper

Cobre oscuro

--coiirm-copper-dark

Cobre claro

--coiirm-copper-light

Estado (Sentinel / sistema)

Estado · OK

--state-full

OK · texto suave

--state-full-on-soft

Estado · degradado

--state-degraded

Degradado · texto suave

--state-degraded-on-soft

Estado · fallo

--state-failed

Fallo · texto suave

--state-failed-on-soft

Texto semántico

Aa

Texto principal --text-primary

Burdeos corporativo para titulares y cuerpo.

Aa

Texto secundario --text-secondary

Metadatos, ayudas y jerarquía reducida.

Aa

Enlaces --text-link

Acciones y navegación interactiva.

Aa

Sobre marca / noche --text-on-brand

Texto invertido en cabeceras y tarjetas oscuras.

Sobre lima plena: --text-on-surface-brand-lime. Sobre noche: --text-on-surface-brand-navy. No usar texto claro sobre lima sólida ni burdeos sobre noche.

Superficies

Lienzo

--surface-canvas

Elevada

--surface-elevated

Muted

--surface-muted

Marca lima

--surface-brand-lime

Marca noche

--surface-brand-navy

Gradientes

Energía 2D

--gradient-energy

Solo fondos; rojo dominante + verde + amarillo.

Energía hero

--gradient-energy-hero

Radial para impacto / hero.

Franja ESG

--gradient-esg

Institucional + digital.

Split marca

--gradient-brand-orange-navy

Rojo → burdeos / noche.

Lima hero

--gradient-lime-hero

Superficies verdes.

Tipografía

Familia Figtree en typography.css (pesos 300–800). Escala en --text-*.

Hero

Capa L3

--text-hero

2xl

Título display

--text-2xl

xl

Sección

--text-xl

lg

Subtítulo

--text-lg

md

Cuerpo estándar

--text-md

sm

Metadatos y UI densa

--text-sm

xs

Etiquetas · caps

--text-xs

Pesos

Light (300) — Ingenieros Murcia

Regular (400) — Ingenieros Murcia

Medium (500) — Ingenieros Murcia

Semibold (600) — Ingenieros Murcia

Bold (700) — Ingenieros Murcia

Extrabold (800) — Ingenieros Murcia

Contenido y acceso

Titulares

Un titular principal por vista; no saltar niveles. Usar componentes del DS.

Enlaces y botones

El texto describe destino o acción (verbo + objeto). Evitar “clic aquí”.

Formularios

Etiqueta visible por control; errores claros; acciones al final del bloque.

Teclado y foco

Orden de tabulación coherente; modales y acordeones gestionan foco.

Contraste y color

Objetivo WCAG 2.1 AAA (≈7:1) en lienzo claro. No basar solo el estado en color.

Móvil primero

Una columna y acciones apiladas en pantalla estrecha; ampliar layout en tablet+. Ver criterios en `/ui#responsive`.

Imágenes

Alt descriptivo; decorativas con alt vacío. Sin autoplay con sonido.

Accesibilidad y uso móvil

Contraste AAA: ≈7:1 en lienzo claro; estados con --state-*-on-soft.
Mobile-first: Section con clamp; gutter fluido; tabs y botones 48px.
Movimiento: prefers-reduced-motion en motion.css; .font-tabular-nums para datos.

Espaciado

Escala 4-based. Sección vertical: --section-gap-sm|md|lg.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

--space-10

Radio y elevación

--radius-sm 8px

--radius-md 16px

--radius-lg 24px

--radius-xl 32px

--radius-pill píldora

--radius-action acción · 4px

--radius-surface superficie · 2px

Sombras y elevación

--shadow-card

--shadow-float

--shadow-on-brand

Muestras de borde

--border-subtle

--border-default

--border-strong

Interacción y controles

Anillo de foco: --focus-ring-*. Prueba Tab sobre los botones.

--control-height-sm → 40px
--control-height-md → 48px
--control-height-lg → 56px
--z-dropdown 40 · --z-sticky 80 · --z-modal 400 · --z-toast 500

Estados de interfaz

Estado	Criterio
Reposo	Apariencia base sin interacción.
Hover	Retroalimentación al puntero; no sustituye el foco de teclado.
Foco	Anillo visible con tokens --focus-ring-*.
Pulsado / activo	Feedback breve al activar.
Deshabilitado	Sin acción; no confundir con solo lectura.
Carga	Indicador acotado; evitar bloquear contexto innecesariamente.
Error / inválido	Mensaje junto al control; color + texto.
Solo lectura	Diferenciado de deshabilitado.
Vacío	Mensaje orientativo y siguiente paso sugerido.

Motion

Duraciones y curvas en motion.css. Keyframes con prefijo coiirm-.

Token	Valor	Uso
`--motion-fast`	120ms	Hover, chips
`--motion-normal`	240ms	Transiciones UI
`--motion-slow`	480ms	Paneles, drawers
`--motion-admission`	680ms	Flujo admisión
`--motion-validation`	420ms	Validación
`--motion-degraded`	360ms	Estado degradado
`--motion-resync`	520ms	Resync
`--motion-replay`	640ms	Replay
`--ease-sentinel`	cubic-bezier	Curva por defecto UI
`--ease-out-expo`	cubic-bezier	Salidas largas

Layout y medida

--content-max 1088px
--measure-prose 42rem
--measure-wide 60rem

Breakpoints (TS / CSS)

Nombre	px
`bp.mobile`	0
`bp.tablet`	768
`bp.desktop`	1280
`bp.wide`	1600

--bp-phone 40rem (640px)
--bp-tablet 48rem (768px)
--bp-desktop 80rem (1280px)
--bp-wide 100rem (1600px)

Responsive · mobile-first

Criterio transversal UX/UI: estilos base para móvil; ampliaciones con @media (min-width: …) en rem. Utilidades en src/styles/layout.css; shells con HubShell measure.

Viewport: `<meta name="viewport" content="width=device-width, initial-scale=1">` en `Layout.astro`.
Breakpoints kernel: móvil base · 40rem (640) · 48rem (768 tablet) · 80rem (1280) · 100rem (1600); alineados con `bp` en `tokens.ts`.
Gutter horizontal: `--layout-gutter` (`clamp(1rem, 5vw, 2.5rem)`); no márgenes fijos en px en shells.
Formularios: `FormActions stackOnNarrow` o `.ui-form-actions--stack-narrow`; controles `--control-height-md` (48px).
Rejillas: una columna por defecto; columnas extra solo en `@media (min-width: 48rem)` (`Split`, `FormLayout`, `InfoGrid`, `Gallery`).
Shells: `HubShell` con `measure` (`prose` | `wide` | `full`); padding vertical `--page-padding-block*`.
Contenido: clase `.app-prose-bound` en cuerpos de página para evitar scroll horizontal.
Tipografía fluida: `clamp()` en titulares de landing y shells; no depender de un solo tamaño fijo.
Tablas: `.ui-table-scroll` con desplazamiento horizontal en móvil.
Nuevas páginas: comprobar 320px, 768px y 1280px antes de fusionar.
Copy UI: un mensaje por estado; no repetir título de paso, etiqueta de campo y hint con el mismo texto.

Retroalimentación (badge / alert)

Estado corto (ACTIVE, error de campo): `Badge` con tono `success` | `warning` | `danger` | `neutral`.
Mensaje de proceso o validación inline: `.ui-feedback--info|warning|danger` (`src/styles/ui-feedback.css`).
Resultado terminal o bloqueante: `Alert` con `variant` semántico (`info`, `success`, `warning`, `danger`).
Markup dinámico (JS): usar clases globales `ui-badge--*` / `ui-feedback--*`; no confiar en estilos scoped de `.astro`.
No duplicar el mismo copy en badge + alert + hint del campo.
Carga breve: `aria-busy` + texto en el botón; no mostrar banners de “Comprobando…” hasta que haya acción.

Formularios · composición

Reglas fijas de tipografía y ritmo vertical por rol. Implementación en src/styles/ui-form-composition.css; pasos con FormStep.astro.

Envolver flujos en `.ui-form` o `FormLayout`; pasos con `FormStep` (`.ui-form-step__title`), no `Heading` nivel 1–2.
Un paso = un título + cuerpo (`.ui-form-step__body`); separar pasos con `Divider` y `--form-step-gap`.
Campos: `Field` + `Label` + control; hint/error solo vía `.ui-field__hint` / `.ui-field__error`.
Paso email (onboarding): «Entrada esperada» debajo del input con `emailMasked` del verify; paso factores: sin máscaras (IBAN/móvil/OTP no se revelan en UI).
Tras controles: badge (`.ui-form-step__status`) o feedback (`.ui-form-step__feedback`); ver `FEEDBACK_UI_CRITERIA`.
Acciones: `FormActions` con `stackOnNarrow` en móvil; margen superior menor dentro de paso (`--space-4`).
Markup dinámico (JS): mismas clases globales; estilos en `ui-form-composition.css`, no scoped en `.astro`.
Estado inicial: sin mensajes de carga ni error visibles; `[hidden]` + `aria-busy` en botón para peticiones cortas.
Consentimiento legal: primer paso; ver `LEGAL_CONSENT_CRITERIA`.

Roles tipográficos

Rol	Elemento	Clase	Tamaño	Peso	Interlineado	Casing
Paso multipaso	`h2`	`.ui-form-step__title`	--form-step-title-size (1.25rem)	--form-step-title-weight (700)	--form-step-title-leading (1.3)	Frase («Paso 2»); sin uppercase
Bloque fieldset	`legend`	`.ui-form-section__legend`	--form-section-title-size (0.875rem)	--form-section-title-weight (600)	1.3	Frase; sin uppercase
Etiqueta de campo	`label`	`.ui-label`	--form-label-size (0.75rem)	--form-label-weight (600)	--form-label-leading (1.3)	MAYÚSCULAS + tracking-caps
Control (input)	`input`	`.ui-input--md`	--form-control-size (0.875rem)	400	--form-control-leading (1.5)	Tal cual el usuario escribe
Hint / error de campo	`p`	`.ui-field__hint \| .ui-field__error`	--form-hint-size (0.75rem)	400 \| 600 (error)	--form-hint-leading (1.3)	Frase
Entrada esperada (máscara)	`p`	`.ui-form-expected`	--form-hint-size	500	1.3	Opcional; debajo del input; nunca PII sin enmascarar bien
Estado corto (API)	`span`	`.ui-badge`	--text-xs	600	1.3	MAYÚSCULAS (badge)
Mensaje inline (proceso)	`p`	`.ui-feedback`	--text-sm	500	1.3	Frase

Consentimiento legal

Checkbox de aceptación en el **primer paso** del flujo, antes de datos o acciones irreversibles.
Nunca pedir consentimiento solo al final (envío); el usuario debe poder leer y aceptar antes de empezar.
Enlace visible en el label del checkbox a una ruta dedicada (p. ej. `/legal/identity-terms`), idealmente en pestaña nueva.
Validar `consent` en la primera acción del flujo y revalidar antes de envíos sensibles.
Texto legal completo en página estática con `HubShell measure="prose"`; no sustituir por modales opacos.

Iconografía

Lucide (ISC) vía icon-registry.ts y Icon.astro. Tamaños --icon-size-sm|md|lg.

Token	Origen	Glifo	Uso
`home`	Lucide	House	Inicio, migas
`layers`	Lucide	Layers	Design system, capas
`activate`	Lucide	KeyRound	Activación, claves
`credential`	Lucide	BadgeCheck	Credencial emitida
`evidence`	Lucide	FileCheck	Evidencia, documento comprobado
`verify`	Lucide	ShieldCheck	Verificación, integridad
`network`	Lucide	Network	Red, grafos
`events`	Lucide	Calendar	Eventos, agenda
`verdict`	Lucide	Gavel	Veredicto, resolución
`server`	Lucide	Server	Backend, Frappe
`database`	Lucide	Database	Ledger, almacén
`pulse`	Lucide	Activity	Estado vivo, Sentinel
`external`	Lucide	ExternalLink	Abrir en destino externo
`copy`	Lucide	Copy	Copiar hash o texto
`warning`	Lucide	TriangleAlert	Aviso, riesgo
`info`	Lucide	Info	Información neutral
`success`	Lucide	CircleCheck	Éxito
`error`	Lucide	CircleX	Error, bloqueo
`user`	Lucide	User	Persona, perfil
`settings`	Lucide	Settings	Ajustes
`search`	Lucide	Search	Búsqueda
`menu`	Lucide	Menu	Navegación móvil, menú
`mail`	Lucide	Mail	Contacto, mensajes
`globe`	Lucide	Globe	Perfil público, web
`wallet`	Lucide	Wallet	Cartera AEO-ID

Novedades del design system

2026-05-14

Índice navegable de variables CSS; catálogo en `src/lib/token-catalog.ts`.
Tokens `--border-subtle`, `--border-width-*` y alias `--elevation-*`.
Iconos PNG de marca generados desde `coiirm-isotype-white.svg`.

2026-05-16

Vitrina `/ui` regenerada en L3 con sidebar, fundamentos y demos ampliados.

Iconos de marca (raster)

public/favicon.svg es vector. PNG para Apple Touch y PWA desde coiirm-isotype-white.svg (scripts/generate-brand-icons.mjs).

Regenerar: pnpm run icons:generate
Wordmark: coiirm-logo-white.svg / coiirm-logo-color.png

Índice de tokens CSS

Lista generada desde src/styles/tokens.css (token-catalog.ts). Regenerar con pnpm run tokens:catalog. Literales TS en src/lib/tokens.ts.

189 variables en el kernel. Pulsa «Copiar» para el nombre del token.

--accent-bar-esg
--accent-bar-esg-width
--border-default
--border-on-brand
--border-on-brand-strong
--border-strong
--border-subtle
--border-width-hairline
--border-width-strong
--bp-desktop
--bp-phone
--bp-tablet
--bp-wide
--btn-danger-bg
--btn-danger-bg-hover
--btn-danger-fg
--btn-ghost-on-lime-border
--btn-ghost-on-lime-fg
--btn-on-navy-bg
--btn-on-navy-bg-hover
--btn-on-navy-border
--btn-on-navy-fg
--btn-pill-on-lime-bg
--btn-pill-on-lime-bg-hover
--btn-pill-on-lime-border
--btn-pill-on-lime-fg
--btn-primary-bg
--btn-primary-bg-hover
--btn-primary-fg
--card-padding-block
--card-padding-inline
--coiirm-black
--coiirm-black-soft
--coiirm-blue
--coiirm-blue-soft
--coiirm-bordeaux
--coiirm-copper
--coiirm-copper-dark
--coiirm-copper-light
--coiirm-impulse
--coiirm-impulse-on-light
--coiirm-impulse-soft
--coiirm-lime
--coiirm-lime-dark
--coiirm-lime-deep
--coiirm-lime-on-light
--coiirm-lime-soft
--coiirm-lime-wash
--coiirm-navy-800
--coiirm-navy-900
--coiirm-navy-950
--coiirm-orange
--coiirm-orange-dark
--coiirm-orange-soft
--coiirm-red
--coiirm-red-dark
--coiirm-red-soft
--coiirm-white
--coiirm-white-pure
--content-max
--control-bg
--control-bg-muted
--control-border
--control-border-focus
--control-border-hover
--control-fg
--control-height-lg
--control-height-md
--control-height-sm
--control-on-navy-bg
--control-on-navy-border
--control-on-navy-fg
--control-on-navy-placeholder
--control-placeholder
--control-radius
--ds-vitrina-after-block-title
--ds-vitrina-after-subhead
--ds-vitrina-after-table
--elevation-brand
--elevation-floating
--elevation-raised
--figure-caption-fg
--focus-ring-color
--focus-ring-offset
--focus-ring-width
--form-error-fg
--form-section-stack-gap
--gallery-gap
--gallery-radius
--gradient-brand-orange-navy
--gradient-energy
--gradient-energy-hero
--gradient-esg
--gradient-esg-short
--gradient-lime-hero
--graph-node-on-lime-fill
--graph-node-on-lime-stroke
--graph-node-on-navy-stroke
--graph-stroke-on-lime
--graph-stroke-on-lime-strong
--graph-stroke-on-navy
--heading-underline-color-on-brand
--heading-underline-color-on-canvas
--heading-underline-height
--hint-fg
--hint-fg-on-brand
--icon-size-lg
--icon-size-md
--icon-size-sm
--icon-stroke
--label-fg
--label-fg-on-brand
--layout-gutter
--list-gap
--list-marker-on-brand
--list-marker-on-canvas
--logo-strip-gap
--measure-prose
--measure-wide
--page-padding-block
--page-padding-block-lg
--radius-action
--radius-lg
--radius-md
--radius-pill
--radius-sm
--radius-surface
--radius-xl
--section-gap-lg
--section-gap-md
--section-gap-sm
--separator-on-brand
--separator-on-brand-subtle
--shadow-card
--shadow-float
--shadow-on-brand
--shadow-text-scrim-on-energy
--space-1
--space-10
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--split-header-min-height
--state-degraded
--state-degraded-on-soft
--state-failed
--state-failed-on-soft
--state-full
--state-full-on-soft
--surface-brand-lime
--surface-brand-lime-soft
--surface-brand-navy
--surface-brand-navy-mid
--surface-canvas
--surface-elevated
--surface-energy-hero
--surface-esg-band
--surface-muted
--table-border
--table-header-bg
--table-stripe
--text-lime-on-energy
--text-link
--text-link-hover
--text-on-brand
--text-on-brand-muted
--text-on-brand-strong
--text-on-brand-subtle
--text-on-energy-hero
--text-on-lime-pressed
--text-on-surface-brand-lime
--text-on-surface-brand-lime-muted
--text-on-surface-brand-navy
--text-on-surface-brand-navy-muted
--text-primary
--text-secondary
--timeline-line
--timeline-node-border
--timeline-node-fill
--z-base
--z-dropdown
--z-modal
--z-sticky
--z-toast

Migas

Icon

Icon.astro con name del catálogo. decorative o label según contexto.

Credencial junto a etiqueta

Botones

Link

Titulares (componente)

Heading 2 underline

Heading 3

Heading 4 caps

Badges y alertas

neutral onBrand lime navy orange OK Aviso Error

Información

Mensaje informativo estándar.

Operación completada.

Revisa los datos antes de continuar.

No se pudo completar la acción.

Listas y chips

Lista canvas

Ítem uno
Ítem dos
Ítem tres

Lista sobre lima

Punto blanco A
Punto blanco B

LUGAR

Murcia

FORMATO

Presencial

Tarjetas

Elevated

Tarjeta con sombra.

Muted

Superficie muted.

Outline

Contorno sutil.

Navy

Texto inverso.

Lime

Texto burdeos.

Energy

Gradiente corporativo.

Formularios

Composición fija en ui-form-composition.css · pasos con FormStep · bloques con FormSection, FormLayout, FormProgress y FormSummary. Ver roles tipográficos.

Progreso y resumen (multipaso)

Vista previa

Nombre: Ejemplo · vitrina
Organización: —
Prioridad: Normal

Identificación

Solo lo necesario en este paso.

Nombre completo

Tal como figure en el documento oficial.

Organización

Este campo es obligatorio para continuar.

Mensaje y prioridad (opcional)

Mensaje (opcional)

Prioridad (opcional)

Acepto condiciones

Opción X Opción Y

Email

Notas (opcional)

Tabla y tabs

Concepto	Valor
Capa	L3 Astro
Ledger	Sentinel L1
L2	Frappe

Acordeón

Primera sección

Contenido visible por defecto.

Segunda sección

Contenido plegado.

Timeline

09:00h
Apertura y bienvenida
10:30h
Bloque técnico
12:00h
Cierre

Figura y galería

MediaFigure · symbol

SVG favicon

Logo color

Logo blanco (noche)

Patrones de marca

Izquierda

Bloque rojo energía.

Derecha

Bloque noche.

FECHA

13 de marzo de 2026

LUGAR

Murcia · ejemplo vitrina

Red + malla decorativa

Capa NetworkBackground + contenido relativo. Texto con tokens de marca clara.

Patrones AAA y usabilidad

Texto sobre energía / hero — Titulares con `--text-on-energy-hero` y `--shadow-text-scrim-on-energy`. No usar lima #bdd339 como texto principal sobre degradados.
Heading — Preferir tono `onEnergyHero` sobre degradados; `limeOnEnergy` es alias retrocompatible.
NetworkBackground — Capa decorativa `aria-hidden`; opacidad baja; contenido significativo encima con z-index.
Lima plena — Usar `--text-on-surface-brand-lime`; no `--text-on-brand` (claro) sobre #bdd339.
SplitHeader e InfoBar — Texto `--text-on-brand`; badges sobre rojo/noche con `tone="onBrand"`, no `neutral`.

Stack y Split

Columna ancha (2fr).

Barra lateral.

← Volver al inicio