Grupo DESA — Design System

Tres sitios,
un sistema

Diseñé y construí el ecosistema digital de Grupo DESA desde cero: tres one-pages con voces diferentes que comparten los mismos cimientos. Este design system documenta qué se comparte, qué difiere y por qué.

2026Astro · React · Tailwind v43 sitios · 2 idiomas

DESA AGICerteza en
cada operación

GROUP DESAConstruyendo
confianza

DESA INDUSTRIESCrecemos
negocios

Filosofía del sistema

Un ADN, tres voces

Grupo DESA es un holding agroindustrial con tres unidades: la corporativa (GROUP), la estrategia internacional (AGI) y el brazo comercial (INDUSTRIES). Cada una necesita su propio tono, pero las tres tienen que leerse como familia. La solución: una base compartida con tres acentos diferentes. Mismas tipografías, mismo layout, mismos componentes — distintos colores, distinta voz.

Restricción con propósito

Solo 8 tokens de color por sitio. Solo 3 familias tipográficas. Un solo grid, un solo set de componentes. La restricción no es estética: es lo que hace que tres marcas se lean como una.

Sistema, no manual

El design system no es un PDF que nadie lee. Es un monorepo Turborepo con packages/ui compartido entre los 3 apps. ContactForm, i18n helper y locales viven en el paquete. El resto se duplica a propósito, con overrides.

Tres acentos, una base

AGI es sage green, GROUP es navy + burgundy, INDUSTRIES es forest + lime. Pero los tres comparten el mismo background cream, los mismos grises, la misma tipografía. La unidad viene de la base, no de los acentos.

Los tres sitios

Una marca, tres direcciones

Mismas secciones en el mismo orden. Mismo hero full-bleed con video. Mismo patrón de Nav, Identity, Pillars, Purpose, Clients, CTA, FAQ, Contact, Footer. Lo único que cambia es el acento cromático y la voz editorial.

DESA AGI

Certeza en cada operación.

Unidad estratégica internacionalInternational strategic unit

01Estrategia global de operaciones
02Contratos internacionales
03Transparencia y rigor técnico

Visitar sitio

GROUP DESA

Construyendo confianza.

Holding corporativoCorporate holding

01Identidad institucional
02Trayectoria de 50+ años
03Visión de largo plazo

Visitar sitio

DESA INDUSTRIES

Crecemos negocios.

Unidad comercialCommercial unit

01Comercialización ágil
02Servicios al cliente
03Mercado local e internacional

Visitar sitio

Identidad visual

8 tokens · 3 paletas · 1 contrato

Los 3 sitios declaran exactamente los mismos nombres de tokens en su bloque @theme de Tailwind v4. Solo cambian los valores. Esto significa que cualquier componente que usebg-primary, text-muted oborder-border-subtle se reeskinna automáticamente según el sitio donde se compile.

DESA AGI

GROUP DESA

DESA INDUSTRIES

Color primario--color-primary

Primario claro--color-primary-light

Acento--color-accent

Fondo--color-bg

Oscuro / loader--color-dark

Texto--color-text

Texto apagado--color-muted

Tipografía

Barlow, Hanken Grotesk, Scope One

Tres familias, tres roles. Las tres se cargan desde Google Fonts con los mismos pesos. Las utility classesfont-title, font-subtitle,font-body y font-accent son idénticas en los 3 sitios — el contrato está en la fuente, no en el componente.

BarlowTítulos (display).font-title

Construyendo confianza

700 weight · 0.142em tracking · uppercase

clamp(2.5rem, 6vw, 5.5rem)

Hanken GroteskSubtítulos (nav, CTA).font-subtitle

Conocer más

500 weight · 0.07em tracking · uppercase

0.6875rem – 0.875rem

Hanken GroteskCuerpo (body).font-body

Somos una empresa familiar de dos generaciones que se ha convertido en un referente del sector agroindustrial. Calidad, responsabilidad y relaciones sólidas son la base de cada vínculo que construimos.

400 weight · 1.6–1.75 leading

1rem

Scope OneAcento (eyebrow, labels).font-accent

DESA AGI — Unidad Estratégica Internacional

400 weight · 0.2em tracking · uppercase

0.6875rem – 0.875rem

BarlowDisplay (hero / loader).font-title

DÉCADAS

700 weight · 0.95 leading · uppercase

clamp(2.5rem, 6vw, 5.5rem)

Implementación · Tailwind v4 @utility

@utility font-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  letter-spacing: 0.142em;
  text-transform: uppercase;
}

@utility font-subtitle {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@utility font-body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
}

@utility font-accent {
  font-family: 'Scope One', serif;
  letter-spacing: 0.2em;
}

Componentes

9 secciones · 1 orden · 0 sorpresas

Cada sitio monta las mismas 9 secciones en el mismo orden. Lo que cambia es el contenido editorial y el acento cromático. El resto — la arquitectura, los patrones de interacción, el ritmo visual — se hereda del sistema.

GROUP DESA

IdentidadEnfoquePropósitoContacto·ES / EN

Nav

AGIGROUPINDUSTRIES

Navegación fija arriba con idioma switcher ES/EN. Burger menu en mobile con animación clip-path.

DESA Group — Holding Corporativo

Construyendo
confianza

Hero

AGIGROUPINDUSTRIES

Full-bleed video con poster WebP fallback. Eyebrow + H1 + body + CTA arrow link con línea animada.

01 — Identidad

Sobre
el proyecto

02 — Enfoque

Pilares
estratégicos

Identity

AGIGROUPINDUSTRIES

2-column grid con sticky eyebrow + H2 + 2 párrafos + 2 stats. Slider de imágenes auto-rotativa cada 4s.

01Calidad de producto

02Trazabilidad

03Compromiso

Pillars (sticky scroll)

AGIGROUPINDUSTRIES

Scroll horizontal pinned. 3 cards full-viewport, transiciones 3.5s ease. Dark bg con número grande.

Cargill

ADM

Evonik

Bunge

Clients

AGIGROUPINDUSTRIES

Logo grid centrado, 36px de altura, hovers sutiles. Bg cream claro.

Hagamos negocios →

CTA section

AGIGROUPINDUSTRIES

Full-bleed bg-primary. Quote SVG decorativa, sector chips con stagger, botón principal.

¿Cuál es el modelo de negocio?+

¿Operan en otros países?+

¿Cómo puedo contactarlos?+

FAQ

AGIGROUPINDUSTRIES

Accordion con altura animada. Icono + que rota. Cream bg, separadores sutiles.

Imagen

Form

Contact

AGIGROUPINDUSTRIES

2-col en desktop: imagen con imagen real + form. En mobile single col. POST a /api/contact.

GROUP DESA

Holding agroindustrial argentino

Footer

AGIGROUPINDUSTRIES

4-col grid: logo+desc, nav links, social/email, legal. Bottom bar con copyright + privacy/terms.

Movimiento

Una curva, un timing, un ritmo

Framer Motion 12 en los 3 sitios. La curva[0.16, 1, 0.3, 1] se usa en el 90% de las animaciones. El loader de cuenta atrás, los reveals de scroll, el hero, el menú mobile, el FAQ, los chips de CTA — todo comparte el mismo easing.

Hero entrance

El video del hero arranca escalado y transparente, se asienta con la curva expo.

duration: 1.8s, ease: [0.16, 1, 0.3, 1]scale: 1.08 → 1, opacity: 0 → 1

Fade Up (secciones)

Patrón universal para revelar secciones al entrar en viewport. Stagger 0.1s.

duration: 0.8s, ease: [0.16, 1, 0.3, 1]y: 30 → 0, opacity: 0 → 1

Pillars (scroll-pinned horizontal)

El wrapper mide 300vh, el contenido es sticky. x se interpola con scrollYProgress.

duration: scrub, ease: linearx: 0% → -66.66% sobre 300vh

FAQ accordion

AnimatePresence con initial/exit animados. Icono + rota 45° al abrir.

duration: 0.35s, ease: [0.16, 1, 0.3, 1]height: 0 → auto, opacity: 0 → 1

Mobile menu

El menú mobile se abre con un clip-path que se va abriendo de abajo hacia arriba.

duration: 0.8s, ease: [0.77, 0, 0.175, 1]clipPath: inset(0 0 100% 0) → inset(0 0 0 0)

CTA chips stagger

Cada chip del CTA entra con un delay incremental. Stagger de 0.08s.

duration: 0.5s, ease: [0.16, 1, 0.3, 1]scale: 0.85 → 1, opacity: 0 → 1, delay: i * 0.08

Internacionalización

ES / EN · 1 toggle · 0 reloads

i18next + react-i18next en los 3 apps. El switcher ES/EN cambia el idioma sin recargar la página. AGI persiste la preferencia en localStorage bajo la key desa-agi-lang; GROUP e INDUSTRIES usan el default de i18next. Locales viven en apps/<site>/src/locales/.

ES — Español (default)

Construyendo
confianza

Grupo DESA es un holding agroindustrial argentino con más de cinco décadas de trayectoria y dos generaciones de experiencia en el sector.

EN — English

Building
trust

Grupo DESA is an Argentine agro-industrial holding with over five decades of experience and two generations of expertise in the sector.

hero.eyebrowhero.title_1hero.title_accentidentity.statementpillars.p1_titlecontact.ctafooter.copyright_suffix

Decisiones de arquitectura

Por qué este stack, no otro

Astro + React islands + Tailwind v4 + Cloudflare Pages. Cada decisión apunta al mismo objetivo: peso mínimo, deploy global, edición rápida para el cliente.

Framework

Astro sobre Next

One-pages estáticas. Astro renderiza HTML plano y solo hidrata lo que necesita JavaScript (Nav, sliders, formulario). Resultado: peso de página drásticamente menor que Next, mejor Core Web Vitals.

Estilado

Tailwind v4 con @theme

Tailwind v4 permite declarar tokens directamente en CSS con@theme { --color-primary: #... }. Los utility classes se generan solos. Sin archivos JS de configuración.

Monorepo

Turborepo + pnpm

3 apps independientes que comparten packages/ui. Cada deploy va a su propio proyecto de Cloudflare Pages. El build cache de Turbo acelera CI.

Movimiento

Framer Motion, no GSAP

Framer Motion vive dentro de React. Declarativo, ergonómico para variants. La curva [0.16, 1, 0.3, 1]es la firma del sistema — el mismo “snap” en los 3 sitios.

Hosting

Cloudflare Pages

CDN global, latencia mínima en Argentina y en los mercados donde opera el grupo. Build estático + edge = TTI sub-segundo.

i18n

i18next sobre next-intl

i18next está más maduro en React. Cambio de idioma sin reload, detección automática de locale del browser, namespaces por archivo JSON.

El ecosistema Grupo DESA es un proyecto de Lucas Sabena — diseño, desarrollo y deployment. El design system está documentado en código y en esta página. Para preguntas o feedback sobre las decisiones de arquitectura, contactame.

Ver caso de estudio Visitar DESA AGI ↗Visitar GROUP DESA ↗Visitar DESA Industries ↗

Tres sitios,un sistema

Un ADN, tres voces

Restricción con propósito

Sistema, no manual

Tres acentos, una base

Una marca, tres direcciones

Certeza en cada operación.

Construyendo confianza.

Crecemos negocios.

8 tokens · 3 paletas · 1 contrato

DESA AGI

GROUP DESA

DESA INDUSTRIES

Barlow, Hanken Grotesk, Scope One

9 secciones · 1 orden · 0 sorpresas

Nav

Construyendoconfianza

Hero

Sobreel proyecto

Pilaresestratégicos

Identity

Pillars (sticky scroll)

Clients

CTA section

FAQ

Contact

Footer

Una curva, un timing, un ritmo

Hero entrance

Fade Up (secciones)

Pillars (scroll-pinned horizontal)

FAQ accordion

Mobile menu

CTA chips stagger

ES / EN · 1 toggle · 0 reloads

Construyendoconfianza

Buildingtrust

Por qué este stack, no otro

Astro sobre Next

Tailwind v4 con @theme

Turborepo + pnpm

Framer Motion, no GSAP

Cloudflare Pages

i18next sobre next-intl

Tres sitios,
un sistema

Construyendo
confianza

Sobre
el proyecto

Pilares
estratégicos

Construyendo
confianza

Building
trust