SEROY DS
Sistema de design de Marcinho Seroy, designer gráfico. Traduz o manual de marca (2026) em tokens, componentes e regras de uso — a mesma linguagem visual do papel timbrado até o botão de "enviar orçamento" no site.
Cores
Os três hex do manual da marca — roxo, amarelo e tinta — não são inventados nem reamostrados de imagem: vêm dos vetores originais do PDF. Escalas de apoio (tints/shades) e cores semânticas foram criadas para preencher lacunas que o manual não cobre, sempre calculadas para no mínimo AA de contraste.
Marca
Use no máximo um acento amarelo por tela. Roxo é a cor institucional; amarelo marca apenas o ponto de ação ou destaque.
Neutros
Tinta é o texto padrão — mais quente que preto puro, herdado do manual. Superfície (#9B9B9A) é proibida como texto: serve só para borda e fundo de estado inativo.
Semânticas (alerta)
Ausentes no manual — criadas para não colidir com o amarelo da marca (que é acento, não aviso). Cada uma fecha AA sobre branco e sobre a própria cor de fundo.
Contraste verificado
| Combinação | Razão | Uso | Selo |
|---|---|---|---|
| #1D1D1B sobre #FFFFFF | 16,9:1 | Texto padrão | AAA |
| #FFFFFF sobre #681FA5 | 9,0:1 | Texto sobre seção roxa | AAA |
| #1D1D1B sobre #FCC603 | 10,6:1 | Texto do botão amarelo | AAA |
| #FCC603 sobre #681FA5 | 5,7:1 | Acento em texto sobre roxo | AA |
| #474747 sobre #FFFFFF | 9,3:1 | Texto secundário | AAA |
| #9B9B9A sobre #FFFFFF | 2,8:1 | Qualquer texto | Proibido |
Tema
Claro (positivo) é o padrão hoje no site em produção. Escuro (negativo) é o
mesmo layout com os neutros invertidos — roxo e amarelo não mudam de tema, só fundo, texto e
borda. Seis tokens semânticos (--bg, --bg-elevado, --texto,
--texto-2, --texto-3, --borda-tema) fazem a troca — o
resto do componente nunca lê a cor bruta direto.
Título de exemplo
Texto secundário — legenda, dica de campo, metadado.
Texto terciário — o nível mais discreto ainda legível.
Título de exemplo
Texto secundário — legenda, dica de campo, metadado.
Texto terciário — o nível mais discreto ainda legível.
Toggle ao vivo
Mesmo card, um só, trocando de tema em tempo real — prova que os 6 tokens bastam para virar a cor sem editar mais nada.
Orçamento enviado
Marcinho recebe seu briefing e responde em até 1 dia útil.
Contraste verificado — escuro
| Combinação | Razão | Uso | Selo |
|---|---|---|---|
| #FFFFFF sobre #1D1D1B | 16,9:1 | Texto padrão (--texto) | AAA |
| rgba(255,255,255,.85) sobre #1D1D1B | 12,4:1 | Texto secundário (--texto-2) | AAA |
| rgba(255,255,255,.72) sobre #1D1D1B | 9,3:1 | Texto terciário (--texto-3) | AAA |
| #FFFFFF sobre #2B2B29 | 14,2:1 | Texto em card (--bg-elevado) | AAA |
Tipografia
Black Future entrega o corte geométrico e o peso de logotipo — é a fonte do próprio nome da marca, reservada para o que precisa gritar. Montserrat carrega o texto corrido, em toda a sua família de pesos, onde o traço anguloso vira difícil de ler em blocos longos.
Sempre em maiúsculas em título de seção. Usa no logo, nos rótulos de UI
(botão, eyebrow, tabela) e em números de destaque. Licença comercial (Letterena) — arquivo
local em assets/fonts/black-future/, nunca CDN público.
Família toda (100–900, itálico) disponível. Peso 400 no corpo, 500–600 em ênfase e rótulo de campo. Nunca em maiúsculas — Black Future já cumpre esse papel.
Escala
Espaçamento & grid
Escala base 8px (com passo extra de 4px para ajuste fino). Toda margem, padding e gap do sistema vem desta régua — nada de valor solto tipo 13px.
Grid
12 colunas, calha de 24px, largura máxima de conteúdo 1160px (herdada do site em produção). Quebra em 480 / 760 / 1024px.
Elevação & sombra
Sombras neutras para separação leve; sombra roxa (tingida com a cor da marca, não preta) reservada para hover de elementos clicáveis — já usada no card de trabalho do site.
Logo
Vetor real, extraído diretamente dos paths do manual (não redesenhado, não reamostrado de imagem). Amarelo só sobre fundo roxo/escuro; roxo só sobre fundo claro. Arquivos completos (SVG + PNG) em /assets/logo/.
Nunca
Ícones
Traço de 1,6–2px, junções retas (miter) e pontas quadradas — não redondas. É a mesma lógica de corte reto do monograma "M+S": nada de curva suave onde a marca usa aresta. Cor herda de currentColor.
Botões
Cinco variantes, três tamanhos. Amarelo é reservado à ação de maior prioridade da tela — nunca dois botões amarelos na mesma vista.
Variantes
Tamanhos
Estados
Campos & formulário
Borda 1,5px em superfície neutra; foco troca para roxo com anel — nunca só mudança de cor de borda (falha para quem não distingue cor).
Selos
Rótulo curto, sempre Black Future maiúsculo. Usa para status de projeto, etiqueta de segmento de cliente ou destaque de card.
Alertas
Ícone + cor + texto — nunca só cor. Borda lateral de 4px marca a categoria mesmo em escala de cinza (impressão, daltonismo).
Cards
Radius 12px, borda de 1px em repouso; hover sobe 4px e troca para sombra roxa — o mesmo comportamento já validado no grid de trabalhos do site.
Consultório Dra. Camila Rezende
Marca completa para odontologia de alto padrão — logo, papelaria e sinalização de clínica.
Escritório Bandeira Advocacia
Atualização de identidade com manual de uso para equipe interna.
Expo Imigrantes — sinalização
Sistema de sinalização e material impresso para feira de grande porte.
Tabela
Cabeçalho com regra inferior de 2px em tinta; linha em hover ganha fundo roxo 100 — mesma lógica tonal usada em selo e chip.
| Cliente | Serviço | Status | Valor |
|---|---|---|---|
| Dra. Camila Rezende | Identidade visual | Aprovado | R$ 4.200 |
| Bandeira Advocacia | Redesign | Em orçamento | R$ 3.600 |
| Expo Imigrantes | Sinalização de evento | Aguardando arte | R$ 7.800 |
Fluxo de uso — pedido de orçamento
Jornada real do site: da chegada ao Instagram/Google até o valor final. Cada passo usa exatamente um botão de prioridade máxima (amarelo) por vez.
Chegada
Instagram, Google Business ou indicação leva ao site.
Portfólio
Cliente navega pelos trabalhos e reconhece um caso parecido.
Formulário
Preenche tipo de projeto e descreve o problema visual.
Consulta grátis
Primeira conversa sem custo — alinhamento de escopo.
Proposta
Valor-hora calculado, orçamento enviado em até 2 dias.
Tom de voz
Base: a missão declarada por Marcinho na entrevista de MVV — "solução do problema visual, traduzir o que o cliente quer tirar da cabeça para algo digital ou impresso". O público são profissionais liberais de ticket alto (advogados, médicos, dentistas) e órgãos como a ALESP — a voz precisa soar tão confiável quanto o trabalho entregue, nunca informal demais nem robotizada.
Princípios
Vai ao ponto
O cliente já sabe o que quer tirar da cabeça — a escrita ajuda, não enrola.
Sem excesso de ressalva
Fala como quem já entregou identidade para a ALESP — sem se desculpar por cobrar o que vale.
Prova, não adjetivo
Prefere "identidade visual da ALESP" a "trabalhos incríveis". Nome de cliente e prazo, não superlativo.
Certo / errado
Primeira consulta é gratuita. A partir da segunda, o valor é por hora.
Consultoria gratuita incrível esperando por você! 🎉
Não foi possível enviar. Confira o WhatsApp informado e tente novamente.
Ops! Algo deu errado 😅
Identidade visual completa para consultório odontológico.
Pacote demais top para clínicas.
Regras de uso
Um acento por tela
Amarelo aparece em no máximo um elemento de destaque por tela — botão principal ou marcador, nunca os dois.
Superfície nunca é texto
#9B9B9A (2,8:1 sobre branco) só entra como borda ou fundo de estado inativo.
Geometria facetada
Radius máximo 12px em card, 8px em botão/input. Nada totalmente arredondado — a marca corta reto, não suaviza.
Foco sempre visível
Todo elemento interativo tem anel de foco roxo — nunca remover outline sem substituto.
Black Future só em maiúsculas curtas
Título, botão, rótulo — nunca parágrafo. Texto corrido é sempre Montserrat.
Ícone acompanha texto
Nenhum ícone sozinho comunica estado — sempre com rótulo ou ao lado de texto equivalente.
Versionamento & processo
Versionamento semântico. Toda mudança de token ou componente passa por Dennis (consultor) antes de ir ao site — Marcinho aprova qualquer mudança visual de marca (logo, cor, tipografia).
| Tipo | Quando | Exemplo | Aprova |
|---|---|---|---|
| MAJOR | Muda token existente ou remove componente | Trocar o hex do roxo | Marcinho + Dennis |
| MINOR | Componente ou token novo, sem quebrar nada | Adicionar componente de tabela | Dennis |
| PATCH | Ajuste fino sem mudar comportamento | Corrigir espaçamento de um card | Dennis |
Reportar problema ou sugestão
Sem tracker dedicado ainda — registrar em 01-MATERIAIS/design-system/SEROY-DS/README.md, seção "Pendências", com data e print da tela. Bug visual (contraste, quebra de layout) tem prioridade sobre pedido de novo componente.