Próxima folha
05/11
Fechamento em 3 dias
Guia vivo · design system v1.0
Guia da Vela RH
Tokens, tipografia e todos os componentes da seção 10 com seus estados. Tudo aqui é renderizado com o mesmo código do site e da demo.
Cores
Valores lidos ao vivo do tokens.css. A razão de contraste é medida contra branco e serve de relatório: nenhuma cor foi ajustada.
Marca
--color-brand-indigo——--color-brand-coral——--color-brand-lilac——--color-brand-lilac-light——--color-brand-sand——--color-neutral-graphite——
Texto
--color-text-primary——--color-text-secondary——--color-text-muted——--color-text-inverse——
Superfícies e bordas
--color-surface-page——--color-surface-subtle——--color-surface-brand——--color-border-default——--color-border-strong——
Ações e foco
--color-action-primary——--color-action-primary-hover——--color-action-primary-pressed——--color-focus——
Status
--color-success——--color-success-bg——--color-warning——--color-warning-bg——--color-danger——--color-danger-bg——--color-info——--color-info-bg——
Tipografia
Plus Jakarta Sans nos títulos, Inter no texto, tabelas e números. Escala da seção 5.2; troca para os valores mobile abaixo de 768 px.
- H1
- Gestão de pessoas no rumo certo
- H2
- Folha fechada sem retrabalho
- H3
- Admissão digital em quatro etapas
- H4
- Tarefas da semana
- H5
- Próximas etapas
- Body large
- Menos tempo resolvendo problemas operacionais e mais confiança para cuidar das pessoas.
- Body
- Há 2 divergências para revisar antes do fechamento da folha de outubro.
- Body compact
- Competência 10/2026 · 84 colaboradores · atualizado às 08:30
- Caption
- Valores ilustrativos, em relação ao mês anterior
Acentos e caracteres
Admissão, Rescisão, Férias, 13º salário
À Á Â Ã É Ê Í Ó Ô Õ Ú Ü Ç · à á â ã é ê í ó ô õ ú ü ç
Números tabulares
R$ 312.400,00
R$ 1.111,11
R$ 88.888,88
Moeda, horas e datas sempre com .numeric.
Logo
Placeholder desenhado em SVG a partir do manual de marca, até existir o arquivo oficial. Mínimo de 112 px de largura no horizontal.
Grafismos
Derivados das faixas do símbolo. Apoio visual, nunca atrás de texto ou dado crítico.
Ícones
Lucide (licença ISC), traço 1,75 px, mapeamento da seção 6.2.
- Folha de pagamento
file-text - Holerite
receipt - Ponto
clock - Benefícios
heart - Admissão
user-round-plus - Documentos
file-check - Férias
calendar-days - Alerta
bell - Atenção
triangle-alert - Relatórios
chart-column - Equipe
users-round - Configurações
settings - Integração
link-2 - Segurança / LGPD
shield-check - Busca
search - Filtro
sliders-horizontal - Fechar
x - Próxima etapa
arrow-right
Espaço, raio e sombra
Espaçamento (base 4 px)
--space-1--space-2--space-3--space-4--space-5--space-6--space-8--space-10--space-12--space-16--space-20--space-24
--radius-sm--radius-md--radius-lg--radius-xl--radius-pill--shadow-sm--shadow-md--shadow-lg10.1 Botões
Estados parados para comparação. Para testar de verdade, use o mouse e a tecla Tab.
PadrãoHoverFocoPressionadoDesativadoCarregando
Primário
Secundário
Texto
Perigo
10.2 Campos de formulário
CPF inválido. Confira os números informados.
Telefone confirmado por SMS.
Use o nome do cargo como está no contrato.
10.3 Select
Escolha um status para filtrar.
10.4 Checkbox
10.5 Toggle
Lembrete de fechamento
Registro de ponto fora do escritório
Assinatura com certificado digital
10.6 Badges de status
PagoConcluídoPendenteEm andamentoAtrasadoErroProgramadoEm processamentoCancelado
10.7 Cards de métrica
Queda no custo da folha aparece como melhora; aumento de faltas, como piora. A seta mostra a direção; a cor e o texto dizem se é bom.
Colaboradores ativos
84
+4%em relação a setembro(variação)
Faltas no mês
12
+33%em relação a setembro(piora)
Custo da folha
R$ 312.400
−6%em relação a setembro(melhora)
10.8 Tabela
Clique nos cabeçalhos para ordenar; marque linhas para ver a seleção. Em telas estreitas, a tabela rola dentro da própria caixa.
| Status | ||||||
|---|---|---|---|---|---|---|
| Mariana CostaAnalista de Marketing | Marketing | R$ 8.200,00 | R$ 1.240,00 | R$ 6.960,00 | Pago | |
| Rafael LimaGerente de Produto | Produto | R$ 12.500,00 | R$ 2.430,00 | R$ 10.070,00 | Pago | |
| Camila SouzaExecutiva de Vendas | Comercial | R$ 9.800,00 | R$ 1.890,00 | R$ 7.910,00 | Pendente | |
| Lucas PereiraAnalista Financeiro | Financeiro | R$ 7.300,00 | R$ 1.120,00 | R$ 6.180,00 | Em processamento | |
| Fernanda AlvesAnalista de RH | Pessoas | R$ 6.900,00 | R$ 980,00 | R$ 5.920,00 | Atrasado |
10.9 Abas
Setas esquerda/direita trocam de aba; Home e End vão para a primeira e a última.
Fernanda Alves está na equipe de Pessoas desde 01/11/2026, em regime CLT integral.
Último holerite: outubro de 2026, líquido de R$ 5.920,00.
Período aquisitivo em andamento. Nenhuma férias programada.
Vale-refeição, vale-transporte e plano de saúde ativos.
10.10 Toast e alertas
Alerta persistente
Atenção: Há 2 divergências para revisar antes do fechamento.
Revise os registros de ponto de Camila Souza e Fernanda Alves.
Sucesso: Documento enviado.
O comprovante de residência foi anexado à admissão.
Atenção: Prazo próximo.
A folha de outubro fecha em 3 dias.
Erro: Não foi possível salvar.
Verifique a conexão e tente de novo. Seus dados continuam no formulário.
Informação: Feriado em 12/10.
O dia não conta como falta no banco de horas.
10.11 Modal de confirmação
O foco entra em "Cancelar", fica preso no modal, Escape fecha e o foco volta para o botão que abriu.
10.12 Navegação lateral
10.13 Calendário de ponto
1: Dia normal2: Dia normal3: Folga4: Folga5: Dia normal6: Dia normal7: Falta8: Dia normal9: Hora extra10: Folga11: Folga12: Feriado13: Dia normal14: Dia normal15: Hora extra16: Dia normal17: Folga18: Folga19: Dia normal20: Dia normal21: Falta22: Dia normal23: Dia normal24: Folga25: Folga26: Dia normal27: Dia normal28: Hora extra29: Dia normal30: Dia normal31: Folga
- Dia normal
- Falta
- Hora extra
- Folga
- Feriado
10.14 Progresso da admissão digital
- DadosConcluídaInformações pessoais e contratuais
- DocumentosEm andamentoEnvio e validação
- AssinaturaA fazerContrato e termos
- ProntoA fazerAdmissão concluída
Extras: FAQ e avatar
A Vela RH atende empresas de qual tamanho?
Empresas de 20 a 300 colaboradores. Abaixo disso, o plano Essencial costuma bastar.
Quanto tempo leva para implantar?
Em média duas semanas, com importação da planilha atual feita pelo nosso time.
Tem fidelidade?
Não. O contrato é mensal e pode ser cancelado com 30 dias de aviso.
Carla MendesRafael LimaFernanda AlvesJoão Mendes