> ## Documentation Index
> Fetch the complete documentation index at: https://site.aspect.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Most teams throw their build data away.

> Keeping every build event has been expensive enough that most teams sample it. So is the build getting slower? has no answer.

export const MarketingPage = () => <div className="marketing-page-marker" style={{
  display: "none"
}} />;

export const CTA = ({title, subtitle, primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#"}) => <section className="w-full flex justify-center px-4 py-16 md:py-20">
    <div className="w-full rounded-2xl text-white flex flex-col md:flex-row items-center justify-center gap-10 md:gap-16 p-8 md:p-12 text-center md:text-left" style={{
  maxWidth: "1140px",
  background: "linear-gradient(135deg, #1a3a5c 0%, #176ACC 100%)"
}}>
      <div>
        <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">{title}</h2>
        {subtitle && <div className="mt-3 text-blue-100 text-base">{subtitle}</div>}
      </div>
      <div className="flex flex-wrap gap-3 shrink-0 justify-center">
        {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-white text-blue-700 font-semibold hover:bg-blue-50 transition whitespace-nowrap shadow-sm">
            {primaryCta}
          </a>}
        {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-blue-300/50 text-white font-semibold hover:bg-blue-700/30 transition whitespace-nowrap ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
            {secondaryCta}
          </a>}
      </div>
    </div>
  </section>;

export const StatsBar = ({stats = []}) => <div className="flex flex-wrap justify-center gap-8 md:gap-16 py-4">
    {stats.map((stat, i) => <div key={i} className="flex flex-col items-center text-center">
        <span className="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-white">{stat.value}</span>
        <span className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{stat.label}</span>
      </div>)}
  </div>;

export const FeatureGrid3 = ({children}) => <div className="marketing-grid-3">{children}</div>;

export const FeatureGrid2 = ({children}) => <div className="marketing-grid-2">{children}</div>;

export const FeatureShowcase = ({title, description, href, linkText = "Learn more", flipped = false, label, children}) => <div className={`flex flex-col ${flipped ? "md:flex-row-reverse" : "md:flex-row"} items-center gap-10 md:gap-16 py-10`}>
    <div className="flex-1 min-w-0">
      {label && <p className="text-xs font-semibold tracking-widest text-blue-600 dark:text-blue-400 uppercase mb-3">{label}</p>}
      <h3 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-white tracking-tight">{title}</h3>
      <p className="mt-4 text-zinc-500 dark:text-zinc-300 leading-relaxed text-base">{description}</p>
      {href && <div className="mt-6">
          <a href={href} className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold text-sm hover:underline underline-offset-2">
            {linkText} →
          </a>
        </div>}
    </div>
    <div className="flex-1 min-w-0 feature-showcase-image">
      {children}
    </div>
  </div>;

export const PlatformFeature = ({title, description, href, linkText = "Learn more"}) => <div className="flex flex-col p-5 rounded-xl border border-zinc-200 dark:border-zinc-700/60 bg-white dark:bg-zinc-800/40 hover:border-blue-200 dark:hover:border-blue-700 hover:shadow-sm transition-all duration-200">
    <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">{title}</h3>
    <p className="mt-1.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{description}</p>
    {href && <a href={href} className="inline-flex items-center mt-3 text-xs text-blue-600 dark:text-blue-400 font-semibold hover:underline underline-offset-2">
        {linkText} →
      </a>}
  </div>;

export const Hero = ({title, subtitle, badge, eyebrow, heroImageClassName = "", primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#", centered = true, children}) => <section className="w-full flex justify-center px-4 pt-16 pb-16 md:pt-24 md:pb-24" style={{
  background: "linear-gradient(180deg, var(--hero-gradient-start, #f8fafc) 0%, var(--hero-gradient-end, #ffffff) 100%)"
}}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {centered && !children ? <div className="flex flex-col items-center text-center">
          {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
              {badge}
            </div>}
          {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
              {eyebrow}
            </div>}
          <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight" style={{
  maxWidth: "820px"
}}>
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
          {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem",
  maxWidth: "600px"
}}>
              {subtitle}
            </div>}
          {(primaryCta || secondaryCta) && <div className="flex flex-wrap gap-3 mt-10 justify-center">
            {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                {primaryCta}
              </a>}
            {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                {secondaryCta}
              </a>}
          </div>}
        </div> : <div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
          <div className="flex-1 min-w-0">
            {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
                {badge}
              </div>}
            {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
                {eyebrow}
              </div>}
            <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight">
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
            {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem"
}}>
                {subtitle}
              </div>}
            <div className="flex flex-wrap gap-3 mt-8">
              {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                  {primaryCta}
                </a>}
              {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                  {secondaryCta}
                </a>}
            </div>
          </div>
          {children && <div className={`flex-1 min-w-0 hero-image ${heroImageClassName}`}>
              {children}
            </div>}
        </div>}
    </div>
  </section>;

<MarketingPage />

<Hero title="Most teams throw their build data away." subtitle="Keeping every build event has been expensive enough that most teams sample it. So “is the build getting slower?” has no answer." primaryCta="Start a trial" primaryHref="/trial" secondaryCta="Back to BazelCon" secondaryHref="/bazelcon-2026" centered={false}>
  <img noZoom src="https://mintcdn.com/aspectbuild/4wAijf_e0qg5Bve0/images/marketing/illustrations/build-trends-hero.svg?fit=max&auto=format&n=4wAijf_e0qg5Bve0&q=85&s=e9b13eeb3beb4addd1074587290fd7d7" alt="Every build event kept and trended over a month, with ranked targets and attributed cost" width="720" height="480" data-path="images/marketing/illustrations/build-trends-hero.svg" />
</Hero>

<div className="w-full flex justify-center px-4 pt-8">
  <p className="text-center text-sm text-zinc-500 dark:text-zinc-400">
    <strong className="text-zinc-900 dark:text-white">Written for</strong> Platform teams who own build health, and whoever gets asked why CI costs grew.
  </p>
</div>

<div className="w-full flex justify-center px-4 py-8 md:py-12">
  <div className="w-full" style={{ maxWidth: "1140px" }}>
    <div className="mb-6">
      <h2 className="text-3xl md:text-4xl font-semibold text-zinc-900 dark:text-white tracking-tight">The question nobody can answer today</h2>
      <p className="mt-3 text-lg text-zinc-500 dark:text-zinc-300 leading-relaxed max-w-3xl">Ask a platform team whether the build got slower this quarter and you usually get an honest shrug.</p>
    </div>

    <div className="max-w-3xl mt-6">
      <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed">
        Not because they don’t care, but because the data that would answer it was discarded a week after it was produced. Everything downstream of that is guesswork: which target regressed, whether the cache is working as well as it did, which tests are genuinely unreliable versus which ones somebody remembers being annoyed by, and what any of it costs.
      </p>

      <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed mt-4">
        We rebuilt how Aspect ingests and stores Bazel build events from the ground up, so keeping all of them stops being the thing you economise on.
      </p>
    </div>

    <div className="mt-6 max-w-3xl">
      <ul className="space-y-3 text-zinc-600 dark:text-zinc-300 leading-relaxed" style={{ listStyle: "none", paddingLeft: 0 }}>
        <li className="flex gap-3">
          <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

          <span><strong className="text-zinc-900 dark:text-white">Direction of travel.</strong> A build that degrades 4% a week looks fine in every single observation and is 2.3× slower in six months. Without history there is no gradient.</span>
        </li>

        <li className="flex gap-3">
          <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

          <span><strong className="text-zinc-900 dark:text-white">Attribution.</strong> “The build is slow” is not actionable. “This library sits on the critical path of 60% of builds” is.</span>
        </li>

        <li className="flex gap-3">
          <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

          <span><strong className="text-zinc-900 dark:text-white">Evidence about flakes.</strong> Without retained per-attempt records, a flake is a claim with no number attached, so it never outranks feature work.</span>
        </li>

        <li className="flex gap-3">
          <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

          <span><strong className="text-zinc-900 dark:text-white">Cost attribution.</strong> Finance sees one cloud line item, and nobody can decompose it into the work that produced it.</span>
        </li>
      </ul>
    </div>
  </div>
</div>

<div className="w-full flex justify-center px-4 py-8 md:py-12 bg-gray-50 dark:bg-zinc-900">
  <div className="w-full" style={{ maxWidth: "1140px" }}>
    <FeatureShowcase label="Every build, together" title="A month of retained events, ranked and trended" description="Rank every target by volume, critical-path share, P90 wall time, cache hit rate, flake rate or pass rate, then switch from snapshot to trend, where each cell becomes a sparkline carrying its percentage change. Regressions surface without anyone going looking: you do not need to suspect a problem in order to find it.">
      <img noZoom src="https://mintcdn.com/aspectbuild/4wAijf_e0qg5Bve0/images/marketing/bazelcon-2026/target-trends.png?fit=max&auto=format&n=4wAijf_e0qg5Bve0&q=85&s=dde3ffe7834fa876b05bc37375cc66f8" alt="Targets page with month-long sparklines and a ranked target table" width="2336" height="736" data-path="images/marketing/bazelcon-2026/target-trends.png" />
    </FeatureShowcase>

    <p className="mt-4 text-sm text-zinc-500 dark:text-zinc-400">Measured on Aspect’s own production instance.</p>

    <div className="mt-10">
      <StatsBar
        stats={[
  { value: "37.6M", label: "build actions retained, one month" },
  { value: "10,151", label: "targets with full per-target history" },
  { value: "2.07M", label: "graph nodes in a single build" }
]}
      />
    </div>
  </div>
</div>

<div className="w-full flex justify-center px-4 py-8 md:py-12">
  <div className="w-full" style={{ maxWidth: "1140px" }}>
    <div className="mb-6">
      <h2 className="text-3xl md:text-4xl font-semibold text-zinc-900 dark:text-white tracking-tight">What changes when you keep it</h2>
    </div>

    <div className="mt-8">
      <FeatureGrid2>
        <PlatformFeature title="Trends per target" description="Read the direction of travel with its percentage change, rather than today’s number and a vague sense that things used to be faster." />

        <PlatformFeature title="Dependency attribution" description="Expand a target and see its dependencies with their own critical-path share, which gives you a sentence somebody can act on." />

        <PlatformFeature title="Flake evidence" description="Every run of every test, with every attempt retained. Filter to just the flaky ones and rank them against other work." />

        <PlatformFeature title="Cost, attributed" description="What builds cost, broken down rather than aggregated, so the conversation about the CI bill can be about specific work." />
      </FeatureGrid2>
    </div>

    <div className="mt-14">
      <div className="mb-6">
        <h2 className="text-3xl md:text-4xl font-semibold text-zinc-900 dark:text-white tracking-tight">Built on the protocol you already emit</h2>
      </div>

      <div className="max-w-3xl mt-6">
        <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed">
          Standard Build Event Protocol over gRPC, the same stream Bazel already produces. Any Bazel client works, local or CI. Nothing to instrument, no fork, no plugin, no changes to how your builds run.
        </p>

        <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed mt-4">
          Event ingest runs on its own capacity, separate from remote caching and execution, so heavy event traffic and heavy build traffic don’t contend with each other. Observability that slows down the thing it observes doesn’t survive contact with a platform team.
        </p>
      </div>

      <div className="mt-6 max-w-3xl">
        <ul className="space-y-3 text-zinc-600 dark:text-zinc-300 leading-relaxed" style={{ listStyle: "none", paddingLeft: 0 }}>
          <li className="flex gap-3">
            <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

            <span><strong className="text-zinc-900 dark:text-white">Not application monitoring.</strong> It stores Bazel build events, not service telemetry, and doesn’t compete with your metrics stack.</span>
          </li>

          <li className="flex gap-3">
            <span className="mt-2 shrink-0 rounded-sm bg-blue-600 dark:bg-blue-400" style={{ width: "6px", height: "6px" }} />

            <span><strong className="text-zinc-900 dark:text-white">Not a warehouse you query yourself.</strong> The answers are already assembled.</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div className="w-full flex justify-center px-4 py-8 md:py-12 bg-gray-50 dark:bg-zinc-900">
  <div className="w-full" style={{ maxWidth: "1140px" }}>
    <div className="mb-6">
      <h2 className="text-3xl md:text-4xl font-semibold text-zinc-900 dark:text-white tracking-tight">Where it runs</h2>
      <p className="mt-3 text-lg text-zinc-500 dark:text-zinc-300 leading-relaxed max-w-3xl">Three ways to run this, and the axis that separates them is isolation, not hosting.</p>
    </div>

    <div className="mt-2 overflow-x-auto">
      <table className="w-full text-left border-collapse" style={{ minWidth: "560px" }}>
        <thead>
          <tr className="border-b border-zinc-300 dark:border-zinc-600"><th className="py-3 pr-6 text-xs font-semibold uppercase tracking-widest text-zinc-500">Option</th><th className="py-3 pr-6 text-xs font-semibold uppercase tracking-widest text-zinc-500">Infrastructure</th><th className="py-3 pr-6 text-xs font-semibold uppercase tracking-widest text-zinc-500">Cloud account</th><th className="py-3 pr-6 text-xs font-semibold uppercase tracking-widest text-zinc-500">Operated by</th></tr>
        </thead>

        <tbody className="text-sm">
          <tr className="border-b border-zinc-200 dark:border-zinc-700/60"><td className="py-3 pr-6 font-semibold text-zinc-900 dark:text-white">Aspect Cloud</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Shared, scoped to your organization</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Aspect’s</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Aspect</td></tr>
          <tr className="border-b border-zinc-200 dark:border-zinc-700/60"><td className="py-3 pr-6 font-semibold text-zinc-900 dark:text-white">Aspect Enterprise, hosted by Aspect</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Isolated, yours alone</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Aspect’s</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Aspect</td></tr>
          <tr className="border-b border-zinc-200 dark:border-zinc-700/60"><td className="py-3 pr-6 font-semibold text-zinc-900 dark:text-white">Aspect Enterprise, self-hosted</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Isolated, in your account</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Yours</td><td className="py-3 pr-6 text-zinc-600 dark:text-zinc-300">Aspect, or your team</td></tr>
        </tbody>
      </table>
    </div>

    <div className="max-w-3xl mt-6">
      <p className="text-zinc-600 dark:text-zinc-300 leading-relaxed">
        The last two are the same product, Aspect Enterprise. What differs is whose account it runs in and who holds operational control. <strong className="text-zinc-900 dark:text-white">Holding that control yourself is usually the point.</strong> Plenty of teams in finance, healthcare and government are not allowed to give a third party production access. For them we work over the shoulder: we guide and diagnose, their hands stay on the controls. It is what makes air-gapped and GovCloud deployments possible at all.
      </p>
    </div>
  </div>
</div>

<div className="w-full flex justify-center px-4 pt-12 pb-4">
  <div className="w-full" style={{ maxWidth: "1140px" }}>
    <FeatureGrid2>
      <a href="/bazelcon-2026/aspect-cloud" className="flex flex-col p-5 rounded-xl border border-zinc-200 dark:border-zinc-700/60 hover:border-blue-300 dark:hover:border-blue-700 transition">
        <span className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">← Previous</span>
        <span className="mt-1 font-semibold text-zinc-900 dark:text-white">Aspect Cloud</span>
      </a>

      <a href="/bazelcon-2026/cli-axl-mcp" className="flex flex-col p-5 rounded-xl border border-zinc-200 dark:border-zinc-700/60 hover:border-blue-300 dark:hover:border-blue-700 transition md:text-right">
        <span className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">Next →</span>
        <span className="mt-1 font-semibold text-zinc-900 dark:text-white">CLI, AXL & MCP</span>
      </a>
    </FeatureGrid2>

    <div className="mt-6 text-center">
      <a href="/bazelcon-2026" className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:underline">
        All BazelCon materials →
      </a>
    </div>
  </div>
</div>

<CTA title="See it on your own builds" subtitle="Point a repository at a hosted instance and let a week of real builds accumulate." primaryCta="Start a trial" primaryHref="/trial" secondaryCta="Talk with us" secondaryHref="/contact" />