> For the complete documentation index, see [llms.txt](https://guias.mosaico.gov.pt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guias.mosaico.gov.pt/guias-praticos/decreto-lei-n.o-49-2024-perguntas-frequentes/desenho-dos-servicos-federados/servicos-e-aplicacao-do-agora-design-system.md).

# Serviços e aplicação do Ágora Design System

## Regras a seguir

1. **Usar os protótipos disponíveis**: seguir o template disponibilizado na aplicação Figma e cumprir todos os requisitos indicados.
2. **Um design system, uma cor primária:** os componentes das fundações não podem ser alterados, tais como cores, tipografia, componentes ou semântica.
3. **Tecnologia ReactJS e NextJS:** o Ágora Design System (ADS) é compatível com tecnologias de ReactJS e Next.js, mas é expectável que possa ser integrado com outras frameworks de React. Caso seja utilizada outra tecnologia é necessário cumprir com os mesmos requisitos e parâmetros do sistema.
4. **Ferramentas de trabalho:** as equipas técnicas de design têm de solicitar o acesso ao Figma e seguir as orientações para o desenho dos fluxos e da aplicação do sistema. As equipas técnicas de desenvolvimento que utilizem a tecnologia de ReactJS têm um canal com os developers do sistema para reportar melhorias e erros.
5. **Trabalho orientado e aprovado:** as equipas responsáveis pelo desenho e o desenvolvimento dos fluxos de serviços federados, ou de aplicação do sistema a outras plataformas, devem estar alinhadas com a equipa ADS para garantir a coerência e a correta aplicação das soluções disponíveis.

## Ferramentas úteis

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FzsMLytZHAaTnx4xXSbWD%2FFigma%20logo.png?alt=media&amp;token=542aee8b-ec70-46ac-8336-b99c0dad5eee" alt="Logo Figma" width="86"><figcaption></figcaption></figure></div>

[**Figma**](https://www.figma.com/design/)

* Para designers e developers
* Biblioteca de design e ponto de contacto entre equipas
* As equipas terão de solicitar o acesso, dado que a biblioteca não é pública. É necessário enviar um pedido por e-mail para <designsystem@ticapp.gov.pt>, a indicar o nome da entidade e o âmbito em que pretende implementar o Ágora Design System
* A biblioteca disponibiliza seis quadros

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FIpRm0apsugFGCWlG50w3%2FImagem1.png?alt=media&amp;token=2b95c1f0-d336-45ab-95a3-a3b8ceebca67" alt="6 quadros disponíveis no Figma"><figcaption><p>Quadros Figma disponíveis</p></figcaption></figure>

* Possibilidade de incorporar outras marcas ou identidades visuais através da variável de cor primária e secundária

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FQc3Wyz6YVT3IJhzgGuLs%2Fzeroheight-icon-logo-png_seeklogo-453816.png?alt=media&amp;token=e3f2d434-8e38-46e4-9580-1971b732d523" alt="Logo Zeroheight" width="150"><figcaption></figcaption></figure></div>

[**Zeroheight**](https://zeroheight.com/1be481dc2/p/232b07-conhecer-o-sistema)

* Plataforma de documentação de todas as peças que constituem o design system
* Compila as bibliotecas de design e desenvolvimento
* Contém os fundamentos e pilares do sistema
* Contém as regras e diretrizes de utilização, bem como boas práticas de acessibilidade, usabilidade e conteúdos

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FCT2bhAlk0ZwyZfOfXSli%2FImagem3.png?alt=media&amp;token=47fdd31b-fe25-4f69-b70c-fd97342e5319" alt=" Exemplo de componente do Ágora Design System" width="375"><figcaption><p> Exemplo de componente do ADS</p></figcaption></figure>

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F0cGuLD8TUP1NeM26Oorr%2Fstorybook-icon-svgrepo-com.png?alt=media&amp;token=0700df7e-2472-4394-a203-a58defd0d7fe" alt="Logo StoryBook" width="96"><figcaption></figcaption></figure></div>

[**StoryBook**](https://storybook.js.org/docs)

* Para developers
* Biblioteca de desenvolvimento em ReactJS
* Propriedades individuais por componente
* Acesso às releases
* Plataforma pública com toda a informação sobre os componentes e instalação da biblioteca

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F4hTwlRj2524fGPOvHBbx%2FImagem2.png?alt=media&amp;token=77d07b66-dadb-4f35-a5a4-9aa5ac2d72a7" alt="Biblioteca do Ágora Design System" width="375"><figcaption><p>Biblioteca do ADS</p></figcaption></figure>

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FuBTCC9BQwNB9kmMu2LpE%2Ft_npm3397.jpg?alt=media&amp;token=18cf0dd4-26ac-42ce-a3b1-34b403121991" alt="Logo Npm" width="95"><figcaption></figcaption></figure></div>

[**Npm**](https://www.npmjs.com/package/@ama-pt/agora-design-system)

Conteúdo:&#x20;

* @arte-pt/agora-design-system&#x20;

Principais tecnologias:&#x20;

* ReactJS: [https://reactjs.org/](<https://reactjs.org/  >)
* Next.js: [https://nextjs.org/](<https://nextjs.org/ >)
* TailwindCss: [https://tailwindcss.com/docs/installation](<https://tailwindcss.com/docs/installation >)

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FhOV2actJzXUPF3j49yIa%2FImagem4.png?alt=media&amp;token=8e372aa5-754d-4f72-bf11-65210c0bf246" alt="Ágora Design System no Npm" width="375"><figcaption><p>ADS no Npm</p></figcaption></figure>