# sistema de design Palantir Blueprint
## Prévia da interface do sistema de design Palantir Blueprint
Filtre por nome ou tipo, selecione um conjunto de dados, altere a densidade das linhas, mude a aparência e valide uma nota de revisão antes de atualizar o status local.
## Referência de design do sistema de design Palantir Blueprint
Blueprint core 6.21.0, publicado CSS, e componentes nativos React. Estes são valores selecionados dos tokens do tema claro; use o tema escuro da biblioteca em vez de invertê-los manualmente. As escolhas de layout do aplicativo estão identificadas no exemplo CSS.
### Cores de intenção e estados de interação
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bp-intent-primary-rest | #2d72d2 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-primary-hover | #215db0 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-primary-active | #184a90 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-primary-disabled | #4c90f0 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-primary-foreground | #ffffff | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-success-rest | #238551 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-success-hover | #1c6e42 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-success-active | #165a36 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-success-disabled | #32a467 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-success-foreground | #ffffff | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-warning-rest | #c87619 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-warning-hover | #935610 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-warning-active | #77450d | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-warning-disabled | #ec9a3c | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-warning-foreground | #111418 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-danger-rest | #cd4246 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-danger-hover | #ac2f33 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-danger-active | #8e292c | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-danger-disabled | #e76a6e | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-intent-danger-foreground | #ffffff | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
### Escala e pesos tipográficos
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bp-typography-size-body-x-small | 10px | Escalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura. |
| --bp-typography-size-body-small | 12px | Escalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura. |
| --bp-typography-size-body-medium | 14px | Escalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura. |
| --bp-typography-size-body-large | 16px | Escalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura. |
| --bp-typography-size-heading-small | 16px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-heading-medium | 20px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-heading-large | 24px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-heading-x-large | 28px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-heading-display | 46px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-code-small | 12px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-code-medium | 13px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-size-code-large | 14px | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-weight-default | 400 | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-weight-bold | 600 | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-line-height-default | 1.28581 | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
| --bp-typography-line-height-large | 1.5 | Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares. |
### Superfícies, bordas e texto semântico
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bp-surface-border-color-default | #5f6b7c1f | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-border-color-strong | #5f6b7c40 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-border-width | 1px | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-border-radius | 4px | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-spacing | 4px | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-background-color-default-rest | #ffffff | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-surface-background-color-default-hover | #f6f7f9 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-typography-color-default-rest | #1c2127 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-typography-color-muted | #5f6b7c | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
### Foco e movimento
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --bp-emphasis-transition-duration | 100ms | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-focus-color | #2d72d2 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-focus-width | 2px | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-focus-offset | 2px | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
| --bp-emphasis-motion-reduced | 0 | Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano. |
### Componentes nativos usados na área de trabalho do conjunto de dados
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| HTMLTable | striped · interactive · condensed | Tabela semântica nativa; a propriedade condensed altera a densidade sem mudar os dados. |
| InputGroup | value · onChange · intent | Busca controlada e nota de revisão; a validação do aplicativo define a intenção danger. |
| FormGroup | labelFor · helperText · intent | Associe um rótulo visível ao campo e explique por que a nota é inválida. |
| HTMLSelect | options · value · onChange | Um select nativo para o conjunto pequeno e fixo de tipos de conjunto de dados. |
| Tag | minimal · intent | Combine o texto de status com o estilo success ou warning. |
| Button | intent="primary" · type="submit" | Confirme a revisão local por meio de um formulário real; os botões de seleção continuam sendo secundários. |
| Switch | checked · onChange | Controles independentes de aparência e densidade. |
| Callout | intent · title | Explique a ausência de resultados ou o desfecho; não comunique o status apenas pela cor. |
## Guia completo do sistema de design Palantir Blueprint
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.
## Área de trabalho com foco em dados do sistema de design Palantir Blueprint
### Controles compactos com uma ordem de leitura explícita
> O Blueprint é útil quando uma tela combina uma coleção, filtros, status e ações contextuais. O exemplo mantém a tabela do conjunto de dados à esquerda e o registro selecionado à direita. Assim, é possível comparar registros sem abrir uma nova página para cada um. O painel de inspeção contém a nota de revisão editável; a tabela permanece como uma superfície de consulta rápida.
### Use o contrato do pacote v6
O exemplo é compilado com @blueprintjs/core 6.21.0. O namespace CSS é bp6 e seus tokens semânticos publicados começam com --bp-. Uma folha de estilos bp5 mais antiga não substitui os componentes CSS da v6. Importe a folha de estilos do pacote uma única vez na entrada do aplicativo e, em seguida, restrinja as regras de layout do aplicativo a uma classe separada.
## Intenção e funções das cores do sistema de design Palantir Blueprint
### Mantenha o status do registro separado da seleção
Uma Tag warning indica que o conjunto de dados precisa de revisão; a linha com tonalidade primária indica que ele está selecionado. Esses significados são independentes. Marcar uma linha como revisada altera seu rótulo e sua intenção para success, enquanto a seleção permanece no mesmo conjunto de dados. A tabela mantém o texto de cada status para que a cor não seja o único meio de transmitir o significado.
### Mantenha o modo escuro no limite do componente
O exemplo adiciona bp6-dark ao elemento contêiner, permitindo que os componentes nativos apliquem seus estilos escuros. Os valores do tema claro acima são uma referência, não uma instrução para sobrescrever todos os componentes. Ao introduzir um portal, como Dialog, garanta que o conteúdo renderizado receba o mesmo contexto de tema; um contêiner que não englobe o portal não é suficiente.
## Tipografia do sistema de design Palantir Blueprint para registros e metadados
### Leia a escala do texto de corpo antes de escolher os títulos
Os tamanhos publicados para o texto de corpo incluem 10, 12, 14 e 16px; o tamanho médio é 14px. Os nomes dos conjuntos de dados permanecem no nível principal de leitura. IDs e tipos de registro usam texto auxiliar, enquanto as contagens numéricas usam algarismos tabulares, facilitando a comparação de valores que mudam. O guia não recomenda 10px para o conteúdo principal.
### Crie uma hierarquia compacta no painel de inspeção
O painel de inspeção usa um título de 20px e uma lista de definições para ID, responsável, tipo e contagem. Rótulos e valores compartilham um alinhamento estável em duas colunas. A nota de revisão vem depois desses dados, separada por uma linha, para que a ação não seja confundida com um filtro da tabela.
## Tabela, filtros e painel de inspeção do sistema de design Palantir Blueprint
### Preserve a semântica da tabela
HTMLTable fornece uma tabela nativa com o estilo do Blueprint. Os botões na primeira célula selecionam registros e continuam acessíveis pelo teclado; o exemplo não depende de um manipulador de linha acionado apenas pelo ponteiro como único meio de seleção. A propriedade interactive aplica estilo de realce ao passar o cursor sobre as linhas, e condensed alterna a densidade independentemente da filtragem.
### Deixe visível o fluxo controlado de dados
A busca e o seletor de tipo derivam uma coleção visível das mesmas linhas locais. O registro selecionado pode continuar no painel de inspeção mesmo quando um filtro oculta sua linha; isso evita que uma nota de revisão digitada desapareça apenas porque o filtro da coleção mudou. O software de produção deve decidir e documentar essa relação, em vez de descartar edições silenciosamente.
1. Encontre um conjunto de dados pelo nome exibido.
2. Restrinja a mesma coleção com o seletor de tipo.
3. Selecione o botão do nome para carregar o painel de inspeção.
4. Digite uma nota de revisão e envie a revisão local.
## Espaçamento, superfícies e densidade do sistema de design Palantir Blueprint
### Use uma unidade menor sem reduzir demais todos os espaços
O token publicado de espaçamento entre superfícies é 4px. A bancada usa múltiplos definidos pela aplicação: 12px entre os controles de filtro, 20px entre a coleção e o inspetor e 24px ao redor do exemplo para desktop. Essas são decisões de composição mostradas em CSS. O token de raio de borda de 4px mantém a geometria dos controles e das superfícies discreta.
### Ajuste o layout antes de sacrificar os rótulos
No ponto de quebra de 800px definido para a aplicação de exemplo, o inspetor passa para baixo da coleção. Os filtros passam para a linha seguinte, o preenchimento principal muda para 16px e, quando necessário, a tabela recebe seu próprio contêiner com rolagem horizontal. Esse ponto de quebra pertence a esta bancada; ele não é apresentado como um ponto de quebra oficial e universal do Blueprint.
## Revisão e estados vazios do Sistema de Design Palantir Blueprint
### A validação faz parte da operação de revisão
Ao enviar uma nota vazia, o InputGroup e o FormGroup recebem a intenção de erro, é exibido um texto auxiliar explicativo e o foco vai para o campo. Ao inserir texto, o erro é removido. Um envio válido altera apenas o registro local selecionado, limpa a nota e exibe um Callout de sucesso que informa explicitamente que nenhum dado foi enviado.
### Mantenha a recuperação próxima da coleção vazia
O Callout de nenhum resultado oferece a opção Limpar filtros. Ela redefine tanto a consulta de pesquisa quanto o seletor de tipo, restaurando a coleção completa. Não exclui linhas nem altera o inspetor. Os seguintes limites entre estados são intencionais:
- A seleção altera o registro inspecionado, não seu status de revisão.
- O modo compacto altera a densidade, não a ordem dos registros.
- O tema altera a aparência visual, não os filtros atuais.
- Uma revisão local bem-sucedida altera um registro e anuncia o resultado.
## Foco e uso acessível de componentes do Sistema de Design Palantir Blueprint
### Rotule cada controle nativo
O InputGroup recebe um nome acessível para a pesquisa e um id para o campo de revisão rotulado. O HTMLSelect tem seu próprio nome, o Switch exibe rótulos visíveis e cada registro é aberto por um botão real. Use essas APIs da biblioteca em vez de substituir os controles por divs estilizadas.
### Mantenha o indicador de foco visível
A referência do pacote especifica uma largura de foco de 2px e um deslocamento de 2px. Mantenha o indicador de foco visível sobre Cards e linhas selecionadas. Usuários de teclado devem conseguir acessar os filtros, os botões das linhas e o formulário de revisão na ordem do documento. O parágrafo de status e o Callout de sucesso do exemplo comunicam os resultados sem levar a pessoa para outra tela.
## Instalação e limites da aplicação do Sistema de Design Palantir Blueprint
### Execute o mesmo código-fonte do exemplo
O código-fonte completo de App e o CSS da aplicação são fornecidos abaixo. App é montado no elemento raiz gerado pelo modelo do Vite React. A instalação do pacote principal fixado fornece os componentes nativos e o pacote CSS; o exemplo baseado em texto não requer nenhum recurso de design oculto.
### Amplie a revisão com um contrato real de persistência
Uma revisão em produção precisa de identificadores de registro, permissões, estado pendente e uma resposta de erro. Mantenha essas responsabilidades na aplicação e preserve as APIs FormGroup e de intenção do Blueprint. Não anuncie que o salvamento foi concluído antes de o serviço aceitá-lo; o exemplo local evita intencionalmente fazer essa afirmação.
## Exemplos de componentes do Sistema de Design Palantir Blueprint
### main.jsx — aplicação completa para revisão de conjuntos de dados
Uma composição totalmente nativa com filtragem, seleção, densidade, tema, validação de campo e resultado de revisão local.
```
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 (
{!visible.length && (
Clear the search or choose a different dataset type.
)}
SELECTED DATASET
{selected.name}
Dataset ID
{selected.id}
Owner
{selected.owner}
Type
{selected.type}
Records
{selected.rows}
Selection, filters and review notes exist only in this preview.
{notice && (
{notice}
)}
);
}
createRoot(document.getElementById("root")).render();
```
Referência de código
- Salve este arquivo como src/main.jsx e o próximo exemplo como src/blueprint.css.
- A chamada createRoot usa o elemento raiz de index.html do Vite React.
### blueprint.css — layout responsivo da bancada
As regras de layout da aplicação complementam o CSS nativo importado. O ponto de quebra de 800px e o inspetor de 260px são escolhas explícitas deste exemplo.
```
* {
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;
}
```
Referência de código
- A classe bp6-dark ativa o tema da biblioteca; o fundo da tela do exemplo é definido pela aplicação CSS.
## Configuração do agente de IA para o Sistema de Design Palantir Blueprint
### Ponto de partida para implementação
A prévia nativa foi empacotada e executada com React 18.3.1 e Blueprint 6.21.0. Use uma versão do Node.js compatível com a versão do Vite escolhida. Os dois arquivos da aplicação são fornecidos acima.
```
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
```
### Um prompt para seu projeto
```
Use Blueprint 6.21.0 para criar um espaço de trabalho de revisão de conjuntos de dados. Consulte os tokens fornecidos e o exemplo completo em React/CSS. Preserve HTMLTable nativo, InputGroup/FormGroup rotulados, Tags de status e seleção de linhas acessível por teclado. Mantenha independentes os estados de filtro, seleção, densidade, aparência e revisão. Adicione o serviço real de salvamento somente quando seu API for fornecido; mostre respostas pendentes e com falha sem perder a nota. Mantenha o inspetor responsivo e os estados de foco visíveis.
```
## Fontes e escopo do Sistema de Design Palantir Blueprint
OpenDesign: guia de aplicação para Blueprint 6.21.0, com um exemplo original de revisão de conjuntos de dados que executa o pacote React real. Os nomes dos conjuntos de dados e os resultados das revisões são dados de exemplo locais. O layout da bancada é código da aplicação; os valores de referência vêm do pacote publicado com versão definida.
- Documentação dos componentes do Blueprint Contratos e exemplos dos componentes nativos.
- Tokens de design publicados na versão 6.21.0 Valores exatos, associados à versão, usados nas tabelas de referência.
- Repositório do código-fonte do Blueprint Implementação, histórico de versões do pacote e licença Apache.
## Recursos relacionados ao Sistema de Design Palantir Blueprint
### Pega Bolt
Explore o sistema de conteúdo da Bolt com a identidade da Pega: tipografia fluida, espaçamentos horizontal e vertical separados e uma composição de acordeão Twig para uma página editorial de recursos.
### Porsche sistema de design
Explore Porsche Design System v4 com espaçamento fluido, esquemas de cores CSS, tipografia Porsche Next e um configurador com duas opções. A referência inclui expressões reais de tokens e uma entrada completa do Vite que usa os eventos atuais do controle segmentado.
### Red Hat PatternFly
Use PatternFly para criar um espaço de trabalho operacional: referências semânticas de tokens, cartões de serviço selecionáveis, seleção em massa com três estados, revisão do escopo e código nativo completo de React.
- [Referência de implementação](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)
- [Referência de código](https://blueprintjs.com/docs/#core/components)
- [Referência de código](https://blueprintjs.com/docs/#core/typography)
- [Documentação dos componentes do Blueprint Contratos e exemplos dos componentes nativos.](https://blueprintjs.com/docs/#core/components)
- [Tokens de design publicados na versão 6.21.0 Valores exatos, associados à versão, usados nas tabelas de referência.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Repositório do código-fonte do Blueprint Implementação, histórico de versões do pacote e licença Apache.](https://github.com/palantir/blueprint)