Cómo usamos el brand kit para movernos rápido

Una entrada de ejemplo montada solo con piezas de @arcasilesgroup/brand-kit: la misma cabecera, prosa, código, fotografía y tablas que usaríamos para publicar de verdad.

5 min de lectura940 palabras

Son las nueve de la mañana, hay que anunciar el evento y la portada todavía no existe. Publicar rápido no es escribir rápido: es no volver a decidir lo que ya está decidido. El brand kit de Arcasiles Group empaqueta esas decisiones —color, tipografía, ritmo y componentes— para que la página arranque ya con la voz de la marca. Esta entrada es un ejemplo y está montada con esas mismas piezas.

Ponente junto a la diapositiva de «Post Evento» durante una charla de Arcasiles. — **Fig. 1.** Una charla del grupo, fotografiada para el manual. Las entradas ilustran con **eventos reales de Arcasiles** — *nunca con banco de imágenes*.

El color no se elige, se hereda

Ningún componente lleva un color a mano. El amarillo de marca #f9be4a está escrito en un token, no en un archivo suelto, y cada componente lo lee de la prop accent: cambias el color de énfasis y el documento entero se repinta a la vez.

Lo mismo vale para el lila de Eventos #674a98: no es un valor que copiamos de una diapositiva a otra, sino el mismo token que pinta la píldora de la meta, el borde de un aviso y el marcador de una lista. El realce inline lo demuestra: la pastilla trae el color al lado del hex, y el texto del código se escribe claro u oscuro según su luminancia.

El color no se elige, se hereda: está escrito en un token, no en un archivo suelto. Cambias la prop y el documento entero se repinta a la vez.

Del token al sitio, una sola fuente

Ese amarillo no aparece de la nada. Se declara una sola vez en los design-tokens —el canon de color, tipografía y ritmo—, de ahí pasa al brand-kit, que lo convierte en componentes, y de los componentes baja a cada sitio del grupo. Tocas el canon y el kit se actualiza. Nunca hay una segunda copia que recordar.

Fig. 2. El color, la tipografía y el ritmo se declaran una vez en los design-tokens y bajan, vía el kit, hasta cada página, documento y presentación.

Montar una entrada es colocar piezas

Con eso resuelto, montar una entrada es colocar piezas en orden: una cabecera, prosa legible a medida de libro, un bloque de código cuando aporta, una fotografía real del evento y un cierre con lecturas relacionadas. Ninguna decisión de estilo se toma dos veces.

entradas-cta.tsx

import { Button, Callout } from "@arcasilesgroup/brand-kit";

// El acento y el texto de contraste llegan del acento activo:
// el mismo componente se pinta amarillo en Group y lila en Eventos.
export function EntradasCta() {
  return (
    <Callout title="Entradas abiertas">
      Reserva tu plaza para el próximo evento del grupo.
      <Button variant="primary" size="lg">
        Conseguir entrada
      </Button>
    </Callout>
  );
}

Uso real del kit: un aviso y un botón importados del paquete. Ningún color escrito a mano: los dos toman el color de énfasis que reciben por prop.

Ponente durante una charla en un evento de Arcasiles — **Fotografías reales del kit** (charla, público y grupo), importadas vía ?url — las entradas ilustran con los eventos del grupo, nunca con stock.

El público de una charla durante un evento de Arcasiles — **Fotografías reales del kit** (charla, público y grupo), importadas vía ?url — las entradas ilustran con los eventos del grupo, nunca con stock.

Una pieza, tres soportes

El color no es lo único que se hereda: el componente entero vale para más de un sitio. Un aviso, una tabla o una cabecera se montan una vez y sirven igual en la web abierta, en un documento A4 o en una presentación 16:9. Solo cambia el lienzo que los envuelve.

Soporte	Componente del kit	Cuándo usarlo
Web	página + componentes	Publicar y compartir en abierto: el blog y las páginas del grupo.
Documento	DocPage · A4	Propuestas e informes para leer o imprimir en PDF.
Presentación	SlidePage · 16:9	Charlas y demos proyectadas en pantalla.

Lo que ganamos publicando así

El kit hace el trabajo aburrido

Contraste AA, foco visible, formato de fecha determinista y cambio de color por prop vienen resueltos en cada componente. Nosotros ponemos el contenido; la coherencia ya está en el kit.

En la práctica, cada entrada nos deja lo mismo:

Cero decisiones de estilo repetidas: color, tipografía y ritmo vienen del canon.
La misma pieza sirve para web, documento y presentación: cambia de color con la prop, no con una copia.
Accesibilidad de fábrica: contraste AA, foco visible y fechas como <time> semántico.
De borrador a publicado en minutos, porque solo cambia el contenido.

Entrada de EJEMPLO con temática real del grupo. Todo está montado con piezas del kit — PostHero, ReadingMeta, TableOfContents, RichText, HexToken, PullQuote, Figure, BlogDiagram, CodeBlock, PhotoGallery, BrandTable, Callout, BulletList y PostCard —; al publicar solo cambian texto, fotografía y enlaces. El tiempo de lectura y las cifras los formatea el kit en español, de forma determinista.

El color no se elige, se hereda

Del token al sitio, una sola fuente

Montar una entrada es colocar piezas

Una pieza, tres soportes

Lo que ganamos publicando así

Entradas relacionadas

Los lienzos del kit: DocPage y SlidePage

El manual expone su MCP