BigFarm — Design System v1.0

Misión de diseño

BigFarm no es una app de datos.
Es una herramienta que evita pérdidas.

Cada decisión de diseño debe responder a una sola pregunta:
¿Esto ayuda al administrador a actuar más rápido cuando hay un problema crítico en el campo?

La UI no es el producto — es el canal de confianza entre el dato del sensor y la decisión del productor.

North Star · BigFarm

"Cada alerta de BigFarm que evita una pérdida de cultivo es un agricultor que se queda con nosotros para siempre.
No entregamos una app; entregamos tranquilidad."

— Caso de Negocio MVP1, ADS · ANASAC

Principios de diseño

01

⚡

Velocidad sobre estética

Un administrador de campo pierde 40 minutos diarios navegando entre plataformas. Cada clic extra tiene un costo real. La UI debe llevar al usuario a la acción en el menor número de pasos posible, sin fricción cognitiva.

La Regla de los 40 Minutos

02

🔔

La alerta llega al bolsillo

Una falla crítica no detectada en 48 horas puede destruir el 15–20% del rendimiento de un cuartel. El diseño omnicanal garantiza que el problema llega al productor en minutos, no en días.

Alertas Omnicanal N1

03

🤖

IA como filtro de ruido

Los administradores están saturados de datos técnicos pero carecen de acciones claras. La IA no predice el futuro: traduce el presente. Convierte "28% humedad" en una explicación accionable.

BigFarm IA N1

04

🏗

Confianza industrial

La tecnología agrícola suele fallar en el campo. BigFarm debe sentirse como maquinaria física — robusta, predecible, sin sorpresas. Uptime 99.9%, diseño offline-first, bajo consumo de batería en terreno.

Uptime N1

05

🎯

Cero fricción en MVP1

Sin módulos complejos de bodega o stock. Sin onboarding elaborado. El foco exclusivo es la planta y su entorno: humedad, temperatura, suelo, NDVI. Todo lo demás es ruido para esta etapa.

Sensor Centric

06

📡

El dato habla por sí solo

La Satellite Matrix no es una tabla de reportes — es un semáforo operativo. El color y el estado deben comunicar urgencia sin que el usuario tenga que interpretar números crudos.

Visión Satelital

Usuarios objetivo

👨‍💼

Administrador de Campo

Usuario primario

Necesita ver todo el estado de sus cuarteles de un vistazo y actuar en segundos ante una alerta crítica. Trabaja desde escritorio y terreno. Odia las apps que no funcionan sin WiFi.

🧑‍🌾

Productor / Dueño

Usuario senior

Recibe alertas por WhatsApp. No usa la plataforma a diario — solo cuando hay un problema. Necesita que el mensaje sea claro: problema, ubicación, y qué hacer. Sin tecnicismos.

🌱

Agrónomo Asesor

Usuario técnico

Sube documentos técnicos a la Base de Conocimiento y configura reglas de alerta. Valora la precisión del dato satelital (NDVI, 10m/px) y la trazabilidad del historial de ejecuciones.

Flujo crítico — El viaje de la alerta

01

📡

Captura de datos

Sensor de campo
Pessl / Wiseconn

02

⚙️

Regla de Alerta

BigFarm evalúa
regla de alerta

03

🔴

Semáforo

Matrix cambia
a CRÍTICO

04

💬

WhatsApp + Mail

Alerta llega
al bolsillo y al mail

05

✅

Acción

Intervención
crítica en campo

💎 El valor de diseño: El agricultor recibe en un solo mensaje: el problema, la causa, la posición exacta y una solución inmediata.
El tiempo de detección (MTTD) pasa de días a minutos.

North Star Metrics — ¿Cómo sabemos que estamos ganando?

Superficie Bajo Vigilancia

691 ha

Total de hectáreas activas en BigFarm. Mide penetración de mercado y escala de infraestructura.

Relevancia del Dato (CTR)

Alertas → Clics

Ratio alertas enviadas vs. revisadas. Si hace clic, el dato es útil. Si lo ignora, es ruido.

MTTD objetivo

< 5 min

Tiempo medio de detección de falla crítica. Una rotura no detectada en 48h destruye 15–20% del rendimiento.

Uptime plataforma

99.9%

BigFarm como herramienta industrial. Si falla el sistema, falla el campo. No es un gadget.

Voz y tono — Cómo habla BigFarm

✓ BigFarm dice	✗ BigFarm no dice
Cuartel B-12 · Humedad crítica detectada (15%) Activa riego de emergencia en los próximos 30 min.	"Se ha producido un evento de umbral en el nodo de sensor #7 de la red de monitoreo..."
Análisis IA: Este patrón ocurre 3 veces por semana en noches bajo 5°C. Considera cubrir el sector antes del anochecer.	"Los datos de telemetría sugieren una correlación estadística con variables meteorológicas exógenas..."
Sincronización activa · hace 14 min	"Estado del servicio: operacional. Última verificación de conectividad completada exitosamente."

Directo

Va al grano. Sin intro. El título de la alerta dice exactamente qué pasó y dónde.

Accionable

Cada mensaje incluye un próximo paso claro. No informa — instruye. El usuario nunca se queda sin saber qué hacer.

Confiable

Sin falsos positivos. Si BigFarm alerta, es real y urgente. La confianza se gana alerta a alerta.

Decisiones de diseño clave — ADRs

Decisión	Alternativa descartada	Razón
Satellite Matrix como vista principal	Dashboard con gráficos por variable	El administrador necesita ver 12 cuarteles × N variables simultáneamente. Un grid es más denso y escaneable que N gráficos separados.
WhatsApp como canal de alerta N1	Push notification de app propia	WhatsApp tiene 98% de tasa de apertura en el segmento. El productor ya lo tiene en el bolsillo. No requiere instalar nada adicional.
Estado semántico: 3 niveles (Crítico / Advertencia / Óptimo)	Escalas de color continuas o 5 niveles	Reducir la carga cognitiva. El usuario debe decidir en segundos. Más de 3 estados paraliza la decisión.
IA como "Agrónomo que no duerme"	IA predictiva en MVP1	En esta etapa no hay suficiente historial. El LLM traduce el dato presente en lenguaje natural — no predice. La predicción viene en Fase 3.
Inter como tipografía única	Múltiples familias tipográficas	Inter es legible a 11px, tiene variantes numéricas tabulares ideales para la matrix, y es gratuita. La consistencia tipográfica reduce fricción visual.

Token	Valor	Uso
--bf-green-500	#65B32E	Primary action, nav activo, CTA principal
--bf-green-600	#4D8F1F	Hover primary, texto sobre green-50
--bf-green-50	#F0F8E8	Fondos IA, badges activo, farm chip activo
--bf-green-100	#D4EDB0	Bordes en contextos verdes
--bf-navy-900	#14181F	H1, H2, valores principales, texto fuerte
--bf-navy-700	#1E2736	Texto sobre fondo oscuro, FAB hover
--bf-gray-500	#707886	Labels, subtítulos, placeholders, iconos
--bf-gray-200	#D1D5DC	Separadores, dividers, toggle off
--bf-gray-100	#E8EBF0	Fondo chips inactivos, avatar fallback
--bf-gray-50	#F2F5F7	Background principal de la app
--bf-white	#FFFFFF	Cards, panels, modales, nav, header
--bf-border	#E2E6EC	Borde estándar en toda la interfaz
--bf-red-600	#C0392B	Estado crítico: texto, borde, dot, badge
--bf-red-100	#FDECEA	Estado crítico: fondo badge y celda
--bf-amber-600	#D4791A	Advertencia: texto, borde, dot, badge
--bf-amber-100	#FEF4E8	Advertencia: fondo badge y celda

Marca — BigFarm Green

Green 500#65B32EPrimary, CTA, nav active

Green 600#4D8F1FHover, texto sobre green-50

Green 100#D4EDB0Bordes IA, notif chips

Green 50#F0F8E8Fondos sutiles IA, badges

Neutros

Navy 900#14181FHeadings, valores

Navy 700#1E2736FAB bg, body dark

Gray 500#707886Labels, subtítulos

Gray 200#D1D5DCDividers, toggle off

Gray 100#E8EBF0Chips inactivos

Gray 50#F2F5F7App background

White#FFFFFFCards, panels, modales

Border#E2E6ECBorde estándar 1px

Semánticos

Red 600#C0392BCrítico: texto, borde

Red 100#FDECEACrítico: fondos

Amber 600#D4791AAdvertencia: texto, borde

Amber 100#FEF4E8Advertencia: fondos

24px / 700 / #14181F
H1 — Headings principalesDashboard del Campo

18px / 700 / #14181F
H2 — Títulos de secciónMis Alertas Inteligentes

15px / 700 / #14181F
H3 — Subtítulos, farm nameEl Roble · Fundo Principal

13px / 500 / #14181F
Body strong — nav links, alert titleHelada Crítica Sector 4

13px / 400 / #707886
Body — descripcionesConfigura, prioriza y controla las condiciones que protegen tu producción.

11px / 600 / #707886 / UPPERCASE
Label — field labels, section headsLógica de Disparo

10px / 700 / #707886 / UPPERCASE
Micro — table headers, badge textVariable / Cuartel

18–28px / 700 / #14181F
Stats — valores numéricos grandes450 GDA

Spacing — base 8px

4px

8px

12px

16px

20px

24px

32px

40px

Border Radius

4px — xs
tags inline

6px — sm
badges, icon btns

8px — md
inputs, cells

12px — lg
cards, panels

16px — xl
modales

pill
farm chips, nav

Estado de variables (Matrix)

Crítico Advertencia Óptimo

Estado de reglas

Activa Pausada

Severidad de alertas

Alta Media Baja

Procesamiento de documentos

Procesado Procesando

Variantes principales

Tamaño small

Icon buttons

Nombre de regla

Severidad

Zona horaria

Categoría activa

Plan de acción

Activación

Estado activo

Monitoreo en tiempo real

Notificaciones

WhatsApp · Email · Dashboard

Canales de notificación

JD

Juan D.

TUS CAMPOS 691 ha monitoreadas

🏡 El Roble

⛰ La Esperanza

🌿 Valle Verde

⛰ Monte Grande

🌲 Rancho Solo

El Roble 🌱 Crecimiento de Fruto (Llenado)

GDA450

H. Frío120h

Lluvia15%

RESUMEN DE ALERTAS 12 cuarteles en riesgo de 12 CRÍTICOS 226 ADV. 380

EspecieTodasManzanaCerezaKiwi

Variedad

Categoría

Cuartel

Variable / Cuartel	CUARTEL 2 3 Fuji	CUARTEL 6 3 Santina	CUARTEL 9 Bing	CUARTEL 1 Gala	CUARTEL 4 Granny Smith
Eficiencia Riego (%)	84%Crítico	73%Crítico	89%Óptimo	11%Óptimo	28%Advertencia
Reserva Útil (%)	11%Advertencia	27%Crítico	89%Advertencia	57%Crítico	65%Óptimo
Horas de Riego (h)	59Crítico	171Advertencia	104Óptimo	81Óptimo	15Óptimo

❄

Helada Crítica Sector 4

AL-0042 · Alta | Temp < 1.2°C en Cuartel B-12 · Estación iMetos #3

Hoy, 04:15 AM

● ACTIVA

💧

Humedad Baja Cuartel B-12

AL-0051 · Media | Hum. Suelo < 15% (30cm) · Wiseconn Drip Node #7

Ayer, 21:30 PM

● ACTIVA

🌿

Vigor Vegetativo Bajo

AL-0089 · Baja | NDVI < 0.65 (Sentinel-2) · Sentinel-2 MSI L2A

12 Oct, 09:00 AM

PAUSADA

✓

4

Reglas Activas

⏸

2

Pausadas

⚠

2

Alta Prioridad

Pessl Instruments

Monitoreo ambiental de alta precisión en tiempo real.

24

Sensores Activos

4.2s

Latencia Media

Sentinel Hub

Procesamiento de imágenes satelitales multiespectrales.

NDVI

Modo Activo

10m/px

Resolución

💦

Wiseconn

Riego Preciso · Automatización de válvulas

🌤

Davis Vantage

Clima Local · Pronóstico hiper-local

🪐

Planet

Alta Resolución Satelital · Actualización diaria

FAB fijo — bottom: 24px, right: 24px
Background: --bf-navy-900 · Border-radius: 50%

main.ts

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import '@/styles/bigfarm-design-system.css'

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      darkModeSelector: '.dark',
      cssLayer: false
    }
  }
})

Variables override (en bigfarm-design-system.css)

:root {
  /* Button */
  --p-button-primary-background:       #65B32E;
  --p-button-primary-hover-background: #4D8F1F;
  --p-button-primary-color:            #ffffff;
  --p-button-border-radius:            8px;

  /* Input */
  --p-inputtext-border-color:          #E2E6EC;
  --p-inputtext-focus-border-color:    #65B32E;
  --p-inputtext-border-radius:         8px;
  --p-inputtext-color:                 #14181F;

  /* Select / Dropdown */
  --p-select-border-color:             #E2E6EC;
  --p-select-border-radius:            8px;
  --p-select-focus-border-color:       #65B32E;
  --p-select-option-selected-background: #F0F8E8;
  --p-select-option-selected-color:    #4D8F1F;

  /* Dialog / Modal */
  --p-dialog-border-radius:            16px;

  /* ToggleSwitch */
  --p-toggleswitch-checked-background: #65B32E;

  /* Primary color mapping */
  --p-primary-50:    #F0F8E8;
  --p-primary-500:   #65B32E;
  --p-primary-600:   #4D8F1F;
  --p-primary-color: #65B32E;
  --p-primary-contrast-color: #ffffff;
}

Clase de convención — prefijo BEM con bf-

<!-- Bloque -->
<div class="bf-alert-item bf-alert-item--alta">

  <!-- Elemento -->
  <div class="bf-alert-item__title">Helada Crítica Sector 4</div>
  <div class="bf-alert-item__status bf-alert-item__status--activa">
    ● ACTIVA
  </div>

</div>

Design Foundations

Design Tokens

Paleta de Color

Tipografía

Espaciado & Border Radius

Badges & Estado

Botones

Formularios

Navegación — BigFarmHeader

Farm Selector

Farm Info Bar + Alerts Summary + Filters

Satellite Matrix

Alert Items

Stat Cards

Conexiones

Footer & FAB (Copiloto IA)

PrimeVue 4.5.4 — Configuración