# Sistema de diseño Palantir Blueprint
## Vista previa de la interfaz del sistema de diseño Palantir Blueprint
Filtra por nombre o tipo, selecciona un conjunto de datos, cambia la densidad de las filas y la apariencia, y valida una nota de revisión antes de actualizar el estado local.
## Referencia de diseño del sistema de diseño Palantir Blueprint
Blueprint core 6.21.0 publicado CSS y componentes nativos React. Estos son valores seleccionados de tokens del tema claro; usa el tema oscuro de la biblioteca en lugar de invertirlos manualmente. Las decisiones de diseño de la aplicación se identifican en el ejemplo CSS.
### Colores de intención y estados de interacción
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bp-intent-primary-rest | #2d72d2 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-primary-hover | #215db0 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-primary-active | #184a90 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-primary-disabled | #4c90f0 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-primary-foreground | #ffffff | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-success-rest | #238551 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-success-hover | #1c6e42 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-success-active | #165a36 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-success-disabled | #32a467 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-success-foreground | #ffffff | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-warning-rest | #c87619 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-warning-hover | #935610 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-warning-active | #77450d | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-warning-disabled | #ec9a3c | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-warning-foreground | #111418 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-danger-rest | #cd4246 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-danger-hover | #ac2f33 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-danger-active | #8e292c | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-danger-disabled | #e76a6e | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-intent-danger-foreground | #ffffff | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
### Escala tipográfica y pesos
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bp-typography-size-body-x-small | 10px | Escala para texto del cuerpo, etiquetas y datos complementarios; no conviertas los metadatos pequeños en el tamaño principal de lectura. |
| --bp-typography-size-body-small | 12px | Escala para texto del cuerpo, etiquetas y datos complementarios; no conviertas los metadatos pequeños en el tamaño principal de lectura. |
| --bp-typography-size-body-medium | 14px | Escala para texto del cuerpo, etiquetas y datos complementarios; no conviertas los metadatos pequeños en el tamaño principal de lectura. |
| --bp-typography-size-body-large | 16px | Escala para texto del cuerpo, etiquetas y datos complementarios; no conviertas los metadatos pequeños en el tamaño principal de lectura. |
| --bp-typography-size-heading-small | 16px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-heading-medium | 20px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-heading-large | 24px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-heading-x-large | 28px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-heading-display | 46px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-code-small | 12px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-code-medium | 13px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-size-code-large | 14px | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-weight-default | 400 | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-weight-bold | 600 | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-line-height-default | 1.28581 | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
| --bp-typography-line-height-large | 1.5 | Aplica el rol en el nivel jerárquico indicado; las cifras de la tabla también pueden usar numerales tabulares. |
### Superficies, bordes y texto semántico
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bp-surface-border-color-default | #5f6b7c1f | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-border-color-strong | #5f6b7c40 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-border-width | 1px | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-border-radius | 4px | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-spacing | 4px | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-background-color-default-rest | #ffffff | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-surface-background-color-default-hover | #f6f7f9 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-typography-color-default-rest | #1c2127 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-typography-color-muted | #5f6b7c | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
### Foco y movimiento
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bp-emphasis-transition-duration | 100ms | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-focus-color | #2d72d2 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-focus-width | 2px | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-focus-offset | 2px | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
| --bp-emphasis-motion-reduced | 0 | Usa el rol semántico indicado; mantén juntos el estado y las combinaciones de color del primer plano. |
### Componentes nativos utilizados en el espacio de trabajo del conjunto de datos
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| HTMLTable | striped · interactive · condensed | Tabla semántica nativa; la propiedad condensed cambia la densidad sin modificar los datos. |
| InputGroup | value · onChange · intent | Búsqueda controlada y nota de revisión; la validación de la aplicación establece la intención de peligro. |
| FormGroup | labelFor · helperText · intent | Asocia una etiqueta visible al campo y explica por qué la nota no es válida. |
| HTMLSelect | options · value · onChange | Un selector nativo para el pequeño conjunto fijo de tipos de conjuntos de datos. |
| Tag | minimal · intent | Combina el texto de estado con el tratamiento de éxito o advertencia. |
| Button | intent="primary" · type="submit" | Confirma la revisión local mediante un formulario real; los botones de selección siguen siendo secundarios. |
| Switch | checked · onChange | Controles independientes de apariencia y densidad. |
| Callout | intent · title | Explica que no hay resultados o comunica el desenlace; no transmitas el estado solo mediante el color. |
## Guía completa del sistema de diseño Palantir Blueprint
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
## Espacio de trabajo de sistema de diseño Palantir Blueprint basado en datos
### Controles densos con un orden de lectura explícito
> Blueprint resulta útil cuando una pantalla combina una colección, filtros, estados y acciones contextuales. El ejemplo coloca la tabla del conjunto de datos a la izquierda y el registro seleccionado a la derecha. Así, se pueden comparar registros sin abrir una página nueva para cada uno. El inspector contiene la nota de revisión editable; la tabla sirve para explorar los datos.
### Usa el contrato del paquete v6
El ejemplo se compila con @blueprintjs/core 6.21.0. Su espacio de nombres CSS es bp6 y sus tokens semánticos publicados empiezan por --bp-. Una hoja de estilos antigua de bp5 no sustituye los componentes CSS de v6. Importa la hoja de estilos del paquete una sola vez en el punto de entrada de la aplicación y luego limita las reglas de diseño de la aplicación a una clase independiente.
## Intenciones y roles de color del sistema de diseño Palantir Blueprint
### Separa el estado del registro de su selección
Una etiqueta de advertencia indica que el conjunto de datos requiere revisión; la fila con el color principal indica que está seleccionada. Son significados independientes. Al marcar una fila como revisada, cambian su etiqueta y su intención a éxito, mientras que la selección sigue en el mismo conjunto de datos. La tabla conserva el texto de cada estado para que el color no transmita todo el significado.
### Mantén el modo oscuro en el límite del componente
El ejemplo añade bp6-dark a su contenedor para que los componentes nativos apliquen sus estilos oscuros. Los valores del tema claro anteriores son una referencia, no una indicación para sobrescribir cada componente. Al introducir un portal, como Dialog, asegúrate de que su contenido renderizado reciba el mismo contexto de tema; un contenedor que no incluya el portal no es suficiente.
## Tipografía del sistema de diseño Palantir Blueprint para registros y metadatos
### Lee la escala de texto del cuerpo antes de elegir los encabezados
Los tamaños publicados para el texto del cuerpo incluyen 10, 12, 14 y 16px; el tamaño medio es 14px. Los nombres de los conjuntos de datos mantienen el nivel principal de lectura. Los ID y los tipos de registro usan texto complementario, mientras que los recuentos numéricos emplean numerales tabulares para que sea fácil comparar los valores cuando cambian. La guía no recomienda 10px para el contenido principal.
### Da al inspector una jerarquía compacta
El inspector usa un encabezado de 20px y una lista de definiciones para el ID, el propietario, el tipo y el recuento. Las etiquetas y los valores mantienen una alineación estable en dos columnas. La nota de revisión aparece después de esos datos, separada por una línea, para que no se confunda la acción con un filtro de la tabla.
## Tabla, filtros e inspector del sistema de diseño Palantir Blueprint
### Conserva la semántica de la tabla intacta
HTMLTable proporciona una tabla nativa con los estilos de Blueprint. Los botones de la primera celda permiten seleccionar registros y siguen siendo accesibles con el teclado; el ejemplo no depende exclusivamente de un controlador de fila que solo funcione con el puntero para permitir la selección. La propiedad interactive aplica estilos de resaltado al pasar el cursor sobre las filas, y condensed modifica la densidad de forma independiente de los filtros.
### Haz visible el flujo de datos controlado
La búsqueda y el selector de tipo obtienen una colección visible a partir de las mismas filas locales. El registro seleccionado puede seguir en el panel de inspección aunque un filtro oculte su fila; así, una nota de revisión escrita no desaparece solo porque haya cambiado un filtro de la colección. El software de producción debería decidir y documentar esta relación, en lugar de descartar cambios sin avisar.
1. Busca un conjunto de datos por el nombre que se muestra.
2. Acota la misma colección con el selector de tipo.
3. Selecciona el botón del nombre para cargar el panel de inspección.
4. Escribe una nota de revisión y envíala para registrar la revisión local.
## Espaciado, superficies y densidad del sistema de diseño Palantir Blueprint
### Usa una unidad menor sin reducir demasiado todos los espacios
El token publicado para el espaciado entre superficies es de 4px. El espacio de trabajo usa múltiplos a nivel de aplicación: 12px entre los controles de filtro, 20px entre la colección y el panel de inspección, y 24px alrededor del ejemplo para escritorio. Son decisiones de composición que se muestran en CSS. El token de radio de borde de 4px mantiene moderadas las formas de los controles y las superficies.
### Adapta la composición antes de sacrificar las etiquetas
En el punto de quiebre de aplicación de 800px del ejemplo, el panel de inspección pasa debajo de la colección. Los filtros se ajustan a varias líneas, el relleno principal pasa a 16px y, cuando es necesario, la tabla dispone de su propio contenedor con desplazamiento horizontal. Este punto de quiebre pertenece a este espacio de trabajo; no se presenta como un punto de quiebre oficial y universal de Blueprint.
## Revisión y estados vacíos del sistema de diseño Palantir Blueprint
### La validación forma parte de la operación de revisión
Al enviar una nota vacía, se establece la intención danger en InputGroup y FormGroup, se añade un texto de ayuda explicativo y el foco pasa al campo. Al escribir texto, se borra el error. Un envío válido solo modifica el registro local seleccionado, borra la nota y muestra un Callout de éxito que indica explícitamente que no se han enviado datos.
### Ofrece una opción de recuperación junto a la colección vacía
El Callout de que no hay resultados ofrece la opción Borrar filtros. Esta restablece tanto la consulta de búsqueda como el selector de tipo para que vuelva a aparecer la colección completa. No elimina filas ni modifica el panel de inspección. Los siguientes límites entre estados son intencionados:
- La selección cambia el registro inspeccionado, no su estado de revisión.
- El modo compacto cambia la densidad, no el orden de los registros.
- El tema cambia la apariencia visual, no los filtros activos.
- Una revisión local completada modifica un registro y anuncia el resultado.
## Enfoque y uso accesible de componentes del sistema de diseño Palantir Blueprint
### Etiqueta cada control nativo
InputGroup recibe un nombre accesible para la búsqueda y un id para el campo de revisión etiquetado. HTMLSelect tiene su propio nombre, Switch muestra etiquetas visibles y cada registro se abre con un botón real. Usa estas API de la biblioteca en lugar de sustituir los controles por elementos div con estilos.
### Mantén visible el indicador de foco
La referencia del paquete incluye un ancho de foco de 2px y un desplazamiento de 2px. Mantén visible el indicador de foco sobre Cards y las filas seleccionadas. Las personas que usan el teclado deberían poder recorrer los filtros, los botones de fila y el formulario de revisión en el orden del documento. El párrafo de estado y el Callout de éxito del ejemplo comunican los resultados sin llevar a quien lee a otra pantalla.
## Instalación y límites de la aplicación del sistema de diseño Palantir Blueprint
### Ejecuta el mismo código fuente que el ejemplo
A continuación se proporcionan el código completo de App y la aplicación CSS. App se monta en el elemento raíz que genera la plantilla de Vite React. Al instalar el paquete principal fijado a una versión, se obtienen los componentes nativos y el paquete CSS; el ejemplo basado en texto no requiere ningún recurso de diseño oculto.
### Amplía la revisión con un contrato de persistencia real
Una revisión en producción necesita identificadores de registro, permisos, un estado pendiente y una respuesta de error. Mantén esas responsabilidades en la aplicación y conserva las API FormGroup y intent de Blueprint. No anuncies que se guardó correctamente antes de que el servicio lo confirme; el ejemplo local no afirma que lo haga.
## Ejemplos de componentes del sistema de diseño Palantir Blueprint
### main.jsx — aplicación completa de revisión de conjuntos de datos
Una composición completa de componentes nativos con filtrado, selección, densidad, tema, validación de campos y un resultado de revisión 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();
```
Referencia de código
- Guarda este archivo como src/main.jsx y el siguiente ejemplo como src/blueprint.css.
- La llamada a createRoot usa el elemento raíz de index.html de Vite React.
### blueprint.css — composición adaptable del espacio de trabajo
Las reglas de composición de la aplicación complementan los componentes nativos importados de CSS. El punto de quiebre de 800px y el panel de inspección de 260px son decisiones explícitas de este ejemplo.
```
* {
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;
}
```
Referencia de código
- La clase bp6-dark activa el tema de la biblioteca; el fondo del lienzo del ejemplo forma parte del código de aplicación CSS.
## Configuración del agente de IA para el sistema de diseño Palantir Blueprint
### Punto de partida para la implementación
La vista previa nativa se compiló y ejecutó con React 18.3.1 y Blueprint 6.21.0. Usa una versión de Node.js compatible con la versión de Vite que hayas elegido. Ambos archivos de la aplicación se proporcionan arriba.
```
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
```
### Una instrucción para tu proyecto
```
Usa Blueprint 6.21.0 para crear un espacio de trabajo de revisión de conjuntos de datos. Consulta los tokens proporcionados y el ejemplo completo React/CSS. Conserva HTMLTable nativo, InputGroup/FormGroup con etiquetas, Tags de estado y selección de filas accesible con el teclado. Mantén independientes los estados de filtro, selección, densidad, apariencia y revisión. Añade el servicio de guardado real solo cuando se proporcione su API; muestra las respuestas de operación pendiente y error sin perder la nota. Conserva el panel de inspección adaptable y los indicadores de foco visibles.
```
## Fuentes y alcance del sistema de diseño Palantir Blueprint
Guía de aplicación de OpenDesign para Blueprint 6.21.0, con un ejemplo original de revisión de conjuntos de datos que ejecuta el paquete React real. Los nombres de conjuntos de datos y los resultados de revisión son datos de ejemplo locales. La composición del espacio de trabajo es código de aplicación; los valores de referencia proceden del paquete publicado y versionado.
- Documentación de componentes de Blueprint Contratos y ejemplos de componentes nativos.
- Tokens de diseño publicados en la versión 6.21.0 Valores exactos y versionados que se usan en las tablas de referencia.
- Repositorio de código fuente de Blueprint Implementación, historial de versiones del paquete y licencia Apache.
## Palantir Blueprint Recursos relacionados del sistema de diseño
### Pega Bolt
Explora el sistema de contenido de Bolt con la marca Pega: tipografía fluida, espaciado horizontal y vertical por separado, y una composición de acordeón en Twig para una página editorial de recursos.
### Porsche sistema de diseño
Explora Porsche Design System v4 con espaciado fluido, esquemas de color CSS, tipografía Porsche Next y un configurador con dos opciones. La referencia incluye expresiones reales de tokens y una entrada Vite completa que usa los eventos actuales de controles segmentados.
### Red Hat PatternFly
Usa PatternFly para crear un espacio de trabajo de operaciones: referencias semánticas a tokens, tarjetas de servicio seleccionables, selección masiva de tres estados, revisión del alcance y código nativo completo de React.
- [Referencia de implementación](https://blueprintjs.com/docs/#core/components/html-table)
- [Fuente](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Fuente](https://blueprintjs.com/docs/#core/components)
- [Referencia de código](https://blueprintjs.com/docs/#core/components)
- [Referencia de código](https://blueprintjs.com/docs/#core/typography)
- [Documentación de componentes de Blueprint Contratos y ejemplos de componentes nativos.](https://blueprintjs.com/docs/#core/components)
- [Tokens de diseño publicados en la versión 6.21.0 Valores exactos y versionados que se usan en las tablas de referencia.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Repositorio de código fuente de Blueprint Implementación, historial de versiones del paquete y licencia Apache.](https://github.com/palantir/blueprint)