Saltar al contenido
COMPAÑÍADE INNOVACIÓNDE SANTIAGO Style v10Sistema de diseño
Revisión
Menú
Índice de Kit UI
Kit UI Componentes

Lockup de marca.

Patrón canónico de lockup de marca para cis, cds, cochid y todos los sitios.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO
Nivel 2Círculo de Santiago · variación
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGOusaia
Nivel 3Dentro de una página
Sitio · sección
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO
Ayuda · legal · estado
Ver y copiar el código de este render
HTML del nivel canónico
<div class="ui-sample ui-lockup" data-namebrand-lockup data-brand="cis"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></div>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Cambia en esta marca

  • Navegación y contenido propios del servicio
  • Acento reservado para acciones y datos

Permanece canónico

  • Mark CIS y namebrand de tres líneas
  • IBM Plex Sans, foco, espaciado y anatomía
circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGOusaia

Cambia en esta marca

  • Mark circular y namebrand Círculo de Santiago en caja normal
  • Contenido societario y navegación propia

Permanece canónico

  • Misma estructura, orden de cuenta y footer
  • Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Estado actual
Lockup de marca no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Lockup de marca para Patrón canónico de lockup de marca para cis, cds, cochid y todos los sitios.
Qué ocurre si respondes No
Lockup de marca queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO
  • Conserva el namebrand canónico y el contexto en una línea separada.
  • Mantén cuenta, navegación y destino actual en lugares predecibles.
Antes · problema observadoAnti-ejemplo no interactivo
CISTítulo debajo del namebrandMenú distinto en esta página
  • No inventes abreviaturas ni cambies mayúsculas del namebrand.
  • No cambies navbar o footer entre páginas del mismo sitio.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO
1280 pxEscritorio
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGOusaia

Cobertura

DimensiónContrato
Propietario canónicoSistema de diseño CIS · core/core-style
ConsumidoresCIS, CDS, COCHID y todos los sitios
DependenciasHTML nativo, cis-auth para sesión
Estadocandidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

DatoResultado
ClasificaciónPatrón propuesto
Implementaciones0 implementaciones observadas
RepositoriosNingún repositorio observado
Snapshotkit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Lockup de marca

Estados

Estado requerido
base
actual
móvil
sin sesión

Accesibilidad

  • Conserva nombre accesible, orden de lectura y foco visible.
  • Funciona a 320 px, con zoom de 200% y texto largo.
  • El color nunca es la única señal de estado o acción.
  • El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<div class="ui-sample ui-lockup" data-namebrand-lockup data-brand="cis"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></div>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<div class="ui-sample ui-lockup border border-slate-300 bg-white p-4 text-slate-950" data-namebrand-lockup data-brand="cis"><svg class="ui-lockup__mark h-auto w-full" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></div>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
const NAME_LINES = ["COMPAÑÍA", "DE INNOVACIÓN", "DE SANTIAGO"];

export interface NamebrandLockupProps {
  /** Marca del sitio (`data-brand`): `cis`, `usaia`, `cochid`, etc. */
  brand?: string;
  /** Nombre de la Compañía, una línea por elemento. */
  nameLines?: string[];
  /** Nombre del producto que se muestra tras el separador; sin él, sólo va la Compañía. */
  product?: string;
  className?: string;
}

/**
 * Lockup de marca: símbolo y nombre de la Compañía, con el producto opcional tras un separador; se usa en la cabecera y en portadas.
 *
 * @example <NamebrandLockup />
 * @example <NamebrandLockup brand="usaia" product="usaia" />
 */
export function NamebrandLockup({ brand = "cis", nameLines = NAME_LINES, product, className }: NamebrandLockupProps) {
  return (
    <div className={["ui-lockup", className].filter(Boolean).join(" ")} data-namebrand-lockup data-brand={brand}>
      <svg className="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" strokeWidth="4"></circle><circle cx="100" cy="100" r="56" strokeWidth="18"></circle></svg>
      {nameLines.length ? <strong>{nameLines.flatMap((linea, i) => (i ? [<br key={i} />, linea] : [linea]))}</strong> : null}
      {product ? <><span role="separator"></span><b>{product}</b></> : null}
    </div>
  );
}