import { Meta } from '@storybook/addon-docs';
import image01 from './assets/sistema_de_diseno/grafito_logo_azulsede.png';

<Meta title="Sistema de diseño" parameters={{ previewTabs: { 'storybook/docs/panel': {  title: 'Documentación' }}}}/>

# Sistema de diseño

En este sitio web describimos **Grafito**, el Sistema de Diseño de la Seguridad Social.


<center><img src={image01} width="150px"/></center>


El sistema de diseño es un marco de acción, un conjunto de definiciones y herramientas que permiten gobernar el diseño de las soluciones digitales de la Seguridad Social. Definciones como los principios, el lenguaje, el gobierno; y herramientas como los temas, los componentes, tokens y plantillas.

El sistema de diseño es un **marco de acción**, un conjunto de definiciones y herramientas que permiten gobernar el diseño de las soluciones digitales de la Seguridad Social. Definiciones como los principios, el lenguaje, el gobierno, y herramientas como temas, componentes, tokens y plantillas.

En última instancia, para cada tema definido que se aplicará a las distintas soluciones digitales de la Seguridad Social, se proveerá de un inventario de piezas que, acompañado de una serie de normas y racionales, permiten construir las interfaces que la organización necesita para operar todos sus servicios, en el contexto de cada solución digital.

> Design Systems is about how to approach your designs process more systematically, and ensure it helps to achieve the purpose of your product and fits with the culture of your team.
>
> _Alla Kholmatova. Design Systems._

Muchas administraciones públicas ya han publicado sus sistemas de diseño, entre ellos podemos encontrar el sistema de diseño del gobierno [británico](https://href.li/?https://design-system.service.gov.uk/), del [estadounidense](https://href.li/?https://designsystem.digital.gov/), del [australiano](https://href.li/?https://designsystem.gov.au/), del [italiano](https://href.li/?https://designers.italia.it/) o del [singapurense](https://href.li/?https://www.designsystem.tech.gov.sg/).

El sistema de diseño es una herramienta básica para los equipos de soluciones digitales de la Seguridad Social, para todos los intervinientes dentro del ciclo de vida de las mismas. Especialmente es de gran importancia para dos tipos de usuarios, los diseñadores y los desarrolladores de presentación, aunque otros perfiles como responsables de soluciones, analistas funcionales, o soporte pueden verse beneficiados del contenido del mismo para sus trabajos.

Los  **diseñadores**, en concreto, se benefician de tener guías detalladas de cómo aportar valor a los usuarios, así como una serie de activos disponibles, acordados y aprobados, en los que pueden apoyarse para crear experiencias coherentes con el ecosistema completo, ahorrándoles tiempo tanto en la generación de los diseños como en las pruebas y aceptación de los mismos, y simplificando la intervención de otros participantes en el proceso de diseño.

Los  **desarrolladores**  de interfaces, por otro lado se benefician con un significativo ahorro de tiempo en la generación, pruebas y despliegue de distintos componentes de manera repetitiva a lo largo del tiempo, gracias a la existencia de librerías de componentes preconstruidos, ya programados configurables y reusables, y por la simplificación de las soluciones debidas al reúso de estos componentes y la robustez de las experiencias digitales así generadas.

Cabe destacar que aunque el sistema de diseño de la Seguridad Social es único e individidual, para su creación se ha utilizado **IBM Carbon Design System**, [Sistema de Diseño de IBM](https://href.li/?https://www.carbondesignsystem.com/), un sistema abierto y configurable que establece un punto de partida inigualable, un sistema que adaptamos a las necesidades y particularidades de la Seguridad Social, y que garantiza su funcionamiento, calidad y sencillez de implantación, gracias al trabajo de una gran cantidad de profesionales en su definición y creación, como al de una comunidad cada día más amplia en su mantenimiento y evolución.
