En construcción · v0.1

DesignSystem

La nave nodriza de BigFarm, SGP, BigFrut y los productos que vienen — un lenguaje de tokens compartido, una identidad propia en cada capa.

Metadata del sistema

Versión 0.1.0 — Borrador

Autor Equipo ADS

Fecha Junio 2026

Stack frontend

React 18 TypeScript Tailwind shadcn/ui Lovable

Introducción

Cómo usar este documento

Para cualquier persona que tome decisiones de producto o interfaz dentro del ecosistema ADS — diseñador, desarrollador o PM. Este documento responde una sola pregunta: ¿dónde vive cada regla visual que es compartida — y cuál pertenece exclusivamente a cada producto?

Prefijos de token CSS

--ads-* Capa padre. Compartida por todos los productos. Un cambio aquí afecta el ecosistema completo. --bf-* Exclusivo BigFarm. No contamina ningún otro producto. --sgp-* Exclusivo SGP. Mismo principio de aislamiento.

Productos futuros agregarán su propio prefijo (--bfr-*, --sic-*) sin tocar los tokens padre.

Producto — diagrama de arquitectura

Activo	Producto en producción.
En diseño	En proceso de diseño o auditoría.
Planif.	En roadmap activo, aún sin fecha de inicio.
Out 2026	Fuera del scope de este año.

Entregable — tabla de roadmap

Heredado	Tomado de BigFarm v1.0 sin cambios.
En curso	En implementación activa en este momento.
Pendiente	Sin comenzar o bloqueado por otra dependencia.

Principios · v0.1

Por qué este Design System

No partimos de cero. Partimos de lo que ya funciona en producción.

BigFarm resolvió cómo hablarle al campo.
ADS Platform resuelve cómo escalar esa voz a 7 productos.

Cada token, cada componente y cada decisión de BigFarm DS v1.0 ya está validada en producción con beta testers reales. ADS Platform no reemplaza ese trabajo — lo eleva a capa primitiva para que SGP, BigFrut y los productos que vienen no reinventen color, tipografía ni reglas de alerta desde cero.

North Star · ADS Platform

"Un solo lenguaje visual detrás de siete productos distintos. Cada equipo construye más rápido porque la decisión de marca ya está tomada."

— Design System ADS Platform, borrador v0.1

Arquitectura · Modelo Federado

Cómo hereda cada producto

ADS Platform es la raíz — provee los primitivos que todos comparten. SGP opera como el framework base sobre el que se construyen los productos del ecosistema.

Capa madre · Primitivos compartidos

ADS Platform

--ads-indigo-* --ads-navy-900 --ads-gray-* --ads-red-600 --ads-amber-600 --ads-green-600

Framework de productos · Hereda --ads-*

Sistema de Gestión Predial

--sgp-* En desarrollo

Producto comercial

BigFrut

--bfr-* Refactor pendiente

BigCrop

--bc-* En planificación

Prospección · CX

Asesor Cliente / Prospecto

--acp-* En planificación

Productos Interno

Asesor Comercial HernIA

--hernia-* En planificación

SIC

Sist. Inteligencia de Clientes

--sic-* En planificación

Modelo federado. ADS Platform provee los primitivos que todo el ecosistema hereda — color, tipografía, spacing y semántica de alerta. SGP actúa como framework de aplicación sobre esa base, y los productos finales añaden únicamente su acento de marca propio. Un cambio en --ads-* se propaga en cascada sin editar cada producto por separado.

Fundamentos

Design Tokens — Capa primitiva

Variables CSS de ADS Platform. Los productos hijo (bf-, sgp-, etc.) referencian estos valores.

Token	Valor	Uso
`--ads-indigo-700`	#3730A3	Marca ADS Platform, nav activo, CTA primario de plataforma
`--ads-indigo-600`	#4338CA	Hover sobre primary, focus rings
`--ads-indigo-100`	#D9DCF5	Bordes en contextos de plataforma
`--ads-indigo-50`	#EEF0FC	Fondos sutiles, badges de plataforma
`--ads-navy-900`	#1C1A17	Texto fuerte en todos los productos — gris cálido, no frío
`--ads-gray-500`	#85817A	Labels, subtítulos, placeholders — escala cálida
`--ads-red-600`	#C0392B	Heredado · estado crítico — invariante en todos los productos
`--ads-amber-600`	#D4791A	Heredado · estado de advertencia — invariante en todos los productos
`--ads-green-600`	#4D8F1F	Heredado · estado óptimo / OK — invariante en todos los productos

Fundamentos · Decisión actualizada

Paleta de color

Indigo + gris cálido. La marca pesa cuando aparece, no compite con la información operativa. Rojo/ámbar/verde semánticos no se tocan.

Marca — ADS Platform Indigo

Indigo 700

#3730A3

Primary, nav activo · 8.6:1

Indigo 600

#4338CA

Hover, focus

Indigo 100

#D9DCF5

Bordes plataforma

Indigo 50

#EEF0FC

Fondos sutiles

Neutros — gris cálido (nuevo, reemplaza el gris frío genérico)

Navy 900

#1C1A17

Texto fuerte, universal

Gray 500

#85817A

Labels, universal

Gray 100

#E8E6DF

Chips inactivos

Gray 50

#F5F4F1

Background app

Exclusivo de BigFarm — no se usa a nivel plataforma

Green 500

#65B32E

Solo BigFarm — primary

Green 600

#4D8F1F

Solo BigFarm — texto AA

Semánticos — invariantes en todo el ecosistema

Red 600

#C0392B

Crítico

Amber 600

#D4791A

Advertencia

Green 600

#4D8F1F

Óptimo / OK

Border

#E4E1D9

Borde estándar

Indigo 700 sobre blanco da 8.6:1 — pasa AA incluso en texto pequeño. Es más accesible que el verde original de BigFarm (2.7:1, por eso ese producto ya usa el alias #4A8F1A para texto).

Coincidencia intencional: --ads-green-600 (semántico, estado "óptimo") y --bf-green-600 (marca BigFarm, tono oscuro para texto AA) comparten el mismo valor #4D8F1F. No es accidental — ese verde oscurecido cumple simultáneamente las dos funciones: contraste suficiente sobre blanco y señal visual de "OK" coherente con la marca agrícola. Si la marca BigFarm cambia, solo se actualiza --bf-green-600; el token semántico --ads-green-600 permanece invariante.

Fundamentos · Decisión actualizada

Tipografía

Dos familias, roles claros. IBM Plex Sans marca la jerarquía de título. Inter hace todo el trabajo de cuerpo, label y cifra.

IBM Plex Sans — títulos y nombre de marca (nuevo)

IBM Plex Sans

28px / 700Nombre de plataforma

ADS Platform

18px / 700H2 — sección

Cuarteles activos esta semana

15px / 700H3 — subtítulo

El Roble · Fundo Principal

Plex Sans entra solo en H1, H2, H3 y nombre de marca — la jerarquía de título tiene una textura ligeramente distinta a Inter, sin saltar a otra familia completamente ajena.

Inter — body, labels y cifras (heredado, rol ampliado)

Inter

13px / 400Body

Configura, prioriza y controla las condiciones que protegen tu producción.

11px / 600 / MAYÚSLabel

Estado de la regla

24px / 600Stat grande

691 ha

13px / 500Cifra inline

GDA 450 · Riego 120h

11px / 400ID / código

AL-0042 · Cuartel B-12

Inter mantiene tabular-nums activado en cifras — hectáreas, GDA e IDs alinean en columna igual que en BigFarm. Un solo motor de texto para todo lo operativo.

Fundamentos

Spacing & Radius

Escala heredada de BigFarm y validada en producción. Los valores de spacing no tienen token CSS nombrado — se usan como literales en padding y gap. Los valores de radius sí tienen token CSS en :root.

Escala de spacing — valores usados en el sistema

Valor	Visual	Uso principal
`4px`		Gap entre ícono y label, indicadores inline, separación de brand-info
`8px`		Padding horizontal de chip y token-code, gaps entre elementos relacionados
`12px`		Padding de badge y hero-pill, gap de grilla densa (hero-meta-grid)
`16px`		Padding interno de meta-card, separación de headers y dividers
`20px`		Padding horizontal del nav lateral, bordes de arch-platform
`24px`		Cuerpo de componente (comp-card-body, type-row, btn-variant-row)
`32px`		Padding de card grande (thesis-card, northstar-card), hero-main vertical
`48px`		Sangría inferior del sidebar, separación entre grupos de sección
`64px`		Padding lateral del contenido principal (main-inner), padding izquierdo del hero

Escala de radius — tokens CSS

Token	Valor	Uso
`--r-xs`	3px	Etiquetas `code`, scrollbar, tokens de arquitectura — ángulo apenas suavizado
`--r-sm`	5px	Botones secundario, ghost y destructivo — radio técnico, deliberadamente no genérico
`--r-md`	8px	Product-cards en arquitectura, arch-note, btn-decision-note
`--r-lg`	12px	Cards de herencia (inherit-wrap), hero meta-card, barra de plataforma (arch-platform)
`--r-xl`	16px	Contenedores principales — token-table-wrap, comp-card, thesis-card, type-specimen-wrap
`--r-2xl`	24px	Reservado para modales, drawers y paneles flotantes — no implementado aún en v0.1
`--r-pill`	999px	CTA primario, badges, hero-pills, btn-bf — formas completamente redondeadas

Guía de elección rápida. Para chips y tokens de código: --r-xs (3px). Para botones de utilidad: --r-sm (5px). Para cards intermedias: --r-md o --r-lg. Para contenedores de sección: --r-xl. Para todo lo que sea CTA o badge: --r-pill. Si dudas entre dos niveles, elige el menor — el exceso de radio en elementos pequeños se lee como diseño genérico.

Fundamentos

Elevación

Cuatro tokens de sombra sobre base rgba(28,26,23, …) — el navy-900 del sistema, no negro puro. Profundidad jerárquica: plano → card → flotante → modal. En fondo oscuro, se sustituyen por glow indigo coloreado.

Escala de sombra — light mode · misma card, distinto nivel de elevación

Plano

Sin sombra

Solo border base

--shadow-xs

blur 2px · 4% opac.

--shadow-sm

blur 3px · 6% opac.

--shadow-md

blur 14px · 8% opac.

--shadow-lg

blur 32px · 10% opac.

Token	Cuándo usarlo	Componentes actuales
`--shadow-xs`	Elementos interactivos pequeños en reposo: pills, chips flotantes, badges con acción	btn-secondary (rest), icon-stat-pill
`--shadow-sm`	Cards en reposo sobre el fondo de la app. Plano pero levantado respecto al background gris	thesis-card, comp-card, token-table-wrap, inherit-wrap, roadmap-wrap
`--shadow-md`	Elementos que flotan sobre el contenido: dropdowns, tooltips, popovers, cards en estado hover	thesis-card (hover), northstar-card, swatch (hover)
`--shadow-lg`	Modales, drawers laterales y overlays de pantalla completa — capa Z más alta del sistema	Reservado — no implementado en v0.1

En fondo oscuro — glow indigo, no sombra neutra

Las sombras en rgba(28,26,23,…) se vuelven invisibles sobre fondos oscuros como #09081A. El hero ya resuelve esto con glow indigo coloreado: box-shadow con spread y blur en tonos de --ads-indigo-*. La misma técnica aplica a cualquier elemento elevado dentro del sidebar, un panel oscuro o un modal.

Equivalentes de elevación en fondo oscuro · #09081A

Plano

Borde indigo sutil

rgba(109,100,232, .14) — idéntico al borde del sidebar

Sutil

Ring + shadow-md

Técnica del northstar-card — ring indigo + sombra base

Glow

Glow luminoso

Técnica del hero (ht-bar, hero-orb-dot) — spread suave + ring

No son nuevos tokens — son composiciones de rgba ya en uso en el hero y el sidebar. Al implementar un modal oscuro o un drawer, usar esta progresión en lugar de los tokens --shadow-*.

Fundamentos

Accesibilidad

WCAG 2.2, nivel AA como base obligatoria. El campo agrícola chileno y global impone restricciones que van más allá del estándar: luz solar directa, guantes, conectividad limitada y diversidad de alfabetización son el contexto real de uso — no una excepción.

Los 4 principios — WCAG 2.2 · POUR

Perceptible

La información debe poder verse, oírse o sentirse. Contraste ≥4.5:1, texto alternativo para imágenes, no solo color para transmitir estado.

Operable

Toda funcionalidad accesible por teclado y toque. Foco visible, áreas de contacto adecuadas, sin trampas de foco ni límites de tiempo arbitrarios.

Comprensible

Contenido legible y comportamiento predecible. Errores descriptivos, lenguaje simple, patrones consistentes en toda la plataforma.

Robusto

Interpretable por tecnologías asistivas actuales y futuras. HTML semántico correcto, roles ARIA, estados comunicados programáticamente.

Mínimo requerido

Sin esto el producto es inutilizable para ciertos usuarios. Focus visible, alt text en imágenes, labels en todos los campos de formulario.

AA ← objetivo

ADS Platform target

Conforme al DS Nº 100 de GobDigital Chile y estándar internacional de facto para software empresarial. Contraste 4.5:1, resize 200%, áreas de toque mínimas.

AAA

Aspiración para campo

Contraste 7:1 y touch targets ≥44px. Recomendado para módulos usados al aire libre bajo luz solar directa — BigFarm móvil, Reglas de Cuartel.

Contextos críticos de uso — El campo chileno y global

🌾

Usuario en terreno

Tractor · invernadero · parcela
Luz solar · guantes · polvo · urgencia · sin red

Contraste 7:1 mínimo real — el sol directo reduce la percepción efectiva hasta un 40%. El estándar AA (4.5:1) no es suficiente en estas condiciones.
Touch targets ≥44×44px — guantes de cuero, nitrilo o látex imposibilitan precisión fina. WCAG 2.2 pide 24px; el campo exige 44px mínimo (iOS HIG).
Sin tooltips hover — el toque no activa hover. Información crítica debe ser visible permanentemente, no escondida detrás de interacciones secundarias.
Offline-first — conectividad rural en Chile promedia 1–5 Mbps con cortes frecuentes. Los estados de carga y error deben ser manejables sin red.
Lenguaje e íconos claros — trabajadores temporales de Haití, Venezuela, Perú y Bolivia requieren íconos reconocibles junto al texto. No depender solo de labels en español.

🖥

Oficina y administración

Escritorio · laptop · tablet
Agrónomo · jefe de campo · contador · gerencia

Navegación por teclado completa — usuarios power-user en escritorio navegan sin ratón. Tab order lógico, shortcuts documentados, skip-links.
Lectores de pantalla — NVDA/JAWS en Windows, VoiceOver en macOS/iOS. Semántica HTML5 correcta: roles landmark, aria-label, aria-live para alertas.
Contraste 4.5:1 AA — pantallas interiores bajo luz controlada. El estándar WCAG es suficiente; no sacrificar legibilidad por contraste excesivo en textos decorativos.
Resize al 200% sin scroll horizontal — presbicia frecuente en jefes de campo y gerentes de 45+ años. El layout debe fluir, no romper.
Errores descriptivos y accionables — planillas de riego, registros SAG, formularios de cuartel. Cada error debe decir qué falló y cómo corregirlo.

Contraste de color — tokens ADS Platform auditados

Texto en botón primario Texto secundario

9.9 : 1

#fff · indigo-700

AA ✓AAA ✓

Texto de cuerpo principal Texto nivel 2

17.4 : 1

navy-900 · blanco

AA ✓AAA ✓

Enlace y acento plataforma Token indigo-500

7.9 : 1

indigo-600 · blanco

AA ✓AAA ✓

Texto auxiliar y metadatos Hint / placeholder

4.0 : 1

gray-500 · blanco

AA texto grande

Acento BigFarm verde Hover: green-600

2.5 : 1

bf-green-500 · blanco

AA ✗ texto

Elemento desactivado Estado disabled

2.6 : 1

gray-400 · blanco

AA ✗solo disabled

BigFarm verde (#65B32E) sobre blanco da 2.5:1 — falla AA para cualquier tamaño de texto. Para texto interactivo usar bf-green-600: #4D8F1F (3.7:1, pasa AA para texto grande ≥18px). Para texto de cuerpo en campo bajo sol directo, se requiere un alias dark: #3B7015 (~5.8:1 · AA ✓). Este es el problema de accesibilidad activo más crítico del ecosistema.

Áreas de toque — WCAG 2.2 (2.5.8) vs realidad de campo

24×24

WCAG 2.2 mínimo
2.5.8 nivel AA

32×32

ADS btn-icon base
Oficina / escritorio

44×44

iOS HIG · recomendado
Móvil campo ✓

56×56

Campo crítico
Guantes · lluvia ✓

Los botones pill de ADS garantizan un área horizontal amplia incluso con altura de 36–38px. El caso crítico son los btn-icon (32px): en interfaces móviles de campo, agregar padding: 6px invisible alrededor para llevar el área activa a 44px sin cambiar el aspecto visual.

No solo color — el semáforo de alertas es WCAG 1.4.1 compliant

WCAG 1.4.1 prohíbe usar el color como único medio de transmitir información. El 8% de los hombres tienen algún grado de discromatopsia (deuteranopia, protanopia) — en un equipo de 50 personas de campo, eso son 4 usuarios. El semáforo ADS resuelve el problema con tres capas redundantes simultáneas.

CRÍTICO

1Color rojo · señal de peligro

2Dot circular · forma geométrica

3Texto "CRÍTICO" · inequívoco

Aplica a variables fuera de rango, alarmas activas, fechas de vencimiento SAG.

ADVERTENCIA

1Color ámbar · precaución

2Dot circular · forma geométrica

3Texto "ADVERTENCIA" · inequívoco

Aplica a umbrales próximos, stock bajo, tareas pendientes con plazo próximo.

ÓPTIMO

1Color verde · estado sano

2Dot circular · forma geométrica

3Texto "ÓPTIMO" · inequívoco

Aplica a variables dentro de rango, tareas completadas, stock suficiente.

Regla de implementación: nunca mostrar solo el dot de color sin texto acompañante en tablas o listados de alertas. En pantallas con brillo reducido (ahorro de batería en campo), el texto es la señal más fiable. En futuras versiones, añadir un ícono geométrico distinto por nivel (✕ · △ · ✓) para una tercera capa de redundancia visual independiente del color.

Fundamentos

Motion

ADS Platform comunica estabilidad. Cada elemento que se mueve justifica su existencia por la información que transmite — confirma un estado, guía la atención o señala progreso. Si la animación puede quitarse sin pérdida de contexto, se quita.

Principio rector: animación funcional, nunca decorativa. El contexto de uso no admite trabajo de renderizado gratuito: dispositivos de gama baja en campo, conectividad de 1–5 Mbps con cortes frecuentes, pantallas bajo luz solar directa donde el movimiento distrae más que informa. Cada transición es deuda de rendimiento — cobrarla solo cuando aporta valor al usuario.

Token / nombre	Valor	Cuándo aplicar	Usos actuales en el sistema
`--t-fast`	0.12s ease · 120ms	Respuesta inmediata a input directo — el usuario ya tomó la decisión	Hover de botón, color de borde de input, highlight de fila en tabla
`--t-base`	0.18s ease · 180ms	Transiciones que afectan más de una propiedad o un componente compuesto	Sombra de card en hover, aparición de focus ring, activación de nav-link activo
`btn-spin`	0.65s linear ∞	Única animación de bucle autorizada en UI interactiva — señala proceso en curso	Estado `btn-loading` en Primary, Secondary y Destructive

Qué se anima y qué no

✓

SÍ anima

Funcional — comunica estado, progreso o atención

Cambios de estado de botón — color, sombra y borde en hover / active / focus. 120ms (--t-fast). El usuario confirmó una intención.
Loading spinner — indica proceso en curso. Es el único loop autorizado en pantallas interactivas y va vinculado a una acción explícita del usuario.
Focus ring en inputs y controles — aparición suavizada en 120ms. Sin transición, el salto brusco se lee como glitch en pantallas de baja tasa de refresco.
Aparición de badge o alerta — fade in + translate Y ≤6px en 180ms (--t-base). Señala novedad sin bloquear la lectura del contenido existente.
Apertura de dropdown — opacity o max-height en 180ms. Sin transforms 3D, sin bounce ni elastic easing — no es una app de consumo.

NUNCA anima

Decorativo o costoso — no aporta información

Transiciones de página completa — fade, slide o morph entre rutas. Confunde el contexto de navegación y es lento en redes 2G / 3G del campo.
Parallax y scroll-triggered — fuerza reflows continuos en el hilo principal. Inútil en móvil táctil y destructivo en dispositivos de gama baja.
Autoplay de cualquier tipo — video, GIF, carrusel automático. Consume datos móviles limitados sin consentimiento; el usuario en campo no puede detenerlo con guantes.
Shimmer skeleton en listas largas — animar N filas simultáneamente es trabajo de GPU proporcional al tamaño de la lista. Usar un spinner único o un estado estático.
Fondos o logos en loop — movimiento ambiental sin propósito. Excepción única ya documentada: el dot de estado en el sidebar (blink) y el hero dot (glow) — ambos deben detenerse con prefers-reduced-motion.

prefers-reduced-motion — regla obligatoria, no opcional

Usuarios con epilepsia fotosensible, migraña, vértigo o fatiga visual activan esta preferencia del sistema operativo. Ignorarla es una falla de accesibilidad (WCAG 2.1 SC 2.3.3). El archivo actual no incluye este bloque todavía — es el próximo paso obligatorio antes de que cualquier componente animado llegue a producción.

Regla: bajo esta condición, los tokens --t-fast y --t-base colapsan a duración mínima. Las animaciones de bucle (blink, glow, btn-spin) pasan a animation-duration: 0.01ms — el navegador las detiene sin eliminarlas del DOM ni romper el layout.

@media (prefers-reduced-motion: reduce) {
  /* Colapsar todas las transiciones y animaciones */
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

Componentes

Botones

Sistema de dos radios: pill (999px) para CTA primario, 5px para utilidades. La forma comunica jerarquía antes de que el usuario lea el label — el CTA destaca por contorno, no solo por color.

Propuestas de forma — selección de radio

Sharp · 0px
Brutalist, demasiado frío para agro

Técnico · 5px
Preciso, no compite con el CTA

Típico · 8–10px
El estándar de 2026 — genérico

Pill · 999px
CTA inconfundible — seleccionado ✓

pill Primary (CTA) — flujos de creación y confirmación irreversibles. La forma pill maximiza la visibilidad periférica: el usuario lo ve antes de leerlo.

5px Secondary, Ghost, Destructive — acciones de utilidad que no deben competir con el CTA. Un radio mínimo es más preciso y técnico que el 8px genérico.

Variantes

Primary CTA del flujo. Siempre pill — inconfundible en vista periférica. Color heredable por producto.

Secondary Alternativa al CTA. Borde sutil + hover en tinta indigo. Nunca compite visualmente.

Ghost Escape, navegación o acción terciaria. Sin borde visible — mínima presencia visual.

Destructive Acciones irreversibles. Rojo contenido en reposo, lleno en hover — señal inequívoca de peligro.

Tamaños

Variante SM — 5·11px · 11.5px MD — 8·16px · 13px LG — 11·22px · 14px

Primary

Secondary

Ghost

Con íconos

← Icono izquierda

CTA y acción secundaria con ícono de acción

Icono derecha →

Dropdown o navegación — el ícono indica continuación

Solo icono

Barras de herramientas — siempre con tooltip accesible

Estados

Variante Default Loading Disabled

Primary

Secondary

Destructive

Por contexto de producto — ADS Platform · BigFarm

ADS Platform · Indigo

BigFarm · Verde marca

Componentes

Badges & estado

El semáforo de alerta (crítico / advertencia / óptimo) es invariante — se hereda exacto, sin reinterpretación por producto.

Estado de variable — heredado sin cambios

CRÍTICO ADVERTENCIA ÓPTIMO NUEVO · PLATAFORMA

Badge "NUEVO · PLATAFORMA" — Pendiente de definir con Gabriel. Uso previsto: marcar en documentación y en UI los componentes, tokens o patrones introducidos en la capa ADS Platform que no existían en BigFarm v1.0 — elementos de alcance transversal disponibles para todos los productos, no heredados de uno específico. Sin regla definida aún sobre si expira tras un ciclo de versión (comportamiento temporal, como un "changelog vivo") o si actúa como marcador permanente de origen de plataforma.

Componentes

Formularios

Label visible sobre el campo en todos los casos — nunca placeholder como sustituto. Radius 5px (técnico, igual que botones de utilidad). Focus ring en indigo-600 con halo 3px. Error en rojo-600, descriptivo y accionable.

Text input — 5 estados

Default

Nombre del cuartel Nombre único dentro del predio

Focus

Nombre del cuartel Nombre único dentro del predio

Filled

Nombre del cuartel Nombre único dentro del predio

Error

Nombre del cuartel Solo letras, números y guión. Sin caracteres especiales.

Disabled

Nombre del cuartel Solo lectura en este contexto

Select / Dropdown — 5 estados

Default

Especie Especie principal del cuartel

Focus

Especie Especie principal del cuartel

Filled

Especie Especie principal del cuartel

Error

Especie Debes seleccionar una especie antes de continuar.

Disabled

Especie Solo lectura en este contexto

Checkbox y Radio — estados

Unchecked

Checkbox

Riego activo

Radio

Temporal

Checked

Checkbox

Riego activo

Radio

Temporal

Disabled off

Checkbox

Riego activo

Radio

Temporal

Disabled on

Checkbox

Riego activo

Radio

Temporal

Mensajes bajo el campo — error y helper text

Error — descriptivo y accionable

Superficie del cuartel (ha) Ingresa solo el número en hectáreas (ej: 12.5). Sin letras ni unidades.

El mensaje identifica qué falló y cómo corregirlo — exigido por WCAG SC 3.3.1 y por el contexto de oficina donde el agrónomo debe entender el error sin llamar al soporte.

Helper text — orientación preventiva

GDA acumulada Grados día acumulados desde inicio de temporada. Se calcula como suma de (T máx + T mín) / 2 − T base.

El helper text aparece siempre visible, nunca como tooltip — la accesibilidad en campo (sin hover) lo requiere. Gris 500, 11.5px. Opcional: se omite cuando el label es suficientemente claro.

Ecosistema

Productos del ecosistema

ADS Platform actúa como la nave nodriza — provee la capa compartida de tokens, tipografía y semántica de estado sobre la que cada producto construye su identidad propia.

Nave nodriza · Plataforma madre

ADS Platform

La capa de herencia compartida. Todas las decisiones de color, tipografía, spacing y semántica de estado parten aquí y fluyen hacia cada producto hijo. Un cambio en ADS Platform afecta el ecosistema completo.

v0.1 · Borrador activo Tokens: --ads-* 3 productos heredan

En desarrollo activo

Sistema de Gestión Predial

Gestión de predios, cuarteles, temporadas y aplicaciones agrícolas. Primer producto nativo del stack ADS — diseño en curso.

--sgp-*

Refactor pendiente

BigFrut

Plataforma de trazabilidad frutícola. Refactor externo pendiente para integrar tokens ADS y alinear identidad de marca.

--bfr-*

SIC

En planificación

Sist. Inteligencia de Clientes

CRM inteligente con análisis de comportamiento comercial. Identidad visual en definición — logo e identidad de marca pendientes.

--sic-*

Componentes

Estados de página

Pantallas completas que el usuario ve cuando no hay contenido, hay un error o el sistema está cargando. En un producto offline-first, estos estados son tan frecuentes como los estados normales — deben comunicar con claridad y siempre ofrecer un camino de acción.

Tres estados críticos

Empty · Error · Skeleton — variantes obligatorias para cualquier vista con datos remotos

Empty state — sin datos

Sin datos aún

Ningún cuartel registrado en esta vista. Crea el primero para comenzar a registrar actividad.

Error state — falla de carga

Error al cargar

No se pudo obtener la información del servidor. Verifica la conexión e intenta de nuevo.

Skeleton loading — estructura predecible

Skeleton sobre spinner — cuando la estructura del contenido es predecible (listas, tablas, cards), el skeleton comunica al usuario qué va a aparecer y hace que la espera se sienta más corta. El spinner genérico solo se usa cuando la estructura varía en tiempo de ejecución o la carga es menor a 300ms. El skeleton de este sistema no usa animación de shimmer — consistente con la regla de motion del documento: la animación debe justificarse funcionalmente, no decorativamente. Si se activa el shimmer en el futuro, debe respetar prefers-reduced-motion. Regla de error: todo estado de error debe ofrecer al menos una acción de recuperación (reintentar, volver atrás, contactar soporte). Un error sin salida es un callejón sin salida de UX.

Iconografía · Heredado de BigFarm

Librería de íconos

No se inventa nada nuevo. Esta es la iconografía real extraída del código fuente de BigFarm MVP1 — se adopta tal cual como base de ADS Platform.

105 íconos Lucide únicos 4 especies activas en datos reales 11 especies en catálogo MVP1 13 emojis de interfaz adicionales

Especies en uso real — farmData.ts

Cereza🍒 1f352

Uva🍇 1f347

Kiwi🥝 1f95d

Manzana🍎 1f34e

Catálogo expandido MVP1 — MatrixFilters.tsx

Manzana🍎 1f34e

Cereza🍒 1f352

Kiwi🥝 1f95d

Uva🍇 1f347

Palta🥑 1f951

Arándano🫐 1fad0

Naranja🍊 1f34a

Limón🍋 1f34b

Durazno🍑 1f351

Pera🍐 1f350

Nogal🌰 1f330

Otros emojis usados en la interfaz

Completado✅ 2705

Reporte📋 1f4cb

Ubicación📍 1f4cd

Riego💧 1f4a7

Maquinaria🚜 1f69c

Sensor📡 1f4e1

Fundo🏡 1f3e1

Cordillera🏔️ 1f3d4

Vegetación🌿 1f33f

Montaña⛰️ 26f0

Secano🏜️ 1f3dc

Agrónomo👨‍🌾

Ejecutivo👨‍💼

UI — Lucide usados en BigFarm (105 íconos)

Activityactivity

AlertOctagonoctagon-alert

AlertTriangletriangle-alert

Appleapple

ArrowLeftarrow-left

ArrowRightarrow-right

ArrowUparrow-up

BarChartchart-column-inc

BarChart3chart-column

Bellbell

BookOpenbook-open

Bookmarkbookmark

BookmarkCheckbookmark-check

Botbot

Brainbrain

BrainCircuitbrain-circuit

Bugbug

Building2building-2

Calendarcalendar

Checkcheck

CheckCheckcheck-check

CheckCirclecircle-check-big

CheckCircle2circle-check

ChevronDownchevron-down

ChevronLeftchevron-left

ChevronRightchevron-right

ChevronUpchevron-up

Circlecircle

Clockclock

Cloudcloud

CloudDrizzlecloud-drizzle

CloudRaincloud-rain

CloudSuncloud-sun

Coinscoins

Crowncrown

Databasedatabase

Dropletsdroplets

ExternalLinkexternal-link

Eyeeye

EyeOffeye-off

FileDownfile-down

FileJsonfile-braces

FileSpreadsheetfile-spreadsheet

FileTextfile-text

Filterfunnel

Grid3X3grid-3x3

GripVerticalgrip-vertical

HelpCirclecircle-help

Historyhistory

Inboxinbox

Infoinfo

Landmarklandmark

Layerslayers

LayoutGridlayout-grid

Leafleaf

Loader2loader-circle

Locatelocate

Locklock

LogOutlog-out

Mailmail

MapPinmap-pin

MessageSquaremessage-square

MoreHorizontalellipsis

Mountainmountain

Navigationnavigation

PauseCirclecircle-pause

Pencilpencil

PlayCirclecircle-play

Plugplug

Plusplus

Radioradio

RefreshCwrefresh-cw

Satellitesatellite

Savesave

Searchsearch

Sendsend

SendHorizontalsend-horizontal

Settingssettings

Settings2settings-2

Shieldshield

ShieldCheckshield-check

Signalsignal

SlidersHorizontalsliders-horizontal

Sparklessparkles

SprayCanspray-can

Sproutsprout

Starstar

Sunsun

Thermometerthermometer

ToggleLefttoggle-left

ToggleRighttoggle-right

Tractortractor

Trash2trash-2

TrendingDowntrending-down

TrendingUptrending-up

Uploadupload

Useruser

Usersusers

Wifiwifi

Windwind

XCirclecircle-x

Zapzap

ZoomInzoom-in

ZoomOutzoom-out

Ningún ícono coincide con ""

Rutas relativas a la carpeta ads_platform-icons-/, ubicada junto a este HTML. Si la carpeta se mueve, las rutas de imagen deben actualizarse.

Camino a seguir

Qué falta y por qué este v0.1 alcanza para hoy

Honesto sobre el alcance: esto desbloquea la conversación con Gabriel, no cierra el Design System completo.

Bloqueante para uso en producción 3

Qué falta	Estado	Por qué bloquea
CSS `prefers-reduced-motion`	Pendiente	Violación WCAG 2.1 SC 2.3.3 activa. Ningún componente con transición puede ir a producción sin este bloque en el CSS global. Documentado en §Motion como "próximo paso obligatorio".
Tokens semánticos completos — superficie y estado en modo oscuro	En curso	BigFarm BI ya opera en dark mode en producción. Sin tokens formalizados, cada equipo define los colores de superficie de forma independiente — imposible mantener coherencia cross-product.
Componentes cross-product — mapa, agente LLM, selector de entidad	Pendiente	Existen 3 implementaciones divergentes hoy. Bloquea que SGP y BigFarm BI compartan interfaz real. Requiere auditoría de las 3 versiones antes de canonizar una sola solución.

Mejora incremental 4

Qué falta	Estado	Por qué no está hoy
Badge "NUEVO · PLATAFORMA" — regla de uso	Pendiente	Requiere decisión de Gabriel: ¿el badge es temporal (expira tras un ciclo de versión, como changelog vivo) o permanente (marcador de origen de plataforma)? Sin esa definición, la regla no se puede documentar con precisión.
Íconos geométricos por nivel de alerta — ✕ △ ✓ junto al dot de color	Pendiente	Tercera capa de redundancia visual independiente del color. Necesaria para pantallas con brillo reducido en campo. Los badges semáforo actuales ya cubren el caso base — esto refuerza sin desbloquear nada nuevo.
Logotipo oficial ADS Platform	Pendiente	Requiere validación de identidad con Gabriel antes de producir el isotipo final. El logo provisional actual (logo1_ads_1.png) es funcional para este borrador.
Logotipo SGP	Pendiente	Mismo bloqueo de decisión de marca que el logotipo ADS Platform. Depende de la dirección de identidad de plataforma acordada con Gabriel.

Resuelto en v0.1: Escala de spacing/radius — documentada en §Spacing & Radius, validada desde BigFarm, sin cambios pendientes.

DesignSystem

Cómo usar este documento

Por qué este Design System

BigFarm resolvió cómo hablarle al campo.ADS Platform resuelve cómo escalar esa voz a 7 productos.

Cómo hereda cada producto

Design Tokens — Capa primitiva

Paleta de color

Tipografía

Spacing & Radius

Elevación

Accesibilidad

Motion

Botones

Badges & estado

Formularios

Productos del ecosistema

Estados de página

Librería de íconos

Qué falta y por qué este v0.1 alcanza para hoy

BigFarm resolvió cómo hablarle al campo.
ADS Platform resuelve cómo escalar esa voz a 7 productos.