Sistema de DiseñoÍndice

La categoría de sistema de diseño abarca el sistema de diseño de PointSav como componente de la plataforma — su vocabulario fundamental, filosofía de diseño, contexto de superficie de marca y las familias de tokens de la capa de fundación que heredan las superficies orientadas al operador. Trata el sistema de diseño como concepto dentro de la plataforma: por qué existe, cómo está estructurado, qué identidad de marca porta y dónde se alinea el vocabulario de tokens fundacionales con la convención del campo. Las guías de implementación de componentes, las especificaciones de accesibilidad y la superficie de trabajo se encuentran en el repositorio del sistema de diseño en design.pointsav.com; esta categoría aporta el marco arquitectónico.

El sistema de diseño es en sí mismo uno de los sustratos portantes de la plataforma — véase sustrato del sistema de diseño para el marco de sustrato — y hereda las mismas disciplinas de propiedad del cliente, legibilidad por máquina e interoperabilidad agnóstica al editor que el resto de la plataforma aplica a sus capas de datos. Cada superficie que renderiza el sistema de diseño está especificada con enfoque móvil primero; Inter es la tipografía de interfaz de usuario y encabezados, elegida por su legibilidad en pantalla y la ausencia de propiedad corporativa.

Empiece aquí: Filosofía de diseño — por qué existe el sustrato, y las tres inversiones estructurales del patrón de plataformas enterprise sobre las que se construye todo lo demás en esta categoría.

Por dónde empezar

Quince artículos cubren cómo se ve y cómo habla la plataforma. Estos cinco son las puertas de entrada: la filosofía del sistema, la unidad a la que se resuelve todo lo demás, lo que un componente añade sobre esa unidad, el cromo con el que se renderiza este propio wiki, y el estándar tipográfico.

• Filosofía del sistema de diseño — Por qué el sistema de diseño se autoaloja y es propiedad del cliente, publicando la investigación de decisiones junto a los valores de token en formato DTCG en lugar de una galería de componentes.
• Qué es un token de diseño — La definición de partida: el formato DTCG del W3C y los niveles primitivo, semántico y de componente que el resto de la categoría da por supuestos.
• Recetas de componentes frente a tokens en bruto — Lo que el nivel de componente añade más allá de un valor: marcado, variantes, guía ARIA y objetivos WCAG en una única receta legible por máquina.
• Biblioteca de componentes del wiki — La cabecera, la navegación lateral desplegable, la barra lateral y el pie que renderizan cada página de esta plataforma de conocimiento, incluida la que está leyendo.
• Tipografía de marca y estándares de impresión — La pila autoalojada de Inter, Source Serif 4 y Playfair Display, con la advertencia honesta de que la matriz de impresión documentada todavía no tiene canalización de generación.

Filosofía y vocabulario primitivo

Las decisiones fundacionales: por qué existe el sustrato, qué preservó de la convención, qué reemplazó.

• Filosofía de diseño — El sistema de diseño PointSav es un sustrato auto-alojado propiedad del cliente que se ejecuta en design.pointsav.com y publica investigación de decisiones de diseño junto con valores de tokens en formato DTCG, priorizando interoperabilidad agnóstica respecto a editores y rationale estructurado.
• Vocabulario primitivo de diseño — Justificación de los patrones de la capa de tokens primitivos — escalas de color numéricas, aliasing semántico y separación tipográfica — con nomenclatura propia de PointSav.

Conceptos de tokens y herramientas

Artículos de contexto sobre qué son los tokens, cómo componen los componentes, cómo tematizan y cómo llegan a diseñadores, agentes de IA y otras organizaciones.

• Qué es un token de diseño — Artículo introductorio que define los tokens de diseño, el Format Module del Design Tokens Community Group del W3C (primera versión estable, octubre de 2025) y la arquitectura de tres niveles primitivo/semántico/componente, fundamentado en el paquete DTCG publicado del Sistema de Diseño PointSav (130 primitivos + 86 de tema, más los pilares separados de papel y escritura).
• Tematización mediante tokens semánticos — Los temas claro/oscuro como sustitución de tokens semánticos, fundamentado en el grupo theme.dark publicado y el mismo patrón en Carbon, Material 3 y Radix.
• Recetas de componentes frente a tokens en bruto — Qué añade el nivel de componentes del Sistema de Diseño PointSav más allá del valor de un token: el formato recipe.json — variantes, marcado, referencias de tokens, CSS, guía ARIA y objetivos WCAG en un artefacto legible por máquina — demostrado contra la receta publicada de Button y el estado real del registro (53 componentes: 20 documentados por completo, 33 con receta y un documento de uso).
• Tokens de diseño y conformidad de accesibilidad — Cómo el Sistema de Diseño PointSav expresa los requisitos de accesibilidad — objetivos táctiles mínimos, color del anillo de foco, relaciones de contraste — como tokens de diseño con nombre, de modo que la conformidad WCAG se aplica por la estructura del grafo de tokens y no ad hoc por componente, demostrado contra la especificación de accesibilidad de Button ya publicada.
• Figma y Tokens Studio — Cómo los diseñadores incorporan a Figma la exportación de tokens DTCG del Sistema de Diseño PointSav mediante la sincronización por URL del plugin Tokens Studio — una lectura de solo consulta desde el JSON alojado por el propio sistema, sin paso de exportación/importación — y por qué esa dirección de solo lectura es una característica de gobernanza, con una comparación honesta con Penpot.
• MCP y sistemas de diseño consumibles por agentes de IA — Por qué el Sistema de Diseño PointSav expone una superficie legible por máquinas — un punto de conexión Model Context Protocol propio, una API de búsqueda de tokens y una exportación de tokens DTCG — para que los agentes de codificación de IA consulten tokens y componentes actuales desde el mismo registro que genera la documentación humana, sin que ninguna consulta salga del anfitrión.
• Versiones dirigidas por registro — Arquitectura dirigida por registro detrás de las versiones del sitio del sistema de diseño: navegación, estadísticas de portada, punto de acceso de registro legible por máquina, respuestas MCP y empaquetado de versiones se resuelven todos contra un único archivo de registro, de modo que no pueden divergir — ilustrado con dos defectos reales de la historia del sistema, no con hipótesis.
• Autoalojar un sistema de diseño — Las dos ofertas del Sistema de Diseño PointSav — usar directamente los datos de tokens bajo Apache-2.0, que no requiere nada, y autoalojar el motor de publicación para operar el sistema de diseño interno de otra organización — con el procedimiento de bifurcación en cinco pasos, la configuración de tres variables, la gobernanza git y los límites de licencia entre datos, servidor y texto.

Superficie de marca

Cómo se codifica la identidad de marca como familias de color y pilas tipográficas en las superficies de producto PointSav y Woodfine.

• Familias de color de marca — Las familias de color de marca asignadas a categorías de anclaje minoristas e institucionales en la superficie GIS de co-ubicación de la plataforma, proporcionando identificadores codificados por color consistentes para visualización de mapas y datos tabulares en modos de visualización accesible y estándar.
• Tipografía de marca — Las superficies web de PointSav se renderizan en Inter, Source Serif 4 y Playfair Display, alojadas localmente en vez de depender de la pila de fuentes del sistema. Existe una matriz tipográfica OFL de impresión documentada por separado, sin canal de generación aún implementado.

Diseño de superficie wiki

El vocabulario de componentes, sistema tipográfico y paleta de modo oscuro que componen la superficie de lectura de documentation.pointsav.com.

• Biblioteca de componentes wiki — El armazón compartido — encabezado, navegación móvil fuera de lienzo, barra lateral izquierda y pie de página — más las plantillas de página que envuelve, que juntas renderizan cada página de la plataforma de conocimiento de PointSav.
• Sistema tipográfico wiki — Pila tipográfica Inter y Source Serif 4, escala de encabezados y tokens de espaciado para el wiki de PointSav.
• Modo oscuro wiki — Esquemas de color claro y oscuro para el wiki de PointSav, controlados por anulaciones de tokens semánticos sobre un atributo data-theme, con persistencia de tema mediante localStorage.
• Matriz de favicons e identidad de pestaña — El wiki sirve un único favicon SVG estático — un glifo de documento azul marino, enlazado desde un archivo estático, la misma marca en cada pestaña sin importar el inquilino.

Artículos adicionales planificados — herramientas del sistema de diseño para BIM y convenciones de interfaz AEC — aún no están escritos.

Tokens de fundación

Las cuatro familias de tokens de la capa de fundación: color, tipografía, espaciado y movimiento. Las especificaciones completas se mantienen en pointsav-design-system y se publican en el sitio propio del sistema de diseño — son enlaces externos, no artículos de la wiki.

• Tokens de color — paleta primitiva, alias semánticos y pares de modo oscuro en formato DTCG.
• Tokens de tipografía — escala tipográfica, pilas de fuentes, variables de tipografía fluida y tokens de ritmo de lectura.
• Tokens de espaciado — unidad base, escala geométrica, tokens de separación de componentes y tokens de margen de diseño.
• Tokens de movimiento — escala de duración, curvas de aceleración y variantes de movimiento reducido.

Véase también

• Conceptos Fundamentales — el marco de sustrato del sistema de diseño junto con los otros sustratos de mecanismos fundacionales
• Patrones de Diseño — patrones de diseño nombrados que el sistema de diseño codifica en la capa de interfaz
• Aplicaciones — aplicaciones orientadas al operador que consumen el sistema de diseño a través de las capas de tokens y componentes