Palantir

Overview

Palantir is an enterprise software platform that transforms complex organizational data into actionable intelligence. The design system embodies "Architectural Minimalism"—a disciplined, data-forward aesthetic that prioritizes clarity, precision, and trust. The interface uses a restrained palette of deep forest green (#2b5945) as the primary accent, paired with a clean white canvas and carefully calibrated grays, creating a sense of institutional authority and technical sophistication. The visual language evokes the precision of intelligence work: every element serves a function, every color choice is deliberate, and every interaction is predictable. The brand personality is authoritative yet approachable, speaking in the language of decision-makers and operators. Voice: direct, evidence-based, never hyperbolic. Example sentence: "Integrate your data once. Make better decisions every day."

Colors

The color system is built on a foundation of institutional trust. Primary (#2b5945), a deep forest green, is reserved exclusively for actionable elements—buttons, links, focus states, and brand moments. It conveys stability and authority without aggression. The surface stack uses pure white (#ffffff) as the base, with a carefully graded series of grays (surface-container-low: #f3f3f3, surface-container: #efefef, surface-container-high: #e8e8e8) to create subtle visual hierarchy without introducing color noise. On-surface text (#1e2124) is near-black for maximum legibility over white backgrounds (contrast ratio 18.5:1). Secondary (#4e8af7), a professional blue, supports data visualization and secondary actions. Tertiary (#147eb3) is used for status indicators and supplementary information.

Typography

The type system uses two custom typefaces from the Alliance family: Alliance No.2 for display and headline scales (80px, 48px, 32px), and Alliance No.1 for body and label scales (18px, 16px, 14px, 12px). Display (80px, 400 weight, -0.02em tracking) anchors hero sections and major page titles, while headline-lg (48px) and headline-md (32px) structure content hierarchy. Body-lg (18px) and body-md (16px) at 400 weight provide readable body copy with 28px and 24px line heights respectively, ensuring 1.5–1.6 line-height ratios for comfortable reading. Labels (14px and 12px) use 600 weight for emphasis on buttons, badges, and form labels. The system avoids system fonts entirely, relying on the Alliance family's geometric precision to reinforce the brand's technical identity. Apply text-shadow: 0

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, providing a fixed-width structure that scales predictably across breakpoints. Horizontal padding (gutter) is consistently 24px on desktop, creating breathing room around content. Vertical rhythm is governed by the spacing scale: lg (40px) separates major sections, md (24px) separates cards and content blocks, and sm (12px) provides internal padding within components. The hero section uses 280px top padding (from live computed styles) to create a dramatic entry point, with the h1 rendered at 80px in Alliance No.2 at rgb(239, 239, 239)—a near-white that contrasts against dark hero backgrounds. Cards and containers use md (24px) padding internally, with lg (40px) margins between sections. This creates a visual r

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids dramatic drop-shadows. Level 1 (Base): no shadow; flat surfaces on the white background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and elevated containers. This shadow has a 3px vertical offset and 8px blur, creating a subtle lift that signals interactivity without visual noise. Level 3 (Modal/Overlay): box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), a softer, more diffuse shadow for modals and floating panels. The shadow palette uses rgba(0, 0, 0, 0.15) for standard cards and rgb

Shapes

The shape philosophy is "Technical Precision"—minimal rounding that suggests control and engineering rigor. Buttons and inputs use 2px border-radius (rounded.sm), creating a nearly-square appearance that feels industrial and deliberate. Cards and larger containers use 4px (rounded.DEFAULT), a subtle curve that softens the geometry without introducing organic warmth. Modals and floating panels use 10px (rounded.lg), providing slightly more visual softness for secondary surfaces. Search inputs and pill-shaped elements use 50% (rounded.full) for a distinctly rounded appearance, signaling that the

Components

Action Elements Buttons follow a three-tier hierarchy. Primary buttons (button-primary) use the brand green (#2b5945) background with white text, 12px vertical padding, 24px horizontal padding, and 2px border-radius. On hover, the background darkens to #1f4a35 with a 200ms ease-in-out transition. Secondary buttons (button-secondary) invert the scheme: dark text (#1e2124) on white background, same padding and radius. Tertiary buttons use a transparent background with a 1px solid border in the primary color, allowing for lower-priority actions without visual weight. All buttons use label-md typography (14px, 600 weight) and maintain a 48px minimum height for touch targets.

Containers & Surfaces Cards (card) use a white background (#ffffff), 4px border-radius, 24px padding, and a 1px

Do's and Don'ts

**Do**

• Do use primary green (#2b5945) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and signal actionability.
• Do maintain 24px gutter spacing on desktop and scale proportionally on mobile to preserve the spacious, organized feel of the interface.
• Do apply 2px border-radius to buttons and inputs to reinforce the technical, precision-focused brand identity.
• Do use the full Alliance No.2 typeface at 80px for hero headlines to create dramatic visual impact and establish page hierarchy.
• Do transition all interactive states (hover, focus, active) over 200ms using ease-in-out timing to signal responsiveness without feeling sluggish.
• Do layer shadows using the two-tier system (0 3px 8px for standard cards, 0 7px 14px for modals) to create clear depth without visual noise.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs; reserve primary green for the most important actions to avoid diluting the brand signal.
• Don't apply border-radius greater than 16px; the system avoids soft, rounded aesthetics that conflict with the technical brand identity.
• Don't use system fonts; always load Alliance No.1 and Alliance No.2 to maintain the custom, premium feel of the interface.
• Don't apply multiple shadows or glassmorphism effects; the design relies on solid surfaces and geometric shadows for clarity.
• Don't exceed 1200px container width; the fixed-width layout ensures predictable content flow and reinforces the structured, organized brand.
• Don't use color alone to convey status; always pair color with text labels or icons to ensure accessibility and clarity for all users.