---
version: alpha
name: CrowdStrike
description: Threat-born precision — near-absolute black canvas, signature adversary red as the sole accent, proprietary CrowdStrike Sharp Sans at heavy weight, edge-sharp radii softened only at the card level, and kinetic photography conveying relentless forward motion.

colors:
  # Primary canvas
  background: "#000000"
  background-section: "#ffffff"         # light sections alternate with dark hero
  surface: "#111111"                    # elevated panels, dark cards
  surface-light: "#f8f8f8"             # light-mode card surface

  # Text / ink
  ink: "#ffffff"                        # primary on dark canvas
  ink-secondary: "#a7a9ac"              # mid-gray supporting copy on dark
  ink-on-light: "#000000"              # primary text on white sections
  ink-secondary-light: "#707070"        # secondary text on white sections

  # Brand accent — CrowdStrike adversary red
  primary: "#ec0000"                    # rgb(236,0,0) — CTAs, hover states, dividers
  on-primary: "#ffffff"                 # text on red buttons
  primary-hover: "#ff0000"             # hover shift of primary, was rgb(255,0,0)
  primary-dark: "#c70000"             # pressed/active state, darker red

  # Gradient stops
  gradient-blue: "#1f60a2"            # red→blue gradient used in brand bars

  # Semantic
  error: "#ec0000"                    # aligned with brand red
  warning: "#ecd000"                  # amber from palette, rgb(236,208,0)
  info: "#1883fd"                     # bright link blue, seen in hover contexts

  # Borders
  border: "#2e2e2e"                   # subtle dark dividers on dark surface
  border-light: "#cccccc"             # hairlines on white sections

  # Shadow tints
  shadow-soft: "#000000"              # pure-black omnidirectional diffuse

typography:
  display-hero:
    fontFamily: "CrowdStrikeSharpSans-Bold, HaasGrotDisp-65Medium, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  display:
    fontFamily: "CrowdStrikeSharpSans-Bold, HaasGrotDisp-65Medium, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.13
    letterSpacing: 0px
  heading-section:
    fontFamily: "CrowdStrikeSharpSans-Bold, HaasGrotDisp-65Medium, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 1.4px
  heading-sub:
    fontFamily: "crowdstrike-sharp-sans, CrowdStrikeSharpSans-Mdm, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: 0px
  heading-card:
    fontFamily: "HaasGrotDisp-65Medium, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "HaasGrotDisp-45Light, NeueHaasDisplayPro-Light, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "HaasGrotDisp-55Roman, NeueHaasDisplayPro-Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "HaasGrotDisp-65Medium, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  button-ui:
    fontFamily: "CrowdStrikeSharpSans-Bold, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "NeueHaasDisplayPro-Medium, HaasGrotDisp-55Roman, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 56px
  3xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    border: 1px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: 1px solid {colors.primary-hover}
  button-primary-active:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    border: 1px solid {colors.ink-on-light}
  button-secondary-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    border: 1px solid {colors.border}
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.md}"
    padding: 24px
    border: 1px solid {colors.border-light}

  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 32px
    boxShadow: 0px 0px 30px 0px {colors.shadow-soft}

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  input-focus:
    borderColor: "{colors.primary}"
    outlineColor: "{colors.primary}"
    outline: 2px solid {colors.primary}

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
    border: 1px solid {colors.border}

  nav-bar:
    backgroundColor: "{colors.background-section}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.nav-link}"
    borderBottom: 1px solid {colors.border-light}
    padding: 0px 24px
  nav-link-hover:
    textColor: "{colors.primary}"

  tooltip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    boxShadow: 0px 0px 30px 0px {colors.shadow-soft}
---

# CrowdStrike Design System

## Overview

CrowdStrike's design language is built on absolute authority. The canvas is jet black — not charcoal, not near-black, but a true `{colors.background}` that reads as threat intelligence made visible. Against this field, the single brand accent — adversary red `{colors.primary}` — appears with the urgency of an alert. No other hue competes. The palette is deliberately binary: black and white structure the world; red signals action.

The typographic system reinforces the operational mindset. CrowdStrikeSharpSans-Bold at `{typography.display-hero}` sizes reads as forged steel — angular, confident, unequivocal. It shares the stage with Neue Haas Grotesk Display, a Swiss grotesque with clinical authority at body and UI sizes. Together they project speed without noise. The proprietary headline font signals a brand investing in its own visual language, not borrowing equity from off-the-shelf typefaces.

Photography and motion are the third pillar. Kinetic geometric forms — angular red shards, radial light streaks — pulse through hero sections, evoking the real-time nature of threat detection. The layout is not passive documentation; it communicates perpetual motion, as though the platform is always running, always watching. Sections flip between dark and light with structural purpose: dark for urgency and conviction, white for evidence and clarity.

**Key Characteristics:**
- Near-absolute black canvas `{colors.background}` establishes threat-intelligence gravity; no mid-tones in the primary surface system
- Adversary red `{colors.primary}` is the sole brand accent — used only for CTAs, active states, and brand graphic elements; never decorative
- CrowdStrikeSharpSans-Bold at `{typography.display-hero}` anchors all hero moments with proprietary typographic authority
- Neue Haas Grotesk Display (Light 300 for supporting copy, Medium 500 for UI) provides Swiss precision beneath the bold display layer
- Red-to-blue gradient `{colors.primary}` → `{colors.gradient-blue}` appears in brand bars and progress elements as a secondary motion motif
- 8px base grid dominates; spacing rhythm uses 8–16–24–32–56–96px — generous vertical breathing room in hero zones
- Border radius is strictly functional: `{rounded.md}` (8px) for interactive elements, `{rounded.xl}` (32px) for elevated modals and panels only
- Button primary is a saturated red fill with white type — no softening gradients, no shadows; authority through flatness
- Dual light/dark section pattern: dark hero → white evidence sections → dark closing CTA — a deliberate rhythm of conviction and proof
- PrimeReact component framework under the hood, suggesting enterprise product UI parity across Falcon platform surfaces
- Motion timing at 0.4s ease-out — deliberate rather than snappy, conveying measured operational confidence
- Shadows are omnidirectional black diffuse (`{colors.shadow-soft}` 0px 0px 30px) on elevated cards — depth without direction

## Colors

### Primary
- **Jet Black** (`{colors.background}`): The hero and default canvas. Never lightened; absolute black communicates non-negotiable security posture.
- **Section White** (`{colors.background-section}`): Alternating light sections for evidence, logos, and partner content. Provides visual breathing room without diluting the overall dark authority.
- **Elevated Surface** (`{colors.surface}`): Cards, panels, and inline containers on the dark canvas. Near-black, keeping brand coherence.

### Brand Accent
- **Adversary Red** (`{colors.primary}`): The singular brand color. Applied exclusively to primary CTAs, interactive hover indicators, geometric brand graphics, and navigation accent bars. Its scarcity is its power — when red appears, action is required.
- **Red Hover** (`{colors.primary-hover}`): Slightly brighter shift on hover to confirm interactivity.
- **Red Active** (`{colors.primary-dark}`): Deeper press state confirming execution.

### Text States
- **Primary Ink** (`{colors.ink}`): White on black canvas — maximum contrast, zero ambiguity.
- **Secondary Ink** (`{colors.ink-secondary}`): Cool mid-gray for supporting copy, metadata, and labels on dark surfaces. Matches the silver palette of security product interfaces.
- **On-Light Ink** (`{colors.ink-on-light}`): Pure black on white sections — consistent with the binary palette logic.
- **Link Blue** (`{colors.info}`): Used sparingly for interactive text links, drawing from security-dashboard blue traditions.

### Semantic
- **Warning** (`{colors.warning}`): Amber yellow, reserved for alert states in product UI; rarely visible on the marketing site.
- **Gradient Blue** (`{colors.gradient-blue}`): Appears only in linear brand gradients alongside red — evokes spectral threat mapping.

### Borders
- **Dark Border** (`{colors.border}`): Very subtle separation on dark surfaces. Nearly invisible but structurally present.
- **Light Border** (`{colors.border-light}`): Standard hairline dividers on white sections.

## Typography

### Font Family
- **Primary Display**: `CrowdStrikeSharpSans-Bold` — proprietary typeface with sharp angularity at bold weights. No external fallback declared; falls to `HaasGrotDisp-65Medium, Helvetica, Arial`
- **Supporting UI**: `HaasGrotDisp-65Medium` (Neue Haas Grotesk Display 65 Medium) — the workhorse at card titles, nav links, and UI labels
- **Body / Light**: `HaasGrotDisp-45Light` / `NeueHaasDisplayPro-Light` — weight 300 at body-large sizes; creates contrast between the heavy display and airy supporting copy
- **Monospace**: None detected; product interfaces may introduce Roboto Mono internally

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Primary hero headlines and above-fold campaign headers |
| `display` | Section-opening headers, product feature titles |
| `heading-section` | Module headings; letterspacing 1.4px adds structured formality |
| `heading-sub` | Sub-section labels, sidebar headers, feature category names |
| `heading-card` | Card titles, partner logos contextual text, resource titles |
| `body-large` | Lead paragraphs below hero — Light 300 weight provides contrast relief |
| `body` | Standard prose, description copy, product explanations |
| `nav-link` | Global navigation items — medium weight, compact |
| `button-ui` | All interactive control labels — Bold 600, consistently 16px |
| `caption` | Metadata, legal footnotes, chart labels, timestamps |

### Principles
- Proprietary headline typeface signals security-brand independence; do not substitute with generic system fonts at display sizes
- Weight contrast is extreme: 700 for headlines, 300 for body-large — the optical tension conveys command and calm simultaneously
- Letterspacing on `{typography.heading-section}` (1.4px) echoes the wide-spaced label tradition of security dashboards and enterprise tables
- Font size range 12–56px; no ultra-large editorial scale (100px+), keeping the voice authoritative rather than editorial
- All type on `{colors.background}` is white; the system does not use off-white or cream — purity of contrast is non-negotiable

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The system breathes generously in hero sections — 56px and 96px vertical gaps frame major content blocks — then tightens to 16–24px for card grids and feature lists. The contrast between spacious hero and dense evidence sections mirrors the product's signal-to-noise dynamic.

### Grid & Container
- Max content width: approximately 1440px
- 12-column grid at desktop, 4 columns at mobile
- Full-bleed hero backgrounds with constrained content columns; edge-to-edge red geometric graphics bleed behind the grid
- Sticky navigation collapses gracefully; mobile nav slides from left

### Whitespace Philosophy
- Generous vertical rhythm in hero (96px gaps) communicates enterprise confidence, not startup hustle
- Cards maintain consistent 24–32px internal padding regardless of card size
- Zero decorative whitespace — every gap is structural

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Navigation bar, inline text content, brand graphics |
| Subtle (Level 1) | `0px 0px 50px rgba(0,0,0,0.05)` | Light-section content containers |
| Card (Level 2) | `0px 0px 30px rgba(0,0,0,0.2)` | Standard cards, resource tiles, partner logos |
| Elevated (Level 3) | `0px 0px 30px rgba(0,0,0,0.2)` with 32px radius | Dialogs, modal panels, full-bleed elevated sections |
| Dialog (Level 4+) | `0px 12px 12px rgba(0,0,0,0.45)` | Overlay modals, tooltips requiring top prominence |
| Focus Ring | `2px solid {colors.primary}` | Interactive focus state, keyboard navigation |

**Shadow Philosophy**: Shadows are omnidirectional and black — no colored tints, no directional bias. The treatment is consistent with security-product UI conventions where depth must not imply ambiguity. On a black canvas, elevated surfaces distinguish themselves primarily through border and surface tone rather than shadow; shadows do the heavy lifting on white sections where contrast between the card and background is lower.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Navigation borders, horizontal rules, brand bar accents |
| `xs` | 2px | Cookie consent and utility overlays |
| `sm` | 4px | Image crops, icon containers |
| `md` | 8px | All interactive buttons, standard cards, input fields |
| `lg` | 16px | Tooltip containers, image tiles |
| `xl` | 32px | Modal dialogs, large elevated cards, full-bleed rounded sections |
| `pill` | 9999px | Tab indicators, circular icon buttons, toggle switches |

The system favors sharp edges with deliberate softening at the card and modal level. This is not a rounded-friendly system; `{rounded.md}` is the practical ceiling for buttons and inputs. The angularity echoes the brand's position as a precision security instrument, not a consumer product.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Saturated `{colors.primary}` fill, white type, 8px radius. Flat appearance; no gradient, no inner shadow. The red fill carries full authority.
- **`button-secondary`** — White background, black border on light sections; transparent with `{colors.border}` outline on dark sections. Respects the dual-mode surface logic.
- **`button-ghost`** — Transparent fill with subtle `{colors.border}` outline on dark canvas. Used for de-emphasized secondary actions in content-dense product sections.

### Cards

Standard card `{components.card}` uses the near-black surface with a subtle border and 8px radius. Light-mode cards `{components.card-light}` appear identically structured on white section backgrounds. Elevated modal-class cards `{components.card-elevated}` use 32px radius and the omnidirectional 30px black shadow.

### Inputs

Input fields `{components.input}` follow the same 8px radius and dark surface pattern as cards. Focus state `{components.input-focus}` activates a 2px solid red outline — brand-consistent and ADA-compliant by contrast.

### Badges / Tags

Primary badge uses red fill with white type and pill radius — status indicator or product category tag. Neutral badge uses the dark surface with gray ink for informational labels and filter chips.

### Navigation

Global nav is white-surface with black type during scroll, transitioning to transparent on hero entry. Nav links gain `{colors.primary}` on hover. Sticky at top; mobile breakpoint reveals hamburger toggling a full-width slide-in panel.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the single most important CTA per viewport — its scarcity is its potency
- Pair `{typography.display-hero}` Bold 700 with `{typography.body-large}` Light 300 to create the signature weight contrast that defines the brand voice
- Apply `{colors.background}` hero sections followed by `{colors.background-section}` white sections in alternating rhythm — it is a structural convention, not optional
- Use omnidirectional `{colors.shadow-soft}` black shadows for elevation on white sections; avoid tinted or warm shadows
- Maintain 8px as the standard interactive border radius; upgrade to 32px only for modal-class containers
- Reference `{colors.gradient-blue}` only as a gradient endpoint paired with `{colors.primary}` — never as a standalone fill
- Keep letterspacing at 1.4px for `{typography.heading-section}` — it is a brand fingerprint at label/module scale
- Use 0.4s ease-out for motion — conveys measured operational speed, not consumer-app snappiness

### Don't
- Don't use mid-gray backgrounds or navy blue as canvas alternatives — `{colors.background}` pure black is non-negotiable for brand coherence
- Don't introduce border-radius values between `{rounded.md}` and `{rounded.xl}` without explicit context; the system is effectively binary at card level
- Don't apply `{colors.primary}` red to decorative elements, headlines, or icon fills — it must retain its CTA and alert semantics
- Don't use the light-section surface `{colors.background-section}` for hero or feature sections — it belongs to evidence and social-proof zones only
- Don't use font weights below 300 (`{typography.body-large}`) for headlines or UI chrome; they read as insufficient authority
- Don't introduce warm shadows or colored drop shadows — all shadow tints use `{colors.shadow-soft}` pure black
- Don't add rounded elements at `{rounded.pill}` except for tab indicators and icon circles; pill buttons conflict with the angular brand posture
- Don't mix `{colors.info}` blue into CTAs or promotional copy — it belongs to functional link interactions only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <430px | Single-column layout, condensed navigation, reduced hero padding |
| Mobile | 430–767px | Single-column, touch-optimized tap targets, stacked card grid |
| Tablet | 768–1023px | 2-column card grid, abbreviated navigation labels |
| Desktop | 1024–1439px | Full 12-column grid, expanded navigation, multi-column hero |
| Large Desktop | ≥1440px | Max-width container centered; background graphics extend full bleed |

### Touch Targets
- Interactive elements maintain minimum 44px touch target height at mobile breakpoints
- Buttons defined with 12px vertical padding at 16px type size; padding scales to 14–16px at mobile for comfortable thumb reach
- Navigation items expand to full-width tappable rows in the mobile slide-in panel

### Collapsing Strategy
- Navigation collapses to hamburger icon at 1023px; slide-in panel occupies full viewport width
- Hero typography scales from 56px display to approximately 32–40px at mobile
- Card grids shift from 3–4 columns (desktop) → 2 columns (tablet) → 1 column (mobile)
- Generous 96px vertical spacing in desktop heroes compresses to 56–64px at tablet, 40–48px at mobile

### Image Behavior
- Hero full-bleed background graphics are CSS backgrounds; scale by viewport
- Product screenshots and Gartner chart images use responsive `max-width: 100%` with preserved aspect ratio
- Photography is cropped landscape at desktop, portrait/square at mobile to maintain above-fold impact

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Light section background: `{colors.background-section}`
- On-light text: `{colors.ink-on-light}`

### Example Component Prompts

- "Build a CrowdStrike-style hero section: `background: {colors.background}`, full-bleed. H1 in `{typography.display-hero}` white. Supporting paragraph in `{typography.body-large}` `{colors.ink-secondary}`. Single CTA button using `{components.button-primary}` with `{rounded.md}` radius. A secondary ghost button beside it using `{components.button-ghost}`. Right side: an abstract angular red geometric element using `{colors.primary}` fills at 15% opacity as a decorative layer."
- "Build a CrowdStrike resource card: `{components.card}` dark surface, `{rounded.md}` corners, 24px padding. Card title in `{typography.heading-card}` white. Body copy in `{typography.body}` `{colors.ink-secondary}`. Category badge using `{components.badge}` red pill. Bottom: a text link in `{colors.primary}` with hover underline. No box shadow on dark canvas."
- "Build a CrowdStrike CTA button: `background-color: {colors.primary}`, `color: {colors.on-primary}`, font-size from `{typography.button-ui}`, `border-radius: {rounded.md}`, padding 12px 24px, `border: 1px solid {colors.primary}`. Hover: `background-color: {colors.primary-hover}`, same border. Active: `background-color: {colors.primary-dark}`. Transition: background-color 0.2s ease-out."
- "Build a CrowdStrike navigation bar: `background: {colors.background-section}` white, sticky top-0, border-bottom `1px solid {colors.border-light}`. Logo left. Nav links center using `{typography.nav-link}` `{colors.ink-on-light}`; on hover `color: {colors.primary}`. Far right: ghost secondary button + primary red button using `{components.button-primary}` and `{components.button-secondary}`."
- "Build a CrowdStrike data badge / stat callout: flex container on `{colors.surface}` dark card, `{rounded.md}`. Large number in `{typography.display}` weight 700 white. Unit/label in `{typography.caption}` `{colors.ink-secondary}` uppercase 1.4px letterSpacing. Left border accent `4px solid {colors.primary}` to anchor the stat visually."
- "Build a CrowdStrike input field: `background: {colors.surface}`, `color: {colors.ink}`, `border: 1px solid {colors.border}`, `border-radius: {rounded.sm}`, padding 12px 16px, `{typography.body}` font. Focus state: `border-color: {colors.primary}`, `outline: 2px solid {colors.primary}`, outline-offset 2px. Placeholder in `{colors.ink-secondary}`."

### Iteration Guide

1. Start with `{colors.background}` pure black as the universal canvas — resist the temptation to soften to charcoal; the brand identity depends on this absolute
2. Red accent rule: `{colors.primary}` appears in exactly one primary CTA per section; all other interactive elements use ghost or secondary treatments
3. Weight contrast formula: headlines at Bold 700 (`{typography.display-hero}`), supporting copy at Light 300 (`{typography.body-large}`) — this pairing is the brand's typographic signature
4. Elevation is shadow-optional on dark canvas; `{components.card-elevated}` omnidirectional 30px black shadow activates on white-section surfaces where it has room to read
5. Color hierarchy: black → white → red → gray — any deviation from this order dilutes brand authority
6. Radius range: `{rounded.md}` for all interactive elements; `{rounded.xl}` for elevated containers only; `{rounded.none}` for graphic/rule elements
7. Alternate dark and light sections with structural intent — not randomly; dark for conviction statements, white for evidence, proof points, and partner logos

---

## 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 CrowdStrike. Brand names and trademarks belong to their respective owners.