# Palantir Blueprint Sistema di progettazione

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Palantir Blueprint

Filtra per nome o tipo, seleziona un set di dati, modifica la densità delle righe, cambia aspetto e convalida una nota di revisione prima di aggiornare lo stato locale.

## Riferimento di progettazione per il sistema di progettazione sistema di design Palantir Blueprint

Blueprint core 6.21.0 pubblicato CSS e componenti nativi React. Questi sono valori selezionati dei token del tema chiaro; usa il tema scuro della libreria invece di invertirli manualmente. Le scelte di layout dell’applicazione sono indicate nell’esempio CSS.

### Colori semantici e stati di interazione

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --bp-intent-primary-rest | #2d72d2 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-primary-hover | #215db0 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-primary-active | #184a90 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-primary-disabled | #4c90f0 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-primary-foreground | #ffffff | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-success-rest | #238551 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-success-hover | #1c6e42 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-success-active | #165a36 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-success-disabled | #32a467 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-success-foreground | #ffffff | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-warning-rest | #c87619 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-warning-hover | #935610 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-warning-active | #77450d | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-warning-disabled | #ec9a3c | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-warning-foreground | #111418 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-danger-rest | #cd4246 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-danger-hover | #ac2f33 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-danger-active | #8e292c | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-danger-disabled | #e76a6e | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-intent-danger-foreground | #ffffff | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
### Scala e pesi tipografici

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --bp-typography-size-body-x-small | 10px | Corpo del testo, etichette e dati di supporto; non usare i metadati piccoli come dimensione principale di lettura. |
| --bp-typography-size-body-small | 12px | Corpo del testo, etichette e dati di supporto; non usare i metadati piccoli come dimensione principale di lettura. |
| --bp-typography-size-body-medium | 14px | Corpo del testo, etichette e dati di supporto; non usare i metadati piccoli come dimensione principale di lettura. |
| --bp-typography-size-body-large | 16px | Corpo del testo, etichette e dati di supporto; non usare i metadati piccoli come dimensione principale di lettura. |
| --bp-typography-size-heading-small | 16px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-heading-medium | 20px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-heading-large | 24px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-heading-x-large | 28px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-heading-display | 46px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-code-small | 12px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-code-medium | 13px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-size-code-large | 14px | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-weight-default | 400 | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-weight-bold | 600 | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-line-height-default | 1.28581 | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
| --bp-typography-line-height-large | 1.5 | Applica il ruolo al livello gerarchico indicato; per i valori nelle tabelle puoi usare anche le cifre tabulari. |
### Superfici, bordi e testo semantico

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --bp-surface-border-color-default | #5f6b7c1f | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-border-color-strong | #5f6b7c40 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-border-width | 1px | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-border-radius | 4px | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-spacing | 4px | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-background-color-default-rest | #ffffff | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-surface-background-color-default-hover | #f6f7f9 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-typography-color-default-rest | #1c2127 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-typography-color-muted | #5f6b7c | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
### Focus e animazioni

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --bp-emphasis-transition-duration | 100ms | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-focus-color | #2d72d2 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-focus-width | 2px | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-focus-offset | 2px | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
| --bp-emphasis-motion-reduced | 0 | Usa il ruolo semantico indicato; mantieni abbinate le combinazioni di stato e colore di primo piano. |
### Componenti nativi usati nell’area di lavoro dei set di dati

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| HTMLTable | striped · interactive · condensed | Tabella semantica nativa; la prop condensed modifica la densità senza cambiare i dati. |
| InputGroup | value · onChange · intent | Ricerca controllata e nota di revisione; la validazione dell’applicazione imposta l’intento danger. |
| FormGroup | labelFor · helperText · intent | Collega un’etichetta di campo visibile e spiega perché la nota non è valida. |
| HTMLSelect | options · value · onChange | Un select nativo per il set limitato e fisso di tipi di set di dati. |
| Tag | minimal · intent | Abbina il testo dello stato al trattamento success o warning. |
| Button | intent="primary" · type="submit" | Conferma la revisione locale tramite un vero form; i pulsanti di selezione restano secondari. |
| Switch | checked · onChange | Controlli indipendenti per aspetto e densità. |
| Callout | intent · title | Spiega l’assenza di risultati o l’esito; evita di comunicare lo stato solo tramite il colore. |
## Sistema di design Palantir Blueprint Guida completa del sistema di progettazione

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.

## Sistema di design Palantir Blueprint Sistema di progettazione: un’area di lavoro basata sui dati

### Controlli compatti con un ordine di lettura esplicito

> Blueprint è utile quando una schermata combina una raccolta, filtri, stato e azioni contestuali. L’esempio mantiene la tabella dei set di dati a sinistra e il record selezionato a destra. Chi legge può confrontare i record senza aprire una nuova pagina per ciascuno. Il pannello di ispezione contiene la nota di revisione modificabile; la tabella resta una superficie per la consultazione rapida.

### Usa il contratto del pacchetto v6

L’esempio è compilato con @blueprintjs/core 6.21.0. Il suo namespace CSS è bp6 e i token semantici pubblicati iniziano con --bp-. Un foglio di stile bp5 meno recente non sostituisce i componenti CSS della v6. Importa una sola volta il foglio di stile del pacchetto nel punto d’ingresso dell’applicazione, poi assegna le regole di layout dell’applicazione a una classe separata.

## Sistema di design Palantir Blueprint Intenti e ruoli dei colori del sistema di progettazione

### Separa lo stato del record dalla selezione

Un tag warning indica che il set di dati deve essere revisionato; la riga con tinta primaria indica che è selezionato. I due significati sono indipendenti. Contrassegnando una riga come revisionata, l’etichetta e l’intento diventano success, mentre la selezione resta sullo stesso set di dati. La tabella mantiene una descrizione testuale per ogni stato, così il colore non è l’unico veicolo del significato.

### Mantieni la modalità scura al livello dei componenti

L’esempio aggiunge bp6-dark al contenitore, così i componenti nativi possono applicare lo stile scuro. I valori del tema chiaro riportati sopra sono un riferimento, non un’indicazione a sovrascrivere ogni componente. Quando introduci un portal, per esempio Dialog, assicurati che il contenuto renderizzato riceva lo stesso contesto del tema: un contenitore che non include il portal non è sufficiente.

## Palantir Blueprint Tipografia del sistema di design per record e metadati

### Leggi la scala del testo del corpo prima di scegliere le intestazioni

Le dimensioni pubblicate per il testo del corpo sono 10, 12, 14 e 16px; la dimensione media è 14px. I nomi dei dataset mantengono il livello di lettura principale. Gli ID e i tipi di record usano testo secondario, mentre i conteggi numerici dei record usano cifre tabulari, così è più facile confrontare i valori quando cambiano. La guida non consiglia di usare 10px per i contenuti principali.

### Organizza le informazioni dell’ispettore in una gerarchia compatta

L’ispettore usa un’intestazione da 20px e un elenco di definizioni per ID, responsabile, tipo e conteggio. Etichette e valori sono allineati stabilmente su due colonne. La nota di revisione segue questi dati, separata da una linea, così non può essere confusa con un filtro della tabella.

## Palantir Blueprint Tabella, filtri e ispettore del sistema di design

### Mantieni intatta la semantica della tabella

HTMLTable fornisce una tabella nativa con lo stile di Blueprint. I pulsanti nella prima cella selezionano i record e sono raggiungibili da tastiera; l’esempio non affida la selezione esclusivamente a un gestore di riga attivabile solo con il puntatore. La prop interactive applica lo stile di evidenziazione al passaggio del mouse sulle righe, mentre condensed modifica la densità senza influire sui filtri.

### Rendi visibile il flusso dei dati controllato

La ricerca e il selettore del tipo ricavano una raccolta visibile dalle stesse righe locali. Il record selezionato può restare nell’ispettore anche se un filtro nasconde la relativa riga; così una nota di revisione non scompare solo perché è cambiato un filtro della raccolta. Il software di produzione dovrebbe definire e documentare questa relazione, invece di eliminare silenziosamente le modifiche.

1. Trova un dataset in base al nome visualizzato.

2. Restringi la stessa raccolta con il selettore del tipo.

3. Seleziona il pulsante del nome per caricare l’ispettore.

4. Inserisci una nota di revisione e invia la revisione locale.

## Palantir Blueprint Spaziatura, superfici e densità del sistema di design

### Usa un’unità più piccola senza ridurre ogni spazio

Il token pubblicato per la spaziatura delle superfici è 4px. L’area di lavoro usa multipli definiti dall’applicazione: 12px tra i controlli dei filtri, 20px tra la raccolta e l’ispettore e 24px attorno all’esempio desktop. Sono scelte compositive illustrate in CSS. Il token di raggio del bordo da 4px mantiene sobri i profili dei controlli e delle superfici.

### Modifica il layout prima di sacrificare le etichette

Al breakpoint dell’applicazione dell’esempio, 800px, l’ispettore si sposta sotto la raccolta. I filtri vanno a capo, il padding principale passa a 16px e, quando necessario, la tabella dispone di un proprio contenitore con scorrimento orizzontale. Questo breakpoint appartiene a questa area di lavoro: non è presentato come breakpoint universale ufficiale di Blueprint.

## Palantir Blueprint Revisione e stati vuoti del sistema di design

### La convalida fa parte dell’operazione di revisione

Se invii una nota vuota, InputGroup e FormGroup ricevono l’intento danger, viene fornito un testo di aiuto esplicativo e il focus viene spostato sul campo. L’inserimento di testo cancella l’errore. Un invio valido modifica solo il record locale selezionato, cancella la nota e mostra un Callout di successo che specifica chiaramente che non è stato inviato alcun dato.

### Tieni le opzioni per ripristinare la raccolta vuota nelle vicinanze

Il Callout che segnala l’assenza di risultati offre l’opzione Cancella filtri. Azzera la query di ricerca e il selettore del tipo, ripristinando così l’intera raccolta. Non elimina righe né modifica l’ispettore. I seguenti limiti di stato sono intenzionali:

- La selezione modifica il record esaminato, non il suo stato di revisione.

- La modalità compatta modifica la densità, non l’ordine dei record.

- Il tema modifica l’aspetto visivo, non i filtri correnti.

- Una revisione locale completata modifica un record e ne comunica il risultato.

## Palantir Blueprint Focus e uso accessibile dei componenti del sistema di design

### Assegna un’etichetta a ogni controllo nativo

InputGroup riceve un nome accessibile per la ricerca e un id per il campo di revisione associato alla sua etichetta. HTMLSelect ha un proprio nome, Switch mostra etichette visibili e ogni record si apre tramite un vero pulsante. Usa queste API della libreria invece di sostituire i controlli con div stilizzati.

### Mantieni visibile lo stile del focus

Il riferimento del pacchetto include una larghezza del focus di 2px e un offset di 2px. Mantieni visibile l’indicatore di focus sulle Card e sulle righe selezionate. Chi usa la tastiera deve poter raggiungere filtri, pulsanti delle righe e modulo di revisione nell’ordine del documento. Il paragrafo di stato e il Callout di successo dell’esempio comunicano i risultati senza spostare il lettore a un’altra schermata.

## Palantir Blueprint Installazione e confini dell’applicazione del sistema di design

### Esegui lo stesso codice sorgente dell’esempio

Di seguito sono forniti il sorgente completo di App e l’CSS dell’applicazione. App viene montato nell’elemento root generato dal modello React di Vite. L’installazione del pacchetto core con versione bloccata fornisce i componenti nativi e l’CSS del pacchetto; l’esempio basato su testo non richiede risorse di design nascoste.

### Estendi la revisione con un contratto di persistenza reale

Una revisione in produzione richiede identificatori dei record, autorizzazioni, stato in sospeso e una risposta di errore. Gestisci questi aspetti nell’applicazione mantenendo le API FormGroup e intent di Blueprint. Non annunciare il salvataggio come riuscito prima che il servizio lo abbia accettato: l’esempio locale evita deliberatamente di dichiararlo.

## Palantir Blueprint Esempi di componenti del sistema di design

### main.jsx — applicazione completa per la revisione dei dataset

Una composizione nativa completa con filtri, selezione, densità, tema, convalida dei campi e risultato della revisione locale.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Button,
  Card,
  Callout,
  FormGroup,
  HTMLSelect,
  HTMLTable,
  InputGroup,
  Switch,
  Tag,
} from "@blueprintjs/core";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./blueprint.css";
const initial = [
  {
    id: "D-1042",
    name: "Harbor sensors",
    type: "Telemetry",
    rows: "18,420",
    owner: "Maya",
    status: "Reviewed",
  },
  {
    id: "D-1043",
    name: "Transit stops",
    type: "Reference",
    rows: "842",
    owner: "Alex",
    status: "Needs review",
  },
  {
    id: "D-1044",
    name: "Water samples",
    type: "Field survey",
    rows: "2,608",
    owner: "Sam",
    status: "Reviewed",
  },
  {
    id: "D-1045",
    name: "Street survey",
    type: "Field survey",
    rows: "4,120",
    owner: "Lee",
    status: "Needs review",
  },
];
function App() {
  const [dark, setDark] = useState(false),
    [compact, setCompact] = useState(false),
    [query, setQuery] = useState(""),
    [rows, setRows] = useState(initial),
    [selected, setSelected] = useState(initial[1]),
    [note, setNote] = useState(""),
    [notice, setNotice] = useState(""),
    [error, setError] = useState(false),
    [type, setType] = useState("All");
  const visible = rows.filter(
    (r) =>
      r.name.toLowerCase().includes(query.toLowerCase()) &&
      (type === "All" || r.type === type),
  );
  function review(e) {
    e.preventDefault();
    if (!note.trim()) {
      setError(true);
      document.getElementById("review-note").focus();
      return;
    }
    const updated = { ...selected, status: "Reviewed" };
    setRows(rows.map((r) => (r.id === selected.id ? updated : r)));
    setSelected(updated);
    setNotice(
      `${selected.name} marked reviewed in this local example. No data was sent.`,
    );
    setNote("");
    setError(false);
  }
  return (
    <main className={"specimen " + (dark ? "bp6-dark" : "")}>
      <header>
        <div>
          <span className="eyebrow">BLUEPRINT · DATA WORKSPACE</span>
          <h1 className="bp6-heading">Dataset review</h1>
          <p className="bp6-text-muted">
            Inspect a record and attach a review note.
          </p>
        </div>
        <Switch
          label="Dark theme"
          checked={dark}
          onChange={(e) => setDark(e.target.checked)}
        />
      </header>
      <div className="workbench">
        <Card className="collection">
          <div className="toolbar">
            <InputGroup
              aria-label="Find a dataset"
              placeholder="Find a dataset…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            <HTMLSelect
              aria-label="Dataset type"
              value={type}
              onChange={(e) => setType(e.target.value)}
              options={["All", "Telemetry", "Reference", "Field survey"]}
            />
            <Switch
              label="Compact rows"
              checked={compact}
              onChange={(e) => setCompact(e.target.checked)}
            />
          </div>
          <p className="bp6-text-small bp6-text-muted" role="status">
            {visible.length} matching datasets
          </p>
          <div className="table-scroll">
            <HTMLTable
              striped
              interactive
              condensed={compact}
              style={{ width: "100%" }}
            >
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Records</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {visible.map((r) => (
                  <tr
                    key={r.id}
                    className={selected.id === r.id ? "selected" : ""}
                  >
                    <td>
                      <Button
                        variant="minimal"
                        onClick={() => {
                          setSelected(r);
                          setError(false);
                          setNote("");
                        }}
                        text={r.name}
                      />
                      <div className="bp6-text-small bp6-text-muted">
                        {r.id} · {r.type}
                      </div>
                    </td>
                    <td className="numeric">{r.rows}</td>
                    <td>
                      <Tag
                        minimal
                        intent={r.status === "Reviewed" ? "success" : "warning"}
                      >
                        {r.status}
                      </Tag>
                    </td>
                  </tr>
                ))}
              </tbody>
            </HTMLTable>
          </div>
          {!visible.length && (
            <Callout title="No matching datasets">
              Clear the search or choose a different dataset type.
              <Button
                variant="minimal"
                onClick={() => {
                  setQuery("");
                  setType("All");
                }}
              >
                Clear filters
              </Button>
            </Callout>
          )}
        </Card>
        <Card className="inspector">
          <span className="eyebrow">SELECTED DATASET</span>
          <h2 className="bp6-heading">{selected.name}</h2>
          <dl>
            <dt>Dataset ID</dt>
            <dd>
              <code>{selected.id}</code>
            </dd>
            <dt>Owner</dt>
            <dd>{selected.owner}</dd>
            <dt>Type</dt>
            <dd>{selected.type}</dd>
            <dt>Records</dt>
            <dd>{selected.rows}</dd>
          </dl>
          <form onSubmit={review}>
            <FormGroup
              label="Review note"
              labelFor="review-note"
              intent={error ? "danger" : "none"}
              helperText={
                error
                  ? "Add a note describing what you checked."
                  : "A short note keeps the decision understandable."
              }
            >
              <InputGroup
                id="review-note"
                value={note}
                intent={error ? "danger" : "none"}
                aria-invalid={error}
                onChange={(e) => {
                  setNote(e.target.value);
                  setError(false);
                }}
              />
            </FormGroup>
            <Button intent="primary" type="submit" fill>
              Mark reviewed locally
            </Button>
          </form>
          <p className="bp6-text-small bp6-text-muted">
            Selection, filters and review notes exist only in this preview.
          </p>
        </Card>
      </div>
      {notice && (
        <Callout intent="success" role="status">
          {notice}
        </Callout>
      )}
      <footer>
        Native Blueprint 6.21.0 · HTMLTable, Card, FormGroup, InputGroup,
        Switch, Tag and Callout.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Riferimento del codice

- Salva questo file come src/main.jsx e il prossimo esempio come src/blueprint.css.

- La chiamata createRoot usa l’elemento root di index.html nel modello React di Vite.

### blueprint.css — layout adattabile dell’area di lavoro

Le regole di layout dell’applicazione affiancano CSS nativo importato. Il breakpoint di 800px e l’ispettore da 260px sono scelte esplicite di questo esempio.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.specimen {
  padding: 24px;
  background: #f6f7f9;
  color: #1c2127;
  font-size: 14px;
}
.specimen.bp6-dark {
  background: #252a31;
  color: #f6f7f9;
}
.specimen header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bp-typography-color-muted);
}
h1.bp6-heading {
  margin: 8px 0;
  font-size: 28px;
}
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
}
.collection,
.inspector {
  min-width: 0;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.toolbar > .bp6-input-group {
  flex: 1;
  min-width: 150px;
}
.toolbar .bp6-control {
  margin: 0;
}
.table-scroll {
  overflow: auto;
}
table td {
  vertical-align: middle !important;
}
.numeric {
  font-variant-numeric: tabular-nums;
}
tr.selected td {
  background: #2d72d20d !important;
}
.inspector h2 {
  font-size: 20px;
  margin-top: 12px;
}
.inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.inspector dt {
  color: var(--bp-typography-color-muted);
}
.inspector dd {
  margin: 0;
}
.inspector form {
  border-top: 1px solid var(--bp-surface-border-color-default);
  padding-top: 20px;
}
.inspector p {
  margin: 16px 0 0;
}
.specimen > .bp6-callout {
  margin-top: 20px;
}
.specimen footer {
  font-size: 11px;
  margin-top: 24px;
  color: var(--bp-typography-color-muted);
}
@media (max-width: 800px) {
  .workbench {
    grid-template-columns: 1fr;
  }
  .specimen {
    padding: 16px;
  }
  .specimen header {
    align-items: start;
  }
  .toolbar {
    gap: 16px;
  }
  h1.bp6-heading {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

.bp6-dark .eyebrow,
.bp6-dark .inspector dt,
.bp6-dark footer {
  color: #abb3bf;
}
```

Riferimento del codice

- La classe bp6-dark attiva il tema della libreria; lo sfondo dell’area di anteprima è CSS dell’applicazione.

## Palantir Blueprint Configurazione dell’agent del sistema di design

### Punto di partenza per l’implementazione

L’anteprima nativa è stata creata ed eseguita con React 18.3.1 e Blueprint 6.21.0. Usa una versione di Node.js supportata dalla versione di Vite scelta. Entrambi i file dell’applicazione sono forniti sopra.

```
npm create vite@latest blueprint-review -- --template react
cd blueprint-review
npm install
npm install react@18.3.1 react-dom@18.3.1 @blueprintjs/core@6.21.0
# Replace src/main.jsx and add src/blueprint.css using the complete examples.
npm run dev
```

### Un prompt per il tuo progetto

```
Usa Blueprint 6.21.0 per creare un’area di lavoro per la revisione dei dataset. Consulta i token forniti e l’esempio completo React/CSS. Mantieni HTMLTable nativo, InputGroup/FormGroup con etichette, Tag di stato e selezione delle righe raggiungibile da tastiera. Mantieni indipendenti lo stato dei filtri, della selezione, della densità, dell’aspetto e della revisione. Aggiungi il servizio di salvataggio reale solo quando viene fornito il relativo API; mostra gli stati in sospeso e gli errori senza perdere la nota. Mantieni l’ispettore adattabile e gli stati di focus visibili.
```

## Palantir Blueprint Fonti e ambito del sistema di design

Guida dell’applicazione OpenDesign a Blueprint 6.21.0, con un esempio originale per la revisione dei dataset che esegue il pacchetto React effettivo. I nomi dei dataset e i risultati della revisione sono dati di esempio locali. Il layout dell’area di lavoro è codice dell’applicazione; i valori di riferimento provengono dal pacchetto pubblicato con versione specifica.

- Documentazione dei componenti di Blueprint Contratti ed esempi dei componenti nativi.

- Token di design pubblicati nella versione 6.21.0 Valori esatti, associati alla versione, usati nelle tabelle di riferimento.

- Repository del codice sorgente di Blueprint Implementazione, cronologia delle versioni del pacchetto e licenza Apache.

## Palantir Blueprint Risorse correlate del sistema di design

### Pega Bolt

Esplora il sistema di contenuti di Bolt con marchio Pega: tipografia fluida, spaziature orizzontali e verticali separate e composizione di un accordion Twig per una pagina editoriale di risorse.

### Porsche sistema di design

Esplora Porsche Design System v4 con spaziature fluide, schemi cromatici CSS, tipografia Porsche Next e un configuratore a due opzioni. Il riferimento include espressioni reali dei token e un entry point Vite completo che usa gli eventi attuali di segmented-control.

### Red Hat PatternFly

Usa PatternFly per un’area di lavoro operativa: riferimenti semantici ai token, schede di servizio selezionabili, selezione multipla a tre stati, revisione dell’ambito e codice nativo completo in React.


- [Riferimento per l’implementazione](https://blueprintjs.com/docs/#core/components/html-table)
- [Fonte](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Fonte](https://blueprintjs.com/docs/#core/components)
- [Riferimento del codice](https://blueprintjs.com/docs/#core/components)
- [Riferimento del codice](https://blueprintjs.com/docs/#core/typography)
- [Documentazione dei componenti di Blueprint Contratti ed esempi dei componenti nativi.](https://blueprintjs.com/docs/#core/components)
- [Token di design pubblicati nella versione 6.21.0 Valori esatti, associati alla versione, usati nelle tabelle di riferimento.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Repository del codice sorgente di Blueprint Implementazione, cronologia delle versioni del pacchetto e licenza Apache.](https://github.com/palantir/blueprint)