Sentinela · Design System · 2024

BIBLIOTECA
SENTINELA

Design system completo, componentes, tokens e implementação em código eliminando dependências externas.

Papel
UX/UI Designer · Front-end Developer
Stack
Figma · HTML · CSS · JS · PHP
Tipo
Design System End-to-End
// Registros Visuais
Biblioteca Sentinela — visão geral
Biblioteca Sentinela — componentes
Biblioteca Sentinela — tokens
// O Desafio

A Sentinela precisava de uma solução centralizada para construir e manter interfaces digitais sem depender de ferramentas externas. O objetivo era unificar design, código e gerenciamento de processos em uma única solução coesa.

Fui responsável por todo o processo: da arquitetura de tokens no Figma até a implementação em HTML, CSS, JavaScript e PHP, com arquitetura inspirada em Bootstrap, mas totalmente customizável para as necessidades da empresa.

Tokens Visuais
Gray Brown Orange Yellow Green Blue Purple Pink Red
Temas

Suporte nativo a Dark e Light mode com CSS custom properties, sem JavaScript para troca de tema.

// O que foi entregue

Figma Completo

Design system no Figma com componentes, estados, variações e diretrizes de uso documentadas.

Copy-Paste Ready

Interface de documentação onde devs copiam componentes prontos com código de implementação.

Syntax Highlight

Integração com Prism.js para highlight de código na documentação, legibilidade máxima.

Kanban Interno

Sistema de gestão de projetos embutido na plataforma, tudo centralizado, sem ferramentas externas.

Tipografia Responsiva

Sistema tipográfico com escala modular e breakpoints definidos, consistência em todos os dispositivos.

Suporte PHP

Componentes com lógica de servidor em PHP para integrações dinâmicas nos sistemas da empresa.

// Stack Completa
Figma Maze HTML CSS JavaScript PHP Prism.js
arrow_back Ourocap Plataforma
03 / 06
Aulas Práticas iCondutor arrow_forward