Palantir

Overview

Palantir is enterprise software for data integration, decision-making, and operational intelligence, serving government, defense, and commercial organizations. The design language embodies 'Institutional Minimalism'—a philosophy that prioritizes clarity, precision, and trustworthiness over visual ornamentation. The aesthetic combines deep forest green (#2b5945) as the primary accent with a near-black text color (#1e2124) and clean white surfaces, creating a visual identity that feels authoritative yet approachable. The UI evokes a sense of control and confidence: users feel they are operating sophisticated, mission-critical systems.

The brand voice is precise, direct, and data-driven. Palantir speaks in active, declarative sentences without hyperbole. Vocabulary emphasizes integration, sovereignty, and operational excellence. The tone avoids marketing breathlessness; instead, it conveys competence through specificity. Example: 'Integrate disparate data sources into a unified decision-making platform' rather than 'Unlock the power of your data.'

Colors

The color system is built on institutional restraint: a dominant white surface (#ffffff) provides the canvas, while a carefully selected accent palette ensures visual hierarchy without distraction. Primary (#2b5945), a deep forest green, is reserved for call-to-action buttons, links, and key interactive elements—it signals agency and trust. Secondary (#4e8af7), a professional blue, supports data visualization and secondary actions. Tertiary (#147eb3), a teal, is used for status indicators and supplementary UI elements. The text hierarchy uses near-black (#1e2124) for primary content, medium gray (#636363) for secondary information, and light gray (#767676) for disabled or tertiary states. Error states use a vivid red (#ff4136) to demand attention in critical scenarios. Surface containers (

Typography

The type system uses Alliance No.1 and Alliance No.2 as the primary typeface family, paired with system fallbacks for reliability across platforms. Display (80px, 400 weight) is reserved for hero headlines and sets the tone of authority; headline-lg (48px) and headline-md (32px) structure page sections with visual weight. Body-lg (18px) and body-md (16px) carry primary content, using 400 weight for legibility and 600 weight for emphasis. Label-md (14px, 600 weight) and label-sm (12px, 600 weight) are used for buttons, badges, and UI labels. Letter-spacing is minimal (0 to -0.02em) to maintain density and professionalism. Line-height is set generously (1.4–1.6x) to ensure readability in data-heavy contexts. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) overlaid

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero spacing. Gutter spacing (24px) is applied consistently to left/right margins on all major containers. White space is used deliberately to reduce cognitive load—data-heavy sections are separated by lg spacing (40px) to create visual rest. The container-max (1200px) ensures that content never stretches beyond comfortable reading width, maintaining the sense of control and precision that defines the brand.

Elevation & Depth

Depth is conveyed through subtle shadows and container backgrounds rather than dramatic layering. Level 1 (Base): surfaces use no shadow, relying on 1px borders (outline-variant #b9b9b9) to define edges. Level 2 (Cards/Containers): apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border to create gentle separation from the background. Level 3 (Modals/Popovers): apply box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1) with a 1px border to establish clear hierarchy. Hover states increase shadow intensity (from md to lg) to signal interactivity. No blur or glassmorphism is used; the design ma

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and purposeful, never decorative. Buttons and inputs use rounded-sm (2px) for a crisp, technical appearance that feels engineered rather than soft. Cards and containers use rounded-DEFAULT (4px) to provide subtle softening without compromising precision. Larger containers and modals use rounded-md (8px) to rounded-lg (10px) for slightly more breathing room. Search inputs and pill-shaped elements use rounded-full (50%) to signal their distinct interactive purpose. This graduated approach ensures that the UI feels cohesive

Components

Action Elements Buttons are the primary interaction mechanism and use a strict two-tier system. Primary buttons (button-primary) use the forest green background (#2b5945) with white text, 12px vertical padding, 24px horizontal padding, and rounded-sm (2px) for a technical edge. On hover, the background darkens to #1e4d3a (button-primary-hover) with a smooth transition (200ms ease). Secondary buttons (button-secondary) invert the scheme: dark text (#1e2124) on white, with the same padding and border-radius. Ghost buttons (button-ghost) use a transparent background with a 1px outline-variant border and dark text, becoming filled on hover (button-ghost-hover) with surface-container-low (#f3f3f3). All buttons use label-md typography (14px, 600 weight) and maintain a minimum height of 48px

Do's and Don'ts

**Do**

• Do use primary (#2b5945) exclusively for high-priority CTAs and interactive states—reserve it for moments that demand user action.
• Do apply consistent 24px (md spacing) between major content sections to maintain visual rhythm and reduce cognitive load.
• Do use Alliance No.1/No.2 typefaces with minimal letter-spacing (-0.02em to 0em) to convey precision and institutional authority.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and containers to create subtle depth without visual noise.
• Do use rounded-sm (2px) on buttons and rounded-full (50%) on search inputs to signal their distinct interactive purposes.

**Don't**

• Don't use bright or saturated colors as primary accents—Palantir's restrained palette (#2b5945, #4e8af7) signals institutional trust, not playfulness.
• Don't apply rounded corners larger than rounded-lg (10px) on primary UI elements; excessive rounding undermines the technical aesthetic.
• Don't use drop shadows larger than 0 7px 14px rgba(50, 50, 93, 0.1)—heavy shadows feel dated and reduce the sense of control.
• Don't mix typeface families within a single section; maintain Alliance No.1/No.2 consistency to preserve the institutional voice.
• Don't use color alone to convey status or error states—always pair color with text labels or icons for accessibility and clarity.