Ágora Design System
Welcome to Ágora Design System, the design and development system created for the evolution of gov.pt, the portal that gathers the public services of the Portuguese Republic.
Vision
Standardize, simplify, and make more accessible, through agile and excellent digital public services, the relationship of all citizens with the State. ADS presents a set of rules and guidelines that must be followed in the design and development of digital public services in the Portuguese State.
Goal
The construction and evolution of a design system, capable of serving as a reference point, for all digital public services relating to the Portuguese State's relationship with citizens.
Core technologies
- React - https://reactjs.org/
- Storybook - https://storybook.js.org/docs/react/get-started/install
- Tailwindcss - https://tailwindcss.com/docs/installation
- NodeJS- https://nodejs.org/
Useful Links
- StoryBook https://react.agora.gov.pt
- Figma (UX Design) - https://www.figma.com/files/1280803067320724398/project/60863393
- ZeroHeight - https://zeroheight.com/1be481dc2/p/97181d-agora-design-system
- AccessMonitor (Acessibilidade AMA) - https://accessmonitor.acessibilidade.gov.pt/
- W3Validator - https://validator.w3.org/nu/
- Axe DevTools - https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero
Installation
> npm install @ama-pt/agora-design-system
Tailwind CSS v4 configuration
AgoraDS 4 requires Tailwind CSS v4. Configure Tailwind for your framework using the official installation guide, then add these imports to your main CSS file in the order shown:
/* AgoraDS design tokens */
@import '@ama-pt/agora-design-system/theme.css';
/* Tailwind v4 reset and utilities */
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
/* AgoraDS compiled component styles */
@import '@ama-pt/agora-design-system/index.css';
No tailwind.config file or AgoraTailwindConfig import is required. AgoraDS uses Tailwind v4's CSS-first configuration.
Overriding the AgoraDS theme
Override design tokens with an @theme block after the imports. For example, the following changes the primary color palette:
@import '@ama-pt/agora-design-system/theme.css';
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
@import '@ama-pt/agora-design-system/index.css';
@theme {
--color-primary-50: #fff000;
--color-primary-100: #fff000;
--color-primary-200: #fff000;
--color-primary-300: #fff000;
--color-primary-400: #fff000;
--color-primary-500: #fff000;
--color-primary-600: #fff000;
--color-primary-700: #fff000;
--color-primary-800: #fff000;
--color-primary-900: #fff000;
}
See the Storybook Installation Guide, Tailwind Theme Configuration, and Migration Guide for the complete setup and all v3-to-v4 breaking changes.