# DESY - Sistema de Diseño del Gobierno de Aragón

> Sistema de diseño oficial del Gobierno de Aragón para crear aplicaciones web accesibles, consistentes y conformes con la identidad corporativa.

Notas importantes:

- Documentación disponible para HTML (desy-html) y Angular (desy-angular)
- Cada componente incluye ejemplos de código y guías de accesibilidad
- Sigue los estándares WCAG 2.1 nivel AA
- Versión Markdown disponible añadiendo `.md` a cualquier URL HTML


## Inicio

- [DESY](https://desy.aragon.es/index.html.md): Página principal del sistema de diseño

## Cómo empezar

- [Tutorial](https://desy.aragon.es/como-empezar-tutorial.html.md): Guía paso a paso para integrar DESY en tu proyecto
- [Diseño UI](https://desy.aragon.es/como-empezar-disenador.html.md): Guía para diseñadores con recursos Figma
- [Accesibilidad](https://desy.aragon.es/como-empezar-accesibilidad.html.md): Requisitos WCAG y buenas prácticas

## Estilos

- [Estilos](https://desy.aragon.es/estilos.html.md)
- [Color](https://desy.aragon.es/estilos-color.html.md)
- [Espaciado](https://desy.aragon.es/estilos-espaciado.html.md)
- [Retícula](https://desy.aragon.es/estilos-reticula.html.md)
- [Tipografía](https://desy.aragon.es/estilos-tipografia.html.md)
- [Lenguaje claro](https://desy.aragon.es/estilos-lenguaje.html.md)
- [Uso de imágenes](https://desy.aragon.es/estilos-imagenes.html.md)

## Componentes

- [Catálogo de componentes](https://desy.aragon.es/componentes.html.md)

### Componentes principales

  - [Componentes principales](https://desy.aragon.es/componente-principales.html.md)
  - [Botones](https://desy.aragon.es/componente-botones.html.md)
    - [Button (HTML)](https://desy.aragon.es/componente-botones-codigo.html.md)
    - [Button (Angular)](https://desy.aragon.es/angular-md/demo-button.md)
    - [Button-loader (HTML)](https://desy.aragon.es/componente-botones-loader-codigo.html.md)
    - [Button-loader (Angular)](https://desy.aragon.es/angular-md/demo-button-loader.md)
  - [Cabeceras](https://desy.aragon.es/componente-cabeceras.html.md)
    - [Header-advanced (sitios web o portales) (HTML)](https://desy.aragon.es/componente-cabeceras-codigo.html.md)
    - [Header-advanced (Angular)](https://desy.aragon.es/angular-md/demo-header-advanced.md)
    - [Header (aplicaciones web) (HTML)](https://desy.aragon.es/componente-cabeceras-app-codigo.html.md)
    - [Header (Angular)](https://desy.aragon.es/angular-md/demo-header.md)
    - [Header-mini (HTML)](https://desy.aragon.es/componente-cabeceras-mini-codigo.html.md)
    - [Header-mini (Angular)](https://desy.aragon.es/angular-md/demo-header-mini.md)
    - [Skip-link (HTML)](https://desy.aragon.es/componente-cabeceras-skiplink-codigo.html.md)
    - [Skip-link (Angular)](https://desy.aragon.es/angular-md/demo-skip-link.md)
  - [Pie de página](https://desy.aragon.es/componente-footer.html.md)
    - [Footer (HTML)](https://desy.aragon.es/componente-footer-codigo.html.md)
    - [Footer (Angular)](https://desy.aragon.es/angular-md/demo-footer.md)

### Formularios

  - [Formularios](https://desy.aragon.es/componente-formularios.html.md)
  - [Árbol](https://desy.aragon.es/componente-tree.html.md)
    - [Tree (HTML)](https://desy.aragon.es/componente-tree-codigo.html.md)
    - [Tree (Angular)](https://desy.aragon.es/angular-md/demo-tree.md)
  - [Área de texto](https://desy.aragon.es/componente-textarea.html.md)
    - [Textarea (HTML)](https://desy.aragon.es/componente-textarea-codigo.html.md)
    - [Textarea (Angular)](https://desy.aragon.es/angular-md/demo-textarea.md)
    - [Character-count (HTML)](https://desy.aragon.es/componente-textarea-character-count-codigo.html.md)
    - [Character-count (Angular)](https://desy.aragon.es/angular-md/demo-character-count.md)
  - [Bloques de datos](https://desy.aragon.es/componente-bloques-de-datos.html.md)
    - [Input-group (HTML)](https://desy.aragon.es/componente-bloques-de-datos-codigo.html.md)
    - [Input-group (Angular)](https://desy.aragon.es/angular-md/demo-input-group.md)
    - [Date-input (HTML)](https://desy.aragon.es/componente-bloques-de-datos-date-input-codigo.html.md)
    - [Date-input (Angular)](https://desy.aragon.es/angular-md/demo-date-input.md)
  - [Botón de radio](https://desy.aragon.es/componente-radios.html.md)
    - [Radios (HTML)](https://desy.aragon.es/componente-radios-codigo.html.md)
    - [Radios (Angular)](https://desy.aragon.es/angular-md/demo-radios.md)
  - [Calendario](https://desy.aragon.es/componente-datepicker.html.md)
    - [Datepicker (HTML)](https://desy.aragon.es/componente-datepicker-codigo.html.md)
    - [Datepicker (Angular)](https://desy.aragon.es/angular-md/demo-datepicker.md)
  - [Carga de archivos](https://desy.aragon.es/componente-file-upload.html.md)
    - [File-upload (HTML)](https://desy.aragon.es/componente-file-upload-codigo.html.md)
    - [File-upload (Angular)](https://desy.aragon.es/angular-md/demo-file-upload.md)
  - [Casilla de verificación](https://desy.aragon.es/componente-checkboxes.html.md)
    - [Checkboxes (HTML)](https://desy.aragon.es/componente-checkboxes-codigo.html.md)
    - [Checkboxes (Angular)](https://desy.aragon.es/angular-md/demo-checkboxes.md)
  - [Entrada de texto](https://desy.aragon.es/componente-input-text.html.md)
    - [Input (HTML)](https://desy.aragon.es/componente-input-text-codigo.html.md)
    - [Input (Angular)](https://desy.aragon.es/angular-md/demo-input.md)
    - [Fieldset (HTML)](https://desy.aragon.es/componente-input-text-fieldset-codigo.html.md)
    - [Fieldset (Angular)](https://desy.aragon.es/angular-md/demo-fieldset.md)
  - [Selector](https://desy.aragon.es/componente-selector.html.md)
    - [Select (HTML)](https://desy.aragon.es/componente-selector-codigo.html.md)
    - [Select (Angular)](https://desy.aragon.es/angular-md/demo-select.md)
    - [Listbox (HTML)](https://desy.aragon.es/componente-listbox-codigo.html.md)
    - [Listbox (Angular)](https://desy.aragon.es/angular-md/demo-listbox.md)

### Navegación

  - [Navegación](https://desy.aragon.es/componente-navegacion.html.md)
  - [Barra de búsqueda](https://desy.aragon.es/componente-searchbar.html.md)
    - [Search-bar (HTML)](https://desy.aragon.es/componente-searchbar-codigo.html.md)
    - [Search-bar (Angular)](https://desy.aragon.es/angular-md/demo-search-bar.md)
  - [Listado de enlaces](https://desy.aragon.es/componente-links-list.html.md)
    - [Links-list (HTML)](https://desy.aragon.es/componente-links-list-codigo.html.md)
    - [Links-list (Angular)](https://desy.aragon.es/angular-md/demo-links-list.md)
  - [Menú de navegación](https://desy.aragon.es/componente-menu-navigation.html.md)
    - [Menu-navigation (HTML)](https://desy.aragon.es/componente-menu-navigation-codigo.html.md)
    - [Menu-navigation (Angular)](https://desy.aragon.es/angular-md/demo-menu-navigation.md)
  - [Menú horizontal](https://desy.aragon.es/componente-menu-horizontal.html.md)
    - [Menu-horizontal (HTML)](https://desy.aragon.es/componente-menu-horizontal-codigo.html.md)
    - [Menu-horizontal (Angular)](https://desy.aragon.es/angular-md/demo-menu-horizontal.md)
  - [Menú vertical](https://desy.aragon.es/componente-menu-vertical.html.md)
    - [Menu-vertical (HTML)](https://desy.aragon.es/componente-menu-vertical-codigo.html.md)
    - [Menu-vertical (Angular)](https://desy.aragon.es/angular-md/demo-menu-vertical.md)
    - [Nav (HTML)](https://desy.aragon.es/componente-menu-vertical-nav-codigo.html.md)
    - [Nav (Angular)](https://desy.aragon.es/angular-md/demo-nav.md)
  - [Migas de pan](https://desy.aragon.es/componente-breadcrumbs.html.md)
    - [Breadcrumbs (HTML)](https://desy.aragon.es/componente-breadcrumbs-codigo.html.md)
    - [Breadcrumbs (Angular)](https://desy.aragon.es/angular-md/demo-breadcrumbs.md)
  - [Paginación](https://desy.aragon.es/componente-paginacion.html.md)
    - [Pagination (HTML)](https://desy.aragon.es/componente-paginacion-codigo.html.md)
    - [Pagination (Angular)](https://desy.aragon.es/angular-md/demo-pagination.md)

### Mostrar y ocultar

  - [Mostrar y ocultar](https://desy.aragon.es/componente-mostrar-ocultar.html.md)
  - [Acordeón](https://desy.aragon.es/componente-acordeon.html.md)
    - [Accordion (HTML)](https://desy.aragon.es/componente-acordeon-codigo.html.md)
    - [Accordion (Angular)](https://desy.aragon.es/angular-md/demo-accordion.md)
    - [Collapsible (HTML)](https://desy.aragon.es/componente-contraible-codigo.html.md)
    - [Collapsible (Angular)](https://desy.aragon.es/angular-md/demo-collapsible.md)
  - [Acordeón histórico](https://desy.aragon.es/componente-acordeon-historico.html.md)
    - [Accordion-history (HTML)](https://desy.aragon.es/componente-acordeon-historico-codigo.html.md)
    - [Accordion-history (Angular)](https://desy.aragon.es/angular-md/demo-accordion-history.md)
  - [Barra de menús](https://desy.aragon.es/componente-menubar.html.md)
    - [Menubar (HTML)](https://desy.aragon.es/componente-menubar-codigo.html.md)
    - [Menubar (Angular)](https://desy.aragon.es/angular-md/demo-menubar.md)
  - [Desplegable](https://desy.aragon.es/componente-dropdown.html.md)
    - [Dropdown (HTML)](https://desy.aragon.es/componente-dropdown-codigo.html.md)
    - [Dropdown (Angular)](https://desy.aragon.es/angular-md/demo-dropdown.md)
  - [Detalles](https://desy.aragon.es/componente-detalles.html.md)
    - [Details (HTML)](https://desy.aragon.es/componente-detalles-codigo.html.md)
    - [Details (Angular)](https://desy.aragon.es/angular-md/demo-details.md)
  - [Globo de ayuda](https://desy.aragon.es/componente-tooltip.html.md)
    - [Tooltip (HTML)](https://desy.aragon.es/componente-tooltip-codigo.html.md)
    - [Tooltip (Angular)](https://desy.aragon.es/angular-md/demo-tooltip.md)
  - [Interruptor](https://desy.aragon.es/componente-toggle.html.md)
    - [Toggle (HTML)](https://desy.aragon.es/componente-toggle-codigo.html.md)
    - [Toggle (Angular)](https://desy.aragon.es/angular-md/demo-toggle.md)
  - [Pestañas](https://desy.aragon.es/componente-tabs.html.md)
    - [Tabs (HTML)](https://desy.aragon.es/componente-tabs-codigo.html.md)
    - [Tabs (Angular)](https://desy.aragon.es/angular-md/demo-tabs.md)

### Datos

  - [Datos](https://desy.aragon.es/componente-datos.html.md)
  - [Item](https://desy.aragon.es/componente-item.html.md)
    - [Item (HTML)](https://desy.aragon.es/componente-item-codigo.html.md)
    - [Item (Angular)](https://desy.aragon.es/angular-md/demo-item.md)
  - [Item de estado](https://desy.aragon.es/componente-status.html.md)
    - [Status (HTML)](https://desy.aragon.es/componente-status-codigo.html.md)
    - [Status (Angular)](https://desy.aragon.es/angular-md/demo-status.md)
    - [Status-item (HTML)](https://desy.aragon.es/componente-status-subitem-codigo.html.md)
    - [Status-item (Angular)](https://desy.aragon.es/angular-md/demo-status-item.md)
  - [Listado de descripciones](https://desy.aragon.es/componente-description-list.html.md)
    - [Description-list (HTML)](https://desy.aragon.es/componente-description-list-codigo.html.md)
    - [Description-list (Angular)](https://desy.aragon.es/angular-md/demo-description-list.md)
  - [Píldoras](https://desy.aragon.es/componente-pills.html.md)
    - [Pill (HTML)](https://desy.aragon.es/componente-pills-codigo.html.md)
    - [Pill (Angular)](https://desy.aragon.es/angular-md/demo-pill.md)
  - [Tabla](https://desy.aragon.es/componente-tabla.html.md)
    - [Table (HTML)](https://desy.aragon.es/componente-tabla-codigo.html.md)
    - [Table (Angular)](https://desy.aragon.es/angular-md/demo-table.md)
    - [Table-advanced (HTML)](https://desy.aragon.es/componente-tabla-codigo.html.md)
    - [Table-advanced (Angular)](https://desy.aragon.es/angular-md/demo-table-advanced.md)
    - [Treegrid (HTML)](https://desy.aragon.es/componente-tabla-con-arbol-codigo.html.md)
    - [Treegrid (Angular)](https://desy.aragon.es/angular-md/demo-treegrid.md)

### Avisos

  - [Avisos](https://desy.aragon.es/componente-avisos.html.md)
  - [Modal](https://desy.aragon.es/componente-modal.html.md)
    - [Modal (HTML)](https://desy.aragon.es/componente-modal-codigo.html.md)
    - [Modal (Angular)](https://desy.aragon.es/angular-md/demo-modal.md)
    - [Dialog (HTML)](https://desy.aragon.es/componente-modal-dialog-codigo.html.md)
    - [Dialog (Angular)](https://desy.aragon.es/angular-md/demo-dialog.md)
  - [Notificaciones](https://desy.aragon.es/componente-notificaciones.html.md)
    - [Notification (HTML)](https://desy.aragon.es/componente-notificaciones-codigo.html.md)
    - [Notification (Angular)](https://desy.aragon.es/angular-md/demo-notification.md)
    - [Alert (HTML)](https://desy.aragon.es/componente-notificaciones-alert-codigo.html.md)
    - [Alert (Angular)](https://desy.aragon.es/angular-md/demo-alert.md)
  - [Resumen de errores](https://desy.aragon.es/componente-error-summary.html.md)
    - [Error-summary (HTML)](https://desy.aragon.es/componente-error-summary-codigo.html.md)
    - [Error-summary (Angular)](https://desy.aragon.es/angular-md/demo-error-summary.md)

### Información visual

  - [Información visual](https://desy.aragon.es/componente-info-visual.html.md)
  - [Card](https://desy.aragon.es/componente-card.html.md)
    - [Card (HTML)](https://desy.aragon.es/componente-card-codigo.html.md)
    - [Card (Angular)](https://desy.aragon.es/angular-md/demo-card.md)
  - [Iconos](https://desy.aragon.es/componente-iconos.html.md)
  - [Imágenes](https://desy.aragon.es/componente-imagenes.html.md)
    - [Media-object (HTML)](https://desy.aragon.es/componente-imagenes-codigo.html.md)
    - [Media-object (Angular)](https://desy.aragon.es/angular-md/demo-media-object.md)
    - [Spinner (HTML)](https://desy.aragon.es/componente-spinner-codigo.html.md)
    - [Spinner (Angular)](https://desy.aragon.es/angular-md/demo-spinner.md)

## Patrones

- [Catálogo de patrones](https://desy.aragon.es/patrones.html.md)

### Cómo pedimos información

  - [Aceptar políticas de privacidad](https://desy.aragon.es/patrones-aceptar-politicas.html.md)
  - [Configurar cookies](https://desy.aragon.es/patrones-configurar-cookies.html.md)
  - [Datos de identidad](https://desy.aragon.es/patrones-datos-identidad.html.md)
  - [Datos de contacto](https://desy.aragon.es/patrones-datos-contacto.html.md)
  - [Domicilio postal](https://desy.aragon.es/patrones-domicilio-postal.html.md)

### Cómo mostramos información

  - [Acciones de tabla](https://desy.aragon.es/patrones-acciones-tabla.html.md)
  - [Grupo de acciones](https://desy.aragon.es/patrones-grupo-acciones.html.md)
  - [Listados](https://desy.aragon.es/patrones-listados.html.md)
  - [Title de página](https://desy.aragon.es/patrones-title.html.md)
  - [Títulos y encabezados](https://desy.aragon.es/patrones-titulos-encabezados.html.md)

### Ayudar a navegar y encontrar

  - [Avanzar y retroceder](https://desy.aragon.es/patrones-avanzar-retroceder.html.md)
  - [Barra de progreso](https://desy.aragon.es/patrones-barra-progreso.html.md)
  - [Buscar](https://desy.aragon.es/patrones-buscar.html.md)
  - [Filtrar](https://desy.aragon.es/patrones-filtrar.html.md)
  - [Megamenú en portales](https://desy.aragon.es/patrones-megamenu.html.md)
  - [Volver atrás](https://desy.aragon.es/patrones-volver-atras.html.md)

### Ayudar a resolver

  - [Asistencia contextual](https://desy.aragon.es/patrones-asistencia-contextual.html.md)
  - [Preguntas frecuentes](https://desy.aragon.es/patrones-preguntas-frecuentes.html.md)
  - [Soporte](https://desy.aragon.es/patrones-soporte.html.md)

### Páginas y flujos

  - [Acceso por MFE](https://desy.aragon.es/patrones-pagina-acceso.html.md)
  - [Formulario por pasos](https://desy.aragon.es/patrones-pagina-formulario.html.md)
  - [Páginas de aplicaciones](https://desy.aragon.es/patrones-pagina-aplicaciones.html.md)
  - [Páginas de portales](https://desy.aragon.es/patrones-pagina-portales.html.md)
  - [Otras páginas](https://desy.aragon.es/patrones-pagina-otras.html.md)

## Plantillas

- [Plantillas Web](https://desy.aragon.es/plantillas.html.md)
- [Documentos y presentaciones](https://desy.aragon.es/plantillas-documentos.html.md)

## Desarrollo

- [desy-html](https://desy.aragon.es/desarrollo-desy-html.html.md): Librería HTML/Nunjucks del sistema de diseño
- [desy-angular](https://desy.aragon.es/desarrollo-desy-angular.html.md): Componentes Angular del sistema de diseño
- [desy-ionic](https://desy.aragon.es/desarrollo-desy-ionic.html.md): Componentes Ionic para apps móviles
- [Versiones](https://desy.aragon.es/desarrollo-versiones.html.md): Historial de versiones y cambios
- [Otras librerías](https://desy.aragon.es/desarrollo-otras.html.md)

## Acerca de

- [Por qué DESY](https://desy.aragon.es/acerca-de-por-que-desy.html.md)
- [Alcance](https://desy.aragon.es/acerca-de-alcance.html.md)
- [Novedades](https://desy.aragon.es/acerca-de-novedades.html.md): Últimas actualizaciones y noticias
- [Soporte](https://desy.aragon.es/acerca-de-soporte.html.md): Cómo obtener ayuda
## Optional

- [Plantillas Web](https://desy.aragon.es/plantillas.html.md): Plantillas HTML descargables
- [Documentos y presentaciones](https://desy.aragon.es/plantillas-documentos.html.md): Plantillas Word y PowerPoint