# Sistema de diseño Decanter ## Vista previa de la interfaz del sistema de diseño Decanter Filtra tarjetas originales de eventos, abre un resumen y recupera la vista cuando un tema no arroja resultados. ## Referencia de diseño del sistema de diseño Decanter Paquete Decanter 7.5.3 e instalación y convenciones oficiales de v7. Las obsolescencias de v8 se tratan como notas de migración. La vista previa es una interpretación etiquetada HTML/CSS, usa fuentes locales alternativas y no incluye marcas de identidad universitaria. ### Configuración tipográfica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Primary sans / serif | Source Sans 3 / Source Serif 4 | Las fuentes alternativas son Helvetica/Arial y Georgia/Times. | | Long-form line height | 1.4–1.5em | Intervalo de lectura recomendado. | | Short text / headings | 1.2–1.3em | Grupos más compactos. | ### Ajustes modulares seleccionados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | Proporción entre los niveles type-*. | | basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | Configuración explícita utilizada en el ejemplo. | | Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | Límites adaptables. | | cc maximum | 1500px at 1700px viewport | Contenedor de contenido fluido con márgenes de pantalla. | | Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | Selección curada, no una escala matemática. | ### Color de identidad frente a color de acción | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Cardinal red | #8c1515 | Color de identidad principal. | | Black / cool grey | #2e2d29 / #53565a | Paleta neutra principal. | ### Paleta interactiva para web | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Digital red / dark | #b1040e / #820000 | Estilo interactivo; no sustituye al color del logotipo. | | Digital blue / dark | #006cb8 / #00548f | Estilo de los enlaces. | ## Guía completa del sistema de diseño Decanter Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Decanter: un ajuste preestablecido de Tailwind, no un SDK ### Fija la ruta de generación documentada > El paquete Decanter verificado es la versión 7.5.3 y declara Tailwind CSS ^3.4.17. Su punto de entrada público es un ajuste preestablecido de configuración de Tailwind. Añade require("decanter") a presets, indica en content las rutas de los archivos fuente reales y compila la hoja de estilos de utilidades. No existe ningún proveedor React de Decanter que importar. La documentación incluye eliminaciones previstas para v8, aunque sigue indicando que la instalación corresponde a v7. Esta referencia fija la versión 7.5.3 y evita las utilidades obsoletas foggy, slab y las versiones antiguas de modular-text. La vista previa independiente, claramente identificada como interpretación de las reglas de diseño, no pretende ser una compilación de Tailwind. Consulta la especificación complementaria ## Tipografía modular adaptable del sistema de diseño Decanter ### La escala depende de su base Source Sans 3 y Source Serif 4 son las familias sans serif y serif principales, con Helvetica/Arial y Georgia/Times como alternativas. Las utilidades type-* representan funciones proporcionales, no encabezados con tamaños fijos en píxeles. El multiplicador de escala es 1.15 en móviles, 1.2 en tabletas y 1.25 en escritorio. La muestra elige la configuración basefont-23 documentada: 18px en XS–SM, 21px en MD–XL y 23px en 2XL. Usa un titular de tamaño type-3 para que la presentación mantenga las proporciones en un ejemplo integrado compacto. Si un proyecto elige otra base, debe recalcular los tamaños resultantes en lugar de copiar los valores en píxeles de esta vista previa. Consulta la especificación complementaria ## Sistema de diseño de Decanter: contenedor fluido y cuadrícula ### El borde de la pantalla forma parte de la maquetación El contenedor cc usa espaciados laterales definidos: 20px en XS, 30px en SM, 50px en MD, 80px en LG y 100px en XL. Crece hasta alcanzar un ancho máximo de contenido de 1500px en una ventana de 1700px. Es un sistema fluido con reglas laterales explícitas, no simplemente un contenedor fijo de 1200px. La muestra respeta esos márgenes y transforma sus dos tarjetas editoriales en una sola columna por debajo de MD. El contenido de las tarjetas sigue el orden normal del documento, por lo que la navegación con teclado mantiene la misma secuencia de lectura cuando se apilan. Consulta la especificación complementaria ## Sistema de diseño de Decanter: espaciado adaptable ### Usa las utilidades adaptables de forma deliberada Decanter ofrece las familias rs-m-* y rs-p-* para márgenes y rellenos adaptables. El valor elegido cambia en los rangos documentados; no es un alias del espaciado fijo de Tailwind. El código de ejemplo usa rs-p-1 alrededor de una tarjeta y un relleno fijo normal para su acción. Para que la referencia sea reproducible, la interpretación independiente identifica cada ajuste de CSS como código de la aplicación. En una implementación nativa, usa la utilidad generada por el preset en lugar de definir una segunda regla que compita con ella usando el mismo nombre. Evita fragmentos dinámicos como "rs-p-" + size cuando el analizador de compilación no pueda detectar la clase completa. Consulta la especificación complementaria ## Sistema de diseño de Decanter: identidad y color interactivo ### El rojo Cardinal y el rojo digital cumplen funciones distintas El rojo Cardinal principal de Stanford es #8c1515. El rojo digital #b1040e es un color interactivo o de acento, y no sustituye al Cardinal en la identidad de la universidad. El azul digital #006cb8 se usa para los enlaces y #00548f para su estado de interacción más oscuro. La muestra usa el rojo digital en la acción que despliega los detalles y superficies neutras discretas. No incluye el logotipo denominativo, el sello ni la franja de identidad oficial de Stanford. Una implementación institucional debe utilizar recursos de identidad autorizados y respetar las normas de marca de la universidad; una referencia técnica no implica respaldo institucional. Consulta la especificación complementaria ## Sistema de diseño de Decanter: tarjetas editoriales con acciones ### Combina contenido en lugar de adivinar un componente de API Los ejemplos oficiales de tarjetas son elementos semánticos HTML con utilidades para espaciado, tipografía, superficies y acciones. Nuestra composición separa la categoría del evento del título, muestra la fecha y el lugar en texto y usa un botón real para desplegar el resumen en el mismo sitio. No inventa una propiedad Card de Decanter API. Un título enlazado sería apropiado si la acción realmente llevara a otra página. En este caso, el resultado es una expansión local, así que un botón con aria-expanded y aria-controls comunica ese comportamiento. La vista previa usa nombres y resúmenes de eventos originales, en lugar de copiar noticias de la universidad. - Usa el título del evento como encabezado de la tarjeta. - Mantén la hora y el lugar visibles antes de desplegar el contenido. - Usa un botón para desplegar información y un enlace solo para navegar a otro destino. Consulta la especificación complementaria ## Sistema de diseño de Decanter: filtros y contenido desplegable ### Mantén el contenido disponible en todas las maquetaciones El selector de temas filtra las dos tarjetas originales de eventos de investigación y actualiza el recuento visible de resultados. La opción sin coincidencias muestra deliberadamente un estado vacío y una forma de restablecer el filtro. El filtro no modifica la jerarquía de encabezados ni convierte las tarjetas en opciones seleccionables de un formulario. Cada resumen tiene su propio estado de botón. Al cerrar una tarjeta, el foco permanece en el mismo control. Al cambiar el filtro, se cierran los resúmenes ocultos, de modo que al volver a un tema se muestra una vista general uniforme. Estos controles son un comportamiento de la aplicación añadido a un enfoque de diseño basado en utilidades, no Decanter empaquetados de JavaScript. Consulta la especificación complementaria ## Sistema de diseño de Decanter: compilar y validar el resultado ### Las clases generadas requieren fuentes analizadas La configuración proporcionada está pensada para Tailwind 3 y el preset Decanter 7.5.3 verificado. Incluye las directivas de entrada, el patrón de contenido, el comando de salida y una composición de tarjetas original. Enlaza la hoja de estilos resultante desde la cabecera del documento. Carga por separado los archivos de fuentes aprobados o conserva deliberadamente las alternativas documentadas. La vista previa no se compiló con esa cadena de herramientas, y así se indica en su etiqueta de implementación. Para una adopción en producción, compila el conjunto completo de clases del proyecto e inspecciona el resultado generado, especialmente después de una actualización de versión principal que modifique utilidades obsoletas. 1. Fija la versión de Decanter y la versión principal de Tailwind compatible. 2. Registra el preset y analiza el directorio de código fuente real. 3. Compila las tres capas de directivas de Tailwind. 4. Verifica la fuente base elegida, los márgenes de pantalla y las acciones de las tarjetas en los puntos de ruptura documentados. Consulta la especificación complementaria ## Sistema de diseño de Decanter: ejemplos de componentes ### Tarjeta editorial original HTML semántico, compuesto con familias de utilidades verificadas y un botón de expansión propio de la aplicación. ```

Research conversation

Reading the changing coast

An original example event about field observations.

``` Referencia de código ### Configuración del preset Una configuración mínima completa para la implementación fijada de Tailwind 3. ``` module.exports = { presets: [require('decanter')], content: ['./src/**/*.{html,js}'] }; ``` Referencia de código ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP. ``` Decanter editorial composition

RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES

Ideas take shape in conversation.

A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.

2 example events

ENVIRONMENT

Reading the changing coast

How field notes reveal changes that a single measurement cannot capture.

ARCHIVES

The stories between records

Exploring how context connects objects in a community archive.

Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.
``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Sistema de diseño de Decanter: configuración del agente ### Punto de partida para la implementación Punto de entrada de compilación del preset verificado a partir del código fuente; no se ejecutó para la vista previa independiente interpretada. Enlaza dist/styles.css desde la cabecera del documento. Las fuentes y los recursos de identidad institucional son decisiones independientes. El ZIP del ejemplo funcional completo en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/stanford-decanter.html. No abras ejemplos basados en módulos mediante file://. ``` npm install --save-dev decanter@7.5.3 tailwindcss@3.4.17 # tailwind.config.cjs # module.exports = { # presets: [require('decanter')], # content: ['./src/**/*.{html,js}'] # }; # src/input.css # @tailwind base; # @tailwind components; # @tailwind utilities; npx tailwindcss -c tailwind.config.cjs -i ./src/input.css -o ./dist/styles.css ``` ### Una instrucción para tu proyecto ``` Compón una página editorial de eventos con Decanter 7.5.3 y Tailwind 3. Usa el preset, la opción explícita de fuente base, la escala type-* y los márgenes de pantalla cc. Mantén diferenciados el tema, el título, la hora y el lugar en tarjetas semánticas. Implementa el filtrado local por tema y controles de resúmenes con aria-expanded. Evita las utilidades obsoletas foggy/slab, las noticias universitarias copiadas y los elementos de identidad. Identifica por separado cualquier vista previa interpretada manualmente, en lugar de presentarla como una compilación de Decanter. ``` ## Sistema de diseño de Decanter: fuentes y alcance Composición educativa independiente de OpenDesign; no es una página oficial de un evento universitario. Contenido original, sin emblemas de Stanford. La adopción del código y el uso de una identidad autorizada por la marca son cuestiones distintas. - Resumen de Decanter Propósito oficial, públicos y puntos de acceso a recursos. - Instalación para desarrolladores Guía de implementación y configuración específica de la versión. - Diseño en Figma Acceso a la biblioteca de diseño oficial. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Recursos relacionados con el sistema de diseño Decanter ### Suomi.fi sistema de diseño Crea formularios legibles para los servicios públicos finlandeses con Source Sans 3, tokens de espaciado explícitos y un patrón recuperable de selección de documentos. ### UNDP sistema de diseño Explora los tokens publicados de color y espaciado de UNDP, pestañas nativas operables con el teclado y un ejemplo completo de lectura de talleres con progreso de revisión local. ### USWDS Conecta los tokens de espaciado de USWDS, los roles de tema, las tablas semánticas y los acordeones nativos en una comparación de oportunidades con búsqueda. - [Referencia de implementación](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fuente](https://decanter.stanford.edu/for-designers/type-grids-and-color) - [Fuente](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Fuente](https://identity.stanford.edu/design-elements/color/primary-colors/) - [Fuente](https://identity.stanford.edu/design-elements/color/web/) - [Consulta la especificación complementaria](https://decanter.stanford.edu/for-developers/installation) - [Consulta la especificación complementaria](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Consulta la especificación complementaria](https://identity.stanford.edu/design-elements/color/web/) - [Consulta la especificación complementaria](https://decanter.stanford.edu/examples/cards) - [Referencia de código](https://decanter.stanford.edu/examples/cards) - [Referencia de código](https://decanter.stanford.edu/for-developers/installation) - [Referencia de código](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Resumen de Decanter Propósito oficial, públicos y puntos de acceso a recursos.](https://decanter.stanford.edu/) - [Instalación para desarrolladores Guía de implementación y configuración específica de la versión.](https://decanter.stanford.edu/for-developers/installation) - [Diseño en Figma Acceso a la biblioteca de diseño oficial.](https://decanter.stanford.edu/for-designers/figma)