Design System Corporativo para utilização em sistemas internos do Centro Paula Souza.
CPS Design System é um sistema de design corporativo para utilização em sistemas internos do Centro Paula Souza, isto é, trata-se de um conjunto completo de padrões a serem utilizados e replicados em diferentes sistemas internos, a fim de simplificar a viabilização de UX (User Experience) padronizada. Para saber mais sobre as motivações deste projeto e a relevância de aderir a ele, leia mais.
CPS Design System é um conjunto de padrões de design, é um referencial puramente teórico e ilustrativo, que pode ser utilizado para guiar o design e o desenvolvimento de interfaces de usuário para aplicações do CPS, independentemente de quais linguagens ou frameworks estiverem sendo utilizados pelas equipes. Entretanto, por si só não é um framework ou uma biblioteca de componentes, e portanto, não disponibiliza qualquer tipo de pacote para utilização por desenvolvedores finais.
Se o que você procura é efetivamente uma biblioteca de componentes que seja totalmente aderente ao CPS Design System, mas que já esteja pronta para uso, diretamente em seus projetos de soluções Web, acesse CPS Elements. Trata-se de uma biblioteca de Web Components de ponta, sem complicação, que podem executar nativamente em todos os navegadores modernos, bem como pode ser integrada com qualquer framework JavaScript moderno, como Angular, React, Vue, etc.
A documentação deste design system foi construída através do VuePress, ferramenta de desenvolvimento de documentações que executa através do Node. Em um ambiente de desenvolvimento com Node instalado previamente, execute em um terminal:
# Instalar dependências de desenvolvimento:
npm install
# Executar documentação em modo de desenvolvimento:
npm run devA partir daí, é possível acessar a versão local em execução da documentação, através do endereço http://localhost:8080. Assim, alterações diretas em qualquer arquivo do projeto, especialmente os arquivos .md contendo os textos da documentação, são automaticamente reproduzidas no navegador em que a documentação em modo de desenvolvimento está sendo visualizada.
As imagens e assets em geral foram construídos através do Figma, com base em forks do Windows UI e do Microsoft Fluent Web. A elaboração de um arquivo unificado no Figma está sendo planejada, para permitir contribuição facilitada diretamente nas peças de design.