CELERE DS · v1A v1 do Design System está no ar.
Este é o Celere Design System na versão v1, o documento oficial de identidade visual da Celere Digital. Ela nasceu da rodada anterior, item por item: o que o time apontou virou ajuste, e o que dependia de decisão foi decidido e está registrado.
A mesa continua aberta. Cada amostra aceita comentário fincado no elemento, anexo de marca e veredito, e é assim que sai a próxima versão.
5 de 31 amostras já têm 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
Tendência da obra
As quatro séries que a obra distingue, mais baseline contra replanejamento
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 mudou nesta versão
A v0 foi construída a partir da identidade visual da Celere Digital de hoje, sem acesso ao manual de marca oficial. A divergência era esperada, e a rodada de revisão existia para capturá-la. Ela voltou com cinco pedidos e três decisões pendentes, e os oito estão respondidos.
As três famílias tipográficas foram trocadas pelas que a Celere indicou, com a escala recalibrada em cima delas. A marca passou a carregar as regras de aplicação do manual, traduzidas de porcentagem de impressão para as superfícies do sistema. Os gráficos de obra ganharam a tendência, a tabela de EAP ganhou hierarquia por cor e o sublinhado do rodapé parou de virar tachado.
A partir daqui a v1 é o documento oficial de identidade visual da Celere Digital, e vale para tudo: do produto ao post de Instagram.