Design de produits d’entreprise · Nouvelle ressource
Système de design Volvo Cars Web.
Examinez la base web de Volvo Cars, axée sur HTML, ses véritables tokens en mode clair et le style natif de ses cartes sélectionnables dans un exemple complet de préparation de bagages, avec des choix indépendants, le changement de thème et la réinitialisation.
Styles de cartes sélectionnables publiés de Volvo Cars CSS 2.5.1 ; éléments HTML natifs et logique de liste de contrôle originale. · Référence de mise en œuvre
02
Référence de conception système de design Volvo Cars Web
Valeurs réelles des jetons publics de @volvo-cars/css 2.5.1, conformes au balisage documenté des cartes sélectionnables. Les valeurs claires par défaut sont affichées ; le même fichier de style fournit le thème sombre.
Système de design Volvo Cars Web HTML en premier Foundation et choix de version
Verrouillez la version de la feuille de style correspondant au motif
L’exemple utilise @volvo-cars/css 2.5.1, qui correspond à la référence de cartes sélectionnables retenue pour l’implémentation. La version 3 repose sur un contrat différent : installer la dernière version sans vérifier le balisage peut rendre le motif incomplet. La version doit figurer dans la configuration comme dans le guide : une classe de composant ne garantit pas que toutes les versions la stylisent de la même manière.
Utilisez délibérément la couche Web publique
Cette étude importe directement les jetons Web publics et la feuille de style all-media. Elle ne dépend pas du package interne EDLS distinct. L’application reste en HTML pur, avec un peu de JavaScript pour sa liste de contrôle. Le CSS installé gère l’apparence des cartes sélectionnables, le style des contrôles et les rôles du mode de couleur ; l’application fournit le contenu et l’état.
Rôles neutres, typographie et espacement système de design Volvo Cars Web
Conservez le lien entre les rôles clairs et sombres
Le tableau répertorie les déclarations claires par défaut, tandis que data-color-mode sélectionne les valeurs sombres natives correspondantes. La composition utilise les rôles d’arrière-plan et de premier plan au lieu d’imposer du texte blanc à chaque carte. Le changement de thème doit préserver la formule et les options sélectionnées : modifier la palette n’a aucun effet sur la liste de contrôle.
Distinguez les intervalles fixes du rythme fluide de la page
Dans la référence sélectionnée, les valeurs d’espacement fixes vont de 2 px à 64 px. D’autres jetons publics de mise en page utilisent clamp et round et s’adaptent donc à la fenêtre d’affichage. La composition en deux colonnes et l’écart de 40 px de l’exemple sont des choix de mise en page originaux autour des cartes natives. La pile de polices publiée est conservée, mais les ressources de police Volvo ne sont pas incluses ; le rendu utilise la police système disponible comme solution de remplacement.
Sémantique des cartes sélectionnables système de design Volvo Cars Web
Utilisez des boutons radio pour choisir une formule
Les deux cartes de formule contiennent des boutons radio natifs portant le même nom, dans un fieldset avec une légende. Chaque carte est un label comportant des emplacements pour le titre, les métadonnées et la description. Cliquer sur la carte sélectionne son bouton radio et le comportement clavier habituel des boutons radio reste disponible. La formule sélectionnée constitue donc un véritable état de formulaire, et non une bordure décorative gérée séparément.
Utilisez des cases à cocher pour les options indépendantes
L’eau et une couche supplémentaire peuvent être sélectionnées indépendamment ; elles utilisent donc des cases à cocher. Les cartes ne contiennent ni liens ni boutons imbriqués : un élément interactif à l’intérieur d’un label entraînerait des comportements d’activation contradictoires. Les actions du récapitulatif se trouvent à l’extérieur des cartes. La couche de formulaires publiée de React constitue une autre option lorsque la conception nécessite réellement un contenu de carte interactif plus complexe.
Regroupez les boutons radio dans un même fieldset avec une légende.
Utilisez des cases à cocher pour les options indépendantes.
Placez les liens et les boutons en dehors d’une carte CSS composée uniquement d’un label.
Liste de contrôle dérivée et confirmation système de design Volvo Cars Web
Générez le récapitulatif à partir des mêmes contrôles
Le récapitulatif combine les éléments de base du programme choisi et les extras sélectionnés. Changer de bouton radio met à jour son titre et ses éléments de base, tout en conservant les extras indépendants. Le nombre est calculé à partir de la liste obtenue. Tout le contenu d’exemple consacré aux bagages est original et évite volontairement les caractéristiques des véhicules, les prix et toute affirmation concernant une configuration d’achat réelle de Volvo.
Effacer la confirmation obsolète lorsque les choix changent
Système de design Volvo Cars Web Mode de couleur et composition adaptative
Dissocier le thème de l’état de la liste
Le sélecteur de mode de couleur modifie data-color-mode sur le document. Il ne recrée ni les boutons radio, ni les cases à cocher, ni le récapitulatif. La feuille de style native applique des transitions à certaines surfaces ; la vérification visuelle doit donc porter sur le thème une fois la transition terminée, plutôt que sur une capture prise en cours de changement. Vérifiez ensemble le texte, l’état des contrôles et le contraste des surfaces.
Empiler les éléments dans l’ordre de lecture sur les petits écrans
Les choix de bagages précèdent le récapitulatif dans l’ordre du document. Sur les téléphones, la grille à deux colonnes devient une seule colonne, sans modifier cet ordre ni supprimer aucune action. Les fieldsets ont min-width:0 pour que leur dimensionnement par défaut ne provoque pas de débordement horizontal. Le contenu long des cartes revient à la ligne dans la mise en page des cartes sélectionnées, sans déborder du conteneur parent.
Système de design Volvo Cars Web Code source complet et vérification locale
Exécuter les deux fichiers source avec le package correspondant
Le JavaScript contient le contenu original complet et tous les gestionnaires d’interaction. Le CSS ne contient que la composition de l’application et un correctif local pour la coche des cases à cocher. Utilisez le shell HTML fourni, enregistrez les deux fichiers source et installez la version CSS épinglée. Importer uniquement la feuille de style permettrait de styliser les contrôles, mais ne calculerait pas le nombre d’éléments de la liste et n’afficherait pas la confirmation locale.
Créer l’application vanilla et installer @volvo-cars/css 2.5.1.
Enregistrer main.js, volvo.css et le shell racine HTML fourni.
Lancer l’application et comparer le comportement des boutons radio et des cases à cocher.
Examiner les thèmes clair et sombre une fois stabilisés, ainsi que l’état après réinitialisation.
Vérifier ensemble les choix, le thème et la réinitialisation
Choisissez le programme côtier, ajoutez l’eau et vérifiez que quatre éléments apparaissent. Conservez le programme, ajoutez une couche et vérifiez que l’ancienne confirmation disparaît. Passez en mode sombre sans perdre vos choix, puis réinitialisez au premier programme sans extras. Vérifiez la sélection des boutons radio au clavier et le retour à la ligne sur petit écran, puis examinez les surfaces des thèmes clair et sombre une fois les transitions terminées.
Système de design Volvo Cars Web Exemples de composants du système de design
main.js — sélection complète du programme
Tous les choix, le récapitulatif calculé, la confirmation locale, le thème et la réinitialisation.
javascript
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">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.</p></main>`;
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();
Remplacez le fichier index.html racine de Vite par ce fichier.
04
Système de design Volvo Cars Web Configuration de l’agent IA
Point de départ de l’implémentation
La version épinglée correspond à cette implémentation de cartes sélectionnables. Les ressources de polices officielles ne sont pas incluses dans l’aperçu.
sh
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Réalisez cette étude originale de préparation pour un week-end à l’aide de CSS 2.5.1 de Volvo Cars et du code source complet fourni. Utilisez des cartes sélectionnables reposant sur des libellés natifs, un groupe de boutons radio dans un fieldset, des extras indépendants sous forme de cases à cocher, des nombres calculés, l’effacement des confirmations obsolètes et un état du thème indépendant des choix. Veillez à ce que tout le contenu d’exemple reste distinct des caractéristiques réelles des véhicules.
05
Système de design Volvo Cars Web Sources et périmètre
Une étude originale de préparation des bagages OpenDesign utilisant @volvo-cars/css 2.5.1. Il ne s’agit pas d’un configurateur de véhicule. Les fichiers de polices Volvo ne sont pas inclus ; les polices de remplacement natives de la feuille de style sont utilisées.
