Sistemas de diseño SaaS
Sistemas de diseño extraídos de sitios web de software y SaaS: apps de productividad, herramientas de gestión de proyectos, CRM y otros productos que se venden como servicio. La mayoría combina una paleta sobria y un color de acento con una escala tipográfica clara, lo que los convierte en un buen punto de partida para un dashboard o una página de marketing de producto.
3 ejemplos de DESIGN.md en esta categoría, de Figma, Linear y Notion. Extraídos de las páginas públicas de cada sitio, no son guías de marca oficiales. ¿Es tu primera vez con el formato? Lee qué es un DESIGN.md.
Figma
Figma usa un sistema monocromático en blanco y negro muy sobrio, anclado en su fuente variable propietaria figmaSans. El diseño está guiado por la tipografía: títulos de gran tamaño, de 88px/56px, con un interletraje negativo y ajustado, que contrastan con un texto de cuerpo ligero de peso 330. Los CTA usan formas de píldora totalmente redondeadas (border-radius: 9999px) en negro sólido con texto blanco. El diseño se basa en una cuadrícula con un ancho máximo de contenido de 1440px, un relleno vertical generoso de 80px por sección y un lienzo blanco limpio. La profundidad es mínima: las sombras son superposiciones sutiles basadas en oklch. Un acento lavanda o morado (#cb9fd2) aparece en el banner del pie de página. En conjunto, la estética es segura, tipográficamente sofisticada y centrada en la marca.
Linear
El sistema de diseño de Linear es un producto de interfaz densa, orientado primero al modo oscuro y pensado para equipos de ingeniería. La paleta de superficies se apoya en negros casi puros (#08090a, #0f1011) con grises oscuros en capas para diferenciar la barra lateral, las tarjetas y los paneles. La tipografía es exclusivamente Inter Variable, con un interletraje negativo y preciso en los tamaños de titular, y Berkeley Mono para el código en línea. El lenguaje de radios es deliberadamente pequeño (predominan los de 2 a 6 px), y las formas de píldora se reservan para insignias y chips de estado. La elevación se expresa mediante bordes interiores sutiles de 1 px y sombras difusas de baja opacidad, en lugar de capas dramáticas. El color principal de la llamada a la acción es el índigo característico de Linear (#5e6ad2), que se usa en el botón de registro y en los enlaces clave.
Notion
La página de inicio de marketing de Notion combina una sección principal en azul marino profundo (#02093a) con un cuerpo de fondo claro (#f6f5f4), y usa una tipografía personalizada (NotionInter) en todos los roles de texto. El diseño emplea una cuadrícula de 12 columnas con canaletas de 28px y un lenguaje de radios doble: 8px para las tarjetas y 9999px para las píldoras. Para los elementos flotantes de la interfaz, utiliza un sistema de sombras progresivas de varias capas. El azul de marca (#2537b1) impulsa los CTA y los destacados de acento, mientras que una escala de grises semántica (de gray-200 a gray-900) estructura toda la jerarquía de texto y superficies.
¿No ves el sitio que necesitas?
Pega cualquier URL y obtén un DESIGN.md de cualquier web. Colores, tipografía, espaciado y tokens, listos para tu flujo de trabajo con IA.