# Système de design Segment Evergreen

## Aperçu de l’interface du système de design Segment Evergreen

Combinez une formule et les étiquettes requises, consultez les enregistrements correspondants, gérez l’absence de correspondance et examinez un instantané local.

## Référence de conception du système de design Segment Evergreen

Composants natifs Evergreen 7.1.9 React et defaultTheme ; règles d’audience locales originales.

### Rayons des angles

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| radii.0 | 0px | Rayons indexés du thème ; choisissez un rôle plutôt que d’arrondir de plus en plus chaque boîte imbriquée. |
| radii.1 | 4px | Rayons indexés du thème ; choisissez un rôle plutôt que d’arrondir de plus en plus chaque boîte imbriquée. |
| radii.2 | 8px | Rayons indexés du thème ; choisissez un rôle plutôt que d’arrondir de plus en plus chaque boîte imbriquée. |
### Tailles de texte

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| fontSizes.0 | 10px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.1 | 12px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.2 | 14px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.3 | 16px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.4 | 18px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.5 | 20px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.6 | 24px | Valeurs indexées de font-size dans le thème default publié. |
| fontSizes.7 | 32px | Valeurs indexées de font-size dans le thème default publié. |
### Hauteurs de ligne

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| lineHeights.0 | 16px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.1 | 18px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.2 | 20px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.3 | 24px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.4 | 28px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.5 | 32px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
| lineHeights.6 | 40px | Associez-les au rôle de texte visé plutôt que d’appliquer à chaque paragraphe le rythme des titres. |
### Graisses de police

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| fontWeights.light | 300 | Dans ce thème, Evergreen définit semibold comme 500 et bold comme 600 ; ne les remplacez pas silencieusement par les valeurs par défaut des mots-clés du navigateur. |
| fontWeights.normal | 400 | Dans ce thème, Evergreen définit semibold comme 500 et bold comme 600 ; ne les remplacez pas silencieusement par les valeurs par défaut des mots-clés du navigateur. |
| fontWeights.semibold | 500 | Dans ce thème, Evergreen définit semibold comme 500 et bold comme 600 ; ne les remplacez pas silencieusement par les valeurs par défaut des mots-clés du navigateur. |
| fontWeights.bold | 600 | Dans ce thème, Evergreen définit semibold comme 500 et bold comme 600 ; ne les remplacez pas silencieusement par les valeurs par défaut des mots-clés du navigateur. |
### Références de la palette par défaut

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| colors.gray900 | #101840 | Texte principal foncé. |
| colors.gray700 | #696f8c | Texte d’accompagnement. |
| colors.gray400 | #d8dae5 | Limite définie. |
| colors.gray200 | #edeff5 | Séparateur discret. |
| colors.gray100 | #F4F5F9 | Arrière-plan discret. |
| colors.blue500 | #3366FF | Référence de bleu principal. |
| colors.blue600 | #2952CC | Référence de bleu plus soutenu pour les interactions. |
| colors.red500 | #D14343 | Référence critique/d’erreur. |
| colors.green500 | #52BD95 | Référence de réussite. |
### Fonctions de mise en page et saisie contrôlée API

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| majorScale(3) | 24px | Échelle principale de huit pixels pour l’espacement des sections. |
| minorScale(3) | 12px | Échelle secondaire de quatre pixels pour les espacements plus réduits. |
| TagInput.values | controlled array | L’application gère les étiquettes acceptées. |
| TagInput.onChange | new array; return false to retain input | Validez les ajouts avant de les accepter. |
| TagInput.separator | comma and new line by default | Autorisez plusieurs étiquettes sans analyseur personnalisé. |
## Guide complet du système de design Segment Evergreen

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.

## Structure du générateur d’audience du système de design Segment Evergreen

### Associez les règles aux conséquences qu’elles entraînent

> L’exemple associe un panneau de règles à des enregistrements fictifs correspondants. Le menu de sélection de formule et les étiquettes requises restent visibles en même temps que le nombre de résultats, afin que l’effet d’une modification soit facile à comprendre. Il n’est pas nécessaire d’enregistrer quoi que ce soit ni d’ouvrir une boîte de dialogue pour savoir si la combinaison actuelle correspond à des personnes.

### Utilisez un jeu de données fini et transparent

Cinq exemples nommés présentent leur forfait et leurs étiquettes. La page ne prétend pas interroger un entrepôt de données clients ni estimer la taille réelle d’une audience. Un résultat nul est utile dans cet exemple, avec une action permettant de rétablir le jeu de données complet.

## Valeurs et sémantique du thème du système de design Segment Evergreen

### Consultez le thème par défaut réel

Evergreen 7.1.9 fournit des rayons, des tailles de police et des hauteurs de ligne indexés, ainsi que des couleurs nommées et des styles de composants. Le tableau conserve ces valeurs exportées telles quelles. Les noms des graisses de police méritent une attention particulière : semibold et bold correspondent respectivement à 500 et 600, contrairement aux idées courantes.

### Harmonisez la composition personnalisée

ThemeProvider fournit les composants natifs de saisie, les étiquettes, les badges, les boutons et la boîte de dialogue. Les panneaux personnalisés reprennent la même association sobre de gris froid et de bleu. L’exemple ne remplace pas les styles internes des composants natifs par des sélecteurs CSS trop généraux, afin de préserver les styles d’interaction fournis.

## Typographie du système de design Segment Evergreen pour la modification de règles

### Hiérarchisez clairement les informations de la tâche

Les niveaux de titre distinguent le titre de l’audience des titres de panneaux et des noms de résultats individuels. Le texte complémentaire explique la saisie des étiquettes et la portée des données fictives. Un badge de décompte est placé à côté du titre des résultats plutôt que de le remplacer : l’utilisateur peut ainsi repérer la zone avant d’interpréter le nombre.

### Veillez à la lisibilité des métadonnées

Les informations sur les forfaits et les étiquettes étayent l’explication des correspondances : elles ne sont pas purement décoratives. La mise en page permet aux étiquettes de passer à la ligne et empile le texte et les badges d’un enregistrement sur un téléphone étroit. Réduire toutes les étiquettes à un texte minuscule masquerait les éléments dont l’utilisateur a besoin pour comprendre les règles.

## Échelles majeures et mineures du système de design Segment Evergreen

### Utilisez des fonctions pour un espacement cohérent

majorScale et minorScale définissent des intervalles de huit et quatre pixels. Dans l’exemple de composant, majorScale(3) définit un espacement de 24px autour du titre du panneau, tandis que la feuille de style personnalisée gère la composition adaptative. Gardez cette distinction à l’esprit : un point de rupture de grille relève d’une décision de l’application, pas d’une fonction d’espacement.

### Préservez les relations entre les champs sur mobile

Au point de rupture initial de l’application, le panneau de règles passe au-dessus des résultats. Les libellés, les indications et les contrôles restent regroupés, et le champ de saisie des étiquettes occupe toute la largeur disponible. Le retour à la ligne natif des étiquettes évite qu’une longue liste de valeurs ne transforme le formulaire en zone de défilement horizontal.

## Étiquettes contrôlées et correspondances dans le système de design Segment Evergreen

### Normalisez les valeurs avant de les accepter

Le gestionnaire onChange supprime les espaces de début et de fin, convertit les chaînes en minuscules, élimine les doublons et refuse plus de quatre étiquettes distinctes. Renvoyer false conserve la valeur saisie lorsqu’un ajout est refusé. Cette règle relève de l’application d’audience ; TagInput fournit une interaction contrôlée, sans imposer de limite métier.

### Appliquez délibérément la correspondance avec toutes les étiquettes

Un enregistrement doit correspondre au forfait sélectionné et à chacune des étiquettes requises. Effacer les étiquettes supprime cette contrainte ; choisir « Tous » supprime la contrainte liée au forfait. Le nombre de résultats affiché est calculé à partir du même tableau filtré que celui utilisé pour afficher les fiches, afin que le décompte corresponde toujours aux éléments visibles.

## Boîte de dialogue de vérification et instantané local dans le système de design Segment Evergreen

### Vérifiez les règles actuelles avant l’enregistrement

Un nom d’audience non vide est requis pour ouvrir la boîte de dialogue. Celle-ci récapitule le nom, le nombre, le forfait et les étiquettes, puis propose « Enregistrer localement ». Cette étape supplémentaire montre une superposition native présentant un instantané concret, plutôt qu’une confirmation vide qui se contente de demander « Êtes-vous sûr ? ».

### Invalidez l’ancien message de réussite lorsque les règles changent

Toute modification du nom, du forfait ou des étiquettes efface l’indicateur d’instantané enregistré. Une réussite locale antérieure ne peut donc pas être confondue avec la confirmation de règles modifiées depuis. L’application ne présente jamais l’instantané comme une audience Segment et n’envoie aucune requête à une plateforme client.

## Saisie au clavier et rétablissement de la boîte de dialogue dans le système de design Segment Evergreen

### Testez les étiquettes, les résultats et la vérification dans un même parcours

Les étiquettes peuvent être ajoutées à l’aide des touches de saisie documentées, et l’identifiant du champ lui associe un libellé visible. Le dépassement de la limite d’étiquettes déclenche une alerte native de niveau danger. La vérification utilise le comportement natif de gestion du focus de Dialog plutôt qu’une superposition créée manuellement sans gestion du focus.

1. Ajoutez newsletter aux étiquettes actives initiales et comparez le décompte.

2. Ajoutez une étiquette sans correspondance, puis effacez les règles pour rétablir les cinq enregistrements.

3. Vérifiez les règles et enregistrez localement, puis modifiez une règle et vérifiez que l’ancien message de réussite disparaît.

### Gardez le rétablissement depuis l’état vide dans le parcours en cours

Effacer les règles supprime les restrictions de forfait et d’étiquettes, et masque un ancien état d’enregistrement. La zone de résultats affiche alors de nouveau les cinq enregistrements. L’utilisateur peut reprendre immédiatement ses modifications : aucune navigation masquée ni aucun rechargement de page n’est nécessaire.

## Intégration du système de design Segment Evergreen React

### Utilisez un exemple complet et contrôlé

L’entrée native importe ThemeProvider, defaultTheme et les composants qu’elle affiche. L’état contient les règles, les erreurs, la visibilité de la boîte de dialogue et l’instantané enregistré localement. Le JSX complet et CSS ci-dessous comprennent le jeu de données fictif ; le calcul des résultats peut donc être reproduit sans API externe.

- ThemeProvider utilise defaultTheme, dont la version est figée.

- Les valeurs de TagInput sont contrôlées par l’application.

- Dialog vérifie les mêmes règles que celles utilisées pour la liste des résultats.

### Ajoutez l’accès aux données dans une couche applicative distincte

Un véritable outil d’audience nécessiterait un accès authentifié aux données, une requête de correspondance définie, un état de chargement et un enregistrement géré par le serveur. Distinguez l’aperçu des règles de l’enregistrement d’une audience. Ne conservez pas le décompte du jeu de données fictif de cinq enregistrements lorsque vous le connectez à un jeu de données réel.

## Exemples de composants du système de design Segment Evergreen

### main.jsx — exemple complet fonctionnel

Créez et vérifiez une audience locale. Le code source ci-dessous constitue l’entrée complète de React, avec tout l’état et la validation.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  ThemeProvider,
  defaultTheme,
  Heading,
  Text,
  Paragraph,
  Button,
  TagInput,
  TextInputField,
  SelectField,
  Alert,
  Dialog,
  Badge,
  majorScale,
} from "evergreen-ui";
import "./evergreen.css";
const people = [
  { name: "Avery Stone", plan: "Pro", tags: ["active", "newsletter"] },
  { name: "Taylor Reed", plan: "Free", tags: ["newsletter"] },
  { name: "Jordan Park", plan: "Pro", tags: ["active"] },
  { name: "Morgan Lee", plan: "Team", tags: ["active", "newsletter"] },
  { name: "Casey Chen", plan: "Free", tags: ["trial"] },
];
function App() {
  const [tags, setTags] = useState(["active"]),
    [plan, setPlan] = useState("Any"),
    [name, setName] = useState("Active customers"),
    [error, setError] = useState(""),
    [open, setOpen] = useState(false),
    [saved, setSaved] = useState(null);
  const matches = people.filter(
    (p) =>
      (plan === "Any" || p.plan === plan) &&
      tags.every((t) => p.tags.includes(t)),
  );
  function changeTags(values) {
    const unique = [
      ...new Set(values.map((v) => v.trim().toLowerCase()).filter(Boolean)),
    ];
    if (unique.length > 4) {
      setError("Use at most four tags.");
      return false;
    }
    setTags(unique);
    setError("");
    setSaved(null);
  }
  return (
    <ThemeProvider value={defaultTheme}>
      <main className="audience">
        <header>
          <Text size={300}>WORKSPACE / AUDIENCES</Text>
          <Heading size={700} marginTop={8}>
            Build a focused audience
          </Heading>
          <Paragraph marginTop={8}>
            Combine a plan and tags against five fictional records. No customer
            data is loaded.
          </Paragraph>
        </header>
        <div className="audience-grid">
          <section className="rule-panel">
            <Heading size={500} marginBottom={majorScale(3)}>
              Audience rules
            </Heading>
            <TextInputField
              label="Audience name"
              value={name}
              onChange={(e) => {
                setName(e.target.value);
                setSaved(null);
              }}
            />
            <SelectField
              label="Plan"
              value={plan}
              onChange={(e) => {
                setPlan(e.target.value);
                setSaved(null);
              }}
            >
              <option>Any</option>
              <option>Free</option>
              <option>Pro</option>
              <option>Team</option>
            </SelectField>
            <label htmlFor="audience-tags">Required tags</label>
            <Paragraph size={300} marginBottom={8}>
              Press Enter or comma to add a tag. Every tag must match.
            </Paragraph>
            <TagInput
              values={tags}
              onChange={changeTags}
              width="100%"
              inputProps={{ id: "audience-tags", placeholder: "Add tag…" }}
            />
            <Paragraph size={300} marginTop={8}>
              Available sample tags: active, newsletter, trial.
            </Paragraph>
            {error && <Alert intent="danger" title={error} marginTop={16} />}
            <Button
              appearance="primary"
              marginTop={24}
              onClick={() => {
                if (!name.trim()) {
                  setError("Name the audience before reviewing.");
                  return;
                }
                setError("");
                setOpen(true);
              }}
            >
              Review audience
            </Button>
          </section>
          <section className="results-panel">
            <div className="results-title">
              <Heading size={500}>Matching sample records</Heading>
              <Badge color="blue">
                {matches.length} of {people.length}
              </Badge>
            </div>
            {matches.length ? (
              <div className="record-list">
                {matches.map((p) => (
                  <article key={p.name}>
                    <div>
                      <Heading size={400}>{p.name}</Heading>
                      <Text size={300}>{p.plan} plan</Text>
                    </div>
                    <div className="tag-list">
                      {p.tags.map((t) => (
                        <Badge key={t} color="neutral">
                          {t}
                        </Badge>
                      ))}
                    </div>
                  </article>
                ))}
              </div>
            ) : (
              <div className="empty">
                <Heading size={500}>No matching sample records</Heading>
                <Paragraph marginTop={8}>
                  Remove a tag or change the plan to broaden the selection.
                </Paragraph>
                <Button
                  marginTop={16}
                  onClick={() => {
                    setTags([]);
                    setPlan("Any");
                    setSaved(null);
                  }}
                >
                  Clear rules
                </Button>
              </div>
            )}
            {saved && (
              <Alert
                intent="success"
                title="Local audience saved"
                marginTop={20}
              >
                {saved.name} · {saved.count} sample records. Nothing was sent to
                Segment.
              </Alert>
            )}
          </section>
        </div>
        <Dialog
          isShown={open}
          title="Review local audience"
          onCloseComplete={() => setOpen(false)}
          confirmLabel="Save locally"
          onConfirm={() => {
            setSaved({ name: name.trim(), count: matches.length });
            setOpen(false);
          }}
          width={560}
        >
          <Paragraph>
            <strong>{name}</strong> matches {matches.length} of {people.length}{" "}
            fictional records.
          </Paragraph>
          <Paragraph marginTop={12}>
            Plan: {plan}. Required tags: {tags.join(", ") || "none"}.
          </Paragraph>
          <Paragraph marginTop={12}>
            This saves only a local snapshot; it does not create a Segment
            audience.
          </Paragraph>
        </Dialog>
        <footer>
          Native Evergreen 7.1.9 React components. Original audience logic; no
          analytics or customer service connection.
        </footer>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Référence du code

- Créez un projet Vite React, conservez <div id="root"></div> et chargez ce fichier comme src/main.jsx.

### evergreen.css — composition adaptative d’origine

Mise en page de l’application construite autour des composants natifs.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f4f5f9;
  color: #101840;
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.audience {
  padding: 32px;
}
.audience header {
  max-width: 800px;
  margin-bottom: 28px;
}
.audience-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.5fr);
  gap: 24px;
}
.rule-panel,
.results-panel {
  padding: 24px;
  background: white;
  border: 1px solid #d8dae5;
  border-radius: 8px;
  min-width: 0;
}
.rule-panel > label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.results-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.record-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #edeff5;
}
.record-list article:first-child {
  padding-top: 0;
}
.record-list article:last-child {
  border: 0;
}
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.empty {
  padding: 36px 12px;
  text-align: center;
  background: #f4f5f9;
  border-radius: 4px;
}
.audience footer {
  margin-top: 24px;
  font-size: 12px;
  color: #696f8c;
}
.audience input {
  max-width: 100%;
}
[role="dialog"] {
  max-width: calc(100vw - 32px);
}
@media (max-width: 850px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .audience {
    padding: 16px;
  }
  .rule-panel,
  .results-panel {
    padding: 20px;
  }
  .record-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .results-title {
    align-items: flex-start;
  }
}
```

Référence du code

- Enregistrez ce fichier à côté de main.jsx. Ces règles de composition personnalisées se distinguent de la référence des jetons de la bibliothèque.

## Configuration d’agent pour le système de design Segment Evergreen

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

L’exemple natif épinglé a été assemblé et vérifié localement dans un navigateur. Cet exemple utilise uniquement l’état local de l’application.

```
npm create vite@latest evergreen-audience -- --template react
cd evergreen-audience
npm install
npm install react@18.3.1 react-dom@18.3.1 evergreen-ui@7.1.9
# Replace src/main.jsx and add src/evergreen.css.
npm run dev
```

### Un prompt pour votre projet

```
Créez un éditeur d’audience Evergreen utilisant le thème réel et TagInput contrôlé. Normalisez et dédupliquez les étiquettes, explicitez la correspondance avec toutes les étiquettes, assurez la cohérence entre les résultats et leur décompte, effectuez la vérification dans une boîte de dialogue native et effacez tout ancien message de réussite lorsque les règles changent. Ne prétendez pas être connecté à un service Segment.
```

## Sources et périmètre du système de design Segment Evergreen

OpenDesign Guide d’application d’Evergreen 7.1.9. Cinq enregistrements fictifs illustrent le filtrage local et l’examen d’un instantané. Aucune donnée client ni audience Segment API n’est connectée.

- Champ de saisie de tags Evergreen Valeurs contrôlées, séparateurs et comportement en cas de rejet.

- Boîte de dialogue Evergreen Comportement natif du focus, de la confirmation et de la fermeture.

- Source de thème épinglée Composition du thème par défaut publiée.

## Ressources associées au système de design Segment Evergreen

### Semi Design

Créez une configuration d’espace de travail séquentielle avec les étapes de base recommandées par Semi, un Input et un Switch contrôlés, de véritables tokens de thème et un choix explicite entre les packages React 18 et React 19.

### Semrush Intergalactic

Un guide Intergalactic avec les tokens sémantiques et de graphiques actuels, des contrôles de filtrage natifs, une comparaison à échelle fixe, des détails sur l’élément sélectionné et un jeu de données complet et reproductible.

### ServiceNow Horizon

Explorez les références exactes de Horizon Workspace en matière d’espacement, de rayon et de typographie grâce à un parcours complet et local de demande et de révision, avec conservation des brouillons, validation, filtres d’état et récupération.


- [Référence de mise en œuvre](https://evergreen.segment.com/components/tag-input)
- [Source](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)
- [Source](https://evergreen.segment.com/components/tag-input)
- [Référence du code](https://evergreen.segment.com/components/tag-input)
- [Champ de saisie de tags Evergreen Valeurs contrôlées, séparateurs et comportement en cas de rejet.](https://evergreen.segment.com/components/tag-input)
- [Boîte de dialogue Evergreen Comportement natif du focus, de la confirmation et de la fermeture.](https://evergreen.segment.com/components/dialog)
- [Source de thème épinglée Composition du thème par défaut publiée.](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)