Identidade visual

Personalize a aparência do Hosted Auth com cores, fontes, raios, logotipos e CSS personalizado.

Opções de identidade visual

A configuração de identidade visual controla a aparência visual das páginas do Hosted Auth, da tela de consentimento e dos modelos de e-mail. Cada organização pode substituir os padrões no nível da instância.

Opcao	Descrição
Cor primária	Cor de ação principal usada em botões, links e anéis de foco. Aceita valores CSS hex ou oklch.
Cor de fundo	Fundo da página para as telas do Hosted Auth.
Cor de destaque	Cor de destaque secundária usada em rótulos e elementos decorativos.
Raio da borda	Raio de canto aplicado a cartões, campos e botões. Escolha entre nenhum, pequeno, médio, grande ou completo.
Família da fonte	Nome do Google Fonts ou URL de fonte CDN personalizada. Volta para a pilha sans-serif do sistema.
Logotipo (claro)	PNG ou SVG exibido em páginas de tema claro. Armazenado no R2.
Logotipo (escuro)	PNG ou SVG exibido em páginas de tema escuro. Volta para o logotipo claro quando não definido.

Identidade visual por organização

Cada organização pode substituir a identidade visual no nível da instância com seu próprio logotipo, cores e fundo. O Login Worker resolve a configuração de marca por organização, voltando aos padrões da instância quando nenhuma substituição de organização está definida. Leituras do cache de marca são concluídas em menos de 2 ms no P50.

Endpoint da Management API

Atualize a identidade visual da organização com uma requisição PATCH. Apenas os campos presentes no corpo da requisição são alterados. Passe null para limpar um campo e restaurar o padrão superior.

curl -X PATCH https://xid.dev/v1/organizations/org_xxx/branding \
  -H 'Authorization: Bearer sk_live_xxx' \
  -H 'Content-Type: application/json' \
  -d '{
    "primary_color": "#6366f1",
    "border_radius": "medium",
    "font_family": "Inter",
    "hide_xid_branding": true
  }'

Restrições de CSS personalizado

Tamanho máximo de 50 KB por organização.
O filtro CSP remove regras @import e referências url() que apontam para fora da lista de permissão. Apenas declarações puras de propriedades CSS sobrevivem.
A execução de scripts externos dentro do CSS personalizado está bloqueada. Use o CSS personalizado apenas para substituições visuais, não para lógica comportamental.
As alterações são visualizadas em um sandbox de iframe antes de serem publicadas. Os estados de prévia e ao vivo são mantidos separados.

Identidade visual nos modelos de e-mail

Modelos de e-mail transacionais (verificação, magic link, OTP, redefinição de senha e convites) usam automaticamente o logotipo e a cor primária da organização. Modelos HTML de e-mail personalizados podem ser enviados por organização pelo console.