CELERE DS · v0A revisão do Design System começa aqui.
Este é o Celere Design System na versão v0, no ar para o time revisar. O que sair daqui, comentário por comentário, vira a v1: o documento oficial de identidade visual da Celere Digital.
1 de 30 amostra já tem veredito.
COMO REVISARComo comentar
Abra a amostra
Escolha qualquer uma das amostras abaixo e entre no preview completo.
Comente num ponto exato
Clique em “Comentar num ponto” e depois exatamente no elemento que precisa mudar. O comentário fica fincado ali.
Diga o errado e o certo
Explique o que está errado e, se souber, qual é o certo. Anexe o arquivo se tiver: manual de marca, fonte ou logo.
Dê o veredito
Encerre a amostra dizendo se está aprovada ou se precisa ajustar.
Também vale comentar sem fincar ponto nenhum. E dúvida vale tanto quanto crítica: pergunte sempre que precisar.
CATÁLOGOCada bloco abaixo é um grupo do sistema. Abra qualquer amostra, comente e dê o veredito quando estiver pronto.
FUNDAMENTOSFundamentos
As decisões de base do sistema: cor, tipografia, espaçamento, elevação, movimento, ícones, grafismos e marca. Tudo o mais deriva daqui.
Cor
Escala de ink, dois acentos com papel fixo, contraste medido e usos proibidos
Tipografia
Três famílias, escala fluida, eixo de largura e número tabular
Espaçamento e grid
Escala de 4px, grid de 12 colunas, container de 1240px e limite de 65ch
Elevação e raio
Três raios, duas sombras e o par obrigatório de sombra com hairline
Motion
Os seis movimentos permitidos rodando, com token de duração, easing e fallback reduzido
Ícones
33 ícones em traço técnico de 1.5px na grade de 24px, com a grade de construção
Grafismos e texturas
Régua, blueprint, dot grid, hachura, degradês de instrumento e decisão e overlay ink
Marca
Lockups oficiais, símbolo, área de segurança e usos proibidos
COMPONENTESComponentes
Os contratos de interface reutilizáveis, do botão à tabela de dados, em todas as variantes, tamanhos e estados.
Botões
5 variantes · 3 tamanhos · 6 estados · ícone e grupo segmentado
Chips e status
chip removível · filtro · fase F1 a F7 · badge · pill de obra · delta · verba paramétrica
Cards
solução · projeto · métrica · KPI · obra · alerta · vazio · clicável inteiro
Números e KPI
Destaque com count-up, grade institucional, KPI com delta e meta, saúde do orçamento e os 5 canônicos
Tabela de dados
EAP de 8 níveis · ordenação · seleção em massa · célula editável · total e paginação
Gráficos de obra
Curva S, físico-financeira, gantt, waterfall, desvio por EAP, heatmap, dispersão e a pizza proibida
Formulários
14 controles · 7 estados · cadastro de obra completo
Navegação
navbar institucional e de app · sidebar · abas · breadcrumb · menu de contexto · folha mobile
Barras
Aplicação, ferramenta, filtro, paleta de comando, ação em massa, status, etapa e navegação mobile
Retorno ao usuário
Toast com fila, alerta, banner, modal, gaveta, dica, popover, vazio e erro
Carregamento e esqueleto
Spinner, progresso, skeleton que imita o layout final e o fallback de movimento reduzido
Réguas e divisores
régua de seção · fina · marco laranja · vertical · rótulo central · linha do ciclo F1 a F7
Rodapés
Institucional em 4 colunas, compacto, de aplicação, de e-mail e o acordeão mobile
PADRÕESPadrões
Telas inteiras montadas com os componentes: o esqueleto da aplicação, o dashboard de obra, a autenticação, a página institucional e o relatório impresso.
App shell
Esqueleto da aplicação em três estados, com as medidas de cada região
Dashboard de obra
Acompanhamento da Times Square: KPI, curva S, desvio por EAP e marcos
Autenticação
Entrar, recuperar senha, 2 fatores, convite e erro de credencial
Seções de página
Biblioteca de nove seções institucionais, do hero ao bloco de conversão
Relatório em A4
Fechamento de medição em layout de impressão, com @media print de verdade
COMUNICAÇÃOComunicação
O sistema fora da tela do produto: e-mail, deck de apresentação, post de feed, story e reels.
600px em tabela, versão clara e escura, interno e relatório mensal
Deck de apresentação
11 lâminas em 16:9, 1920×1080
Post de feed
1080×1080, 1080×1350 e carrossel de 4 lâminas
Story e reels
1080×1920 com zona segura de interface marcada
DOCUMENTAÇÃOO guia escrito
Tudo que está nas amostras também está explicado em texto corrido, seção por seção.
PRÓXIMO PASSOO que acontece depois
O que está no ar agora é a v0: uma base construída a partir da identidade visual da Celere Digital de hoje, sem acesso ao manual de marca oficial. Divergência é esperada, e é exatamente isso que esta revisão existe para capturar.
O time comenta, aponta o ponto exato, anexa arquivo e dá o veredito até a data combinada. Cada observação e cada arquivo enviado entram na consolidação que vira a v1.
A partir daí, a v1 passa a ser o documento oficial de identidade visual da Celere Digital, e vale para tudo: do produto ao post de Instagram.