# Sistema de diseño KERN ## Vista previa de la interfaz del sistema de diseño KERN Edita la nota, cancela o confirma su descarte, restáurala y cambia la apariencia. ## Referencia de diseño del sistema sistema de diseño KERN Extraído de @kern-ux/native 2.8.2; las decisiones de diseño de la aplicación se indican por separado. ### Tipografía y geometría | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Default font | Fira Sans | Carga el archivo de font-face incluido en el paquete; CSS por sí solo no carga archivos de fuentes. | | Static sizes | 16 / 18 / 21px | Texto estático pequeño, mediano y grande. | | Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Tipografía adaptable de mediana a 2x grande. | | Adaptive sizes from 768px | 24 / 32 / 48 / 72px | El paquete modifica los tokens adaptables en este punto de interrupción de medios. | | Font weights | 400 / 500 / 600 | Regular, mediano y seminegrita. | | Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Tokens de espacio con nombre, no una escala de incrementos uniformes. | | Border widths | 0 / 1 / 2 / 4 / 8px | El borde predeterminado es de 2px. | | Radii | 0 / 2 / 4 / 8px / 50% | Ninguno, pequeño, predeterminado, grande y circular. | | Focus outline | 4px | El contorno predeterminado de focus-visible utiliza el rol de foco contextual de acción. | | Specimen width | 800px | Decisión de la aplicación original, no un token de contenedor de KERN. | ### Asignación de colores semánticos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Light text | neutral-950 | --kern-color-layout-text-default | | Dark text | neutral-025 | El mismo rol semántico cambia según el tema. | | Light action | darkblue-700 | --kern-color-action-default; on-action es blanco. | | Dark action | darkblue-300 | On-action pasa a ser negro. | | Light / dark background | white / black | --kern-color-layout-background-default | | Theme override | data-kern-theme="light" or "dark" | El atributo explícito prevalece sobre la preferencia del sistema. | ## Guía completa del sistema de diseño KERN 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 KERN: HTML nativo, CSS y comportamiento del navegador ### Qué incluye el paquete > KERN native 2.8.2 incluye el componente CSS y las fuentes. El ejemplo importa esos archivos directamente: el botón, el área de texto, Details y Dialog son elementos nativos con clases de KERN. No se necesita ningún proveedor de React ni constructor de componentes de JavaScript. La aplicación aporta la lógica de decisión en torno al cuadro de diálogo; el estilo por sí solo no borra un campo de entrada. 1. Instala el paquete nativo con la versión fijada. 2. Copia juntos su hoja de estilos y sus fuentes, conservando las rutas relativas. 3. Guarda el ejemplo completo que aparece a continuación y sirve el directorio por HTTP. Consulta la especificación complementaria ## Sistema de diseño KERN: Fira Sans y tipografía adaptable ### Carga la tipografía explícitamente kern.min.css hace referencia a Fira Sans; fonts/fira-sans.css declara las fuentes reales y los recursos WOFF2 con rutas relativas. Mantener intacto el directorio de fuentes evita que una hoja de estilos aparentemente correcta recurra silenciosamente a otra fuente. Los tamaños del texto estático se mantienen en 16, 18 y 21px, mientras que los tokens adaptables de títulos y encabezados cambian a 768px. Usa un elemento de encabezado para establecer la jerarquía y la clase de KERN correspondiente para su tratamiento visual. El ejemplo mantiene un solo h1 y asigna al cuadro de diálogo su propio h2. Consulta la especificación complementaria ## Sistema de diseño KERN: espaciado, ancho y diseño adaptable ### Separa los tokens de la composición KERN ofrece tokens de espacio con nombre desde 0 hasta 192px, con incrementos de 2px y 4px en el extremo inferior. Los tokens de borde y radio conforman escalas separadas. El ejemplo utiliza un ritmo vertical de 24px y una fila de acciones que se ajusta al ancho disponible. El ancho máximo de contenido de 800px y el límite de 560px del cuadro de diálogo son decisiones explícitas de la aplicación; ninguno se presenta como un contenedor universal de KERN. En pantallas estrechas, el relleno de la página pasa a 16px y el ancho del cuadro de diálogo se mantiene dentro del área visible. No se aplica una altura mínima de ventana gráfica al documento, por lo que incrustarlo no provoca un bucle de realimentación al cambiar el tamaño. Consulta la especificación complementaria ## Sistema de diseño KERN: color semántico y apariencia ### Cambia los roles, no los valores hexadecimales aislados El paquete utiliza propiedades semánticas de CSS para el texto, las acciones, el fondo y el foco. Las paletas clara y oscura cambian estos roles en conjunto. Por ejemplo, action-default se asigna a darkblue-700 en el modo claro y a darkblue-300 en el modo oscuro, mientras que su color de primer plano cambia de blanco a negro. El ejemplo establece data-kern-theme en html y muestra un botón con estado presionado. La preferencia solo se conserva para este documento; no se almacena. Si se elimina el atributo explícito, la hoja de estilos puede seguir prefers-color-scheme. Consulta la especificación complementaria ## Sistema de diseño KERN: nota editable con etiqueta ### Mantén las instrucciones disponibles El área de texto utiliza kern-form-input__input dentro de kern-form-input, con una etiqueta real vinculada al id del campo. La indicación tiene su propio id y sigue vinculada mediante aria-describedby. Como esta nota local es opcional, el ejemplo no inventa errores de campo obligatorio ni una operación de guardado en el servidor. «Restaurar ejemplo» establece el valor inicial y enfoca el campo editable. Una región de estado anuncia el resultado sin reemplazar la etiqueta ni mover el foco a texto no interactivo. Consulta la especificación complementaria ## Sistema de diseño KERN: información complementaria con Details ### Deja que el navegador gestione el desplegable El elemento details gestiona su propio estado de apertura; su elemento summary es el activador. KERN añade kern-details__header, un pequeño elemento span para el título y kern-details__body para la presentación. El ejemplo sitúa aquí la información sobre la conservación porque es complementaria. Las instrucciones obligatorias, los errores y la acción de descartar permanecen visibles fuera del desplegable. El comportamiento de teclado nativo permite activarlo sin un segundo controlador de clics ni un estado aria-expanded duplicado. - Procura que el resumen sea descriptivo y conciso. - No incluyas otro botón ni enlace dentro del resumen. - Usa un Accordion para un conjunto de desplegables relacionados, en lugar de disfrazar acciones no relacionadas como Details. Consulta la especificación complementaria ## Sistema de diseño KERN: confirmación con una salida segura ### Estructura y control El diálogo está etiquetado mediante su h2 y se describe con una breve explicación de las consecuencias. El encabezado, el cuerpo y el pie usan las clases documentadas de KERN. showModal() coloca el diálogo nativo en la capa superior; close() finaliza la interacción. Conservar nota recibe el foco inicial mediante autofocus. Escape cierra el diálogo sin modificar el texto y el evento de cierre devuelve el foco a Descartar nota. Solo Sí, descartar modifica el valor. Los clics en el fondo no hacen nada deliberadamente porque se trata de una confirmación destructiva. Esto sigue las pautas documentadas para decisiones críticas, en lugar de copiar indiscriminadamente el controlador de cierre al hacer clic en el fondo del ejemplo genérico. Consulta la especificación complementaria ## Integración y aplicabilidad del sistema de diseño KERN ### Instala toda la cadena de dependencias La configuración siguiente instala un único paquete con una versión exacta y copia su CSS y el directorio de fuentes. El ejemplo completo incluye su propio CSS de diseño, el atributo de tema raíz, la estructura DOM y la conexión de eventos. Tras integrarlo en un formulario real, prueba ambos resultados del diálogo, Escape y las pantallas estrechas. El código de KERN está sujeto a la licencia EUPL; el sitio web distingue entre sus materiales textuales y gráficos bajo CC BY-NC-SA. Este ejemplo original no copia la identidad de ninguna autoridad ni da a entender que un servicio haya superado una auditoría de accesibilidad. Una aplicación real sigue necesitando persistencia, validación en el servidor y una evaluación del recorrido completo del usuario. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño KERN ### Nota nativa y confirmación completas Todo el marcado del documento, el CSS de diseño y el comportamiento de la aplicación; instala los recursos con el bloque de configuración. ``` KERN workshop note
KERN · Native components

Workshop note

Prepare a short note for your next workshop. This demonstration keeps edits only in this page.

No personal information is needed. Nothing is submitted.

What happens to this note?

Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.

Discard this note?

Your current text will be cleared from this page. Choose Keep note to continue editing.

``` Referencia de código ## Configuración del agente del sistema de diseño KERN ### Punto de partida para la implementación No se necesita ningún paso de compilación ni marco de trabajo de interfaz de usuario. Conserva el directorio de fuentes porque su CSS resuelve rutas relativas a archivos WOFF2. El ZIP del ejemplo funcional completo disponible en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/kern.html. No abras los ejemplos basados en módulos mediante file://. ``` npm install --save-exact @kern-ux/native@2.8.2 mkdir -p vendor/kern-2.8.2 cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/ cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/ # Save the complete HTML example below as kern.html beside vendor/. python3 -m http.server 8080 # Open http://localhost:8080/kern.html ``` ### Una instrucción para tu proyecto ``` Crea el ejemplo local de una nota para un taller con @kern-ux/native 2.8.2 CSS y Fira Sans incluida en el paquete. Combina un área de texto kern-form-input con etiqueta, un elemento nativo Details complementario para desplegar información y un kern-dialog con encabezado, cuerpo y pie etiquetados. Ábrelo con showModal(), aplica autofocus a Conservar nota, permite que Escape cancele sin modificar el texto y borra la nota solo después de elegir Sí, descartar. Al cerrar, devuelve el foco al elemento que abrió el diálogo y ofrece Restaurar ejemplo. Cambia data-kern-theme entre claro y oscuro sin inventar nuevos tokens de paleta. Conserva las opciones de ancho originales de la aplicación y mantén la nota en el dispositivo; no se necesita subirla, guardar un borrador en el servidor ni afirmar que se trata de un servicio gubernamental. ``` ## Fuentes y alcance del sistema de diseño KERN Demostración original que usa código de KERN. No implica identidad gubernamental, almacenamiento persistente ni certificación de accesibilidad. - Descripción general de KERN Contexto de la administración pública y puntos de acceso a los recursos. - Sistema de diseño Fundamentos, componentes y enfoque del sistema. - Guía de integración Configuración documentada del paquete nativo y la hoja de estilos. - 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 KERN ### Michigan Forty Two Conoce los flujos de trabajo de WordPress compatibles con Forty-Two, su paleta web y sus patrones de directorio de personas mediante un ejemplo funcional de filtros por cargo e investigación. ### Aksel Usa los tokens ax reales de Aksel v8, la densidad de tabla nativa y una estructura semántica para los encabezados. Ordena y selecciona registros ficticios de seguimiento mientras comparas los temas claro y oscuro. ### NHS sistema de diseño Usa la tipografía de NHS.UK, espaciado adaptable, opciones de radio agrupadas y detalles contextuales para crear un recorrido claro de preferencias de cita. - [Referencia de implementación](https://www.kern-ux.de/komponenten/dialog/) - [Fuente](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2) - [Consulta la especificación complementaria](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/) - [Consulta la especificación complementaria](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2) - [Consulta la especificación complementaria](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/) - [Consulta la especificación complementaria](https://www.kern-ux.de/komponenten/form-inputs/) - [Consulta la especificación complementaria](https://www.kern-ux.de/komponenten/details/) - [Consulta la especificación complementaria](https://www.kern-ux.de/komponenten/dialog/) - [Consulta la especificación complementaria](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/) - [Referencia de código](https://www.kern-ux.de/komponenten/dialog/) - [Descripción general de KERN Contexto de la administración pública y puntos de acceso a los recursos.](https://www.kern-ux.de/) - [Sistema de diseño Fundamentos, componentes y enfoque del sistema.](https://www.kern-ux.de/design-system/) - [Guía de integración Configuración documentada del paquete nativo y la hoja de estilos.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)