---
version: alpha
name: Palantir
description: Defense-grade restraint — deep charcoal-navy canvas, Alliance No.1 at zero-weight confidence, electric-blue hover accent used surgically, near-zero border radius, and an achromatic palette that communicates operational seriousness over brand expressiveness.

colors:
  # Primary canvas (dark, charcoal-navy)
  background: "#1e1f2b"
  background-deep: "#0d0e14"  # deepened from background — used for hero overlays
  surface: "#1e2124"
  surface-elevated: "#25282b"  # was rgb(37,40,43) — mid-dark surface for cards
  surface-light: "#ffffff"    # light sections exist alongside dark canvas

  # Ink / text
  ink: "#ffffff"
  ink-secondary: "#aaaaaa"
  ink-tertiary: "#767676"
  ink-on-light: "#1e2124"    # text when on white surface sections

  # Brand accent — electric blue, interaction only
  primary: "#1883fd"
  on-primary: "#ffffff"
  primary-hover: "#3a96ff"   # slightly lighter for nested hover states

  # Status / semantic
  success: "#32ae88"  # from border data: rgb(50,174,136) — used sparingly

  # Borders
  border: "#1e2124"
  border-subtle: "#2e3236"   # slightly lighter than surface for hairline dividers
  border-light: "#aaaaaa"    # mid-gray on white sections
  border-white: "#f7f7f7"    # near-white hairlines

  # Shadow tints
  shadow-soft: "#000000"     # pure-black used in light-section shadows

  # Semantic (CSS variables discovered on site)
  error: "#ff4136"

typography:
  display-hero:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 180px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -10px
  display:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.97
    letterSpacing: -3.4px
  display-medium:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -2.72px
  heading-1:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1px
  heading-2:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.92px
  heading-3:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -1.7px
  heading-sub:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.39
    letterSpacing: 0px
  body:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 16.2px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.162px
  button-ui:
    fontFamily: "Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0.5px
  label-uppercase:
    fontFamily: "Alliance No.2, Alliance No.1, Barlow, system-ui, -apple-system, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.26px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 24px
  2xl: 42px
  3xl: 72px
  4xl: 105px
  5xl: 193px

rounded:
  none: 0px
  micro: 2px
  sm: 4px
  md: 6px
  pill: 60px

components:
  # Primary CTA — white fill, dark border
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 18px
    borderColor: "{colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 18px

  # Ghost button — transparent fill, visible border
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 32px
    borderColor: "{colors.border-subtle}"
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 32px

  # Tab / nav item
  button-tab:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.micro}"
    padding: 12px 10px
  button-tab-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.micro}"
    padding: 12px 10px

  # Card
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.micro}"
    padding: 24px
    borderColor: "{colors.border-subtle}"

  # Input
  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-light}"
  input-focus:
    backgroundColor: "{colors.surface-light}"
    borderColor: "{colors.primary}"

  # Badge / label pill
  badge:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.micro}"
    padding: 4px 8px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 24px
    borderColor: "{colors.border-subtle}"
---

# Palantir Design System

## Overview

Palantir's visual design system speaks the language of critical infrastructure — not polished software, but operational systems built to run in the dark. The canvas is `{colors.background}`, a deep charcoal-navy that sits between midnight blue and near-black, evading the drama of pure black while projecting the gravity of a classified briefing room. This is a design system that has chosen sobriety as a competitive advantage: a single electric-blue accent (`{colors.primary}`) used only on hover and interaction states, surrounded by a palette of grays and near-blacks that communicate data fidelity over marketing exuberance.

The typeface is Alliance No.1 and Alliance No.2 — Klim Type Foundry's geometric grotesque pair, self-hosted with no Google Fonts dependency. Alliance No.2 handles hero and display contexts with negative letter-spacing that reaches -10px at 180px (extreme compression, nearly logotype behavior), while Alliance No.1 handles all UI, body, and navigation text. Weight 400 carries nearly the entire system — where another brand might reach for 700 or 800 to project authority, Palantir uses scale and spacing. The occasional weight 600 appears in sub-headings, never heavier. OpenType feature `"ss04"` is applied on Alliance No.2 display text, activating stylistic alternates for a more distinctive geometric character.

Navigation and structural chrome operate in `{colors.surface}`, a near-identical charcoal-navy with a fractional luminance increase that creates barely-visible layering. Cards and panels receive 2px radius at most — virtually sharp — and 1px solid borders in `{colors.border-subtle}`. White sections coexist with the dark canvas for readability-intensive content, creating a high-contrast dual-mode feel rather than a pure dark-mode experience. Motion is measured at 0.3s ease throughout, unhurried and deliberate.

**Key Characteristics:**
- Deep charcoal-navy canvas (`{colors.background}`) — not pure black, carries a blue-navy undertone
- Single chromatic accent: electric blue (`{colors.primary}`) reserved exclusively for hover and active interaction states
- Alliance No.1 / No.2 at weight 400 throughout — authority through scale, not weight
- Extreme negative tracking at display sizes: -10px at 180px, -3.4px at 80px
- OpenType feature `"ss04"` on Alliance No.2 for stylistic geometric alternates
- Sharp shapes: `{rounded.none}` default, `{rounded.micro}` for cards, `{rounded.sm}` for interactive elements
- Dual-mode: near-black sections alternate with pure white sections for content-dense pages
- 0px border radius on primary CTAs — architectural, non-decorative buttons
- 0.3s ease motion throughout — no bounce, no spring, deliberate system timing
- Uppercase 10px tracking labels (`{typography.caption}`) with 0.5px spacing — data/metadata voice
- Element Plus/UI component framework under the hood (enterprise-grade component primitives)

## Colors

### Canvas
- **Charcoal Navy** (`{colors.background}`): Primary page background for dark sections and hero areas.
- **Panel Dark** (`{colors.surface}`): Navigation bars, sidebars, secondary panels — fractionally lighter than background.
- **Elevated Dark** (`{colors.surface-elevated}`): Card and hover state backgrounds.
- **Pure White** (`{colors.surface-light}`): Light sections, form backgrounds, CTA button fills.
- **Deep Background** (`{colors.background-deep}`): Hero overlay darkening layer.

### Text
- **White** (`{colors.ink}`): All text on dark surfaces. Pure white without warmth.
- **Silver** (`{colors.ink-secondary}`): Secondary text, descriptions, metadata on dark.
- **Mid Gray** (`{colors.ink-tertiary}`): Tertiary text, muted labels, placeholders.
- **Ink on Light** (`{colors.ink-on-light}`): Text and CTAs on white sections.

### Brand Accent
- **Electric Blue** (`{colors.primary}`): Hover states on ALL interactive elements — links, buttons, navigation, cards. Never used as a fill or brand color unprompted. Hover only.
- **Primary Hover** (`{colors.primary-hover}`): Slightly lighter blue for nested hover states.

### Status
- **Success Green** (`{colors.success}`): Rare semantic color, border-level usage only.
- **Error Red** (`{colors.error}`): Form validation, critical alerts.

### Borders
- **Surface Border** (`{colors.border}`): Primary button and CTA borders.
- **Subtle Border** (`{colors.border-subtle}`): Panel edges, card outlines.
- **Light Border** (`{colors.border-light}`): Borders on white sections, mid-gray lines.
- **White Hairline** (`{colors.border-white}`): Near-white dividers on light backgrounds.

## Typography

### Font Family
- **Primary**: `Alliance No.2` (display/headings) and `Alliance No.1` (body/UI) — Klim Type Foundry, self-hosted WOFF2
- **Display Fallback**: `Barlow, system-ui, -apple-system, Segoe UI, sans-serif`
- **OpenType Features**: `"ss04"` on Alliance No.2 at display sizes — geometric stylistic alternates for a more distinctive letterform

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 180px full-bleed hero billboard — logotype-scale compression |
| `display` | 80px primary display headlines |
| `display-medium` | 68px secondary hero text |
| `heading-1` | 50px section headings |
| `heading-2` | 46px sub-section headings |
| `heading-3` | 34px feature titles, card headings |
| `heading-sub` | 25px weight-600 sub-headings |
| `body-large` | 18px introductory copy |
| `body` | 16px standard reading text |
| `nav-link` | 16.2px navigation items, micro letter-spacing |
| `button-ui` | 16px button and link text |
| `caption` | 10px uppercase metadata, data labels, category tags |
| `label-uppercase` | 12px uppercase labels with slight negative tracking |

### Principles
- **Weight 400 as the default authority register**: Palantir communicates gravity through scale and context, not font weight. Weight 600 appears only in sub-headings and is the system maximum.
- **Extreme compression at display**: -10px tracking at 180px (logotype behavior), relaxing through -3.4px at 80px, -2.72px at 68px. Headlines are compressed tools, not typographic decoration.
- **Alliance No.2 for display, Alliance No.1 for function**: The split is deliberate — No.2's `"ss04"` alternates add distinction to headlines while No.1 remains unobtrusive in UI contexts.
- **Uppercase 10px captions as data voice**: The small uppercase category labels with +0.5px tracking are borrowed from military and industrial UI traditions — the "system label" register.
- **No typographic color variation**: Type color changes only on hover (to `{colors.primary}`). No gradient text, no tinted headlines.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is **8px**, with a dramatically expanded upper range — `{spacing.4xl}` (105px) and `{spacing.5xl}` (193px) create cinema-scale vertical breathing room between major sections.

### Grid & Container
- Max content width: approximately 1500–1820px (breakpoint data confirms wide-display targeting)
- Hero sections: full-bleed with internal content constrained to ~1200px
- Feature sections: variable column structures from 2–4 columns
- Wide-format breakpoints (1820px, 1600px) signal enterprise dashboard context — designed for large monitors
- Notable: 27 breakpoints — unusually granular, suggesting per-product responsive tuning

### Whitespace Philosophy
- **Darkness as breathing room**: The near-black background absorbs empty space differently than white — more weight is needed to signal separation, achieved through generous `{spacing.4xl}`–`{spacing.5xl}` vertical padding.
- **Binary section rhythm**: Dark canvas sections alternate with white sections. No gradients, no mid-gray backgrounds.
- **Compressed headlines in expanded space**: The extreme negative tracking at display sizes counterbalances generous surrounding whitespace.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.background}` | Page canvas, content backgrounds |
| Panel (Level 1) | `{colors.surface}` bg + `1px solid {colors.border-subtle}` | Navigation, panel chrome |
| Card (Level 2) | `{colors.surface-elevated}` bg + `1px solid {colors.border-subtle}`, 2px radius | Feature cards, containers |
| Overlay (Level 3) | `rgba(0,0,0,0.1) 0px 2px 10px` | Hover overlays, tooltips |
| Elevated (Level 4) | `rgba(50,50,93,0.1) 0 7px 14px` + `rgba(0,0,0,0) 0 2px 4px` | Modal dialogs, dropdowns |
| Focus Ring | `2px solid {colors.primary}` | Keyboard navigation, input focus |

**Shadow Philosophy**: Palantir's elevation system is structural, not decorative. On a near-black canvas, shadows are near-invisible — depth is communicated through background luminance steps (`{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}`) and 1px solid borders. The rare drop shadows appear only in light-section contexts where they can be perceived. Glows, ambient shadows, and blurred auras are absent — the system reads like infrastructure, not consumer software.

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary buttons, tabs, hero containers — the system default |
| `micro` | 2px | Cards, media thumbnails, product video previews |
| `sm` | 4px | Inputs, small interactive elements, badges |
| `md` | 6px | Image containers, secondary surfaces |
| `pill` | 60px | Social/icon links (GitHub link button), circular elements |

Palantir's shape system is binary in practice: zero-radius for interface chrome (buttons, tabs, panels) and minimal 2px–4px for content containers. The sharp-cornered button is a conscious enterprise signal — it communicates tool over app, utility over delight. The pill (60px) appears only on non-primary elements like icon link buttons.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`).

### Button Variants
- **`button-primary`** — White fill on dark canvas, zero radius, dark border (`{colors.border}`). Reverses to dark on hover. Used for primary CTAs ("Get Started").
- **`button-ghost`** — Transparent fill, subtle border, white text. Hover transitions text to `{colors.primary}`.
- **`button-tab`** — Navigation tab style: white surface, near-black text, 2px radius. Hover turns text to electric blue.

### Cards
- **`card`** — Near-black surface (`{colors.surface}`), 1px solid `{colors.border-subtle}`, 2px radius. No drop shadow — border is the depth indicator. Padding 24px.

### Inputs
- **`input`** — White background for readability in form contexts. Mid-gray border, 4px radius. Focus switches border to `{colors.primary}`.
- **`input-focus`** — Blue border on focus.

### Badges
- **`badge`** — Small dark surface with mid-gray text, micro radius. Used for category labels, status, metadata tags.

### Navigation
- **`nav-bar`** — Persistent dark sticky header on `{colors.background}`. Alliance No.1 at 16.2px weight 400 for links. All links hover to `{colors.primary}`. White ghost CTA "Get Started" right-aligned.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default dark canvas — its blue-navy undertone distinguishes it from generic near-black
- Apply `{colors.primary}` exclusively for hover and interactive state transitions — never as a fill, background, or decorative color
- Use weight 400 Alliance No.1/No.2 as the authority register — resist reaching for bold
- Apply extreme negative letter-spacing at display sizes (-10px at 180px, -3.4px at 80px) — it is the signature
- Use `{rounded.none}` on primary action buttons — zero radius is the system's enterprise signal
- Use `{typography.caption}` uppercase labels for data, metadata, and category tags — the industrial label voice
- Alternate dark canvas sections with white sections for content-heavy pages — binary mode, not gradients
- Keep motion at 0.3s ease — never bouncy, never instant

### Don't
- Don't use `{colors.primary}` as a default fill, button background, or brand accent — it is an interaction-only color
- Don't introduce border radius above 6px on interface chrome — the system is architectural, not rounded
- Don't use weight 700+ — weight 600 is the maximum and appears rarely
- Don't add chromatic colors beyond `{colors.primary}` for hover and `{colors.success}` / `{colors.error}` for semantic states
- Don't use gradients — Palantir's depth system is flat + border, never gradient
- Don't use light-mode color tokens on dark canvas sections — the dual-mode system has strict section boundaries
- Don't mix Alliance No.2 `"ss04"` alternates into body text — the feature is display-only
- Don't use positive letter-spacing at display sizes — compression is non-negotiable

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column, compact padding, hidden navigation |
| Mobile | 400–480px | Standard mobile layout |
| Mobile Large | 480–640px | Early multi-column for card grids |
| Tablet | 640–768px | Two-column grids, expanded nav |
| Tablet Large | 768–1024px | Full card grids, standard desktop navigation |
| Desktop | 1024–1200px | Full multi-column layouts |
| Desktop Large | 1200–1500px | Maximum content width |
| Wide | 1500–1820px | Enterprise dashboard breakpoints, generous margins |
| Ultra-wide | >1820px | Large monitor targeting, centered max-width |

### Touch Targets
- Buttons use 6px–12px vertical padding minimum
- Navigation links at 16px with comfortable horizontal spacing
- Interactive cards have full-area tap targets
- Ghost buttons with 8px 32px padding ensure generous hit areas

### Collapsing Strategy
- Hero: 180px display → scales proportionally, tracking adjusts with size
- Navigation: full horizontal nav → hamburger at ~768px
- Feature sections: 3–4 column → 2-column → single column
- Product video previews: aspect-ratio preserved, 2px radius maintained
- Section spacing: `{spacing.5xl}` (193px) → `{spacing.3xl}` (72px) on mobile

### Image Behavior
- Product screenshots and video previews maintain 2px radius at all sizes
- Hero background imagery bleeds full-width at all breakpoints
- Dark canvas ensures media embeds read consistently regardless of viewport

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Charcoal Navy `{colors.background}`
- Panel Background: `{colors.surface}`
- Elevated Surface: `{colors.surface-elevated}`
- Primary Text: White `{colors.ink}`
- Secondary Text: Silver `{colors.ink-secondary}`
- Muted Text: Gray `{colors.ink-tertiary}`
- Hover Accent: Electric Blue `{colors.primary}`
- Border: `{colors.border-subtle}`
- Error: `{colors.error}`

### Example Component Prompts
- "Create a hero section on `{colors.background}`. Headline at 80px Alliance No.2 (fallback: Barlow) weight 400, line-height 0.97, letter-spacing -3.4px, color `{colors.ink}`. Sub-headline at 68px weight 400, line-height 1.20, letter-spacing -2.72px. CTA button: white fill, zero border-radius, 1px solid `{colors.border}` border, 16px text, color `{colors.ink-on-light}`. All link hovers transition to `{colors.primary}` at 0.3s ease."
- "Design a feature card: `{colors.surface}` background, 1px solid `{colors.border-subtle}` border, 2px border-radius, 24px padding. Title at 34px Alliance No.1 weight 400, letter-spacing -1.7px, color `{colors.ink}`. Body at 16px weight 400, line-height 1.43, color `{colors.ink-secondary}`. No drop shadow."
- "Build a data label badge: `{colors.surface-elevated}` background, `{colors.ink-secondary}` text, 10px Alliance No.2 uppercase, letter-spacing 0.5px, 4px border-radius, 4px 8px padding."
- "Create navigation: sticky dark header on `{colors.background}`. Alliance No.1 16.2px weight 400, `{colors.ink}` text, hover to `{colors.primary}` at 0.3s ease-in-out. White ghost CTA 'Get Started' right-aligned, zero border-radius, 1px solid `{colors.border}`. 20px 24px padding."
- "Design a product section alternating: dark panel on `{colors.surface}` followed by white panel on `{colors.surface-light}`. Dark panel: `{colors.ink}` headlines. White panel: `{colors.ink-on-light}` headlines. Headings at 46px Alliance No.2 weight 400, letter-spacing -0.92px. Section padding `{spacing.5xl}` (193px) top/bottom."

### Iteration Guide
1. Start with `{colors.background}` as the canvas — the charcoal-navy is the identity, not pure black
2. Every hover state resolves to `{colors.primary}` (electric blue) — links, buttons, cards, navigation
3. Typography compresses with size: -10px at 180px, -3.4px at 80px, -2.72px at 68px, near-zero at body
4. Keep buttons at zero border-radius — `{rounded.none}` is the architectural default
5. Use `{colors.surface}` and `{colors.surface-elevated}` for depth, never shadows on dark canvas
6. Alternate dark/white sections for content-heavy flows; avoid mid-gray backgrounds
7. Motion: 0.3s ease for buttons/links, 0.35s ease-in-out for hover transitions — unhurried, deliberate

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Palantir. Brand names and trademarks belong to their respective owners.