# Design System: Palantir > **Hermes Agent — Implementation Notes** > > The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: > - **Primary:** `Inter` | **Mono:** `JetBrains Mono` (sparingly — only for code/data) > - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;` > - **Mono stack (CSS):** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;` > ```html > > ``` > Use `write_file` to create HTML, serve via cloudflared tunnel. Verify with `browser_vision` after generating. > > **When to use this template:** Defense, intelligence, cybersecurity, government, institutional platforms. NOT for dev-tools, SaaS startups, or consumer products. Palantir's aesthetic signals "this software is trusted with classified data." If the product is B2B SaaS or developer-facing, prefer Linear, Stripe, or Vercel instead. ## 1. Visual Theme & Atmosphere Palantir's design language is the aesthetic of institutional power — cold, precise, and unapologetically serious. This is software that governments trust with classified intelligence and military operations. The visual system communicates three things: **competence** (nothing is decorative), **control** (every element is intentional), and **depth** (data density without clutter). The background is near-black (`#0a0a0f` to `#0c0d14`) — darker than most "dark mode" UIs, approaching the void. Cards and surfaces are barely distinguishable from the background (`#13141a`, `#16171d`), separated only by 1px borders at `rgba(255,255,255,0.04)`. This creates a "single surface" feel — the entire interface is one continuous command center, not a collection of discrete cards. The color system is radically restrained: **one accent color** — a cold, institutional blue (`#00a3bf` or `#0ea5e9`). This blue appears on interactive elements, selected states, key data highlights, and the brand mark. Everything else is grayscale. There is no green for "success," no red for "error" (except in genuine threat/warning contexts), no purple, no orange. The monochromatic discipline signals that this is not a consumer product — it's an operating system for analysis. Typography is Inter at precise weights — Light (300) for section numbers and metadata, Regular (400) for body, Medium (500) for emphasis, SemiBold (600) for headings. No Bold (700). The type hierarchy is flat and controlled — headings don't shout, they state. Section labels use thin uppercase tracking, like military briefing documents. **Key Characteristics:** - Near-black canvas: `#0a0a0f` (page), `#13141a` (cards), `#16171d` (elevated) - Single accent: cold blue `#00a3bf` — the only chromatic color in the system - 1px borders at `rgba(255,255,255,0.04)` — whisper-thin, barely visible - Inter font, weights 300/400/500/600 — no 700 - Thin uppercase section labels with wide tracking - Subtle dot-grid or geometric line patterns in backgrounds - Sharp corners (2-4px radius) — not rounded "friendly" cards - Data-dense layouts with generous negative space - Institutional gravitas — this is Gotham/Foundry/AIP, not a startup ## 2. Color Palette & Roles ### Background Surfaces - **Void Black** (`#0a0a0f`): Page background — the deepest canvas. Near-pure black with imperceptible blue-cool undertone. - **Panel Dark** (`#0c0d14`): Alternate deep background for hero sections. - **Card Surface** (`#13141a`): Standard card/panel background. One micro-step above void. - **Elevated Surface** (`#16171d`): Hover states, dropdowns, slightly elevated panels. - **Input Surface** (`#1a1b23`): Form fields, search bars — subtly lighter to invite interaction. ### Text & Content - **Primary Text** (`#e8eaed`): Near-white with slight warmth. Default text — not pure white, preventing eye strain. - **Secondary Text** (`#9aa0a6`): Cool gray for body text, descriptions. - **Tertiary Text** (`#6b7280`): Muted gray for metadata, timestamps, placeholders. - **Quaternary Text** (`#4b5563`): Most subdued — footnotes, disabled states, subtle labels. ### Accent (THE ONLY CHROMATIC COLOR) - **Primary Blue** (`#00a3bf`): The system's sole accent. Used for: interactive elements, selected states, key data highlights, brand mark, primary CTAs, link text, focus rings. - **Blue Hover** (`#0ea5e9`): Slightly brighter for hover states. - **Blue Muted** (`#0891b2`): Darker variant for less prominent accent needs (e.g., secondary badges). ### Status Colors (USE SPARINGLY — ONLY FOR GENUINE THREAT/STATUS) - **Warning Amber** (`#d97706`): ONLY for warning alerts, threat indicators, critical system states. Never decorative. - **Critical Rose** (`#e11d48`): ONLY for critical threats, security breaches, destructive actions. Never decorative. - **Success** (`#059669`): ONLY for system-health indicators, verified status. Never decorative "success badges." ### Border & Divider - **Border Default** (`rgba(255,255,255,0.04)`): The standard border — barely visible, like etched glass. - **Border Visible** (`rgba(255,255,255,0.06)`): Slightly more present for cards that need definition. - **Border Accent** (`rgba(0,163,191,0.15)`): Blue-tinted border for selected/active states. - **Divider** (`rgba(255,255,255,0.03)`): Ultra-subtle horizontal rules between sections. ### Overlay - **Modal Backdrop** (`rgba(0,0,0,0.85)`): Extreme dark overlay for focus isolation. - **Hover Overlay** (`rgba(255,255,255,0.02)`): Subtle lightening on hover. ## 3. Typography Rules ### Font Family - **Primary**: `Inter`, with fallbacks: `system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` - **Monospace**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, monospace` - **Monospace usage**: ONLY for code blocks, data tables, technical labels. Never for body text or headings. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Hero Display | Inter | 56px (3.5rem) | 300 | 1.05 | -0.5px | Thin, commanding — like a military designation | | Section Number | Inter | 14px | 300 | 1.4 | 0.15em | Uppercase, thin, wide tracking — "// 01", "// 02" | | Heading 1 | Inter | 32px (2rem) | 600 | 1.15 | -0.5px | Section titles — precise, not loud | | Heading 2 | Inter | 24px (1.5rem) | 600 | 1.25 | -0.3px | Sub-section headings | | Heading 3 | Inter | 18px (1.125rem) | 500 | 1.3 | normal | Card titles, feature labels | | Body Large | Inter | 18px (1.125rem) | 400 | 1.6 | normal | Introduction paragraphs | | Body | Inter | 16px (1rem) | 400 | 1.6 | normal | Standard reading text | | Body Small | Inter | 14px (0.875rem) | 400 | 1.55 | normal | Secondary body, descriptions | | Caption | Inter | 13px (0.8125rem) | 400 | 1.5 | normal | Metadata, timestamps | | Label | Inter | 12px (0.75rem) | 500 | 1.4 | 0.05em | Button text, navigation, small labels | | Micro | Inter | 11px (0.6875rem) | 400 | 1.4 | 0.08em | Uppercase overlines, tiny labels | | Mono Body | JetBrains Mono | 14px | 400 | 1.5 | normal | Code blocks, data tables | | Mono Label | JetBrains Mono | 12px | 400 | 1.4 | normal | Code annotations | ### Principles - **No Bold (700)**: Palantir's maximum weight is 600 (SemiBold). Headings are precise, not heavy. - **Thin section markers**: Section labels use Light (300) weight, uppercase, wide tracking — like military document headers. - **Flat hierarchy**: The difference between H1 and body is controlled — headings state, they don't shout. - **Monospace is data, not design**: JetBrains Mono appears only where data/code lives. Never for UI chrome. - **Inter Light (300) is the distinctive weight**: Used for hero text and section numbers — thin, cold, institutional. ## 4. Component Stylings ### Buttons **Primary Button** - Background: `#00a3bf` (the only chromatic button) - Text: `#ffffff` - Padding: 10px 20px - Radius: 4px (sharp, not pill-shaped) - Hover: `#0ea5e9` - Font: 14px Inter weight 500 - Use: Primary CTAs only — one per page maximum **Secondary Button** - Background: `rgba(255,255,255,0.04)` - Text: `#e8eaed` - Padding: 10px 20px - Radius: 4px - Border: `1px solid rgba(255,255,255,0.06)` - Hover: background → `rgba(255,255,255,0.06)` - Font: 14px Inter weight 400 - Use: Secondary actions, "Learn more" **Ghost Button** - Background: transparent - Text: `#9aa0a6` - Padding: 8px 16px - Radius: 4px - Hover: text → `#e8eaed`, background → `rgba(255,255,255,0.02)` - Font: 13px Inter weight 400 - Use: Tertiary actions, navigation items ### Cards & Containers - Background: `#13141a` - Border: `1px solid rgba(255,255,255,0.04)` - Radius: 4px (sharp — not friendly rounded cards) - Padding: 24px - Hover: background → `#16171d`, border → `rgba(255,255,255,0.06)` - No shadows — elevation is communicated through background luminance only ### Inputs & Forms - Background: `#1a1b23` - Text: `#e8eaed` - Placeholder: `#6b7280` - Border: `1px solid rgba(255,255,255,0.04)` - Focus border: `1px solid rgba(0,163,191,0.3)` - Radius: 4px - Padding: 10px 14px - Font: 14px Inter weight 400 ### Data Tables - Header background: `rgba(255,255,255,0.02)` - Header text: `#9aa0a6`, 12px Inter weight 500, uppercase - Row border: `1px solid rgba(255,255,255,0.02)` (bottom only) - Cell text: `#e8eaed`, 14px Inter weight 400 - Cell padding: 12px 16px - Hover row: background → `rgba(255,255,255,0.01)` - Numeric columns: JetBrains Mono, right-aligned ### Badges & Tags - Background: `rgba(255,255,255,0.04)` - Text: `#9aa0a6` - Radius: 3px - Padding: 2px 8px - Font: 11px Inter weight 500 - Accent variant: background `rgba(0,163,191,0.1)`, text `#00a3bf` ### Navigation - Thin top bar: `#0c0d14` background, 48px height - Bottom border: `1px solid rgba(255,255,255,0.03)` - Links: 13px Inter weight 400, `#9aa0a6` text, uppercase - Active link: `#e8eaed` text - Hover: text → `#e8eaed` - Brand mark: left-aligned, cold blue accent - No hamburger menu — navigation is minimal enough to stay visible ## 5. Layout Principles ### Spacing System - Base unit: 8px - Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 120px - Section vertical padding: 80–120px - Card gaps: 16–24px - Content max-width: 1200px (centered) ### Grid & Structure - Single-column content with generous margins - Data-dense sections use 2–3 column grids - Tables and structured data use full-width with precise column alignment - Geometric precision — elements align to an invisible grid ### Whitespace Philosophy - **Negative space as authority**: Empty space isn't "minimalist" — it's commanding. The void background makes content feel important. - **Density where it matters**: Data sections are dense and structured. Marketing sections are sparse and deliberate. - **No decorative dividers**: Sections are separated by vertical space alone. The dark background provides natural separation. ### Border Radius Scale - Sharp (2px): Badges, inline labels, tiny elements - Standard (4px): Buttons, inputs, cards, containers — the default - Panel (6px): Large panels, modals - Never: 8px+, pill shapes, circles — too friendly/consumer ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Void (Level 0) | `#0a0a0f` background, no border | Page canvas | | Surface (Level 1) | `#13141a` bg + `1px solid rgba(255,255,255,0.04)` | Cards, panels | | Elevated (Level 2) | `#16171d` bg + `1px solid rgba(255,255,255,0.06)` | Hover states, dropdowns | | Input (Level 3) | `#1a1b23` bg + `1px solid rgba(255,255,255,0.04)` | Form fields — slightly lighter to invite interaction | | Modal (Level 4) | `#13141a` bg + `1px solid rgba(255,255,255,0.06)` + `rgba(0,0,0,0.85)` backdrop | Dialogs, modals | **Elevation Philosophy**: No drop shadows. On near-black surfaces, shadows are invisible. Elevation is communicated through background luminance micro-stepping — each level is imperceptibly lighter than the last. This creates a "single continuous surface" feel — the interface is one command center, not a stack of discrete cards. ## 7. Do's and Don'ts ### Do - Use Inter at weights 300/400/500/600 — never 700 - Use a single accent color (cold blue `#00a3bf`) for ALL interactive/chromatic elements - Keep borders at `rgba(255,255,255,0.04)` — whisper-thin, barely visible - Use thin uppercase section labels with wide tracking (military briefing aesthetic) - Keep card backgrounds barely distinguishable from the page background - Use sharp corners (2-4px radius) — not rounded "friendly" shapes - Let negative space carry authority — empty space is commanding, not empty - Use monospace ONLY for data/code — never for UI chrome or headings - Add subtle dot-grid or geometric line patterns to backgrounds for depth ### Don't - Don't use multiple accent colors — one blue, period. No green success badges, no purple, no orange (unless it's a genuine threat warning) - Don't use rounded cards (8px+ radius) — too consumer/startup - Don't use drop shadows — they're invisible on near-black and break the "single surface" illusion - Don't use Bold (700) weight — headings are precise, not heavy - Don't use glassmorphism, gradients, or glow effects — too playful - Don't use emoji or decorative icons - Don't use monospace for headings or body text — it's for data only - Don't add "friendly" elements — this is institutional software, not a consumer app - Don't use pure white (`#ffffff`) for text — `#e8eaed` prevents eye strain on void backgrounds - Don't center-align large blocks of text — left-aligned is more institutional ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <768px | Single column, reduced padding (40px sections), 14px body | | Tablet | 768–1024px | Two-column grids, standard padding | | Desktop | 1024–1280px | Full layout, 1200px max-width | | Large | >1280px | Generous margins, full data density | ### Collapsing Strategy - Hero: 56px → 40px → 32px display text - Navigation: remains visible (minimal enough to not need collapse) - Data tables: horizontal scroll on mobile - Card grids: 3-col → 2-col → 1-col - Section spacing: 120px → 80px → 48px ## 9. Agent Prompt Guide ### Quick Color Reference - Page background: `#0a0a0f` - Card surface: `#13141a` - Elevated surface: `#16171d` - Input surface: `#1a1b23` - Primary text: `#e8eaed` - Secondary text: `#9aa0a6` - Tertiary text: `#6b7280` - Accent (THE ONLY COLOR): `#00a3bf` - Accent hover: `#0ea5e9` - Border default: `rgba(255,255,255,0.04)` - Border visible: `rgba(255,255,255,0.06)` - Warning (use sparingly): `#d97706` - Critical (use sparingly): `#e11d48` ### Example Component Prompts - "Create a hero section on `#0a0a0f` background. Thin geometric line pattern overlay. Headline at 56px Inter weight 300, letter-spacing -0.5px, color `#e8eaed`. Subtitle at 18px Inter weight 400, color `#9aa0a6`. Single blue CTA button (`#00a3bf`, 4px radius). Section marker '// 01' at 14px Inter weight 300, uppercase, 0.15em tracking, color `#6b7280`." - "Design a data card: `#13141a` background, `1px solid rgba(255,255,255,0.04)` border, 4px radius. Title at 18px Inter weight 500, color `#e8eaed`. Body at 14px Inter weight 400, color `#9aa0a6`. Data values in JetBrains Mono 14px, color `#00a3bf`." - "Build a data table: header row with `rgba(255,255,255,0.02)` background, 12px Inter weight 500 uppercase labels in `#9aa0a6`. Rows separated by `1px solid rgba(255,255,255,0.02)` bottom borders. Cell text 14px Inter weight 400 in `#e8eaed`. Numeric columns in JetBrains Mono, right-aligned." - "Create navigation: thin top bar `#0c0d14`, 48px height, `1px solid rgba(255,255,255,0.03)` bottom border. Links at 13px Inter weight 400, uppercase, `#9aa0a6` text. Active link `#e8eaed`. Brand mark left-aligned in `#00a3bf`." - "Design a section divider: thin horizontal line `rgba(255,255,255,0.03)` spanning content width. Section label above: '// 03' at 14px Inter weight 300, uppercase, 0.15em tracking, `#6b7280`." ### Iteration Guide 1. Start from `#0a0a0f` — the void canvas. Everything emerges from this darkness. 2. One accent color: `#00a3bf`. If you're adding a second color, stop — you're breaking the system. 3. Borders at `rgba(255,255,255,0.04)` — if you can easily see them, they're too strong. 4. Inter weights 300/400/500/600 only. No 700. Light (300) is the distinctive weight. 5. Sharp corners (4px default). Rounder = more consumer. Sharper = more institutional. 6. Elevation via background luminance, never shadows. 7. Monospace only for data. Inter for everything else. 8. Thin uppercase section markers on every major section. 9. Negative space is authority — don't fill it. 10. This is software for classified intelligence. Design accordingly.