> 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="/files/8a3FCq1NipsZ3FBn8RtL" 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="/files/V7gNvIQtesr6l5xuiLci" 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="/files/M8VWtuSKTPwGaRqgsyIC" 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="/files/clVDIALcTaTVFVAu0N4c" 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="/files/aLe3AeM0obgKLlHPGTHW" 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="/files/XcGSYaxb0iRsCeVtOvEd" alt="Biblioteca do Ágora Design System" width="375"><figcaption><p>Biblioteca do ADS</p></figcaption></figure>

<div align="left"><figure><img src="/files/DhiQCDB4r2pAVnJdnns0" 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="/files/xWvhv7k8YyKUNIDhAT2P" alt="Ágora Design System no Npm" width="375"><figcaption><p>ADS no Npm</p></figcaption></figure>