Sistemade diseño2027

FirmaADS, una empresa Anasac

La firma completa es la única forma de presentar ADS hacia afuera. El respaldo de Anasac es parte del logo, no un agregado, igual que en Gleba, Hortus, Xilema y Difem.

PrincipalA color sobre blanco o superficie clara. Es la versión preferente.

Sobre azulIsotipo verde y letras blancas, como las filiales en el manual Anasac 2025 (página 20).Propuesta · valida Marketing

NegativoTodo blanco, solo cuando el color no es posible (manual 2.1.3).

• 1Siempre la firma completa en piezas externas. «ADS» sin respaldo se usa solo dentro de los productos: ícono de la app, pestaña del navegador e interfaz.
• 2En texto, la primera mención es «ADS, una empresa Anasac»; después basta «ADS». Siempre en mayúsculas: se lee A-D-S.
• 3En buscadores y redes, el nombre va con Anasac. «ads» es una palabra común en internet. El título de la web es «ADS · una empresa Anasac» y los perfiles usan «ADS Anasac». El nombre de usuario en redes está por confirmar.
• 4La firma no se toca. No se recolorea, no se separa el respaldo, no lleva sombras ni degradados y nunca se apoya directo sobre una foto.

CorrectoFirma completa, con espacio alrededor.

CorrectoSobre azul ADS, en superficie sólida.

IncorrectoQuitar «una empresa Anasac» en una pieza externa.

IncorrectoCambiar los colores de la firma.

Construcciónárea de protección y tamaño mínimo

La medida base es «a»: el radio del isotipo, igual que en el manual Anasac (2.1.6). Se repite alrededor de toda la firma; dentro de ese margen no entra texto, foto ni otro logo.

aa

Uso	Mínimo
Firma completa en pantalla	240 px de ancho
«ADS» sin respaldo, solo en producto	24 px de alto
Firma completa impresa	Por definir con Marketing

Bajo 240 px de ancho, «una empresa Anasac» deja de leerse. Los mínimos en pantalla son una propuesta de este sistema; el manual Anasac no fija mínimos para las firmas de las filiales.

Recursos gráficostres, cada uno con su función

ADS se reconoce por pocos recursos usados siempre igual. Ninguno es decoración: cada uno dice algo.

Dirección de la imagen de campaña

[Frasede empresa]

Boceto de dirección. La frase de empresa, la foto final con personas y la imagen de campaña se aprueban el 6 de noviembre. Los anillos se dibujan una sola vez al cargar (ver 2.5 Movimiento).

Vozcomo alguien de campo que sabe de tecnología

Cercana y sin tecnicismos. Cada historia parte por el problema del campo. Si alguien del equipo de terreno no lo entiende al primer intento, se reescribe.

Ejemplos de forma, no textos para publicar. Toda afirmación técnica la valida el CTO antes de salir.

Datos de marcauna sola fuente para todos los documentos

Estos textos se copian desde aquí, no se reescriben. Si algo cambia, cambia primero aquí y después en la presentación, la web y las redes.

Propósitouna referencia común

Este documento define cómo se ven, cómo se comportan y cómo se construyen las interfaces de ADS. Es la referencia para diseño y desarrollo, y la base común de todos los productos: lo que se decide aquí se hereda en cada uno de ellos.

• APara diseño: fundamentos, componentes y reglas de uso, listos para trasladar a Figma.
• BPara desarrollo: tokens como variables CSS con prefijo --ads-, que cada producto consume sin redefinir.
• CPara marca: la forma correcta de aplicar el azul y el verde de Anasac en producto digital.

Principiosseis criterios para decidir

Seis criterios para decidir cuando una regla no alcanza.

Lo que este sistema no usa

Arquitectura de marcauna plataforma, tres productos

Dos capas. La plataforma define todo lo compartido; cada producto conserva su identidad y hereda el resto.

El esquema completo del ecosistema, con el estado de cada producto, está en 3.8 Ecosistema de productos.

Colordos colores, nunca mezclados

Dos colores de marca, nítidos y separados, como en el logo de Anasac: el azul en el logotipo, el verde en el isotipo. Nunca se mezclan, nunca se degradan uno en el otro y cada uno tiene una función.

El manual de marca Anasac 2025 tiene valores que no coinciden entre sí. Azul: su tabla dice RGB 20 · 78 · 148, pero sus logos y aplicaciones usan #005CB9; aquí se usa #005DB9, el valor de los archivos del logo ADS. Verde: la tabla dice RGB 96 · 164 · 74, igual al logo ADS (#61A34A), pero el isotipo de Anasac en el manual es #76BC21. Marketing Anasac define qué valores rigen en pantalla.

Regla de separación

Neutros

Estado

Un estado nunca se comunica solo con color: siempre va con ícono de forma propia y texto. Ver 3.4 Indicadores de estado.

Tipografíados familias, roles fijos

Dos familias con roles fijos. IBM Plex Sans construye la jerarquía. Google Sans hace el trabajo de lectura, formularios y datos.

Escala

Las etiquetas se escriben en minúsculas con mayúscula inicial. Las cifras usan separador de miles con punto, decimales con coma y la unidad siempre visible.

Espacio y retículatodo en múltiplos de cuatro

Base de 4 px. Diez pasos cubren todos los casos; no se usan valores fuera de la escala.

Retícula

12 columnas con medianil de 16 px en escritorio, 8 columnas en tablet y 4 en móvil. Márgenes laterales de 72, 32 y 16 px.

Forma y elevaciónesquinas firmes, superficies planas

Esquinas casi rectas y superficies planas. La forma transmite solidez; la sombra se reserva para lo que flota sobre la página.

Movimientobreve y con propósito

Breve, una sola vez y con propósito. Ninguna animación se repite en bucle.

• 1Una espera de más de un segundo se muestra con una barra de progreso con texto, no con un ícono girando.
• 2La información en tiempo real se indica con la hora de la última actualización, no con un punto animado.
• 3Con prefers-reduced-motion activado, todas las transiciones se desactivan.
• 4Los anillos de marca se dibujan una sola vez al cargar, de adentro hacia afuera, en 600 ms. Después quedan quietos. Es una propuesta que valida Marketing.

Accesibilidadlegible a pleno sol

Nivel mínimo WCAG 2.2 AA en todos los productos. En módulos de terreno, objetivos de toque de 48 px o más.

Objetivos de toque

Fotografíasiempre real

La fotografía muestra lo que ADS hace de verdad: equipos trabajando en huertos reales de Chile. Es la prueba visual de que la tecnología está en el campo.

Tres tipos de imagen

Fotos provisorias. El banco actual no tiene personas. Se reemplaza después de la sesión de fotos de noviembre, cuando parte la cosecha de cereza: 1 · productor o administrador decidiendo en su huerto; 2 · operario con el equipo de escaneo en la hilera; 3 · fruta y calibre, de cerca; 4 · equipo ADS trabajando en terreno.

Qué hace una buena fotografía ADS

• 1Luz natural de día. Cielo limpio o nublado parejo. Nada de luz artificial ni contraluces que oculten el equipo.
• 2La hilera como línea guía. La perspectiva del huerto ordena la imagen y da profundidad.
• 3Especie reconocible. Se tiene que entender si es cerezo, uva de mesa, manzano, ciruelo o kiwi sin leer el pie de foto. Solo especies del portafolio.
• 4Trabajo real, sin poses. Equipos y personas haciendo su labor, con el campo como está ese día.
• 5Espacio para respirar. Encuadres con aire alrededor del sujeto, para poder recortar en distintos formatos.
• 6Personas en el cuadro. Productores, administradores y equipos trabajando, con autorización. La tecnología se muestra en manos de alguien.

Edición

Formatos

16 : 9Portadas, banners y video

4 : 3Fichas, presentaciones y LinkedIn

1 : 1Instagram y miniaturas

Fotografía con texto

El texto nunca se escribe directamente sobre la imagen: siempre vive en una superficie sólida, al lado de la foto o superpuesta en su borde. Tres composiciones cubren las piezas de web, presentaciones e informes.

ADivididaPortadas web · banners principales · presentaciones

[Frasede empresa]

Una decisión a destiempo se paga en la temporada. Convertimos lo que Anasac sabe del campo en información clara para decidir a tiempo.

Proporción

5 : 7, panel sólido y foto

Panel

Azul ADS, margen interior de 48 a 64 px

Título

Dos pesos: 600 la idea, 300 la consecuencia

BFicha superpuestaPáginas de producto · fichas comerciales

Conoce cada huerto con datos reales.

Cuánta fruta hay, de qué calibre y dónde está, para planificar la temporada con certeza.

Calibración · Escaneo · Arriendo de tecnologíaConversemos

Ficha

Blanca, borde de 1 px y elevación 1

Posición

Anclada al borde inferior izquierdo, sobresale de la foto

Límite

Nunca cubre más de un tercio de la imagen ni el sujeto

CEditorialRelato de marca · informes · aperturas de capítulo

La tecnología valecuando se nota en la cosecha.

Del relato de marca ADS. La frase manda y la foto la respalda.

Proporción

7 : 5, foto y texto en columnas separadas

Frase

Plex 600 + 300 itálica en azul para la consecuencia

Pie

Siempre bajo la foto, nunca sobre ella

Las piezas para redes sociales tienen su propio sistema. Ver 3.11 Piezas sociales.

Registro de cada fotografía

Cada imagen se archiva con sus datos. Sin registro, no se publica.

Lugar

Predio, comuna y región

Fecha

Día, mes y año de la toma

Autor

Quién tomó la foto

Autorización

Del predio y de las personas que aparecen

Las marcas de terceros visibles en los equipos, como la de un socio tecnológico, se publican solo con autorización de ese socio.

Encabezado de secciónel índice ordena

Ubica al usuario dentro del documento o del módulo con un índice y el nombre del capítulo sobre una línea fina. Es el mismo encabezado que ordena esta página.

Botonesuna acción principal por vista

Rectangulares con esquina de 4 px. Una sola acción primaria por vista.

Etiquetasclasificar y filtrar

Clasifican o filtran. Rectangulares, de 28 px de alto, en minúsculas con mayúscula inicial. Una etiqueta nunca comunica estado: para eso existen los indicadores.

Indicadores de estadoetapa y condición

Dos componentes distintos para dos preguntas distintas: en qué etapa está algo, y cómo está funcionando.

Ciclo de vida

Muestra la etapa de un producto, proyecto o tarea dentro de un proceso de cuatro pasos. Informa cuánto falta, no solo un nombre.

Estado operativo

Indica cómo está algo ahora. Cada estado tiene un ícono de forma propia, así se distingue sin depender del color.

Formulariosla etiqueta siempre visible

La etiqueta siempre visible sobre el campo; el placeholder nunca la reemplaza. Los errores dicen qué pasó y cómo corregirlo.

Tabla de datoscifras que se leen en columna

El componente más usado del ecosistema. Cifras alineadas a la derecha con números tabulares, unidades en el encabezado y estado con ícono y texto.

Avisosel ícono lleva el estado

Mensajes dentro de la página. Superficie blanca con borde fino; el ícono lleva el color del estado. Solo el aviso crítico marca su borde.

Ecosistema de productosqué hereda cada uno

ADS Platform entrega la base a tres productos. Cada uno conserva solo su identidad; todo lo demás llega desde la plataforma.

ADS Platformla base común

• Color y tipografía
• Componentes de interfaz
• Íconos y fotografía
• Tono y accesibilidad

--ads-*

hereda

BigFrut

Agricultura de precisión para fruticultura.

Producción4 de 4

Refactor de tokens pendiente

Para quién

Productores y administradores de campo

Canal

Web y app de terreno

Identidad propia

Logo y acento --bfr-accent

hereda

BigCrop

Tecnología para cultivos.

Planificación1 de 4

Alcance por confirmar

Para quién

Productores de cultivos

Canal

Por definir

Identidad propia

Logo y acento --bc-accent

hereda

Ana

Ana

Asistente que entrega información de productos Anasac al instante.

Desarrollo3 de 4

En pruebas · uso interno

Para quién

Vendedores y asesores de Anasac

Canal

WhatsApp

Identidad propia

Nombre y forma de conversar. Sin logo ni color propio

Estados de páginasiempre una salida

Toda vista tiene previsto qué mostrar cuando no hay datos, cuando algo falla y mientras carga. Siempre con una salida clara.

Sello de versiónhechos con fecha

Identifica la versión y vigencia de un documento, informe o módulo con datos concretos. Un hecho con fecha transmite más confianza que un punto animado.

Piezas socialesun sistema, no plantillas sueltas

Cada publicación pertenece a una serie, lleva una sola idea y una fotografía real con su registro. La misma estructura funciona en LinkedIn, Instagram y historias, y se reconoce antes de leerla.

Publicación de serie

Quiénes somos01 / 06ADS

Somos la empresatecnológica de Anasac.

Escaneo en parronal · Fotografía real

LinkedIn e Instagram · 4 : 5 · 1080 × 1350 pxSerie «Quiénes somos», pieza 1 de 6

Anatomía

• 1Línea de serie. Nombre de la serie y número de pieza. Construye relato semana a semana.
• 2Titular en dos pesos. La idea en 600 y su consecuencia en 300. Máximo ocho palabras.
• 3Firma verde. La línea del logo, siempre bajo el titular.
• 4Registro de la foto. Qué muestra y que es real. Lugar y fecha van en el texto de la publicación.
• 5Fotografía a sangre en el tercio inferior, sin texto encima.
• 6Firma completa en la superficie sólida, con «una empresa Anasac» legible: alto mínimo del 9 % del ancho.
• 7Sello de Anasac. El sello redondo que Anasac usa en sus posts, junto a la firma. El archivo oficial lo entrega Marketing; aquí se muestra como referencia.

Margen de seguridad

64 px en 1080 de ancho

Titular

Plex Sans 600 + 300 · 100 px

Carrusel

Para explicar un proceso en pasos. Portada con foto, un paso por lámina y cierre con el logo completo. La barra de avance repite el indicador de ciclo de vida del sistema.

Cómo funciona1 / 5

BigFrut,en tres pasos.

Paso2 / 5

1

Escaneamosel huerto.

Un vehículo con cámaras y sensores recorre cada hilera.

Paso3 / 5

2

Contamosy calibramos la fruta.

Conversemos5 / 5

[Frasede empresa]

ads.anasac.cl

Textos de ejemplo. Toda afirmación técnica, como cómo se escanea o qué se mide, la valida el CTO antes de publicarse.

Historia y perfil

Temporada en terrenoHoy

Así se ve un huertocuando lo escaneamos.

Fotografía real

Historia · 9 : 16 · 1080 × 1920 px

Quiénes somos · 01

Somos la empresatecnológica de Anasac.

Respaldo

78

años de trayectoria de Anasac, a 2026.

Relato

La tecnología valecuando se nota en la cosecha.

Cómo funciona · 1 / 5

BigFrut,en tres pasos.

Perfil · ritmo de la grillaFoto, idea y dato se alternan. Nunca dos fotos seguidas en la misma fila.

Formatos

• 1Una idea por pieza. Si necesita dos titulares, son dos piezas o un carrusel.
• 2Toda fotografía es real. Lugar y fecha se indican en el texto de la publicación.
• 3El texto vive en superficies sólidas: azul ADS, azul noche o blanco. Nunca sobre la foto.
• 4Toda pieza lleva la firma completa con «una empresa Anasac» y el sello de Anasac.

Navegaciónsiempre sabes dónde estás

La navegación lateral de este documento es también el patrón para los módulos de los productos. Muestra la ubicación exacta, permite buscar y se usa completa con teclado.

Teclado y búsqueda

Barra superior

• 1Mide 96 px al inicio y se compacta a 68 px al bajar, con una sombra suave para separarse del contenido.
• 2Las pestañas muestran una línea blanca al pasar el cursor y la firma verde de 5 px cuando están activas.
• 3Con flechas izquierda y derecha se cambia de versión sin usar el mouse.

Iconografíatrazo único, significado claro

Lucide, trazo de 1,5 px sobre retícula de 24. Un ícono acompaña al texto; solo va sin texto cuando su significado es universal y tiene etiqueta accesible.

• 1Color por defecto: texto secundario. Azul solo cuando el ícono es una acción.
• 2Los colores de estado se reservan para íconos de estado.
• 3Las especies se nombran con texto, no con emojis ni ilustraciones de fruta.

Próximos pasoslo que viene

Cambios en la versión 1.1

• 1Nuevo capítulo 0, Marca: firma, construcción, recursos gráficos, voz y datos de marca.
• 2La firma «ADS, una empresa Anasac» vuelve al encabezado, a la portada y a todas las piezas.
• 3Relato corto v2 en la composición dividida.
• 4Las frases no aprobadas se reemplazan por «[Frase de empresa]».
• 5Fuera las fotos de cítricos, que no son especies del portafolio.
• 6Personas en el cuadro como regla de fotografía; las fotos actuales quedan marcadas como provisorias.
• 7Anillos como recurso de marca, distinto de los orbes que el sistema no usa.
• 8Sello de Anasac en las piezas sociales.
• 9«78 años» con su fecha, a 2026.
• 10Seis criterios, en el título y en la bajada.