MarsalaDS

Diretrizes

Regras práticas para designers e devs manterem consistência ao usar o Marsala DS.

Acessibilidade

  • Todo fluxo precisa funcionar com teclado e leitor de tela.
  • Use aria-invalid no controle e data-invalid no Field em erros.
  • Diálogos, sheets e drawers precisam de título acessível.
  • Não dependa só de cor para comunicar estado (erro, sucesso).

Conteúdo e microcopy

  • Botões com verbo de ação: Salvar, Enviar, Criar conta.
  • Mensagens de erro dizem como corrigir, não só o que está errado.
  • Evite jargão interno em labels visíveis ao usuário final.
  • Mantenha consistência de termos entre produtos Youx.

Formulários

  • Layout com FieldGroup + Field, nunca apenas div com space-y.
  • InputGroup para ícones e ações dentro do campo.
  • Validação sincronizada: data-invalid + aria-invalid.
  • Desabilitado: data-disabled no Field e disabled no controle.

Composição visual

  • className para layout; variantes do componente para estilo.
  • Use tokens semânticos (primary, muted, destructive).
  • Ícones em Button com data-icon, sem classes de tamanho manual.
  • Prefira gap-* em flex em vez de space-x/y.