brand · layout · theme

Una vez
cada pieza.

Nueve componentes .astro que las webs (blog, techconf, recall-for-papers, simple-pdf-converter, simple-scrum-poker) importan directamente. Cambiar uno acá cambia el comportamiento en toda la red — sin tocar ningún site.

01 · Inventario

Nueve componentes,
tres familias.

Brand: las marcas (logo, sello, favicon, mark). Layout: la estructura de cada página (header, footer, social). Theme: la lógica que pinta dark/light desde el primer paint.

Layout

SiteHeader

Top nav con brand, links, redes y toggle de tema. Sticky con backdrop-blur.

Layout

SiteFooter

Footer rich (4 cols + ecosystem strip) o minimal (una línea). Vincula al chimiverse.

Layout

SocialIcons

SVG inline para youtube, twitter, linkedin, github. Hereda currentColor.

Brand

BrandMark

El glyph del mate solo. Usado en favicons, eyebrows, watermarks chicos.

Brand

BrandFavicon

Mate dentro del disco squircle. Browser tab, PWA icon, OG fallback.

Brand

BrandLogoCircle

El sello con texto perimetral. Para avatares, stamps, stickers.

Brand

BrandLogoWordmark

Mate + “CODE®”. El lockup horizontal — single-color, currentColor.

Theme

ThemeBootstrap

Inline script que aplica el tema antes del primer paint. Sin flash.

Theme

ThemeIcons

Sun y moon SVG para el toggle del header. Hereda currentColor.

02 · Brand

Las marcas,
en cuatro
encarnaciones.

Cuatro componentes para el mismo símbolo, según el contexto. El glyph solo (BrandMark), el favicon redondo, el sello con texto perimetral, el lockup horizontal con CODE®. Comparten el mate, no la silueta.

Brand

BrandMark

source · design-system/components/BrandMark.astro

El glyph del mate solo, sin marco. Usa currentColor — adapta su color al texto que lo rodea.

size: 80

// Glyph chico, hereda color del texto
<BrandMark size={22} />

// Tinted como brand teal — wrap en un span con color
<span style="color: var(--chimi-color-accent-primary)">
  <BrandMark size={32} ariaLabel="Chimichurri" />
</span>

Props

sizeAncho en px. Default 22. La altura sale del aspect 38:82.
ariaLabelSi lo pasás, el SVG sale como role="img". Sin él, decorativo.

Dónde se usa

Dentro de SiteHeader cuando brand.mark === "chimi".
Watermarks chicos en talks y techconf.
Eyebrow de podcast en blog.

Brand

BrandFavicon

source · design-system/components/BrandFavicon.astro

Mate dentro de un squircle blanco. Para favicon del browser, PWA icon, fallback de OG.

3 tamaños · default vs custom colors

// Browser tab — colores default
<BrandFavicon size={32} />

// OG image custom — disco charcoal, mate lemon
<BrandFavicon
  size={120}
  discColor="#1C1C1C"
  markColor="#F9D71C"
  ariaLabel="Chimichurri Code"
/>

Props

sizeWidth & height en px. Default 32.
discColorColor del disco. Default #FDFDFD.
markColorColor del mate y el ring. Default brand teal #02B5B9.
ariaLabelSi lo pasás, sale como role="img".

Dónde se usa

Favicon de cada web del Chimiverse.
Generador de OG images en blog y techconf.
App icon en simple-scrum-poker (PWA).

Brand

BrandLogoCircle

source · design-system/components/BrandLogoCircle.astro

El sello: mate al centro, texto perimetral “Chimichurri Code · By Nicolás Patarino · 2024”. Para avatares, stamps, stickers.

size: 200 · text + mark default

// Default — texto charcoal, mate teal
<BrandLogoCircle size={200} />

// Avatar oscuro — texto ivory, mate teal
<BrandLogoCircle
  size={120}
  textColor="#F5EFE0"
  markColor="#02B5B9"
  ariaLabel="Chimichurri Code"
/>

Props

sizeWidth en px. Default 256. Mín recomendado: 72px.
textColorTexto perimetral + decoración. Default charcoal #272727.
markColorSilueta del mate. Default brand teal #02B5B9.
ariaLabelSi lo pasás, sale como role="img".

Dónde se usa

Avatar de redes (LinkedIn, GitHub, X) de Chimichurri Code.
Stamps en docs internas y prints.
Sticker print en techconf merch.

Brand

BrandLogoWordmark

source · design-system/components/BrandLogoWordmark.astro

Mate + “CODE®” horizontal. Single-color via currentColor — el wrapper decide el color.

size: 280 · currentColor: patagonia

// Wrap en algo que defina color
<a href="/" style="color: var(--chimi-color-accent-primary)">
  <BrandLogoWordmark size={180} ariaLabel="Inicio" />
</a>

Props

sizeWidth en px. Default 200. Mín recomendado: 80px.
ariaLabelSi lo pasás, sale como role="img".

Dónde se usa

Header de chimi.pro, blog, techconf y el resto de webs.
Cover art del podcast.
Email signature templates.

03 · Layout

El esqueleto
de cada web.

Tres componentes que las cinco webs comparten: el header sticky con backdrop-blur, el footer con strip del Chimiverse, y los iconos de redes. Cambiar uno acá actualiza las cinco webs en el siguiente deploy.

Layout

SiteHeader

source · design-system/components/SiteHeader.astro

Top nav sticky con brand, links, redes y toggle de tema. Backdrop-blur y border hairline. Mobile colapsa con burger.

canvas-quiet · desktop

CHIMI·CODE

Posts Podcast Tags Sobre ☼

// blog/src/layouts/Layout.astro
<SiteHeader
  brand={{ label: "Chimi", emText: "·", byline: "Code" }}
  links={[
    { href: "/posts", label: "Posts" },
    { href: "/podcast", label: "Podcast" },
    { href: "/tags", label: "Tags" },
    { href: "/about", label: "Sobre" },
  ]}
  socials={[{ icon: "github", href: "...", label: "GitHub" }]}
  themeToggle={true}
/>

Props clave

brandConfig del lockup: label, emText, byline, mark (chimi/custom), o logoSrc {light, dark}.
linksArray de NavLink. Soporta children para dropdown, cta para botón, external para target=_blank.
socialsSocialLink[] — render iconos al final del nav con divider.
mobileMenuDefault true. Activa el burger ≤960px.
themeToggleDefault true. Botón con sun/moon que pinta data-theme.

Dónde se usa

Header de blog, techconf, recall-for-papers, simple-pdf-converter, simple-scrum-poker.
El theme toggle dispara themechange custom event para que otros componentes se enteren.
El nav active se calcula desde Astro.url.pathname.

Layout

SiteFooter

source · design-system/components/SiteFooter.astro

Footer en dos variantes: rich con brand + 4 columnas + ecosystem strip, o minimal con una línea de meta y links al Chimiverse.

variant: minimal

// Variante rich — 4 columnas + ecosystem strip + copyright
<SiteFooter
  variant="rich"
  siteId="blog"
  brandName="Chimichurri Code"
  brandDescription="Posts, podcast y proyectos."
  socials={socials}
  columns={[
    { title: "Contenido", links: [...] },
    { title: "Recursos", links: [...] },
  ]}
/>

// Variante minimal — una línea
<SiteFooter variant="minimal" siteId="techconf" />

Props clave

variant"rich" o "minimal". Default minimal.
siteIdID dentro de ECOSYSTEM_SITES — se excluye del strip de “otras webs”.
brandName / brandDescription / socialsSolo en rich, llenan la columna brand.
columnsFooterColumn[] — solo en rich.
showEcosystemDefault true. Muestra el strip de las otras webs del Chimiverse.

Dónde se usa

Blog usa rich con brand + 2 cols + ecosystem.
Techconf, recall, simple-pdf, simple-scrum usan minimal.
El strip ecosystem viene de ecosystem.ts — lista canónica de sitios.

Layout

SocialIcons

source · design-system/components/SocialIcons.astro

SVG inline para youtube, twitter, linkedin, github. Heredan currentColor y se rotan dentro del nav y del footer.

4 iconos · size 18 · hairline ring

<SocialIcons icon="github" size={18} />
<SocialIcons icon="twitter" size={16} />

Props

icon"youtube" | "twitter" | "linkedin" | "github"
sizeWidth & height en px. Default 18. Twitter va a 16 (logo es más denso).

Notas

Cada SVG tiene aria-hidden="true" — el wrapper <a> aporta el aria-label.
Render inline: no carga sprite ni font icon. Cero requests extra.
Si querés un icono nuevo, agregalo al union type del prop y a la lista de SVGs.

04 · Theme

La luz,
desde el primer paint.

Dos componentes lógicos: ThemeBootstrap es un script inline que aplica el tema antes de que el navegador pinte (sin flash). ThemeIcons es el sun/moon que el toggle del header usa. Ambos viven en el head.

Theme

ThemeBootstrap

Lee localStorage["chimi-theme"] y aplica data-theme="light" al <html> antes del primer paint. Sin él, las webs en modo claro tienen un FOUC oscuro de 100–200ms.

Cómo se usa: renderlo dentro del <head> de cada layout, antes de cualquier <link> o <style>. Es is:inline — corre síncrono.

design-system/components/ThemeBootstrap.astro

Theme

ThemeIcons

Sun y moon como SVGs. SiteHeader los renderiza dentro del botón del toggle y los muestra/oculta según el tema activo (sun visible cuando estás en dark, moon cuando estás en light).

API: icon: "sun" | "moon", size: number (default 18). Hereda currentColor.

design-system/components/ThemeIcons.astro

Theme · helper

ecosystem.ts

No es un componente, pero vive en la misma carpeta. Exporta ECOSYSTEM_SITES (lista canónica de webs del Chimiverse) y los tipos SocialLink, EcosystemSite que SiteHeader y SiteFooter consumen.

Cómo se usa: import { ecosystemLinksExcluding } from "@chimi/design-system/components/ecosystem". Devuelve los otros sitios (no el actual) para el strip del footer.

design-system/components/ecosystem.ts

Convención

Importar desde @chimi/design-system

Cada web del Chimiverse declara "@chimi/design-system": "*" en sus dependencies y los importa así: import SiteHeader from "@chimi/design-system/components/SiteHeader.astro".

Los componentes son source-imported, no compilados. Astro los procesa en el build de cada web — eso significa que un cambio en este monorepo aparece sin republish (es workspace).

npm workspaces · packages/design-system/package.json

Las piezasvivas.

Una vezcada pieza.

Nueve componentes,tres familias.

Las marcas,en cuatroencarnaciones.

BrandMark

Props

Dónde se usa

BrandFavicon

Props

Dónde se usa

BrandLogoCircle

Props

Dónde se usa

BrandLogoWordmark

Props

Dónde se usa

El esqueletode cada web.

SiteHeader

Props clave

Dónde se usa

SiteFooter

Props clave

Dónde se usa

SocialIcons

Props

Notas

La luz,desde el primer paint.

Las piezas
vivas.

Una vez
cada pieza.

Nueve componentes,
tres familias.

Las marcas,
en cuatro
encarnaciones.

El esqueleto
de cada web.

La luz,
desde el primer paint.