# Sistemas de diseño > Sistemas de diseño agentic-first. Cada página tiene su versión Markdown en la misma ruta terminada en `.md`. > Empieza por el design.md del sistema. Usa solo fichas «En producción» salvo que te pidan lo contrario; las que están en exploración o desarrollo aún no existen en producción. Si algo no está documentado, dilo en lugar de inventarlo. ## Estados - Sin iniciar: Esta plataforma aún no tiene implementación. - Exploración: En diseño. Puede cambiar o desaparecer. No se usa en producción. - En desarrollo: Definido y construido en el sistema, pero aún no está en producción. - En producción: Existe en producción y el sync lo verifica contra el código. - Obsoleto: Sigue en producción, pero no se usa en trabajo nuevo. ## Designloop - [design.md](/designloop/design.md): reglas, API de clases, tokens y estados - [registry.json](/designloop/registry.json): datos estructurados - [llms-full.txt](/designloop/llms-full.txt): todas las fichas en un archivo ### Fundamentos - [Color](/designloop/fundamentos/color.md): En producción. Superficies cálidas, tinta casi negra y un único acento azul para el foco y la selección. - [Ilustración](/designloop/fundamentos/ilustracion.md): En producción. Ilustraciones de trazo animadas dentro de los mosaicos de la landing. Pendiente de documentar. - [Paleta Jerte](/designloop/fundamentos/paleta-jerte.md): En producción. Cinco colores sacados de los cerezos en flor del Valle del Jerte. Blancos neutros para las superficies; oliva, tierra y cielo solo para acentos. Es la paleta de la landing. - [Superficies](/designloop/fundamentos/superficies.md): En producción. Las dos partes del producto con código propio, la landing y el portal, y cómo se ven aquí. - [Tipografía](/designloop/fundamentos/tipografia.md): En producción. Titulares en serif ligera y ajustada; interfaz en sans; datos en mono. - [Voz y tono](/designloop/fundamentos/voz-y-tono.md): En producción. Directa, cercana y tranquila. Los textos aprobados no se reescriben sin petición expresa. ### Tokens - [Color](/designloop/tokens/color.md): En producción. Valores de color de producción y el rol de cada uno. - [Maquetación](/designloop/tokens/maquetacion.md): En producción. Ancho máximo y margen lateral de la página. - [Movimiento](/designloop/tokens/movimiento.md): En producción. Dos curvas y tres duraciones, de la microinteracción a la aparición de bloques. - [Radios](/designloop/tokens/radios.md): En producción. Cuatro radios, de controles a contenedores grandes. - [Sombras](/designloop/tokens/sombras.md): En producción. Elevación mínima. Una sombra para tarjetas y otra para elementos flotantes. - [Tipografía](/designloop/tokens/tipografia.md): En producción. Familias y tamaños tipográficos de producción y el rol de cada uno. ### Componentes - [Aviso](/designloop/componentes/aviso.md): En producción. Mensaje en línea que informa del resultado de una acción o de una situación de la cuenta. Cuatro tonos. - [Botón](/designloop/componentes/boton.md): En producción. Lanza una acción o lleva al siguiente paso. Un solo botón principal por grupo de acciones. - [Cabecera de página](/designloop/componentes/cabecera-de-pagina.md): En producción. Título de las pantallas de lista y de ajustes del portal en serif display, con antetítulo, descripción y acciones opcionales. - [Cabecera](/designloop/componentes/cabecera.md): En producción. Barra fija con la marca, la navegación y las dos acciones de cuenta. - [Enlace de texto](/designloop/componentes/enlace-de-texto.md): En producción. Enlace subrayado con flecha opcional, para acciones secundarias dentro de un bloque. - [Indicador de carga](/designloop/componentes/indicador-de-carga.md): En producción. Círculo que gira mientras una acción está en curso. Hereda el color y el tamaño del texto que acompaña. - [Insignia](/designloop/componentes/insignia.md): En producción. Etiqueta corta de estado, rol o categoría. Once tonos, de la marca y de estado. - [Mosaico](/designloop/componentes/mosaico.md): En producción. Rectángulo de color de marca con una ilustración centrada. Acompaña a pasos y bloques de la landing. - [Tarjeta](/designloop/componentes/tarjeta.md): En producción. Superficie blanca con borde y sombra suave que agrupa un bloque de contenido. Cabecera, título y cuerpo opcionales. ### Patrones - [Beneficios](/designloop/patrones/beneficios.md): En producción. Rejilla de seis bloques numerados con título y texto, bajo una cabecera centrada. - [Cómo funciona](/designloop/patrones/como-funciona.md): En producción. Tres pasos numerados con un mosaico ilustrado, título y texto. Explica el ciclo de la suscripción. - [Estructura de sección](/designloop/patrones/estructura-de-seccion.md): En producción. El esqueleto común de las secciones de la landing. Espaciado vertical, ancho máximo y cabecera con título y entradilla. - [Hero](/designloop/patrones/hero.md): En producción. Titular, entradilla y dos acciones centradas, seguidos del escenario animado. - [Pie](/designloop/patrones/pie.md): En producción. Pie oscuro con la marca y su lema, la navegación de la página, el contacto, el idioma y los enlaces legales. - [Precios](/designloop/patrones/precios.md): En producción. Tarjeta del plan con el precio, lo que incluye y la acción para empezar. - [Preguntas frecuentes](/designloop/patrones/preguntas-frecuentes.md): En producción. Introducción fija a la izquierda y lista de preguntas desplegables a la derecha, sobre fondo papel. ### Iniciativas - [Botón unificado](/designloop/iniciativas/boton-unificado.md): En producción. Un solo botón para la landing y el portal, con una hoja de estilos compartida. - [Sistema de diseño agentic-first](/designloop/iniciativas/sistema-agentic-first.md): En desarrollo. Este mismo sistema. Estructura, enlace con producción y capa para agentes. ## Metodología (interna) - [Principios](/metodologia/principios.md): Qué significa agentic-first y las reglas que no se negocian. - [La interfaz](/metodologia/interfaz.md): Doble barra lateral al estilo de Codex, con sus medidas exactas y por qué está así. - [Capas y sistemas anidados](/metodologia/capas.md): Diseño atómico en cinco capas y sistemas que heredan de otros. - [Estados e iniciativas](/metodologia/estados.md): El recorrido de una pieza hasta producción y cómo se agrupa el trabajo en curso. - [Enlace con producción](/metodologia/produccion.md): Cómo se garantiza que lo que está en producción está en el sistema, y que el sistema no miente. - [Anatomía de una ficha](/metodologia/ficha.md): Cómo se escribe una ficha para que la entiendan una persona y un agente. - [Plataformas y superficies](/metodologia/plataformas.md): Web, iOS y Android en la misma ficha; landing y portal dentro de web. - [Capa para agentes](/metodologia/agentes.md): Qué lee un agente, en qué orden, y cómo se mejora la guía con evaluaciones. - [Crear un sistema nuevo](/metodologia/nuevo-sistema.md): Cómo aplicar esta estructura a cualquier producto, paso a paso, con o sin agente. - [Kit y sistemas](/metodologia/kit.md): Qué vive en el kit, qué vive en cada sistema y cómo se mantienen sincronizados. - [Git, GitHub y entornos](/metodologia/git-y-entornos.md): Cómo entra un cambio en el kit, en un sistema y en producción, quién hace merge en cada uno y dónde encaja el sistema en los entornos del producto.