J
Design System
Onde a tradição encontra o estilo moderno
Catálogo vivo dos tokens e componentes. Tudo aqui sai de globals.css — se um token mudar lá, muda em toda a aplicação, nos dois painéis.
Tokens
A paleta da marca é fixa. Os tokens semânticos (surface, fg, line, accent) trocam de valor conforme o tema da seção.
Paleta da marca
ink
#211d1a
ink-raised
#2a2521
coffee
#3a322c
coffee-raised
#453b34
cream
#ece3d2
cream-raised
#f5efe3
paper
#ffffff
brass
#e8944f
brass-hi
#f0a35c
brass-dim
#c97b3d
Tipografia
Display: Anton, sempre caixa alta. Corpo: Inter.
Display XL
Display LG
Display MD
Display SM
Corpo base — Inter regular. O contraste entre o título condensado e o corpo leve é o que dá a cara do sistema.
Corpo secundário, usado em descrições e apoios.
Raios e sombras
sm — 8px
md — 12px
lg — 16px
xl — 24px
shadow-soft
shadow-lift
shadow-brass
Componentes
Os mesmos componentes servem os dois painéis. Quem muda a aparência é o tema da seção, não um prop em cada chamada.
Botões
Lista de preços
- Corte40minR$ 40,00
- Barba20minR$ 35,00
- Corte + Barba1hR$ 70,00
- Aparar barba15minR$ 15,00
Status de agendamento
Espelha o enum do banco.
SolicitadoConfirmadoRecusadoRemarcadoCanceladoConcluídoNão compareceu15 min de folga
Horários
Livre, selecionado e ocupado precisam ser distinguíveis num relance.
Manhã
Cards
Card padrão
ConfirmadoSobre a superfície da seção, com borda fina e sombra suave.
“Venho nessa barbearia há mais de cinco anos e nunca me decepcionei. Os barbeiros são habilidosos e sempre sabem as tendências.”
John D.
Card de contorno
Sem preenchimento nem sombra — para listas densas do painel do barbeiro, onde 20 cards empilhados com sombra viram sopa.
Formulários
Em fundo escuro o formulário vive dentro de um card translúcido — é o card de agendamento das referências.
Fazer um agendamento
Painel do barbeiro
Só a equipe da barbearia enxerga.
Duração precisa ser maior que 5 minutos.
Próxima etapa
Auth e as duas áreas separadas, cada uma com seu layout.