# Système de design Singapore Government

## Aperçu de l’interface système de design Singapore Government

Incrémentez, saisissez une quantité non valide, validez, réinitialisez et basculez entre les jetons natifs des thèmes clair et sombre sans perdre les valeurs.

## Référence de conception système de design Singapore Government

Composants web Singapore SGDS 3.29.0, fichiers de thème publiés, jetons adaptatifs et manifeste custom-elements. L’aperçu exécute le bundle index.umd.min.js d’origine avec des imports de thème locaux. Il utilise explicitement Arial comme solution de repli, sans compilation des utilitaires Tailwind ni en-tête officiel. Le package v3 est distinct du SGDS v2 fondé sur Bootstrap.

### Jetons typographiques adaptatifs réels

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | Plages de base,1024px et1440px ; line-height-xl associé de40→44→48px. |
| --sgds-font-size-heading-md | 24→26→28px | line-height-md associé de28→32→32px. |
| --sgds-font-size-heading-sm | 20→22→24px | Un rôle compact pour les titres de section. |
| --sgds-font-size-body-md | 16px in all three ranges | Body-lg18→20→20px ; body-sm14px. |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | Les fichiers de polices sont chargés séparément ; l’aperçu remplace la police par Arial. |
| --sgds-font-weight-* | 300,400,600,700 | Léger, normal, semi-gras, gras. |
| --sgds-letter-spacing-tight | -0.4px | Approche des titres définie dans root.css. |
### Rôles de thème primitifs et sémantiques

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | Associe gray1000 à gray100 ; le texte du corps n’est pas codé en dur. |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | La surface racine change avec sgds-night-theme. |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | Texte secondaire ; maintenir un contraste suffisant sur la surface associée. |
| --sgds-primary-surface-default | #6b4feb | Product-primary600 dans les deux fichiers de thème actuels. |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | Le rôle de texte diffère de celui d’une surface pleine. |
| --sgds-border-color-default | Day#868686 | Ne réutilisez pas le même primitif pour chaque bordure du thème sombre. |
### Espacements, bordures et changements adaptatifs

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | Valeurs exprimées en rem avec une racine de16px ; il s’agit de primitifs. |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | Espacements sémantiques fixes. |
| --sgds-layout-gap-md | 16→24→32px | Adaptatif à1024/1440px dans le package réel ; il ne s’agit pas des points de rupture de grille512/768. |
| --sgds-text-gap-md | 12→16→16px | L’espacement du texte a son propre rôle adaptatif. |
| --sgds-form-border-radius-md | 8px | Alias de border-radius-md. |
| --sgds-form-border-width-default | 1px | Alias de border-width-1. |
### Référence standard de grille

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8 colonnes ; gouttières de16px ; marges fixes de20/24px. |
| md | 768–1023px | 8 colonnes ; gouttières de24px ; marges fixes de28px. |
| lg | 1024–1279px | 12 colonnes ; conteneur de888px ; gouttières de24px. |
| xl | 1280–1439px | 12 colonnes ; conteneur de1168px ; gouttières de32px. |
| 2xl | 1440px+ | 12 colonnes ; conteneur de1312px ; gouttières de32px. |
| Preview composition | 888px maximum;two columns→one below768px | Composition volontairement compacte pour un petit planificateur, et non mise en œuvre complète de tous les préréglages de grille standard. |
### API publique de QuantityToggle API

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | Lire la valeur de l’élément après un événement natif. |
| min / max | Number constraints | Expliquer les limites de service choisies à l’aide de hintText. |
| label / hintText | String properties/attributes | Fournir le nom accessible du champ et une indication visible sur la plage. |
| hasFeedback | style \| text \| both | Mode de retour d’information sous forme de chaîne, et non simple attribut booléen. |
| invalidFeedback / invalid | Message /Boolean state | Utiliser le retour d’information du composant plutôt qu’une bordure rouge sans rapport. |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | Écouter input/change pour que le récapitulatif prenne en charge la saisie au clavier et les boutons. |
| Validation methods | checkValidity();reportValidity() | Renvoyer des résultats de contrainte booléens ; reportValidity affiche le retour d’information. |
| readonly versus disabled | Visible fixed value versus unavailable control | L’état disabled exclut la valeur de la soumission ; readonly conserve sa valeur. |
## Guide complet système de design Singapore Government

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Choisir la famille SGDS actuelle système de design Singapore Government

### Composants web et anciennes pages Bootstrap

> SGDS v 3 utilise @govtechsg/sgds-web-component. Ses éléments personnalisés, ses jetons de thème et son intégration actuelle des utilitaires suivent une voie d’implémentation différente de l’ancienne feuille de style @govtechsg/sgds Bootstrap. Ne mélangez pas les instructions de SGDS v 2 JavaScript avec les balises v 3 en vous attendant à ce que les nouveaux contrôles s’initialisent.

L’exemple utilise le véritable bundle navigateur 3.29.0 pour enregistrer les contrôles de quantité et les boutons. Il présente un planificateur original d’atelier communautaire, sans en-tête du gouvernement de Singapour ni revendication d’affiliation. Les contrôles modifient uniquement les valeurs locales ; aucun processus de réservation ou de paiement n’est prévu.

Consultez la spécification associée

## Les jetons de thème système de design Singapore Government sont organisés en couches

### Couleurs primitives et usage sémantique

Le fichier racine définit les gris primitifs, le violet product-primary et les autres familles de palettes. Les fichiers de thème clair et sombre associent ensuite ces primitifs à des rôles tels que le texte par défaut, le texte secondaire, la surface pleine et la bordure. Un rôle de texte principal peut changer en mode sombre même si le rôle de surface pleine principale reste associé au même primitif.

L’aperçu utilise des propriétés sémantiques pour l’arrière-plan du document, le texte, les bordures et le panneau atténué. Basculer sgds-night-theme sur la racine met donc à jour à la fois les éléments personnalisés et la composition qui les entoure. Un paragraphe noir codé en dur romprait cette cohérence, même si les contrôles continuaient de basculer correctement.

La palette violette est la palette par défaut publiée du produit ; elle ne justifie pas de se faire passer pour un organisme gouvernemental. L’identité d’un organisme et l’usage d’un en-tête approuvé nécessitent une autorisation distincte.

Consultez la spécification associée

## Typographie adaptative avec valeurs réelles système de design Singapore Government

### Lisez le jeton fourni plutôt qu’un ratio abrégé

Le fichier responsive.css actuel associe heading-xl à 32, 36 et 40 px pour ses trois plages, avec des interlignes de 40, 44 et 48 px. Les changements interviennent à 1024 et 1440 px. Ils sont indépendants des seuils de mise en page plus bas de la grille, à 512 et 768 px. Body-md reste à 16 px.

La présentation publique de la typographie décrit les ratios généraux et les principes d’association, tandis que la feuille de jetons fournie contient les alias exacts en pixels pour chaque rôle. Cette référence s’appuie sur ces alias exploitables pour indiquer les valeurs d’implémentation. Conservez la sémantique des titres dans HTML et appliquez un jeton visuel approprié ; un petit titre de section n’a pas besoin d’un niveau de titre artificiellement inférieur.

Inter est la police de marque prévue ; les graisses 300, 400, 600 et 700 sont documentées dans la configuration. Le spécimen local utilise explicitement Arial à la place et ne charge aucune police distante. Dans un service qui adopte ce système, chargez et testez la police choisie au lieu de vous fier uniquement au nom de famille CSS.

Consultez la spécification associée

## Système de design Singapore Government Différents rôles d’espacement

### Ne ramenez pas tous les espacements à une seule échelle

L’échelle des espacements primitifs comprend 2 px, ainsi que 4, 8, 12, 16 px et des valeurs supérieures. Les alias d’espacement fixes et les espacements responsives de mise en page, de composants et de texte s’appuient sur ces valeurs primitives. Un layout-gap-md de base passe de 16 à 24 puis à 32 px, tandis que text-gap-md passe de 12 à 16 puis reste à 16 px. Le même terme, « moyen », ne correspond donc pas à la même valeur dans tous les cas.

Le planificateur applique une largeur maximale de 888 px pour réunir deux zones de contenu de taille modeste : les commandes de quantité et le plan en cours. En dessous de 768 px, elles s’empilent. Il s’agit d’une composition propre à l’application, et non d’une affirmation selon laquelle la grille standard SGDS complète s’arrête toujours à 888 px. La référence présente séparément les règles générales des conteneurs standard.

Consultez la spécification associée

## Système de design Singapore Government Un contrôle de quantité avec limites

### Utilisez quantity pour une quantité, pas pour un identifiant

Un sélecteur de quantité convient pour un petit nombre qu’une personne peut ajuster unité par unité. Le spécimen demande 1 à 5 participants et 0 à 3 kits partagés. Ces limites sont données à titre d’exemple ; un service réel doit les déterminer selon les disponibilités ou les règles en vigueur et les préciser dans l’indication. Les codes postaux, les identifiants et les montants exacts nécessitent un autre type de champ.

Le composant natif place des boutons d’icône de diminution et d’augmentation autour d’un champ numérique. Ses propriétés min, max et step sont numériques, value reflète la quantité actuelle, et label/hintText fournissent le contexte. Lorsque la limite est atteinte, le bouton correspondant devient indisponible ; la saisie directe doit également faire l’objet d’une validation des contraintes.

hasFeedback accepte les valeurs chaîne style, text ou les deux. L’exemple utilise les deux, ainsi qu’un message invalidFeedback précis. Traiter hasFeedback comme un booléen copié d’un autre composant API ferait perdre cette configuration exacte.

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

Référence du code

Consultez la spécification associée

## Système de design Singapore Government Gardez le récapitulatif synchronisé

### Deux flux d’événements, une seule source de données

Le récapitulatif lit la valeur de chaque élément hôte. Il écoute à la fois sgds-input et sgds-change, car les modifications saisies au clavier et celles validées par les boutons ne suivent pas nécessairement le même flux d’événements. Dans le premier spécimen local, les tests limités à la saisie au clavier n’ont pas détecté les mises à jour déclenchées par le bouton d’incrémentation ; l’exemple final gère les deux cas.

Check plan appelle reportValidity sur les deux éléments natifs et affiche un message d’état local. Il ne transforme pas un nombre invalide en un total plausible. Reset rétablit les valeurs initiales des éléments hôtes et efface l’état invalide visible par l’application à l’aide de setInvalid(false), puis actualise le récapitulatif après updateComplete.

Un champ désactivé n’équivaut pas à un champ en lecture seule : le premier est exclu de la soumission du formulaire, tandis que le second conserve sa valeur. Si un service réel verrouille une quantité confirmée pendant la vérification, utilisez l’état approprié au lieu de la désactiver uniquement pour lui donner un aspect grisé.

- Utilisez sgds-input et sgds-change lorsqu’un récapitulatif doit gérer à la fois la saisie au clavier et les boutons d’incrémentation.

- Lisez value sur l’élément personnalisé hôte plutôt que d’accéder à son DOM fantôme.

- Distinguez clairement les messages de validation locaux d’une réservation ou d’une soumission réussie.

Consultez la spécification associée

## Système de design Singapore Government Les styles avant l’enregistrement

### Chargez la chaîne de dépendances du thème

Dans une application regroupée, importez day.css, night.css et css/sgds.css dans cet ordre, puis importez la bibliothèque de composants une seule fois. Les fichiers day et night importent root.css, qui importe responsive.css. Le fichier de base importe reboot.css et grid.css. Une copie statique doit conserver ces dépendances relatives, et pas seulement les trois premiers fichiers.

Le fichier officiel utility.css est un point d’entrée de configuration Tailwind v 4. Il doit passer par une compilation Tailwind configurée ; l’ajouter comme simple feuille de style dans le navigateur ne génère pas toutes les classes utilitaires sgds:. Ce spécimen utilise plutôt une mise en page ordinaire CSS et des propriétés personnalisées sémantiques ; aucune compilation des utilitaires n’est donc implicite.

Pour l’exemple isolé dans le navigateur, le fichier publié est index.umd.min.js. Les métadonnées du paquet mentionnent encore index.umd.js, mais ce fichier est absent de la distribution examinée. L’aperçu local utilise le bundle minifié réellement fourni ; la configuration npm utilise l’importation du paquet documentée pour les outils de bundling.

1. Verrouillez la version 3.29.0 et importez les jetons du thème avant les règles de base.

2. Fournissez Inter ou choisissez délibérément une police de remplacement et testez-la.

3. Enregistrez les éléments personnalisés une seule fois, attendez leur définition si nécessaire, puis ajoutez les écouteurs d’événements de l’application.

Consultez la spécification associée

## Système de design Singapore Government Testez ensemble les limites et le thème

### Les limites révèlent les erreurs d’intégration

Cliquez deux fois sur Participants et vérifiez que le contrôle et le récapitulatif affichent tous deux 3. Saisissez directement 9, puis lancez Check plan : le composant doit afficher un message indiquant que la valeur est hors plage et le statut doit demander une correction. Remplacez-la par 5 et vérifiez que le contrôle d’incrémentation est désactivé alors que la valeur reste valide.

Passez au thème sombre après avoir saisi les quantités et vérifiez que les valeurs sont conservées, que le récapitulatif reste lisible et que les limites fonctionnent toujours correctement. Réinitialisez, puis recommencez au clavier : la touche Tab doit parcourir le champ et les boutons dans un ordre logique, et la touche Entrée ou la barre d’espace doit activer le bouton sélectionné.

Le test local vérifie le comportement des composants à 1440, 768 et 390 px, et confirme que les dépendances du thème sont servies localement. Il ne garantit ni la compatibilité avec les navigateurs ni la certification d’accessibilité d’un futur service gouvernemental. Ce service devra tester l’ensemble de son parcours, ses textes, la personnalisation du thème et le traitement des données.

Consultez la spécification associée

## Exemples de composants du système de design système de design Singapore Government

### Quantités limitées et deux parcours événementiels

Un contrôle natif complet et une sortie synchronisée.

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

Référence du code

### Configuration groupée de v3

Ordre correct des thèmes, enregistrement de la bibliothèque et limite explicite des utilitaires Tailwind.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

Référence du code

### Exemple autonome complet

Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>
```

Référence du code

- Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.

- Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.

## Configuration de l’agent IA système de design Singapore Government

### Point de départ de l’implémentation

L’aperçu autonome utilise le bundle index.umd.min.js d’origine, dont le fonctionnement a été vérifié, ainsi que la chaîne de dépendances locale CSS. La recette npm s’adresse à un bundler ; utility.css nécessite Tailwind v4 et est volontairement omis de cet aperçu statique. Le ZIP de l’exemple complet fonctionnel, dans Sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/singapore-sgds.html. N’ouvrez pas les exemples basés sur des modules avec file://.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

### Un prompt pour votre projet

```
Créez un planificateur SGDS v3 pour Singapour à l’aide des véritables éléments sgds-quantity-toggle et sgds-button de la version 3.29.0. Importez la chaîne complète de jetons day/night/root/responsive et les styles de base, puis enregistrez les composants natifs. Proposez des nombres limités de participants et de kits de matériel, hasFeedback="both", des libellés et des indications exacts, une validation typée et un récapitulatif synchronisé qui écoute sgds-input et sgds-change. Le commutateur de thème doit activer ou désactiver sgds-night-theme sur l’élément racine sans réinitialiser les valeurs. Préservez la distinction entre validité locale et réservation. Ne chargez pas de code Bootstrap v2 et ne prétendez pas que utility.css génère des classes Tailwind brutes.
```

## Sources et périmètre système de design Singapore Government

Exemple d’implémentation indépendant utilisant du code sous licence MIT et du contenu original d’atelier. Il ne suggère ni en-tête gouvernemental, ni affiliation, ni réservation, ni envoi sur le réseau, ni limite officielle.

- Développement Installation de v3 et ordre d’importation de CSS.

- Quantité Objectif, contraintes et comportement du contrôle.

- Espacement Rôles d’espacement fixes et adaptatifs.

- Heading Alias des rôles de titre.

- Type Intentions typographiques et recommandations sur les polices.

- Grille Préréglages de grille réactive standard.

- Points de rupture Référence des points de rupture de la grille et du conteneur.

- Jetons Modèle de jetons en couches.

- Sémantique Rôles sémantiques des couleurs.

- Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire.

## Ressources associées système de design Singapore Government

### Decanter

Composez des pages éditoriales universitaires avec le preset Tailwind de Decanter, une échelle typographique adaptative et des marges fluides. Découvrez des cartes d’événements originales avec des filtres de sujet fonctionnels et des résumés dépliables.

### Suomi.fi système de design

Créez des formulaires de service public finlandais faciles à lire avec Source Sans 3, des tokens d’espacement explicites et un modèle de sélection de document permettant de corriger les choix.

### UNDP système de design

Explorez les tokens de couleur et d’espacement publiés par l’UNDP, les onglets natifs utilisables au clavier et un exemple complet de lecture d’atelier avec progression locale de la révision.


- [Référence de mise en œuvre](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Source](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Source](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Source](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css)
- [Source](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Source](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Consultez la spécification associée](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Consultez la spécification associée](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Référence du code](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Consultez la spécification associée](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Référence du code](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Référence du code](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Développement Installation de v3 et ordre d’importation de CSS.](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Quantité Objectif, contraintes et comportement du contrôle.](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Espacement Rôles d’espacement fixes et adaptatifs.](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Heading Alias des rôles de titre.](https://www.designsystem.tech.gov.sg/foundations/typography/heading)
- [Type Intentions typographiques et recommandations sur les polices.](https://www.designsystem.tech.gov.sg/foundations/typography)
- [Grille Préréglages de grille réactive standard.](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid)
- [Points de rupture Référence des points de rupture de la grille et du conteneur.](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Jetons Modèle de jetons en couches.](https://www.designsystem.tech.gov.sg/foundations/design-tokens)
- [Sémantique Rôles sémantiques des couleurs.](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)