# Sistema de design Segment Evergreen

## Segment Evergreen Prévia da interface do sistema de design

Combine um plano e as tags obrigatórias, confira os registros correspondentes, recupere-se de resultados vazios e consulte um resumo local.

## Segment Evergreen Referência de design do sistema de design

Componentes React nativos do Evergreen 7.1.9 e defaultTheme; regras originais para públicos locais.

### Raios dos cantos

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| radii.0 | 0px | Raio indexado do tema; escolha uma função em vez de arredondar progressivamente cada caixa aninhada. |
| radii.1 | 4px | Raio indexado do tema; escolha uma função em vez de arredondar progressivamente cada caixa aninhada. |
| radii.2 | 8px | Raio indexado do tema; escolha uma função em vez de arredondar progressivamente cada caixa aninhada. |
### Tamanhos de fonte

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| fontSizes.0 | 10px | Valores indexados de font-size no tema default publicado. |
| fontSizes.1 | 12px | Valores indexados de font-size no tema default publicado. |
| fontSizes.2 | 14px | Valores indexados de font-size no tema default publicado. |
| fontSizes.3 | 16px | Valores indexados de font-size no tema default publicado. |
| fontSizes.4 | 18px | Valores indexados de font-size no tema default publicado. |
| fontSizes.5 | 20px | Valores indexados de font-size no tema default publicado. |
| fontSizes.6 | 24px | Valores indexados de font-size no tema default publicado. |
| fontSizes.7 | 32px | Valores indexados de font-size no tema default publicado. |
### Alturas de linha

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| lineHeights.0 | 16px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.1 | 18px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.2 | 20px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.3 | 24px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.4 | 28px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.5 | 32px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
| lineHeights.6 | 40px | Combine com a função de texto pretendida em vez de aplicar a todas as linhas dos parágrafos o ritmo dos títulos. |
### Pesos de fonte

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| fontWeights.light | 300 | Neste tema, Evergreen define semibold como 500 e bold como 600; não os substitua silenciosamente pelos valores padrão de palavras-chave do navegador. |
| fontWeights.normal | 400 | Neste tema, Evergreen define semibold como 500 e bold como 600; não os substitua silenciosamente pelos valores padrão de palavras-chave do navegador. |
| fontWeights.semibold | 500 | Neste tema, Evergreen define semibold como 500 e bold como 600; não os substitua silenciosamente pelos valores padrão de palavras-chave do navegador. |
| fontWeights.bold | 600 | Neste tema, Evergreen define semibold como 500 e bold como 600; não os substitua silenciosamente pelos valores padrão de palavras-chave do navegador. |
### Referências da paleta padrão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| colors.gray900 | #101840 | Texto escuro principal. |
| colors.gray700 | #696f8c | Texto de apoio. |
| colors.gray400 | #d8dae5 | Limite definido. |
| colors.gray200 | #edeff5 | Separador sutil. |
| colors.gray100 | #F4F5F9 | Fundo discreto. |
| colors.blue500 | #3366FF | Referência de azul principal. |
| colors.blue600 | #2952CC | Referência de azul mais intenso para interações. |
| colors.red500 | #D14343 | Referência crítica/de erro. |
| colors.green500 | #52BD95 | Referência de sucesso. |
### Funções de layout e API de entrada controlada

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| majorScale(3) | 24px | Escala principal de oito pixels para o espaçamento entre seções. |
| minorScale(3) | 12px | Escala secundária de quatro pixels para relações de menor espaçamento. |
| TagInput.values | controlled array | A aplicação controla as tags aceitas. |
| TagInput.onChange | new array; return false to retain input | Valide as adições antes de aceitá-las. |
| TagInput.separator | comma and new line by default | Permita várias tags sem um analisador personalizado. |
## Segment Evergreen Guia completo do sistema de design

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Segment Evergreen Estrutura do criador de públicos do sistema de design

### Mantenha as regras junto de suas consequências

> O exemplo combina um painel de regras com registros fictícios correspondentes. O seletor de plano e as tags obrigatórias ficam visíveis ao mesmo tempo que a contagem de resultados, para que seja fácil entender o efeito de alterar uma regra. A pessoa não precisa salvar nem abrir uma caixa de diálogo só para descobrir se a combinação atual corresponde a alguém.

### Use um conjunto de dados finito e transparente

Cinco registros de exemplo identificados por nome mostram seus planos e tags. A página não finge consultar um banco de dados de clientes nem estimar o tamanho de um público real. Nenhum resultado é uma situação útil no exemplo, e há uma ação para restaurar o conjunto completo de dados.

## Segment Evergreen Valores e semântica do tema do sistema de design

### Consulte o tema padrão real

Evergreen 7.1.9 oferece raios, tamanhos de fonte e alturas de linha indexados, além de cores nomeadas e estilos de componentes. A tabela mantém intactos os valores exportados. Vale a pena observar especialmente os nomes dos pesos de fonte: semibold e bold correspondem a 500 e 600, diferentemente do que se costuma presumir.

### Mantenha a composição personalizada alinhada

ThemeProvider fornece os campos de entrada, as tags, os badges, os botões e o diálogo nativos. Os painéis criados usam a mesma combinação discreta de cinza frio e azul. O exemplo não substitui os componentes internos nativos por seletores CSS abrangentes, preservando os estilos de interação fornecidos.

## Tipografia do sistema de design Segment Evergreen para edição de regras

### Estabeleça uma hierarquia clara para a tarefa

Os níveis de título distinguem o título voltado ao público dos títulos dos painéis e dos nomes dos resultados individuais. O texto de apoio explica a inserção de tags e o escopo dos dados fictícios. Um badge com a contagem fica ao lado do título dos resultados, em vez de substituí-lo, permitindo que a pessoa identifique a seção antes de interpretar o número.

### Mantenha os metadados legíveis

As informações de plano e tags ajudam a explicar a correspondência; não são meramente decorativas. O layout permite que as tags quebrem de linha e, em celulares estreitos, empilha o texto e os badges de cada registro. Reduzir todos os rótulos a textos minúsculos ocultaria as evidências necessárias para entender as regras.

## Escalas major e minor do sistema de design Segment Evergreen

### Use funções para espaçamentos consistentes

majorScale e minorScale representam incrementos de oito e quatro pixels. O exemplo do componente usa majorScale(3) para um espaço de 24px entre o título do painel e o conteúdo, enquanto a folha de estilos personalizada controla a composição responsiva. Mantenha essa distinção clara: um breakpoint de grade é uma decisão da aplicação, não o resultado de uma função de espaçamento.

### Preserve as relações entre os campos em dispositivos móveis

No breakpoint original da aplicação, o painel de regras passa para cima dos resultados. Rótulos, dicas e controles permanecem juntos, e o campo de tags ocupa toda a largura disponível. A quebra de linha nativa das tags evita que uma lista longa de valores transforme o formulário em uma área de rolagem horizontal.

## Tags controladas e correspondências no sistema de design Segment Evergreen

### Normalize os valores antes de aceitá-los

O manipulador onChange remove espaços no início e no fim, converte as strings para minúsculas, elimina duplicatas e rejeita mais de quatro tags distintas. Retornar false mantém o campo de entrada quando uma adição é rejeitada. Essa política pertence à aplicação de público; TagInput fornece a interação controlada, sem definir um limite de negócio.

### Use a correspondência com todas as tags de forma deliberada

Um registro precisa corresponder ao plano selecionado e a todas as tags obrigatórias. Remover as tags elimina essa restrição; selecionar Qualquer um elimina a restrição de plano. A contagem atual de resultados vem da mesma lista filtrada exibida na tela, evitando divergências entre a contagem e os cartões visíveis.

## Diálogo de revisão e instantâneo local no sistema de design Segment Evergreen

### Revise as regras atuais antes de salvar

É necessário informar um nome de público antes de abrir o diálogo. O diálogo repete o nome, a contagem, o plano e as tags e, em seguida, oferece a opção Salvar localmente. Esta etapa extra demonstra uma sobreposição nativa em torno de um instantâneo concreto, em vez de uma confirmação vazia que pergunta apenas Tem certeza?

### Invalide a confirmação anterior quando as regras mudarem

Alterar o nome, o plano ou as tags limpa o indicador de instantâneo salvo. Assim, uma confirmação local anterior não pode ser confundida com a confirmação de regras editadas recentemente. A aplicação não apresenta o instantâneo como um público do Segment nem envia uma solicitação a uma plataforma de clientes.

## Entrada por teclado e recuperação do diálogo no sistema de design Segment Evergreen

### Teste tags, resultados e revisão em um único fluxo

As tags podem ser adicionadas com as teclas de entrada documentadas, e o campo recebe um rótulo visível por meio de seu id. Quando o limite de tags é rejeitado, um alerta de erro nativo é exibido. A revisão usa o comportamento de foco nativo de Dialog, em vez de uma sobreposição criada manualmente com foco não gerenciado.

1. Adicione newsletter à tag ativa inicial e compare a contagem.

2. Adicione uma tag sem correspondência e, em seguida, limpe as regras para restaurar os cinco registros.

3. Revise e salve localmente; depois, altere uma regra e confirme que a confirmação anterior desaparece.

### Mantenha a recuperação do estado vazio na tarefa atual

Limpar regras remove as restrições de plano e de tags e descarta um estado salvo desatualizado. A região de resultados volta a conter todos os cinco registros. A pessoa pode continuar editando imediatamente, sem navegação oculta nem recarregamento da página.

## Integração do sistema de design Segment Evergreen com React

### Use um exemplo completo e controlado

A entrada nativa importa ThemeProvider, defaultTheme e os componentes que renderiza. O estado armazena as regras, os erros, a visibilidade do diálogo e o instantâneo salvo localmente. O JSX completo e CSS abaixo incluem os dados fictícios, para que o cálculo dos resultados possa ser reproduzido sem um API externo.

- ThemeProvider usa o defaultTheme fixado.

- Os valores de TagInput são controlados pela aplicação.

- Dialog revisa as mesmas regras usadas pela lista de resultados.

### Adicione o acesso a dados em uma camada separada da aplicação

Uma ferramenta de público real precisaria de acesso autenticado a dados, uma consulta de correspondência definida, um estado de carregamento e um comportamento de salvamento com suporte do servidor. Preserve a distinção entre visualizar regras e salvar um público. Não mantenha a contagem dos cinco registros fictícios ao conectar a aplicação a um conjunto de dados real.

## Exemplos de componentes do sistema de design Segment Evergreen

### main.jsx — exemplo funcional completo

Crie e revise um público local. O código-fonte abaixo é a entrada React completa, incluindo todo o estado e a validação.

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

Referência de código

- Crie um projeto Vite React, mantenha <div id="root"></div> e carregue este arquivo como src/main.jsx.

### evergreen.css — composição responsiva original

Layout da aplicação organizado em torno dos componentes nativos.

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

Referência de código

- Salve junto de main.jsx. Estas regras de composição personalizadas são distintas da referência de tokens da biblioteca.

## Configuração do agente de design sistema de design Segment Evergreen

### Ponto de partida para implementação

O exemplo nativo com versões fixadas foi empacotado e verificado localmente no navegador. O exemplo usa apenas o estado local da aplicação.

```
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
```

### Um prompt para seu projeto

```
Crie um editor de público do Evergreen usando o tema real e o TagInput controlado. Normalize e elimine tags duplicadas, deixe explícita a correspondência com todas as tags, mantenha resultados e contagens coerentes, faça a revisão em um Dialog nativo e limpe confirmações desatualizadas quando as regras mudarem. Não afirme que há conexão com um serviço do Segment.
```

## Fontes e escopo do sistema de design Segment Evergreen

Guia da aplicação OpenDesign para o Evergreen 7.1.9. Cinco registros fictícios demonstram a filtragem local e a revisão de instantâneos. Nenhum dado de cliente do Segment nem público API está conectado.

- Campo de tags do Evergreen Valores controlados, separadores e comportamento de rejeição.

- Dialog do Evergreen Comportamento nativo de foco, confirmação e fechamento.

- Fonte do tema fixado Composição publicada do tema padrão.

## Recursos relacionados ao sistema de design Segment Evergreen

### Semi Design

Crie uma configuração sequencial do espaço de trabalho com os componentes Steps básicos recomendados pelo Semi, Input e Switch controlados, tokens reais do tema e uma escolha explícita entre os pacotes React 18 e React 19.

### Semrush Intergalactic

Um guia do Intergalactic com tokens semânticos e de gráficos atuais, controles nativos de filtragem, comparação em escala fixa, detalhes do item selecionado e um conjunto de dados completo e reproduzível.

### ServiceNow Horizon

Explore as referências exatas de espaçamento, raio e tipografia do Horizon Workspace em um fluxo local completo de revisão de solicitações, com retenção de rascunhos, validação, filtros de status e recuperação.


- [Referência de implementação](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)
- [Referência de código](https://evergreen.segment.com/components/tag-input)
- [Campo de tags do Evergreen Valores controlados, separadores e comportamento de rejeição.](https://evergreen.segment.com/components/tag-input)
- [Dialog do Evergreen Comportamento nativo de foco, confirmação e fechamento.](https://evergreen.segment.com/components/dialog)
- [Fonte do tema fixado Composição publicada do tema padrão.](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)