# Sistema de design Visa Product ## Prévia da interface sistema de design Visa Product Selecione um formato e uma frequência, confira a preferência local e redefina-a. ## Referência de design sistema de design Visa Product Estilos publicados de @visa/nova-styles 1.6.5, tema Visa e metadados do exemplo. Os valores padrão/claros são separados das substituições para os temas alternativo e escuro. A prévia incorpora localmente o CSS oficial, remove as regras font-face remotas e usa fontes do sistema como alternativa. ### Paleta padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --palette-default-active | #1434cb | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-active-hover | #173be8 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-active-pressed | #0f2595 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-active-accent | #fcc015 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-surface-1 | #ffffff | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-surface-2 | #f5f5f5 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-surface-3 | #f0f0f0 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-text | #000000 | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-text-subtle | #4a4a4a | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-text-on-active | #ffffff | Referência do tema padrão/claro do Visa 1.6.5. | | --palette-default-border | rgba(0, 0, 0, 0.1) | Referência do tema padrão/claro do Visa 1.6.5. | ### Tamanho e tipografia do tema | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --theme-font-size | 14px | Referência do tema padrão/claro do Visa 1.6.5. | | --theme-border-radius | 6px | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-headline-1-font-size | 2.2857142857rem | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-headline-2-font-size | 1.7857142857rem | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-headline-3-font-size | 1.4285714286rem | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-body-1-font-size | 1.1428571429rem | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-body-2-font-size | 1rem | Referência do tema padrão/claro do Visa 1.6.5. | | --typography-body-3-font-size | 0.8571428571rem | Referência do tema padrão/claro do Visa 1.6.5. | ### Dimensões escaláveis | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | | --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | Dimensão escalável base; contextos responsivos podem aplicar um fator adicional. | ### Classes de utilitários e componentes publicadas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | v-flex | Flex layout | Elemento pai necessário para exemplos de espaçamento. | | v-gap-20 | Gap utility | Exibido no exemplo oficial de espaçamento padrão. | | v-col-gap-20 | Column gap utility | Separa as colunas. | | v-button | Primary button | Use um elemento button nativo. | | v-button-secondary | Secondary modifier | Ação de redefinição complementar no exemplo. | | v-radio | Native radio style | Mantenha o mesmo name e valores distintos. | | v-label | Label style | Mantenha um rótulo associado ou um rótulo que envolva o controle. | | v-alternate | Alternate palette context | Exibido em uma superfície ou botão. | | v-typography-headline-1 | Headline visual role | Aplique ao h1 semântico desta página. | ### Contrato de composição | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Radio group | One shared name per question | Formato e frequência são grupos independentes. | | fieldset / legend | Group question | Indique a que as opções respondem. | | checked | Native selected state | Não use CSS sozinho para indicar a seleção. | | disabled | Native unavailable state | Mantenha uma explicação visível caso a opção não esteja disponível. | | aria-describedby | Optional supporting description | Associe o texto adicional quando ele não fizer parte do rótulo. | ## Guia completo sistema de design Visa Product Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Visa Product Uma tarefa de preferência com um resumo claro para conferência ### Trate cada pergunta de forma independente > O exemplo pergunta o formato do extrato e a frequência do resumo. São grupos de opções separados: alterar a frequência não desmarca o formato. O resumo repete as duas escolhas antes da ação principal, para que o usuário possa conferir o resultado sem precisar interpretar um ícone ou um padrão oculto. A confirmação da preferência registra apenas uma confirmação local. A página não solicita número de cartão, acessa uma conta, gera um extrato nem altera configurações de serviços financeiros. Assim, o exemplo mantém o foco no comportamento de seleção e feedback do sistema de design. Consulte a especificação de apoio ## Sistema de design Visa Product Os estilos do Nova e o tema Visa são importados separadamente ### A estrutura não compõe o tema inteiro A instalação oficial indica styles.css seguido de themes/visa/index.css. O primeiro fornece as regras de componentes e utilitários; o segundo fornece o tema Visa. Carregar apenas um deles resulta em uma integração incompleta. Tanto o exemplo independente quanto o trecho de importação mantêm essa ordem. O pacote verificado é a versão 1.6.5. O exemplo incorpora seu CSS localmente, sem depender de uma solicitação de folha de estilos a terceiros durante a visualização. As declarações font-face remotas são removidas e a aplicação usa explicitamente uma fonte do sistema como alternativa; trata-se do Nova CSS nativo com substituição de fonte informada, não de uma alegação de equivalência exata com uma fonte proprietária. Consulte a especificação de apoio ## Sistema de design Visa Product As paletas padrão e alternativa incluem cores correspondentes para o primeiro plano ### Não reutilize uma cor de preenchimento sem a função correspondente para o texto A cor ativa padrão/clara é #1434cb, passa a #173be8 ao passar o cursor e a #0f2595 ao pressionar. A cor do texto sobre o estado ativo é branca. O contexto do tema alternativo altera o mapeamento das funções; por isso, o exemplo usa v-alternate na superfície do cabeçalho, em vez de substituir apenas a cor de fundo. O destaque #fcc015 não é uma cor de preenchimento universal para botões. O contexto do tema determina como as funções de destaque e estado ativo são usadas. A tabela de referência descreve a paleta padrão; as definições posteriores para os temas escuro e alternativo na mesma folha de estilos não são combinadas em um conjunto de valores enganoso. Consulte a especificação de apoio ## Sistema de design Visa Product Considere a escala rem em relação à raiz do tema ### Uma raiz de tema de 14 pixels altera as suposições habituais sobre rem O tema Visa define uma fonte raiz de 14 pixels. Portanto, headline-1, com valor aproximado de 2.285714rem, corresponde a 32 pixels nessa raiz, e não ao valor obtido supondo uma raiz de 16 pixels. body-1 equivale a aproximadamente 1.142857rem, enquanto body-2 equivale a 1rem. Os tokens de tamanho escalável expressam uma quantidade em pixels multiplicada pelo fator de escala do tema. Contextos responsivos podem introduzir um segundo fator. Ao adaptar o espaçamento à aplicação, mantenha a expressão; copiar apenas o número calculado padrão elimina essa relação. O exemplo usa os utilitários oficiais de espaçamento nos controles de frequência e dimensões originais da aplicação no layout geral dividido. Consulte a especificação de apoio ## Sistema de design Visa Product Semântica de opções nativas sob a apresentação do Nova ### Um círculo estilizado não é um grupo de botões de opção Os metadados públicos aplicam v-radio a um elemento input type="radio" real e o associam a um label. A prévia mantém essa estrutura nativa e envolve no label a descrição visível de cada opção. As teclas de seta permitem navegar pelo grupo, e o estado marcado continua disponível para o navegador e as tecnologias assistivas. Um fieldset e um legend identificam cada pergunta. As opções de formato explicam suas consequências: um PDF é um exemplo para download, enquanto HTML é descrito como refluível. O conteúdo específico do produto é original; a estrutura dos controles e as classes vêm da biblioteca nativa. - Use um name para as duas opções de formato e outro para a frequência. - Mantenha o valor da opção separado do texto visível para que o resumo possa usar um rótulo estável. - Use os atributos checked e disabled para indicar o estado, em vez de apenas uma classe decorativa. Consulte a especificação de apoio ## Sistema de design Visa Product O Nova CSS estiliza os controles; o HTML nativo gerencia a escolha ### Mantenha a lógica de agrupamento e revisão fora da folha de estilos O exemplo usa a classe v-radio do Nova em elementos de opção nativos. Atributos name iguais tornam as opções de formato mutuamente exclusivas, enquanto um name diferente separa o grupo de frequência. Fieldset e legend fornecem o contexto do grupo; um label associado inclui o texto completo da opção no nome acessível do controle. O pacote CSS não escolhe uma opção, não gerencia a persistência dos dados do aplicativo nem cria um registro de revisão. O script fornecido lê os dois grupos nativos e monta um resumo local. Qualquer alteração limpa esse resumo, pois os valores anteriores já não representam a preferência atual. Mantenha na implementação tanto a folha de estilos estrutural quanto o tema Visa. O cabeçalho alternativo usa v-alternate, enquanto o formulário permanece no contexto de cores padrão; não tente imitar o cabeçalho alterando apenas o plano de fundo e deixando os papéis de primeiro plano sem definição. Consulte a especificação de apoio ## Sistema de design Visa Product Uma ordem de leitura em qualquer largura ### Reposicione o resumo sem alterar a sequência da tarefa Em telas largas, os grupos de opções e o resumo da seleção atual aparecem lado a lado. Em telas pequenas, o resumo fica depois do formulário. A ilustração original do documento é ocultada, pois não acrescenta informações à tarefa, enquanto todos os rótulos, as explicações e as ações são mantidos. A biblioteca CSS oferece suporte a navegadores modernos evergreen. A documentação oficial de desenvolvimento não garante compatibilidade com navegadores legados; portanto, a equipe de produção deve testar as versões realmente suportadas, em vez de considerar uma visualização moderna bem-sucedida como garantia de compatibilidade universal. 1. Carregue a CSS estrutural fixada e o tema Visa; em seguida, adicione os estilos de layout do aplicativo. 2. Selecione Acessível HTML e Trimestral, revise a preferência e confirme que ambas aparecem no resumo. 3. Altere qualquer uma das opções, confirme que a mensagem de revisão é redefinida e, em seguida, teste Redefinir e o layout estreito. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design Visa Product ### Composição completa de preferências CSS do Nova Dois grupos nativos de opções atualizam um resumo imediatamente; a ação principal cria um estado de revisão local explícito. ``` Statement preference

ACCOUNT PREFERENCES / SAMPLE

Choose how you read
your statement.

One clear choice, with the details visible before you confirm.

Statement format

This page stores a demonstration preference only.

Summary frequency
``` Referência de código - CSS fornece a apresentação do componente; o pequeno script implementa o comportamento do aplicativo. - Alterar uma preferência limpa o status de revisão anterior. - O cabeçalho alternativo usa um contexto de tema real, não uma imitação da paleta feita à mão. - Salve o HTML completo como index.html e abra-o em um navegador com acesso aos URLs públicos fixados de CSS. A visualização incorporada neste guia mantém esses estilos localmente. ### Carregue a estrutura e o tema juntos Em um aplicativo empacotado, importe as duas camadas uma única vez, antes da folha de estilos do aplicativo. ``` import '@visa/nova-styles/styles.css'; import '@visa/nova-styles/themes/visa/index.css'; import './application.css'; ``` Referência de código - A ausência do arquivo do tema pode deixar as classes estruturais presentes sem os tokens Visa esperados. ## Configuração do agente sistema de design Visa Product ### Ponto de partida para implementação O HTML completo usa os caminhos verificados styles.css e themes/visa/index.css. Ambos são necessários. O iframe incorpora esses estilos localmente; as declarações oficiais de font-face foram omitidas. ``` npm create vite@latest statement-preference -- --template vanilla cd statement-preference npm install npm install @visa/nova-styles@1.6.5 # Replace index.html with the complete example below. npm run dev ``` ### Um prompt para seu projeto ``` Crie o exemplo de preferência de declaração Visa Nova com a CSS estrutural e o tema fixados. Preserve os grupos nativos de opções, as legends claras e os labels associados. Separe os papéis do tema padrão dos papéis do tema alternativo e considere a raiz de 14px ao interpretar valores em rem. Mantenha a revisão local, remova confirmações desatualizadas após alterações e empilhe o resumo em telas pequenas. ``` ## Fontes e escopo de sistema de design Visa Product Guia independente de OpenDesign com CSS nativos do Nova. Esta tarefa fictícia de preferência não usa dados de conta nem altera nenhum serviço financeiro. A visualização informa que substitui as fontes por fontes do sistema. - Repositório do Nova Instruções oficiais de instalação e carregamento do tema. - Styles 1.6.5 Regras de componentes nativos e dimensões escaláveis. - Tema Visa 1.6.5 Paleta e tipografia exatas do tema. - Metadados do exemplo Anatomia verificada das classes de HTML. - Primeiros passos com CSS Orientações públicas de integração. - Suporte a navegadores Limites de suporte a navegadores evergreen. ## Recursos relacionados a sistema de design Visa Product ### Volvo Cars Web sistema de design Analise a base web da Volvo Cars, priorizada para HTML, os tokens reais do modo claro e o estilo nativo de cartões selecionáveis por meio de um exemplo completo de plano de bagagem, com escolhas independentes, alternância de tema e redefinição. ### Wonderflow Wanda Use os papéis de tema e a sintaxe de tokens reais do Wanda em um espaço completo para ler feedback, com filtros por tópico, contexto expansível de evidências e um caderno local persistente. ### Workday Canvas Crie um plano de aprendizagem local com o FormField composto, o TextInput controlado e o PrimaryButton do Canvas Kit, diferenciando as fontes atuais de tokens semânticos dos exemplos antigos de migração de space.x4. - [Referência de implementação](https://github.com/visa/nova-styles) - [Fonte](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Fonte](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Fonte](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Fonte](https://design.visa.com/components/radio/) - [Consulte a especificação de apoio](https://design.visa.com/components/radio/) - [Consulte a especificação de apoio](https://github.com/visa/nova-styles) - [Consulte a especificação de apoio](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Consulte a especificação de apoio](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Consulte a especificação de apoio](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Consulte a especificação de apoio](https://design.visa.com/developing/) - [Referência de código](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Referência de código](https://github.com/visa/nova-styles) - [Repositório do Nova Instruções oficiais de instalação e carregamento do tema.](https://github.com/visa/nova-styles) - [Styles 1.6.5 Regras de componentes nativos e dimensões escaláveis.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Tema Visa 1.6.5 Paleta e tipografia exatas do tema.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Metadados do exemplo Anatomia verificada das classes de HTML.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Primeiros passos com CSS Orientações públicas de integração.](https://design.visa.com/developing/styles-css/) - [Suporte a navegadores Limites de suporte a navegadores evergreen.](https://design.visa.com/developing/)