# Serviços e a 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 integrada com outras *frameworks* de React. Caso seja utilizada outra tecnologia é necessário cumprir com os mesmo 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 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 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 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, devido à biblioteca não ser pública. É necessário enviar um pedido por email para **<designsystem@ticapp.gov.pt>**, indicando o nome da entidade e âmbito onde pretende implementar o Ágora Design System.
* A biblioteca disponibiliza 6 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;

* @ama-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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guias.mosaico.gov.pt/guias-praticos/decreto-lei-no-49-2024-perguntas-frequentes/desenho-dos-servicos-federados/servicos-e-a-aplicacao-do-agora-design-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.