Palantir Design System

Overview

Palantir's visual identity operates as a dark command center—an aesthetic deliberately engineered to signal enterprise-grade seriousness, intelligence infrastructure, and operational depth. The dominant canvas is absolute black ({colors.surface-soft}), creating a void-like stage upon which crisp white typography ({colors.body} / {colors.muted-surface}) and luminous product photography command total attention. This is not merely a dark theme; it is a philosophical position: the software exists as an operating layer atop organizational reality, and the interface should recede so that decisions can emerge clearly.

Brand voltage concentrates in two precise locations: the classic web blue of inline links ({colors.primary} — #0000ee), which serves as the sole chromatic interruption in an otherwise monochromatic field, and the stark white-on-black inversion of primary CTAs ({component.button-primary}), where {colors.surface-elevated} buttons carry {colors.body-dark} text against the dark void. This restrained palette signals institutional confidence—the design does not need gradient spectacles or neon accents to prove its technological sophistication.

The single typographic move defining this system is its deployment of Alliance No.2 at heroic scale for display headlines ({typography.display-xl}: 80px at weight 400 with -3.4px tracking). The typeface itself is a proprietary grotesque sans with subtle geometric humanism, and its appearance at 80px—nearly filling the viewport—creates a cinematic, manifesto-like presence. Body text defaults to Alliance No.1 at 16px/400, maintaining the same familial DNA but at conversational scale. The system trusts scale and negative space to establish hierarchy almost exclusively; bold weight appears only in label contexts ({typography.title-sm} / {typography.label} at 700), never in headlines.

Shape language enforces brutalist precision: the dominant corner radius is {rounded.none} (0px) applied to all primary interactive surfaces—buttons ({component.button-primary}), the announcement bar ({component.announcement-bar}), and modal containers ({component.cookie-modal}). Rounded forms exist only at micro-scale ({rounded.xs} at 2–2.5px for input fields) or macro-scale ({rounded.pill} at 60px for avatar contexts). This binary—perfectly sharp or dramatically round—creates a visual grammar of tool-like utility punctuated by human-scale softness.

Sub-systems detected include a platform preview dialect (the laptop mockup displaying AIP dashboard UI within {component.card-platform-preview}, featuring dense data-grid aesthetics with purple-tinted informational cards), a consent/legal dialect (the cookie modal operating in inverted light-mode with {colors.surface-elevated} backgrounds and {colors.ink} text), and a notification dialect (the top announcement bar using {colors.surface-dark} as a slightly warmer black than the primary canvas).

Key Characteristics:

• Near-black canvas ({colors.surface-soft} — #000000) serving as the universal ground plane for all above-fold content
• Display typography at 80px ({typography.display-xl}) in Alliance No.2, weight 400, with aggressive -3.4px letter-spacing creating cinematic headline density
• Classic blue links ({colors.primary} — #0000ee) as the sole brand-color accent in an otherwise achromatic environment
• Zero-border-radius buttons ({rounded.none}) with 1px solid {colors.border-strong} strokes creating technical-drawing precision
• White CTA buttons ({component.button-primary}) with dark text providing maximum contrast inversion against dark backgrounds
• Translucent overlay system ({colors.surface-translucent} at 20% white opacity) for glassmorphic layering effects
• Proprietary dual-typeface system (Alliance No.1 for body, Alliance No.2 for display) with no Google Fonts equivalent
• Shadow vocabulary limited to two tiers: {extensions.shadows.sm} for subtle elevation and {extensions.shadows.md} for modal/popup depth
• Spacing dominated by {spacing.xl} (20px) and {spacing.xxl} (24px) tokens, with a dramatic {spacing.hero} (193px) reserved for vertical hero band padding

Colors

Brand & Accent

• Primary ({colors.primary} — #0000ee): Classic web blue used exclusively for inline hyperlinks and informational emphasis; appears in the CEO letter link within the announcement bar and as the canonical link color throughout.
• Primary Hover ({colors.primary-hover} — #0000cc): Darkened blue state for link hover interactions; derived from standard blue darken behavior.
• Primary Active ({colors.primary-active} — #0000ee): Active/pressed state for primary-colored interactive elements; maintains full saturation per extracted data.
• Accent ({colors.accent} — #0000ee): Aliased to primary; the system does not maintain a separate accent vocabulary—blue serves all chromatic roles.

Surface

• Canvas ({colors.canvas} — #f3f3f3): Light neutral gray appearing in structural/container contexts outside the primary dark viewport; likely used for page backgrounds in non-hero sections or document-style surfaces.
• Surface Soft ({colors.surface-soft} — #000000): Pure black serving as the primary hero canvas and navigation background; the dominant visual field in the above-fold experience.
• Surface Dark ({colors.surface-dark} — #1e2124): Very dark charcoal (warm-tinted) used for the announcement bar background and accept-button fills; provides subtle differentiation from pure-black surfaces while remaining in the near-black family.
• Surface Darkest ({colors.surface-darkest} — #0d0e10): Deepest black shade detected in container contexts; used for maximum-contrast inset surfaces or deeply nested UI layers.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white used exclusively for elevated interactive elements (primary buttons, icon buttons, cookie modal background); creates maximum pop against dark canvases via value inversion.
• Surface Translucent ({colors.surface-translucent}): 20%-opacity white overlay used for glassmorphic layering effects; allows underlying content to partially show through while brightening the layer.
• Overlay ({colors.overlay}): 50%-opacity black used for backdrop dimming behind modals and popup surfaces; provides the standard modal-scrim treatment.

Text & Ink

• Ink ({colors.ink} — #1e1f2b): Near-black navy used for body text within light-surface contexts (cookie modal, documentation surfaces); the primary reading color when backgrounds are white or light gray.
• Body ({colors.body} — #ffffff): Pure white used for all body text, headlines, and UI labels within dark-surface contexts; the primary reading color against {colors.surface-soft} and {colors.surface-dark}.
• Body Dark ({colors.body-dark} — #1e2124): Dark charcoal used specifically for text inside white/light buttons ({component.button-primary}); ensures readability when text sits on {colors.surface-elevated} backgrounds.
• Muted ({colors.muted} — #767676): Medium-gray used for secondary text, metadata, and de-emphasized content within light contexts; provides clear hierarchy below primary ink.
• Muted Light ({colors.muted-light} — #aaaaaa): Light-medium gray used for secondary text within dark contexts (footer copy, helper text); visible against black without competing with primary white.
• Muted Lighter ({colors.muted-lighter} — #b9b9b9): Light gray used for tertiary/deemphasized text in dark environments; appears in label contexts like the hero subtext ("Scroll to Explore").
• Muted Surface ({colors.muted-surface} — #efefef): Very light gray (near-white) used specifically for the main headline text color against the hero's black canvas; provides slight warmth versus pure white for massive display type.
• On Primary ({colors.on-primary} — #ffffff): White text color guaranteed to satisfy AA contrast against {colors.primary} (#0000ee); used for any text rendered directly on blue backgrounds.
• On Dark ({colors.on-dark} — #ffffff): Canonical white for text on any dark surface (#000000 or darker).
• On Surface ({colors.on-surface} — #1e1f2b): Canonical dark text for text on any light surface (#ffffff or lighter).

Hairlines & Borders

• Hairline ({colors.hairline} — #efefef): Very light gray used for subtle divider lines and minimal-stroke borders in light contexts.
• Border Strong ({colors.border-strong} — #1e2124): Dark charcoal matching {colors.surface-dark}; used as the 1px stroke on all primary buttons ({component.button-primary}), icon buttons, and outlined secondary buttons—creating high-visibility technical-drawing edges.
• Border Input ({colors.border-input} — #dbdbdb): Medium-light gray used for form input field borders; provides visible-but-gentle field delineation.

Semantic

• Error ({colors.error} — #c13515): Red-toned error state color for validation failures and destructive actions; standard semantic red shifted toward terracotta.
• Success ({colors.success} — #006400): Deep green for confirmation states and positive indicators.
• Warning ({colors.warning} — #b8860b): Dark goldenrod/yellow-orange for caution states and attention-requiring elements.
• Info ({colors.info} — #0000ee): Blue aliased to primary; used for informational callouts and help text.
• Link ({colors.link} — #0000ee): Classic blue for all inline navigational links; identical to {colors.primary}.
• Link Active ({colors.link-active} — #000099): Darkened blue for visited or active-link states.

Typography

Font Family

The Palantir type system is built on two weights of two proprietary typefaces from the Alliance family, served as self-hosted WOFF2/WOFF files from /fonts/Alliance/. Alliance No.1 functions as the workhorse grotesque sans-serif, handling all body text, UI labels, button copy, and smaller heading sizes (h3, h4). It features Regular (400) and Bold (700) weights in both roman and italic styles, with an additional Medium (500) weight detected in the font-face declarations. Alliance No.2 serves as the display companion—a subtly wider or alternatively-proportioned variant reserved exclusively for heroic headlines (h1 at 80px, h2 at 10px label scale). Both faces fall back to a comprehensive system-ui stack (system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif), ensuring graceful degradation on systems where the Alliance fonts fail to load.

An Apercu Mono Pro monospace face (weight 500) is declared in the font-face list but was not actively detected in above-fold rendering; it likely serves code-block, terminal, or data-label contexts in documentation or platform-preview sections. The absence of monospace in the primary viewport suggests it is reserved for specialized sub-systems rather than general UI use.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 400 | 0.975 (78px) | -3.4px | Hero headline (H1) — "AI-Powered Automation for Every Decision" | | {typography.display-lg} | 80px | 400 | 0.975 (78px) | -3.4px | Alias for display-xl; largest headline size in system | | {typography.display-md} | 34px | 400 | 1.0588 (36px) | -1.7px | Section headlines (H3); secondary display tier | | {typography.title-lg} | 34px | 400 | 1.0588 (36px) | -1.7px | Alias for display-md; major section titles | | {typography.title-md} | 10px | 400 | 1.6 (16px) | 0.5px | Label text (H2); uppercase-spaced metadata, "Scroll to Explore" | | {typography.title-sm} | 14px | 700 | 1.3 (18.2px) | 0 | Small bold titles (H4); card titles, label headers | | {typography.body-lg} | 16px | 400 | 1.4286 (22.86px) | 0 | Primary body copy; paragraph text, descriptions | | {typography.body-md} | 16px | 400 | 1.4286 (22.86px) | 0 | Standard body text alias; button copy, nav items | | {typography.body-sm} | 14px | 400 | 1.5 (21px) | 0 | Secondary body text; cookie disclaimer, captions | | {typography.caption} | 10px | 400 | 1.6 (16px) | 0.5px | Micro-copy; legal text, timestamp labels | | {typography.button} | 16px | 400 | 1.25 (20px) | 0 | Button and CTA label text | | {typography.label} | 14px | 700 | 1.3 (18.2px) | 0 | Form labels, field titles; bold weight for scanning |

Principles

Palantir's typographic hierarchy is established through scale aggression rather than weight variation. The jump from body text at 16px to the display headline at 80px represents a 5× size differential—one of the most dramatic ratios in contemporary enterprise web design. This scale disparity performs the heavy lifting of visual hierarchy; the designer trusts that an 80px line of text will dominate regardless of its weight, and consequently keeps display weight at a modest 400 (Regular). This is a deliberate counter-move against the trend of bolding everything for emphasis: here, bigness itself carries the authority.

Letter-spacing manipulation provides the second hierarchical lever. Display text uses negative tracking (-3.4px at 80px, -1.7px at 34px), tightening character clusters to create dense, architectural word-shapes that read as graphic objects rather than strings of characters. Conversely, the smallest text tier ({typography.title-md} / {typography.caption} at 10px) employs positive tracking (+0.5px), opening letterforms for legibility at micro-scale and simultaneously creating a spaced-out, label-like aesthetic reminiscent of technical specifications or architectural drawings.

Weight variation enters the system at exactly one structural point: the bold 700 weight is reserved for {typography.title-sm} and {typography.label}, marking the transition from prose-reading content to scanning-oriented UI chrome (form labels, card titles, metadata headers). This creates a clean bimodal distribution: everything you read continuously is weight 400; everything you scan for structure is weight 700. There is no intermediate 500 or 600 weight in the active hierarchy, despite the Medium (500) weight being available in the font file—suggesting intentional restraint.

Color-as-hierarchy plays a supporting role. The main headline renders in {colors.muted-surface} (#efefef)—a slightly warm off-white—rather than pure #ffffff, creating subtle tonal distinction from body copy. The "Scroll to Explore" subtext drops to {colors.muted-lighter} (#b9b9b9), establishing a three-step value scale (headline > body > helper) purely through grayscale positioning within the white-to-gray spectrum.

Note on Font Substitutes

Alliance No.1 and Alliance No.2 are proprietary typefaces with no public Google Fonts equivalent. For implementation purposes requiring open-source alternatives, map Alliance No.1 to Inter (Google Fonts) for its similar grotesque proportions, tall x-height, and excellent screen rendering at all weights. Map Alliance No.2 to Manrope (Google Fonts) for its slightly wider proportions and geometric character that approximates the display variant's presence at large scale. Define CSS custom properties as follows:

:root {
  --font-body: 'Inter', 'Alliance No.1', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Alliance No.2', 'Inter', 'Alliance No.1', system-ui, -apple-system, sans-serif;
}

Note that Manrope lacks the exact -3.4px tracking behavior of Alliance No.2 at 80px; manual letter-spacing adjustment will be required to match the reference design's character density.

Layout

Spacing System

• Base unit: 2px (implicit from {spacing.xxs} at 6px being the smallest meaningful token).
• Tokens: {spacing.xxs} (6px — micro-gaps between tightly-grouped elements), {spacing.xs} (8px — icon-to-text gaps), {spacing.sm} (10px — internal button padding, compact spacing), {spacing.md} (12px — form-field padding), {spacing.lg} (16px — minor component margins), {spacing.xl} (20px — dominant spacing token; used 303 times in extracted CSS for grid gaps, padding blocks, and inter-element spacing), {spacing.xxl} (24px — section-internal padding, card interiors), {spacing.section-xl} (30px — medium vertical rhythm), {spacing.section-xxl} (32px — major vertical rhythm), {spacing.hero} (193px — exclusive hero-band vertical padding creating dramatic top-section breathing room), {spacing.section} (80px — standard section-to-section vertical gap).
• Section padding (vertical): {spacing.hero} (193px) used in the hero band; {spacing.section} (80px) for subsequent content sections.
• Card internal padding: {spacing.xl} (20px) for standard content cards; {spacing.xxl} (24px) for the cookie consent modal ({component.cookie-modal}).
• Gutters: Container max-width detected at 1120px for the header/nav context; the hero content appears to operate within a similar constrained column, with the headline text left-aligned within approximately a 50–60% column width, leaving the right portion available for product imagery (the laptop mockup).

Grid & Container

Max content width is 1120px (extracted from header container width). This establishes a readable measure that accommodates the 80px display headlines without excessive line lengths. The layout philosophy is editorial-cinematic: the hero section does not attempt to center content in a balanced symmetrical grid; instead, it uses asymmetric placement where the massive headline occupies the left ~55% of the viewport and the platform-preview laptop image anchors the right side, creating a diagonal visual flow from text to product evidence.

At desktop resolution, the nav bar ({component.top-nav}) uses a three-zone layout: logo flush-left, primary CTA ("Get Started") positioned right-of-center, and utility controls (search icon, menu icon) flush-right. The announcement bar spans full-viewport width with text left-aligned and close button right-aligned.

Specific grid behaviors observed: the platform preview within the laptop screen displays a dense card-grid layout (multiple columns of data cards with status indicators, progress bars, and metric labels) that suggests an internal masonry or auto-grid system—but this exists as imagery/content-within-imagery rather than a page-level layout pattern.

Whitespace Philosophy

The system practices dramatic asymmetry in whitespace distribution. The hero band's 193px vertical padding ({spacing.hero}) represents nearly 20% of a standard 1080p viewport height dedicated to empty space above and below the headline block. This is not lazy spacing—it is theatrical pause, allowing the 80px type to register as environment rather than element. Within components, whitespace is tighter: buttons use 10.2857px padding ({spacing.sm}-adjacent), and the cookie modal packs its legal text, links, and action buttons into a relatively dense 460px-wide container with 20px internal padding. The philosophy is: macro-spacing is generous to cinematic effect; micro-spacing is efficient to signal tool-like precision.

Header Architecture

┌─────────────────────────────────────────────────────────────┐ ← 72px height ({component.top-nav})
│ [🔘 Palantir]                    [Get Started] [🔍][☰]     │
└─────────────────────────────────────────────────────────────┘
   ↑ logo                         ↑ CTA        ↑ utilities
                              (button-primary)  (icon buttons)
                                     max-width: 1120px content area

Hero Section

┌───────────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────────────┐   │
│ │  [Announcement Bar: CEO Letter link...            ] [✕]    │   │ ← announcement-bar
│ └─────────────────────────────────────────────────────────────┘   │
│                                                                   │
│ ┌─────────────────────────────────────────────────────────────┐   │
│ │                                                             │   │
│ │   AI-Powered Automation                                      │   │ ← display-xl (80px)
│ │   for Every Decision                                         │   │     color: {colors.muted-surface}
│ │                                                             │   │
│ │   SCROLL TO EXPLORE                                          │   │ ← title-md (10px, tracked)
│ │                                                             │   │     color: {colors.muted-lighter}
│ │                                             ┌───────────┐   │   │
│ │                                             │  LAPTOP   │   │   │ ← card-platform-preview
│ │                                             │  PREVIEW  │   │   │     (product imagery)
│ │                                             └───────────┘   │   │
│ │                                                             │   │
│ └─────────────────────────────────────────────────────────────┘   │
│              ↑ padding: 193px vertical ({spacing.hero})           │
└───────────────────────────────────────────────────────────────────┘

Cookie Consent Modal (Bottom-Right Overlay)

┌───────────────────────────────────────────────┐
│ This website uses cookies and other tracking  │
│ technologies to enhance user experience...    │
│                                              │
│ Cookie Policy                                │
│                                              │
│ ┌──────────────────────────────────────────┐ │
│ │         Accept Cookies                   │ │ ← button-cookie-accept
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ Do Not Sell or Share My Personal        │ │ ← button-cookie-decline
│ │ Information                             │ │
│ └──────────────────────────────────────────┘ │
│                                        [✕]  │ ← cookie-modal-close
└───────────────────────────────────────────────┘
  ↑ width: 460px, bg: white, shadow: md
  ↑ positioned: fixed bottom-right

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, no border | Base canvas ({colors.surface-soft}), flat nav background, hero band | | 1 (Hairline) | 1px solid border ({colors.border-strong}) | Buttons ({component.button-primary}), icon buttons, outlined secondaries | | 2 (Soft drop) | {extensions.shadows.sm} (0 2px 10px rgba(0,0,0,0.1)) | Subtle elevation for floating elements | | 3 (Modal) | {extensions.shadows.md} (0 0 18px rgba(0,0,0,0.2)) | Cookie consent modal ({component.cookie-modal}), popup panels | | 4 (Product) | {extensions.shadows.lg} + internal complexity | Laptop/device mockup frames containing platform previews |

Philosophy: Palantir's elevation system is flat-first with targeted exceptions. The dominant visual mode is zero-elevation: the hero canvas, nav bar, and announcement bar sit completely flat against the viewport with no shadow, relying on pure color contrast (black vs. white vs. gray) to establish layering. Shadows appear only when a surface physically breaks away from the page plane—most notably the cookie modal, which requires a {extensions.shadows.md} treatment to declare its "floating above" relationship to the content beneath it. Button surfaces avoid shadows entirely, using instead 1px border strokes to define their edges; this is a deliberate rejection of Material Design-style floating-action-button elevation in favor of a technical-drawing aesthetic where objects are defined by outline rather than atmospheric depth. The deepest shadow tier ({extensions.shadows.lg}) is reserved for the laptop mockup frame, treating the product visualization as a physical object placed within the composition rather than a UI layer.

Decorative Depth

Beyond functional elevation, the system employs translucent overlay layers ({colors.surface-translucent} at 20% white opacity) for glassmorphic effects within the platform preview imagery (visible inside the laptop screen as semi-transparent card surfaces on the AIP dashboard). Additionally, the platform preview itself contains internal color-blocking (purple-tinted informational cards, green/orange status badges) that creates decorative chromatic depth entirely contained within the product-mockup subsystem—this is "depth by content" rather than "depth by shadow."

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Primary buttons, icon buttons, announcement bar, cookie modal, nav container—all major structural and interactive elements | | {rounded.xs} | 2px | Subtle rounding for small UI chrome, potential input fields | | {rounded.sm} | 2.5px | Form input fields, checkbox containers, minor rounded elements | | {rounded.DEFAULT} | 4px | Standard default radius for generic components not otherwise specified | | {rounded.md} | 6px | Secondary card surfaces, panel corners | | {rounded.lg} | 10px | Platform preview card (laptop frame), larger image containers | | {rounded.pill} | 60px | Pill-shaped elements (avatar placeholders, tag chips) | | {rounded.full} | 9999px | Fully circular elements (icon circles, status dots) |

Photography Geometry

Product imagery (the laptop device mockup) is presented with moderate rounding ({rounded.lg} — 10px) on the outer device frame, softening the hardware rectangle into a approachable object. The screen content within the laptop displays a grid-based dashboard UI with individual data cards that appear to use small-radius rounding (likely {rounded.sm} or {rounded.DEFAULT}). The overall treatment is photographic realism with device-chrome presentation—not abstract illustration, not flat vector, but a photographed-or-rendered laptop showing actual software interface. Images are not full-bleed; they sit within the compositional grid with clear surrounding negative space (the black hero canvas wraps around the laptop image).

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The primary navigation container spanning the full viewport width at 72px height. Background {colors.surface-soft} (pure black), containing the logo mark, primary CTA, and utility controls. Uses no border radius, no shadow—flush against the viewport edges. Text within uses {typography.body-md} in {colors.body} (white). This is a structural shell rather than an interactive component itself, but it defines the spatial home for all nav-contained child components.

{component.nav-logo} — The Palantir wordmark (circle-P + "Palantir" text) positioned flush-left within {component.top-nav}. Transparent background, white text ({colors.body}), rendered at {typography.body-lg} (16px). The logo combines a geometric circle-P symbol with the Alliance No.1 wordmark. No padding overrides detected—it inherits nav spacing.

{component.announcement-bar} — Full-width notification strip positioned above the nav (or as the topmost layer). Background {colors.surface-dark} (warm charcoal #1e2124), text in {colors.body} (white) at {typography.body-md}. Padding is 14px 19px (asymmetrical: more horizontal than vertical). Contains inline link text styled with {colors.link} (blue). Features a {rounded.none} corner treatment matching the brutalist button language. Close button ({component.announcement-bar-close}) sits at the far right edge.

{component.announcement-bar-close} — Dismissal button for the announcement bar. Background matches parent ({colors.surface-dark}), text {colors.body}, typography {typography.button}. Padding 14px 19px making it a substantial click target. Sharp corners ({rounded.none}). Renders an × glyph or "Close" text depending on breakpoint.

{component.button-primary} — The principal call-to-action ("Get Started") appearing in the nav bar. Background {colors.surface-elevated} (pure white), text {colors.body-dark} (#1e2124 dark charcoal) at {typography.button} (16px/400). Border is 1px solid {colors.border-strong} creating a high-contrast rectangular frame. Padding 10.2857px (a precise fractional value derived from the design system's mathematical spacing). Corner radius is {rounded.none} — perfectly sharp. This button inverts the page's dominant polarity (white-on-black becomes black-on-white), making it the brightest object in the nav field and drawing the eye through value contrast alone.

{component.button-secondary} — Outlined/gost button variant with transparent background, white text ({colors.body}), and 1px solid {colors.body} border (white stroke on dark canvas). Same dimensions and typography as {component.button-primary}. Used for secondary actions that should be visible but not compete with the primary CTA. Sharp corners ({rounded.none}).

{component.button-icon} — Square icon-trigger button (44px × 44px) used for menu toggle. White background ({colors.surface-elevated}), dark text ({colors.body-dark}), 1px solid {colors.border-strong} border, {rounded.none}. Contains an SVG icon (hamburger/menu lines). Sits adjacent to {component.button-search} in the nav's utility cluster.

{component.button-search} — Search-trigger button matching {component.button-icon} specifications: 44px square, white background, dark text/icon, bordered, sharp corners. Contains magnifying glass/search SVG icon.

{component.button-menu} — Menu-toggle button (alias/specimen of icon button pattern). Identical construction to search button; contains hamburger-menu SVG. In the screenshot, this appears as the rightmost element in the nav utility group.

Cards & Containers

{component.hero-band} — The dominant above-fold section occupying the full viewport below the nav. Background {colors.surface-soft} (black), with {spacing.hero} (193px) vertical padding creating massive breathing room. Contains the {component.hero-headline}, {component.hero-subtext}, and platform-preview imagery. No border, no radius, no shadow—it is the ground plane, not an object upon it.

{component.hero-headline} — The "AI-Powered Automation for Every Decision" H1 text. Transparent background, text color {colors.muted-surface} (#efefef off-white), typography {typography.display-xl} (80px/400/-3.4px tracking). This is the typographic centerpiece of the entire page—rendered in Alliance No.2 at a scale that approaches environmental graphics. Left-aligned within the content column.

{component.hero-subtext} — "Scroll to Explore" helper text beneath the headline. Color {colors.muted-lighter} (#b9b9b9), typography {typography.title-md} (10px/400/+0.5px tracking). Functions as a directional cue encouraging downward scroll; its diminutive scale (10px = 80px headline ÷ 8) reinforces the hierarchy gap.

{component.card-platform-preview} — The laptop device mockup displaying the AIP (Artificial Intelligence Platform) dashboard interface. Background {colors.surface-dark} (dark charcoal matching the inner-screen area), rounded at {rounded.lg} (10px) to soften the device frame. Shadow {extensions.shadows.lg} gives it lift from the hero canvas. This component is primarily imagery rather than interactive UI—it contains a photograph/render of a laptop showing dense data-grid UI with purple information cards, status indicators, and metrics. The internal dashboard aesthetic (purple accents on dark backgrounds) constitutes a sub-brand dialect within the larger black-and-white system.

{component.cookie-modal} — Fixed-position consent modal anchored bottom-right (or centered on smaller viewports). Background {colors.surface-elevated} (white), text {colors.ink} (#1e1f2b dark navy) at {typography.body-sm}. Padding {spacing.xl} (20px). Width constrained to 460px. Corner radius {rounded.none} (sharp). Shadow {extensions.shadows.md} (18px blur) creates clear separation from underlying content. Contains legal disclaimer text, a "Cookie Policy" link, and two action buttons ({component.button-cookie-accept} and {component.button-cookie-decline}). A close button ({component.cookie-modal-close}) sits top-right.

{component.cookie-modal-close} — Dismissal × button for the cookie modal. Transparent background, {colors.ink} text, 32px size, positioned absolute top-right within the modal.

{component.button-cookie-accept} — Primary action within cookie modal: "Accept Cookies". Background {colors.surface-dark} (dark charcoal), text {colors.body} (white), typography {typography.button}. Padding 14px 24px. Sharp corners ({rounded.none}). Fills the modal's action area as a solid dark block.

{component.button-cookie-decline} — Secondary action within cookie modal: "Do Not Sell or Share My Personal Information". Transparent background, {colors.ink} text, typography {typography.button}. Padding 14px 24px. Border 1px solid {colors.border-strong}. Sharp corners ({rounded.none}). Stacks vertically below the accept button.

Inputs & Forms

{component.text-input} — Standard text input field. Transparent background, text {colors.ink}, typography {typography.body-md}. Rounded at {rounded.sm} (2.5px) — one of the few components using non-zero radius, softening the input's rectangle for affordance. Padding {spacing.sm} {spacing.md} (10px horizontal, 12px vertical). Border 1px solid {colors.border-input} (#dbdbdb light gray). Height adapts to content plus padding. Focus state would introduce ring/border-color change (documented as conceptual guidance only; see no-hover policy).

Navigation & Utility

{component.skip-nav} — Accessibility "Skip to Content" link positioned offscreen until focused. Background {colors.surface-dark}, text {colors.body}, typography {typography.body-md}. Critical for keyboard navigation and screen reader users; visually hidden until :focus-visible brings it into view.

{component.link-inline} — Standard inline hyperlink (exemplified by the "Letter to Shareholders" link in the announcement bar and "Cookie Policy" link in the modal). Transparent background, text {colors.link} (#0000ee blue), typography {typography.body-md}. Underline appears on hover/focus (per browser default or custom implementation). The blue link is the only chromatic element in an otherwise achromatic interface—making it semantically unmissable.

{component.footer} — Page footer (detected in container data, not fully visible in above-fold screenshot). Background {colors.surface-soft} (black), text {colors.muted} (#767676 gray), typography {typography.body-sm}. Padding {spacing.section-xxl} (32px) vertical. Contains sitemap links, legal copy, and social/utility navigation in muted gray tones.

Do's and Don'ts

Do

• Do use {typography.display-xl} (80px) for the primary hero headline and trust its scale to establish dominance without bold weighting—the system achieves hierarchy through size, not weight.
• Do apply {rounded.none} (0px) to all primary buttons, modals, and structural containers; the sharp-corner language is a signature brand characteristic signaling technical precision.
• Do reserve {colors.primary} (#0000ee blue) exclusively for inline links and informational accents; never use it for button backgrounds or large color blocks.
• Do employ {spacing.hero} (193px) vertical padding in the hero section to create the cinematic, manifesto-like atmosphere that distinguishes Palantir's landing experience.
• Do invert button polarity for primary CTAs: use {colors.surface-elevated} (white) background with {colors.body-dark} text on dark canvases, creating maximum visual pop through value contrast.
• Do use {colors.surface-translucent} (20% white) for any overlay or glassmorphic layer effects within product-preview imagery or decorative depth contexts.
• Do set display type in Alliance No.2 ({typography.display-xl}, {typography.title-md}) and body type in Alliance No.1 ({typography.body-md}, {typography.body-sm}), respecting the dual-typeface division of labor.
• Do apply {typography.title-md} (10px, +0.5px tracking) to label/metadata text to create the spaced-out technical-specification aesthetic seen in "Scroll to Explore."
• Do use {extensions.shadows.md} (18px blur) for any modal or popup surface that floats above page content, and avoid shadows entirely for flat structural elements.
• Do constrain content width to 1120px maximum within the header and main content areas, maintaining the editorial measure that accommodates 80px headlines.

Don't

• Don't apply bold weight (700) to display headlines—they remain at weight 400 regardless of size; reserve bold for {typography.label} and {typography.title-sm} scanning contexts only.
• Don't introduce gradient backgrounds, glow effects, or neon accent colors—the brand vocabulary is strictly monochrome-plus-classic-blue; decorative color lives only inside product-preview imagery.
• Don't use {colors.link} (#0000ee) for button backgrounds or large UI surfaces; blue is exclusively a link/text-accent color, never a fill color.
• Don't add border radius to primary buttons, the cookie modal, or the announcement bar—the {rounded.none} sharp-corner treatment is mandatory for these signature components.
• Don't reduce the hero headline below 64px in any responsive context if possible; the 80px scale is foundational to the brand's cinematic voice (if compression is absolutely necessary, never go below 48px).
• Don't substitute Inter or system fonts for Alliance No.1/No.2 without adjusting letter-spacing values—the -3.4px tracking on display type is calibrated specifically to Alliance's glyph widths.
• Don't place white text directly on {colors.canvas} (#f3f3f3 light gray) without sufficient darkness; {colors.canvas} is intended for structural/background contexts, not dark-type hosting.
• Don't expand the shadow vocabulary beyond the three defined tiers ({extensions.shadows.sm}, .md, .lg); the system rejects Material Design's multi-level elevation in favor of flat-mostly-with-targeted-depth.
• Don't use {colors.muted-surface} (#efefef) for body text—it is reserved specifically for the 80px display headline's subtle warmth; body text should use {colors.body} (#ffffff).
• Don't implement hover states that change button background color dramatically; the system prefers subtle transitions (see Motion section) over transform-or-color inversions.

Motion & Animation

Transition Tokens

--transition-color: color 0.25s ease-in-out;
--transition-opacity: opacity 0.25s ease-in-out;
--transition-bg-color: background-color 0.25s ease-in-out;
--transition-combined: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
--transition-base: 0.25s ease-in-out;
--transition-fast-opacity: opacity 0.15s linear, filter 0.15s linear;
--transition-delayed-bg: background-color 0.125s ease-in 0.175s;
--transition-all: all 0.35s ease-in-out;

Keyframe Animations

• ptcom-design__progress__1s5jo4t — Progress bar fill animation for loading/step indicators
• ptcom-design__fadeInUp__3v2tsm — Fade-and-rise entrance animation for content blocks (opacity 0→1, translateY +20px→0)
• ptcom-design__fadeOutDown__3v2tsm — Fade-and-descend exit animation (inverse of fadeInUp)
• ptcom-design__shimmer__11r2569 — Shimmer/skeleton loading sweep effect for placeholder content
• ptcom-design__cover-reveal__ryusq1 — Wipe/reveal transition using clip-path or transform covers
• ptcom-design__side-cover-reveal__ryusq1 — Directional reveal from left edge
• ptcom-design__right-side-cover-reveal__ryusq1 — Directional reveal from right edge
• ptcom-design__far-right-side-cover-reveal__ryusq1 — Asymmetric reveal from far-right origin
• ptcom-design__horizontalScrollingCardsTrack__1pqcjb7 / __1xz2rij7 — Horizontal carousel/card-track scroll animation for showcase sections
• ptcom-design__trackScroll__1uylacw — Continuous marquee/infinite-scroll track motion
• gothamFlicker — CRT-style flicker effect (likely for easter-egg or Gotham-city branding moments)
• ptcom-design__glitch__1qhgft3 — Glitch/distortion animation for digital-artifact aesthetic
• ptcom-design__bounce__1qhgft3 — Bounce physics for playful micro-interactions
• ptcom-design__fadeIn__160n6a6 — Simple fade-in (no translation)
• ptcom-design__fadeOut__160n6a6 — Simple fade-out
• ptcom-design__bounce__zqmfyj — Alternative bounce variant (possibly different timing function)
• ptcom-design__popUp__zqmfyj — Scale-up entrance (0.9→1.0 or 0→1 with spring)
• ptcom-design__flicker-temp__zqmfyj — Temporary/opaque flicker (possibly for loading states)
• ptcom-design__moveGrayBackground__1meiksk — Gray-background position shift (parallax or reveal curtain)

Interaction Patterns

• Fade-up on scroll: Content blocks animate upward and fade in as they enter the viewport (fadeInUp keyframe), triggered by IntersectionObserver or scroll-position calculation. This creates a staggered "unveiling" effect as the user scrolls down the page.
• Horizontal scrolling showcase: Product-feature or testimonial cards move horizontally in a continuous or drag-scrollable track (horizontalScrollingCardsTrack, trackScroll), common in B2B landing pages for presenting multiple offerings.
• Modal entrance: Cookie consent and other modal surfaces likely use popUp or fadeIn with backdrop fadeIn (via {colors.overlay} transition), creating a smooth materialization effect.
• Button color transitions: All buttons transition background-color and color over 250ms ease-in-out on hover/focus—subtle, professional, never jarring.
• Shimmer loading: Placeholder content areas show a sweeping highlight (shimmer) during lazy-loading of images or async content.
• Glitch/flicker easter eggs: The presence of glitch, gothamFlicker, and flicker-temp keyframes suggests occasional intentional digital-distortion moments, possibly tied to brand Easter eggs (Palantir's Gotham origins) or section transitions that lean into the "software-as-intelligence-infrastructure" aesthetic.
• Opacity-only micro-transitions: Fast 150ms linear transitions on opacity and filter for icon hover states, tooltip appearances, and focus-ring effects—snappier than the 250ms color transitions.

Motion Philosophy: The system operates at a moderate animation level—not still (like a document), not expressive (like a creative agency site), but purposefully animated to guide attention and convey technological sophistication. Timing consistently centers around 250ms with ease-in-out easing, producing movement that feels engineered rather than decorated. The sheer variety of keyframe names (20+ distinct animations) reveals a motion-rich experience below the fold, even though the static screenshot captures only the initial state.

Imagery Style

• Photorealistic device mockup: The hero features a laptop computer (appears to be MacBook Pro-form-factor) displaying the actual Palantir AIP platform dashboard—this is not illustration but photographic or high-fidelity 3D render product imagery.
• Dashboard-as-imagery: Inside the laptop screen, the displayed UI shows a dense data-grid with multiple informational cards in varying states (purple-tinted cards for AI insights, orange/red status indicators, green progress bars)—creating a "product-in-action" visual proof point.
• Dark-mode product UI: The platform preview imagery uses a dark internal UI (dark backgrounds, colored accent cards) that harmonizes with the marketing site's own dark canvas, creating visual coherence between "the website about the product" and "the product itself."
• Purple accent subsystem: Within the platform preview, purple/violet tones appear as the signature informational color (AI insight cards have purple backgrounds), creating a sub-palette that lives entirely within the product-mockup context and does not leak into the marketing site's own token set.
• No lifestyle photography: There are no photos of people, offices, or customer scenarios—the imagery is 100% product/interface-focused, reinforcing Palantir's position as infrastructure/software rather than consumer-facing experience.
• Device chrome treatment: The laptop frame has realistic reflections, screen glare subtlety, and physical thickness, grounding the digital interface in tangible hardware reality.
• Full-bleed potential: While the current screenshot positions the laptop with surrounding black canvas, the image likely supports full-bleed or edge-to-edge treatments at wider breakpoints where the device can expand horizontally.
• Information density signaling: The dashboard preview intentionally shows high information density (many cards, many metrics, small type) to communicate "enterprise-grade" and "handles complex data"—visual complexity as a feature signal.
• No illustration style: Unlike many SaaS landing pages that use flat-vector illustration or 3D abstract shapes, Palantir relies exclusively on product screenshots/mockups for visual interest—the software IS the imagery.

Icon System

• Library: Custom SVG icons (no third-party icon library detected — no Lucide, Heroicons, Material Icons, or Font Awesome class names present in the extracted CSS classes).
• Specific icons observed:
  • Search/Magnifying glass — in {component.button-search}
  • Menu/Hamburger — three horizontal lines in {component.button-menu}
  • Close/X — dismissal glyph in {component.button-cookie-close} and {component.announcement-bar-close}
  • Circle-P Logo — the Palantir brand mark (concentric-circle P glyph) in {component.nav-logo}
  • Arrow/External link indicator — implied on the "Letter to Shareholders" link (standard link-arrow or external-link icon)
• Treatment: Icons render in currentColor, inheriting the text color of their parent component (white on dark backgrounds in nav buttons, dark on white in the cookie modal). Size appears to be 20px or 24px for nav utility icons, scaling proportionally within the 44px button containers. Stroke-based rendering (not filled) for search and menu icons; the close icon may be stroked X-marks or a simple ✕ glyph.
• Alignment: Icons are center-aligned within their square button containers ({component.button-icon}, {component.button-search}, {component.button-menu}), with equal padding on all sides creating a balanced hit target.

Recommended Frontend Stack

- Framework:      Next.js (React-based, inferred from __next/static asset paths 
                  and JSON-props page structure in the source)
- Styling:        CSS Modules (BEM-like naming: ptcom-design__ComponentName__hash
                  convention detected in class names) + CSS Custom Properties
                  for theming tokens
- Fonts:          Self-hosted WOFF2/WOFF from /fonts/Alliance/ directory;
                  Alliance No.1 & No.2 are proprietary (license required).
                  Fallback: Inter (body) + Manrope (display) from Google Fonts.
- Animation:      CSS Keyframes + JS-triggered class toggling (IntersectionObserver
                  for scroll animations; React state for modal entrances)
- Icons:          Custom SVG components (inline SVG or sprite sheet);
                  no icon library dependency
- Component lib:  Custom component library (ptcom-design namespace);
                  no shadcn/Radix/UI primitives detected

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Hero headline scales down (likely 48–56px), single-column layout, hamburger menu becomes primary nav, cookie modal goes full-width bottom-sheet, laptop image stacks below headline or hides | | Tablet | 640px – 1024px | Headline at 64–72px, two-column hero (text + image) begins, nav compresses, announcement bar text may truncate | | Desktop | 1024px – 1440px | Full 80px headline, 1120px content container, side-by-side hero layout, all nav elements visible | | Wide | > 1440px | Max-content-width constraint (1120px) centers content with increasing side margins, hero padding may expand beyond 193px |

Touch Targets

• {component.button-primary}: Padding 10.2857px + 16px font ≈ 44px minimum height — meets WCAG AAA 44×44px guideline.
• {component.button-icon} / {component.button-search} / {component.button-menu}: 44px × 44px explicit size — perfectly meets touch-target standards.
• {component.button-cookie-accept} / {component.button-cookie-decline}: Padding 14px 24px + 16px font ≈ 48px height — exceeds minimum.
• {component.text-input}: Padding 10px + 16px font ≈ 42–44px — at or near minimum; consider increasing to 48px on mobile.
• {component.announcement-bar-close}: Padding 14px 19px + 16px font ≈ 48px — exceeds minimum.

Collapsing Strategy

• Navigation: At mobile breakpoints, the "Get Started" CTA, search icon, and menu icon likely collapse into a hamburger-menu drawer (the menu icon's existence implies a hidden-mobile-nav pattern). The logo remains visible and flush-left.
• Hero layout: The asymmetric two-column layout (headline left, laptop right) collapses to single-column on mobile: headline stacks atop the laptop image (image may become full-width or hide to prioritize text readability). The 80px headline scales down significantly (estimated 40–48px on mobile) to prevent overflow.
• Cookie modal: Transforms from fixed bottom-right card (460px width) to full-width bottom-sheet on mobile, with buttons potentially stacking vertically and text reflowing.
• Announcement bar: May truncate CEO-letter link text with ellipsis on narrow viewports, or increase vertical height to wrap text while keeping the close button accessible.
• Platform preview (laptop): May become hidden, reduced to a smaller inset image, or converted to a scrolling horizontal showcase on mobile where the detailed dashboard UI would be illegible at small size.

Image Behavior

• Hero laptop image: Likely uses srcset or responsive <picture> element serving cropped/tighter-framed versions on mobile where the full laptop width would exceed viewport. May switch from horizontal-device orientation to a detail/crop shot, or disappear entirely on smallest screens.
• Internal dashboard UI (within laptop): The dense data-grid inside the laptop screen is illegible at mobile scale and likely serves as texture/color-atmosphere rather than readable interface; on mobile, this becomes a "mood" element whose specific content doesn't matter.
• Logo mark: Remains constant size across breakpoints (SVG scales crisply at any dimension).

Iteration Guide

1. Build a Next.js landing page implementing the Palantir dark-command-center aesthetic using the YAML frontmatter tokens as the single source of truth for all visual values. Reference every color, font size, radius, and spacing value via its {section.token} path—never hard-code magic numbers.

2. Establish CSS custom properties for the design tokens (e.g., --color-surface-soft: #000000; --font-display: "Alliance No.2", ...) and consume them throughout your component styles. This enables systematic theming and ensures no value drifts from the spec.

3. Implement the dual-typeface system: assign {typography.display-xl}, {typography.title-md}, and all display-* / title-* tokens to the Alliance No.2 font-family stack; assign {typography.body-md}, {typography.body-sm}, button, and all body-* / label-* tokens to Alliance No.1. If proprietary fonts are unavailable, substitute Inter for Alliance No.1 and Manrope for Alliance No.2, then manually calibrate letter-spacing to match the -3.4px / -1.7px / +0.5px values in the spec.

4. Construct the hero section with {spacing.hero} (193px) vertical padding, {colors.surface-soft} (black) background, and the {typography.display-xl} (80px) headline in {colors.muted-surface} (#efefef). Place the platform-preview image (laptop mockup) to the right of the headline in an asymmetric 55/45 or 60/40 column split at desktop width.

5. Build all buttons with {rounded.none} (sharp corners) and 1px solid borders using {colors.border-strong} for light-buttons-on-dark-canvas or {colors.body} for ghost-buttons. The primary CTA (Get Started) must use inverted polarity: white background, dark text. Never add border-radius to these buttons.

6. Implement the cookie consent modal as a fixed-position element (bottom-right on desktop, full-width bottom-sheet on mobile) with {colors.surface-elevated} background, {extensions.shadows.md} shadow, 460px width constraint, and {rounded.none} corners. Include the accept button (dark fill) and decline button (outlined) stacked vertically.

7. Add scroll-triggered animations using the ptcom-design__fadeInUp pattern: content blocks should start at opacity: 0; transform: translateY(20px) and animate to opacity: 1; transform: translateY(0) over 250ms ease-in-out when they enter the viewport (use IntersectionObserver with threshold ~0.15).

8. Create state variants (-hover, -focus, -disabled, -active) as separate component entries in your codebase, following the frontmatter pattern where {component.button-primary-active} is a sibling of {component.button-primary}, not nested within it. Apply color 0.25s ease-in-out and background-color 0.25s ease-in-out transitions to all interactive elements.

9. Respect the monochrome-plus-blue color discipline: the only permissible non-grayscale color in the marketing-site layer is {colors.primary} (#0000ee blue) for links. Any purple, green, orange, or red accents must be confined to the product-preview imagery subsystem (inside the laptop mockup) and must not leak into the marketing site's own component tokens.

10. Run accessibility audits ensuring all interactive elements meet WCAG AA contrast ratios: white text on black exceeds 21:1 (pass), {colors.ink} (#1e1f2b) on white is ~13:1 (pass), and {colors.link} (#0000ee) on white is approximately 8.6:1 (pass for large text, fails for normal text at 16px—consider darkening to #0000cc for body-text links or ensure link text is bold/large).

Font Setup

/* If Alliance fonts are available (self-hosted from /fonts/Alliance/) */
@font-face {
  font-family: 'Alliance No.1';
  src: url('/fonts/Alliance/AllianceNo1-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Alliance No.2';
  src: url('/fonts/Alliance/AllianceNo2-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Google Fonts fallback substitutes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Manrope:wght@400;700&display=swap');

:root {
  --font-body: 'Alliance No.1', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Alliance No.2', 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
}

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background-color shifts, border-color changes, and transform translations for buttons, links, and interactive cards were not extractable from the static screenshot. Implementation teams should define these following the 250ms ease-in-out transition pattern documented in Motion.
• Loading skeletons / pending states: While a shimmer keyframe was detected, the exact visual specification for skeleton-placeholder elements (border-radius, animation direction, base-color, highlight-color) was not captured in above-fold content.
• Form validation states beyond focus: Error, warning, and success input states (red/green/orange borders, accompanying message typography) are defined as semantic color tokens ({colors.error}, {colors.success}, {colors.warning}) but their exact application to input borders, backgrounds, and helper text was not visible in the screenshot.
• Dashboard / authenticated surfaces: The interior AIP platform UI visible within the laptop mockup uses its own sub-palette (purple information cards, status-indicator colors, data-visualization accents) that exists outside the marketing-site token system and was sampled only impressionistically.
• Sub-brand palettes: Palantir operates distinct products (Foundry, Gotham, AIP, Apollo) that may have their own color/typography dialects on sub-domains or in product-specific marketing sections—none of these were captured in this homepage-focused extraction.
• Mobile / responsive specifics: Exact breakpoint values, mobile headline sizes (below 80px), navigation drawer construction, and mobile cookie-modal layout are inferred from industry patterns rather than explicitly extracted from the desktop screenshot.
• Footer full specification: The footer container was detected in DOM measurements but falls below the fold; its column structure, link organization, legal copy styling, and social icons are not documented here.
• Secondary page templates: About, Careers, Products, Investors, and documentation pages likely follow modified versions of this design system with different density, content-patterns, and possibly lighter backgrounds ({colors.canvas} #f3f3f3) for text-heavy editorial sections—these variations are not represented.