Blueprint

# Blueprint — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Palantir. "Blueprint" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Blueprint
**Owner:** Palantir
**Official documentation:** https://blueprintjs.com/
**Visual character:** Data-dense desktop seriousness: 2px corners, 10px grid, five intent colors, and tables that shrug at ten thousand rows.

---

## Summary

React-based UI toolkit for the web, optimized for building complex data-dense interfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 3 / Intent Primary | `#2d72d2` | `--blueprint-blue3` | Primary actions |
| Dark Gray 1 Text | `#1c2127` | `--blueprint-dark-gray1` | Primary text |
| Gray 1 | `#5f6b7c` | `--blueprint-gray1` | Secondary text |
| White | `#ffffff` | `--blueprint-white` | Surfaces |
| Light Gray 5 | `#f6f7f9` | `--blueprint-light-gray5` | App background |
| Light Gray 1 Border | `#d3d8de` | `--blueprint-light-gray1` | Borders |
| Red 3 / Danger | `#cd4246` | `--blueprint-red3` | Errors |
| Green 3 / Success | `#238551` | `--blueprint-green3` | Success |
| Orange 3 / Warning | `#c87619` | `--blueprint-orange3` | Warnings |

## Typography

- **Body:** System stack — weights 400, 600 — `-apple-system, 'BlinkMacSystemFont', 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif`
- **Mono:** Monaco — weights 400 — `monospace, Monaco, Menlo, Consolas`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `36px` | `40px` |
| h2 | `28px` | `32px` |
| h3 | `22px` | `25px` |
| body | `14px` | `18px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `10px (grid)`

Scale: `5px` · `10px` · `15px` · `20px` · `30px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `2px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| elevation-1 | `0 0 0 1px rgba(17,20,24,0.1), 0 1px 1px rgba(17,20,24,0.2)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms cubic-bezier(0.4, 1, 0.75, 0.9)` |

## Quick start (CSS)

```css
/* Blueprint — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://blueprintjs.com/ */

:root {
  /* Color */
  --blueprint-blue3: #2d72d2; /* Primary actions */
  --blueprint-dark-gray1: #1c2127; /* Primary text */
  --blueprint-gray1: #5f6b7c; /* Secondary text */
  --blueprint-white: #ffffff; /* Surfaces */
  --blueprint-light-gray5: #f6f7f9; /* App background */
  --blueprint-light-gray1: #d3d8de; /* Borders */
  --blueprint-red3: #cd4246; /* Errors */
  --blueprint-green3: #238551; /* Success */
  --blueprint-orange3: #c87619; /* Warnings */

  /* Typography */
  --font-body: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: monospace, Monaco, Menlo, Consolas;

  /* Type scale */
  --text-h1: 36px /* line-height 40px */;
  --text-h2: 28px /* line-height 32px */;
  --text-h3: 22px /* line-height 25px */;
  --text-body: 14px /* line-height 18px */;
  --text-small: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;

  /* Radius */
  --radius-default: 2px;

  /* Elevation */
  --shadow-elevation-1: 0 0 0 1px rgba(17,20,24,0.1), 0 1px 1px rgba(17,20,24,0.2);

  /* Motion */
  --motion-default: 200ms cubic-bezier(0.4, 1, 0.75, 0.9);
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Blueprint by Palantir — React-based UI toolkit for the web, optimized for building complex data-dense interfaces. Character: Data-dense desktop seriousness: 2px corners, 10px grid, five intent colors, and tables that shrug at ten thousand rows. Use a primary colour near #2d72d2, the typeface "System stack" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 10px (grid) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Blueprint documentation](https://blueprintjs.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/blueprint) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._