# Sistema de design Volvo Cars Web ## Prévia da interface sistema de design Volvo Cars Web Escolha um plano, adicione itens extras independentes e confira as mesmas opções nos modos claro e escuro. ## Referência de design sistema de design Volvo Cars Web Tokens públicos reais de @volvo-cars/css 2.5.1, compatíveis com a marcação documentada de cartões selecionáveis. São exibidos os valores padrão do modo claro; o modo escuro é fornecido pela mesma folha de estilos. ### Papéis padrão do modo claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --v-color-foreground-primary | #000 | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-foreground-secondary | #5e5e5e | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-foreground-tertiary | #787878 | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-foreground-inverted | #fff | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-foreground-accent-blue | #0b2ded | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-background-primary | #fff | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-background-secondary | #fafafa | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-background-feedback-green | #d7f9df | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-background-feedback-red | #fce5e3 | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | | --v-color-surface-gray | #e3e3e3 | Primeiras declarações do modo claro da versão 2.5.1; o tema escuro nativo substitui esses valores de papel. | ### Espaçamento e formas fixos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --v-space-2 | .125rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-4 | .25rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-8 | .5rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-12 | .75rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-16 | 1rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-24 | 1.5rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-32 | 2rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-48 | 3rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-space-64 | 4rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-radius-sm | .25rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-radius-md | .5rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-radius-lg | 1rem | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | | --v-radius-full | 9999px | Escala fixa publicada. Mantenha esses valores separados dos tokens fluidos de espaçamento da página. | ### Regras de texto e borda | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --v-font-sans-family | "Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-regular-weight | 400 | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-emphasis-weight | 600 | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-14-size | .875rem | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-14-lineheight | 1.572 | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-16-size | 1rem | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-16-lineheight | 1.5 | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-20-size | 1.25rem | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-font-20-lineheight | 1.4 | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-border-width-default | 1px | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | | --v-border-width-selected | 2px | Valores públicos reais da versão 2.5.1. O exemplo não inclui os arquivos de fontes da Volvo e, por isso, usa a pilha de fontes alternativa. | ## Guia completo de sistema de design Volvo Cars Web 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. ## HTML primeiro: Foundation e escolha de versão sistema de design Volvo Cars Web ### Fixe a folha de estilos correspondente ao padrão > O exemplo usa @volvo-cars/css 2.5.1, correspondente à referência de cartões selecionáveis usada na implementação. A versão 3 tem um contrato diferente; instalar o pacote mais recente sem verificar a marcação pode deixar o padrão incompleto. A versão deve constar tanto na configuração quanto no guia: a classe de um componente não garante que todas as versões o estilizem da mesma maneira. ### Use deliberadamente a camada web pública Este estudo importa diretamente os tokens web públicos e a folha de estilos para todas as mídias. Ele não depende do pacote interno EDLS separado. O aplicativo usa apenas HTML, com uma pequena quantidade de JavaScript para a lista de conferência. O CSS instalado cuida da aparência dos cartões selecionáveis, do estilo dos controles e dos papéis do modo de cor; o aplicativo fornece o conteúdo e o estado. ## Papéis neutros, tipografia e espaçamento de sistema de design Volvo Cars Web ### Mantenha os papéis dos modos claro e escuro conectados A tabela registra as declarações padrão do modo claro, enquanto data-color-mode seleciona os valores nativos correspondentes do modo escuro. A composição usa papéis de plano de fundo e primeiro plano, em vez de definir texto branco diretamente em todos os cartões. A alternância de tema deve preservar o plano e os itens extras selecionados; mudar a paleta é independente de alterar a lista de conferência. ### Diferencie etapas fixas do ritmo fluido da página Os valores fixos de espaçamento da referência selecionada vão de 2px a 64px. Outros tokens públicos de página usam clamp e round, adaptando-se à janela de visualização. A composição em duas colunas e o espaçamento de 40px do exemplo são escolhas de layout originais em torno dos cartões nativos. A pilha de fontes publicada é mantida, mas os arquivos de fontes da Volvo não estão incluídos; a renderização usa as fontes do sistema disponíveis como alternativa. ## Semântica de cartões selecionáveis sistema de design Volvo Cars Web ### Use controles de opção para escolher um plano Os dois cartões de plano contêm controles de opção nativos com o mesmo name, dentro de um fieldset com legend. Cada cartão é um label com espaços para título, metadados e descrição. Clicar no cartão seleciona o controle, e o comportamento padrão do teclado para opções continua disponível. Assim, o plano selecionado é um estado real do formulário, não apenas uma borda decorativa controlada à parte. ### Use caixas de seleção para itens adicionais independentes Água e uma camada extra podem ser selecionadas de forma independente, por isso usam caixas de seleção. Os cartões não contêm links nem botões aninhados: um elemento interativo dentro de um label causaria comportamentos de ativação conflitantes. As ações do resumo ficam fora dos cartões. A camada de formulários publicada de React é uma alternativa quando o design realmente exige conteúdo interativo mais complexo nos cartões. - Mantenha cada grupo de opções dentro de um único fieldset e legend. - Use caixas de seleção para itens adicionais independentes. - Mantenha links e botões fora de um cartão que use apenas um label CSS. ## Lista de conferência derivada e confirmação sistema de design Volvo Cars Web ### Derive o resumo dos mesmos controles O resumo combina os itens básicos do plano escolhido com os extras selecionados. Alterar uma opção atualiza o título e os itens básicos do plano, mantendo os extras independentes. A contagem é derivada da lista resultante. Todo o conteúdo de exemplo sobre bagagem é original e evita deliberadamente especificações de veículos, preços ou alegações sobre uma configuração real de compra da Volvo. ### Limpe confirmações desatualizadas quando as opções forem alteradas A opção Manter este plano exibe uma confirmação local. Qualquer alteração posterior no plano ou nos extras oculta essa mensagem, para que ela não dê a entender que a nova combinação também foi mantida. A ação não grava dados em uma conta, não efetua compras nem envia dados. A nota visível e o código-fonte descrevem esse comportamento limitado na página de forma consistente. ## Sistema de design Volvo Cars Web Modo de cor e composição responsiva ### Mantenha o tema separado do estado da lista O seletor de modo de cor altera data-color-mode no documento. Ele não recria os botões de opção, as caixas de seleção nem o resumo. A folha de estilos nativa aplica transições a algumas superfícies; por isso, a verificação visual deve considerar o tema já estabilizado, e não uma captura feita durante a mudança. Verifique em conjunto o texto, o estado dos controles e o contraste das superfícies. ### Empilhe a ordem de leitura em telas estreitas As opções de bagagem aparecem antes do resumo na ordem do documento. Em telas de celular, a grade de duas colunas passa a ter uma única coluna, preservando essa ordem e todas as ações. Os fieldsets usam min-width:0 para que seu dimensionamento padrão não provoque rolagem horizontal. O conteúdo extenso dos cartões quebra linhas dentro do layout do cartão selecionado, sem ultrapassar o elemento pai. ## Sistema de design Volvo Cars Web Código-fonte completo e verificação local ### Execute os dois arquivos-fonte com o pacote correspondente O JavaScript inclui o conteúdo original completo e todos os manipuladores de interação. O CSS contém apenas a composição do aplicativo e um recurso alternativo local para a marca de seleção das caixas de seleção. Use o shell HTML fornecido, salve os dois arquivos-fonte e instale a versão fixada de CSS. Importar apenas a folha de estilos aplicaria estilos aos controles, mas não implementaria a contagem dos itens da lista nem a confirmação local. 1. Crie o aplicativo vanilla e instale @volvo-cars/css 2.5.1. 2. Salve main.js, volvo.css e o shell raiz HTML fornecido. 3. Execute o aplicativo e compare o comportamento dos botões de opção e das caixas de seleção. 4. Inspecione os temas claro e escuro após a estabilização e o estado redefinido. ### Verifique em conjunto as escolhas, o tema e a restauração Escolha o plano litorâneo, adicione água e confirme que quatro itens aparecem. Mantenha o plano, adicione uma camada e verifique se a confirmação anterior desaparece. Mude para o modo escuro sem perder as escolhas e, em seguida, redefina para o primeiro plano sem extras. Verifique a seleção de botões de opção pelo teclado e a quebra de linhas em telas estreitas; inspecione também as superfícies nos temas claro e escuro após a estabilização. ## Sistema de design Volvo Cars Web Exemplos de componentes do sistema de design ### main.js — seleção completa do plano Todas as escolhas, resumo derivado, confirmação local, tema e redefinição. ``` import '@volvo-cars/css/tokens.css'; import '@volvo-cars/css/styles_all-media.css'; import './volvo.css'; document.querySelector('#root').innerHTML=`

OpenDesign · Original planning study

A little room for the weekend.

Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.

Choose your plan
Add to your checklist

Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.

`; const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city'; function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;} document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render(); ``` Referência de código - Usa o padrão de rádio e espaço para rótulo com nomes correspondentes da folha de estilos fixada. ### volvo.css — composição original Organização responsiva e recurso alternativo local para a marca de seleção das caixas de seleção. ``` html{color-scheme:light}html[data-color-mode=dark]{color-scheme:dark}body{margin:0}main{max-width:1100px;padding:32px;margin:auto}header{padding:16px 0 40px}.eyebrow{font-size:12px;letter-spacing:.06em}.intro{max-width:60ch;margin-top:24px}.mode{display:flex;align-items:center;gap:16px;margin-top:24px}.mode select{max-width:180px}.composition{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:40px}fieldset{min-width:0;border:0;padding:0;margin:0}legend{font-size:20px;margin-bottom:16px}.extras{margin-top:32px}.summary{align-self:start}#items{padding-left:20px;margin:24px 0}#items li{margin:8px 0}.summary button{display:block;width:100%;margin-top:16px}.note{font-size:14px;color:var(--v-color-foreground-secondary);border-top:1px solid var(--v-color-surface-gray);padding-top:24px;margin-top:40px;max-width:80ch}#saved{margin-top:24px}.selectable-card input[type=checkbox]:checked:before{background-image:none!important;content:'✓';color:var(--v-color-foreground-inverted);display:grid;place-items:center}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.composition{grid-template-columns:1fr;gap:32px}.selectable-card{overflow-wrap:anywhere}.eyebrow{overflow-wrap:anywhere}} ``` Referência de código - O layout é original; o estilo dos cartões vem do CSS público instalado. ### index.html — estrutura raiz Entradas completas do arquivo raiz e do módulo. ``` Weekend packing study
``` Referência de código - Substitua o index.html raiz do Vite por este arquivo. ## Sistema de design Volvo Cars Web Configuração do agente ### Ponto de partida para implementação A versão fixada é compatível com esta implementação de cartões selecionáveis. Os recursos oficiais de fontes não estão incluídos na prévia. ``` npm create vite@latest weekend-plan -- --template vanilla cd weekend-plan npm install npm install @volvo-cars/css@2.5.1 # Save index.html at the root; main.js and volvo.css in src. npm run dev ``` ### Um prompt para seu projeto ``` Crie um estudo original de bagagem para um fim de semana usando o CSS da Volvo Cars 2.5.1 e o código-fonte completo fornecido. Use cartões selecionáveis com rótulos nativos, um grupo de botões de opção em fieldset, extras independentes com caixas de seleção, contagens derivadas, limpeza de confirmações desatualizadas e um estado de tema independente das escolhas. Mantenha todo o conteúdo de exemplo distinto de especificações reais de veículos. ``` ## Sistema de design Volvo Cars Web Fontes e escopo Um estudo original de bagagem OpenDesign usando @volvo-cars/css 2.5.1. Não é um configurador de veículos. Os arquivos de fontes da Volvo não estão incluídos; são usados os recursos alternativos nativos da folha de estilos. - Cartões selecionáveis Espaços para rótulos, agrupamento de botões de opção e limites de conteúdo interativo. - Instalação Limites entre o CSS público da web e o EDLS interno separado. - Primeiros passos Fundamentos que priorizam HTML e camadas opcionais de React. - Cores Relações entre funções de cor e temas. ## Sistema de design Volvo Cars Web Recursos relacionados ### 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. ### Zendesk Garden Um guia Garden para tarefas de suporte, com aliases de tema reais, escalas de tipografia e raio, um editor de resposta completo, rascunhos locais que levam em conta a visibilidade e recuperação de campos. - [Referência de implementação](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Fonte](https://designsystem.volvocars.com/web/core-concepts/colors/) - [Fonte](https://designsystem.volvocars.com/web/developing/installation/) - [Referência de código](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Cartões selecionáveis Espaços para rótulos, agrupamento de botões de opção e limites de conteúdo interativo.](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Instalação Limites entre o CSS público da web e o EDLS interno separado.](https://designsystem.volvocars.com/web/developing/installation/) - [Primeiros passos Fundamentos que priorizam HTML e camadas opcionais de React.](https://designsystem.volvocars.com/web/developing/getting-started/) - [Cores Relações entre funções de cor e temas.](https://designsystem.volvocars.com/web/core-concepts/colors/)