# Sistema di design Segment Evergreen

## Sistema di design Segment Evergreen: anteprima dell’interfaccia

Combina un piano e i tag obbligatori, esamina i record corrispondenti, gestisci l’assenza di risultati e consulta un’istantanea locale.

## Sistema di design Segment Evergreen: riferimento di progettazione

Componenti Evergreen 7.1.9 React nativi e defaultTheme; regole originali per il pubblico locale.

### Raggi degli angoli

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| radii.0 | 0px | Raggio indicizzato del tema: scegli un ruolo invece di arrotondare progressivamente ogni contenitore annidato. |
| radii.1 | 4px | Raggio indicizzato del tema: scegli un ruolo invece di arrotondare progressivamente ogni contenitore annidato. |
| radii.2 | 8px | Raggio indicizzato del tema: scegli un ruolo invece di arrotondare progressivamente ogni contenitore annidato. |
### Dimensioni del testo

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| fontSizes.0 | 10px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.1 | 12px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.2 | 14px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.3 | 16px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.4 | 18px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.5 | 20px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.6 | 24px | Valori font-size indicizzati nel tema predefinito pubblicato. |
| fontSizes.7 | 32px | Valori font-size indicizzati nel tema predefinito pubblicato. |
### Altezze di riga

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| lineHeights.0 | 16px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.1 | 18px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.2 | 20px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.3 | 24px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.4 | 28px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.5 | 32px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
| lineHeights.6 | 40px | Abbina il ruolo tipografico previsto invece di applicare a ogni paragrafo il ritmo delle intestazioni. |
### Pesi dei caratteri

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| fontWeights.light | 300 | In questo tema Evergreen assegna a semibold il valore 500 e a bold il valore 600; non sostituirli senza avviso con i valori predefiniti delle parole chiave del browser. |
| fontWeights.normal | 400 | In questo tema Evergreen assegna a semibold il valore 500 e a bold il valore 600; non sostituirli senza avviso con i valori predefiniti delle parole chiave del browser. |
| fontWeights.semibold | 500 | In questo tema Evergreen assegna a semibold il valore 500 e a bold il valore 600; non sostituirli senza avviso con i valori predefiniti delle parole chiave del browser. |
| fontWeights.bold | 600 | In questo tema Evergreen assegna a semibold il valore 500 e a bold il valore 600; non sostituirli senza avviso con i valori predefiniti delle parole chiave del browser. |
### Riferimenti alla palette predefinita

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| colors.gray900 | #101840 | Testo scuro principale. |
| colors.gray700 | #696f8c | Testo di supporto. |
| colors.gray400 | #d8dae5 | Bordo definito. |
| colors.gray200 | #edeff5 | Separatore discreto. |
| colors.gray100 | #F4F5F9 | Sfondo sobrio. |
| colors.blue500 | #3366FF | Riferimento al blu principale. |
| colors.blue600 | #2952CC | Riferimento al blu per le interazioni più marcate. |
| colors.red500 | #D14343 | Riferimento per errori e situazioni critiche. |
| colors.green500 | #52BD95 | Riferimento per gli stati di successo. |
### Funzioni di layout e input controllato API

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| majorScale(3) | 24px | Scala principale di 8 pixel per la spaziatura tra sezioni. |
| minorScale(3) | 12px | Scala secondaria di 4 pixel per relazioni più ravvicinate. |
| TagInput.values | controlled array | L’applicazione gestisce i tag accettati. |
| TagInput.onChange | new array; return false to retain input | Convalida i tag aggiunti prima di accettarli. |
| TagInput.separator | comma and new line by default | Consenti più tag senza un parser personalizzato. |
## Guida completa al sistema di progettazione sistema di design Segment Evergreen

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Struttura del generatore di pubblico del sistema di progettazione sistema di design Segment Evergreen

### Mantieni le regole accanto alle loro conseguenze

> L’esempio affianca un pannello delle regole ai record fittizi corrispondenti. Il selettore del piano e i tag richiesti sono visibili insieme al conteggio dei risultati, così è chiaro l’effetto di ogni modifica a una regola. Per scoprire se la combinazione attuale corrisponde a qualche record, non occorre salvare né aprire una finestra di dialogo.

### Usa un insieme di dati finito e trasparente

Cinque record con nome mostrano il rispettivo piano e i relativi tag. La pagina non finge di interrogare un archivio clienti né di stimare le dimensioni di un pubblico reale. Anche un risultato pari a zero è utile nell’esempio; un’azione permette di ripristinare l’intero insieme di dati.

## Valori e semantica del tema del sistema di progettazione sistema di design Segment Evergreen

### Consulta il tema predefinito effettivo

Evergreen 7.1.9 fornisce raggi, dimensioni dei caratteri e interlinee indicizzati, oltre a colori con nome e stili dei componenti. La tabella mantiene invariati i valori esportati. Vale la pena soffermarsi in particolare sui nomi dei pesi: semibold e bold corrispondono rispettivamente a 500 e 600, valori diversi da quelli comunemente previsti.

### Mantieni coerente la composizione personalizzata

ThemeProvider fornisce gli input nativi, i tag, i badge, i pulsanti e la finestra di dialogo. I pannelli personalizzati riprendono la stessa combinazione sobria di grigio freddo e blu. L’esempio non sovrascrive i dettagli interni dei componenti nativi con selettori CSS troppo generici, quindi gli stili di interazione forniti restano intatti.

## Tipografia per modificare le regole nel sistema di progettazione sistema di design Segment Evergreen

### Definisci una gerarchia chiara per l’attività

I ruoli delle intestazioni distinguono il titolo del pubblico dai titoli dei pannelli e dai nomi dei singoli risultati. Il testo di supporto spiega come inserire i tag e chiarisce che i dati sono fittizi. Un badge con il conteggio è accanto all’intestazione dei risultati, anziché sostituirla: così si può identificare la sezione prima di interpretare il numero.

### Mantieni leggibili i metadati

Le informazioni su piani e tag aiutano a capire la corrispondenza e non sono puramente decorative. Il layout consente ai tag di andare a capo e, sugli schermi stretti dei telefoni, dispone su righe separate il testo e i badge di un record. Ridurre tutte le etichette a un testo minuscolo nasconderebbe gli elementi necessari per comprendere le regole.

## Scale principali e secondarie del sistema di progettazione sistema di design Segment Evergreen

### Usa funzioni per una spaziatura ripetibile

majorScale e minorScale esprimono incrementi rispettivamente di otto e quattro pixel. Nell’esempio del componente, majorScale(3) imposta uno spazio di 24px sotto l’intestazione del pannello, mentre il foglio di stile personalizzato gestisce la composizione adattiva. Mantieni chiara questa distinzione: il breakpoint della griglia è una scelta dell’applicazione, non il risultato di una funzione di spaziatura.

### Mantieni le relazioni tra i campi sui dispositivi mobili

Al breakpoint originale dell’applicazione, il pannello delle regole si sposta sopra i risultati. Etichette, suggerimenti e controlli restano raggruppati, mentre l’input dei tag occupa tutta la larghezza disponibile. Il comportamento nativo dei tag, che vanno a capo, evita che un lungo elenco trasformi il modulo in una schermata a scorrimento orizzontale.

## Tag controllati e corrispondenze nel sistema di progettazione sistema di design Segment Evergreen

### Normalizza i valori prima di accettarli

Il gestore onChange rimuove gli spazi iniziali e finali, converte le stringhe in minuscolo, elimina i duplicati e rifiuta più di quattro tag distinti. Restituire false mantiene l’input quando un’aggiunta viene rifiutata. Questa regola appartiene all’applicazione del pubblico: TagInput gestisce l’interazione controllata, senza stabilire un limite di business.

### Applica consapevolmente la corrispondenza con tutti i tag

Un record deve corrispondere al piano selezionato e a ogni tag richiesto. Se si cancellano i tag, il relativo vincolo viene rimosso; scegliendo Qualsiasi, viene rimosso il vincolo sul piano. Il conteggio attuale è calcolato sullo stesso array filtrato mostrato sullo schermo, così il numero corrisponde sempre alle schede visibili.

## Finestra di revisione e istantanea locale nel sistema di progettazione sistema di design Segment Evergreen

### Controlla le regole attuali prima di salvare

Per aprire la finestra di dialogo è necessario specificare un nome per il pubblico. La finestra mostra nuovamente il nome, il conteggio, il piano e i tag, quindi offre l’opzione Salva in locale. Questo passaggio aggiuntivo illustra un overlay nativo con un’istantanea concreta, invece di una conferma vuota che chiede soltanto «Confermi?».

### Annulla il vecchio stato di successo quando cambiano le regole

Se cambiano il nome, il piano o i tag, l’indicatore dell’istantanea salvata viene cancellato. In questo modo, un precedente salvataggio locale non può essere scambiato per una conferma delle regole appena modificate. L’applicazione non presenta l’istantanea come un pubblico di Segment e non invia richieste a una piattaforma clienti.

## Inserimento da tastiera e ripristino della finestra di dialogo nel sistema di progettazione sistema di design Segment Evergreen

### Verifica tag, risultati e revisione con un unico flusso

I tag possono essere aggiunti usando i tasti previsti e l’input riceve un’etichetta visibile tramite il suo id. Se viene superato il limite dei tag, compare un avviso di errore nativo. La revisione usa il comportamento nativo di Dialog per la gestione del focus, anziché un overlay creato manualmente con il focus non gestito.

1. Aggiungi newsletter al tag attivo iniziale e confronta il conteggio.

2. Aggiungi un tag senza corrispondenze, poi cancella le regole per ripristinare i cinque record.

3. Rivedi e salva in locale, poi modifica una regola e verifica che il vecchio stato di successo scompaia.

### Consenti di recuperare dallo stato vuoto senza interrompere l’attività

Cancella regole rimuove i vincoli sul piano e sui tag e chiude uno stato di salvataggio ormai superato. La sezione dei risultati mostra quindi di nuovo tutti e cinque i record. L’utente può continuare subito a modificare le regole: non servono navigazione nascosta né ricaricamento della pagina.

## Integrazione React del sistema di progettazione sistema di design Segment Evergreen

### Usa un esempio completo e controllato

Il punto d’ingresso nativo importa ThemeProvider, defaultTheme e i componenti che visualizza. Lo stato contiene regole, errori, visibilità della finestra di dialogo e istantanea salvata in locale. Il JSX completo e CSS qui sotto includono l’insieme di dati fittizi, così il calcolo dei risultati è riproducibile senza un API esterno.

- ThemeProvider usa defaultTheme, bloccato alla versione specificata.

- I valori di TagInput sono controllati dall’applicazione.

- Dialog rivede le stesse regole usate dall’elenco dei risultati.

### Aggiungi l’accesso ai dati come livello applicativo separato

Un vero strumento per la gestione dei pubblici richiederebbe l’accesso autenticato ai dati, una query di corrispondenza definita, uno stato di caricamento e il salvataggio lato server. Mantieni distinta l’anteprima delle regole dal salvataggio di un pubblico. Quando ti colleghi a un insieme di dati reale, non conservare il conteggio dei cinque record fittizi.

## Esempi di componenti del sistema di progettazione sistema di design Segment Evergreen

### main.jsx — esempio completo funzionante

Crea e rivedi un pubblico in locale. Il sorgente qui sotto è il punto d’ingresso completo di React, con tutto lo stato e la convalida.

```
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 />);
```

Riferimento del codice

- Crea un progetto React con Vite, mantieni <div id="root"></div> e salva questo codice come src/main.jsx.

### evergreen.css — composizione adattiva originale

Impaginazione dell’applicazione costruita intorno ai componenti nativi.

```
* {
  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;
  }
}
```

Riferimento del codice

- Salva il file accanto a main.jsx. Queste regole di composizione personalizzate sono distinte dal riferimento ai token della libreria.

## Configurazione dell’agente del sistema di progettazione sistema di design Segment Evergreen

### Punto di partenza per l’implementazione

L’esempio nativo bloccato è stato incluso nel bundle e verificato localmente nel browser. L’esempio usa solo lo stato locale dell’applicazione.

```
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 per il tuo progetto

```
Crea un editor di pubblici Evergreen usando il tema effettivo e TagInput controllato. Normalizza i tag ed elimina i duplicati, rendi esplicita la corrispondenza con tutti i tag, mantieni coerenti risultati e conteggi, consenti la revisione in un Dialog nativo e cancella gli stati di successo non più validi quando cambiano le regole. Non dichiarare che esiste una connessione al servizio Segment.
```

## Fonti e ambito del sistema di progettazione sistema di design Segment Evergreen

OpenDesign guida applicativa per Evergreen 7.1.9. Cinque record fittizi illustrano il filtraggio locale e la revisione dell’istantanea. Non è collegato alcun dato cliente di Segment né alcun API di pubblico.

- Campo di inserimento dei tag Evergreen Valori controllati, separatori e comportamento in caso di rifiuto.

- Finestra di dialogo Evergreen Gestione nativa di focus, conferma e chiusura.

- Fonte del tema bloccata alla versione specificata Composizione del tema predefinito pubblicata.

## Risorse correlate del sistema di progettazione sistema di design Segment Evergreen

### Semi Design

Crea una configurazione sequenziale dell’area di lavoro con i componenti Steps di base consigliati da Semi, Input e Switch controllati, token tema reali e una scelta esplicita del pacchetto React 18 o React 19.

### Semrush Intergalactic

Una guida Intergalactic con token semantici e per grafici aggiornati, controlli nativi per i filtri, confronto a scala fissa, dettagli dell’elemento selezionato e un fixture completo e riproducibile.

### ServiceNow Horizon

Esplora i riferimenti esatti a spaziature, raggi e tipografia di Horizon Workspace attraverso un flusso completo di revisione delle richieste locali, con conservazione delle bozze, convalida, filtri di stato e recupero.


- [Riferimento per l’implementazione](https://evergreen.segment.com/components/tag-input)
- [Fonte](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)
- [Fonte](https://evergreen.segment.com/components/tag-input)
- [Riferimento del codice](https://evergreen.segment.com/components/tag-input)
- [Campo di inserimento dei tag Evergreen Valori controllati, separatori e comportamento in caso di rifiuto.](https://evergreen.segment.com/components/tag-input)
- [Finestra di dialogo Evergreen Gestione nativa di focus, conferma e chiusura.](https://evergreen.segment.com/components/dialog)
- [Fonte del tema bloccata alla versione specificata Composizione del tema predefinito pubblicata.](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)