> ## 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.

# Committed to Open Source - Aspect Build

> Aspect Build contributes more to the Bazel ecosystem than any other company. Learn about our open source ethos, the rulesets we maintain, and how to support our mission.

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 MediaCard = ({title, description, href, linkText = "Learn more", external = false, children}) => {
  const Tag = href ? "a" : "div";
  const tagProps = href ? {
    href,
    ...external ? {
      target: "_blank",
      rel: "noopener noreferrer"
    } : {}
  } : {};
  return <Tag {...tagProps} className="group flex flex-col rounded-xl border border-zinc-200 dark:border-zinc-700/60 bg-white dark:bg-zinc-800/50 overflow-hidden hover:shadow-md hover:border-blue-200 dark:hover:border-blue-700 transition-all duration-200">
      {children && <div className="media-card-image aspect-[16/10] overflow-hidden bg-zinc-50 dark:bg-zinc-900">
          {children}
        </div>}
      <div className="flex flex-col flex-1 p-6">
        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
          {title}
        </h3>
        {description && <p className="feature-card-desc text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed flex-1">{description}</p>}
        {linkText && href && <span className="inline-flex items-center mt-4 text-sm text-blue-600 dark:text-blue-400 font-semibold group-hover:underline underline-offset-2">
            {linkText} {external ? "↗" : "→"}
          </span>}
      </div>
    </Tag>;
};

export const FeatureCard = ({title, description, href, children}) => {
  const Tag = href ? "a" : "div";
  const tagProps = href ? {
    href
  } : {};
  return <Tag {...tagProps} className={`group flex flex-col p-6 rounded-xl border border-zinc-200 dark:border-zinc-700/60 bg-white dark:bg-zinc-800/50 ${href ? "hover:shadow-md hover:border-blue-200 dark:hover:border-blue-700 transition-all duration-200" : ""}`}>
      {children && <div className="feature-card-icon mb-5 flex items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30" style={{
    width: "4rem",
    height: "4rem"
  }}>
          {children}
        </div>}
      <h3 className={`text-lg font-semibold text-zinc-900 dark:text-white ${href ? "group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" : ""}`}>
        {title}
      </h3>
      {description && <p className="feature-card-desc text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{description}</p>}
    </Tag>;
};

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

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

export const SectionHeader = ({title, subtitle, centered = true, label}) => <div className={`mb-12 ${centered ? "text-center" : ""}`}>
    {label && <p className="text-xs font-semibold tracking-widest text-blue-600 dark:text-blue-400 uppercase mb-3">
        {label}
      </p>}
    <h2 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white tracking-tight">{title}</h2>
    {subtitle && <div className={`subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed ${centered ? "mx-auto" : ""}`} style={{
  marginTop: "1rem",
  maxWidth: centered ? "700px" : "none"
}}>
        {subtitle}
      </div>}
  </div>;

export const Section = ({children, className = "", gray = false, dark = false, id}) => <section id={id} className={`w-full flex justify-center px-4 py-16 md:py-24 ${gray ? "bg-gray-50 dark:bg-zinc-900" : dark ? "bg-zinc-900 dark:bg-zinc-950" : ""} ${className}`}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {children}
    </div>
  </section>;

export const Hero = ({title, subtitle, badge, 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>}
          <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>}
          <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>}
            <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">
              {children}
            </div>}
        </div>}
    </div>
  </section>;

<MarketingPage />

<Hero title="Our Commitment to Open Source" badge={"{ Fast, Correct, Usable } — choose three"} subtitle="Open source is core to our culture at Aspect Build. Our engineering hours go into contributing more to the Bazel ecosystem than any other company and that's how we like it." primaryCta="See Our GitHub" primaryHref="https://github.com/aspect-build" secondaryCta="Talk with Us" secondaryHref="/contact" centered />

<Section>
  <SectionHeader label="Our ethos" title="Our Open Source Ethos" subtitle="Aspect Build runs on open source. We all thrive when the Bazel ecosystem is healthy. Open source is built into who we are as a company, our ethos. Here's how we show up for the community." />

  <FeatureGrid2>
    <FeatureCard title="Upstream First" description="Improvements go back to their canonical projects, not into private forks. We ensure that when we fix something, the whole community benefits.">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/icons/open-source.svg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=8be03fe9577fdc3ec8ddb2838834dd99" alt="" width="48" height="48" data-path="images/marketing/icons/open-source.svg" />
    </FeatureCard>

    <FeatureCard title="Don't Ship & Abandon" description="We maintain what we author (and much more). Core maintainers at Aspect own rules_js, rules_ts, rules_lint, rules_py, and much more.">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/icons/protect.svg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=af5818d5725923799e54382c188d5256" alt="" width="40" height="40" data-path="images/marketing/icons/protect.svg" />
    </FeatureCard>

    <FeatureCard title="Tenacity > Workarounds" description="We get out the shovel to find the root cause of anything and everything. We fix problems at the source, file upstream issues, and avoid hacks that only we can use.">
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/icons/powerful.svg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=6bd529786aea222f877c69824f1d0f83" alt="" width="48" height="48" data-path="images/marketing/icons/powerful.svg" />
    </FeatureCard>

    <FeatureCard title="Open for Everyone" description="Open source only works when everyone plays fair. We keep our rulesets freely licensed, maintain backwards compatibility, and contribute to the shared commons regardless of who benefits.">
      <img noZoom src="https://mintcdn.com/aspectbuild/FlMiA6BC59qG_Uuv/images/marketing/icons/star.svg?fit=max&auto=format&n=FlMiA6BC59qG_Uuv&q=85&s=a0ba39fdd64c5d0f3bd9a66f8f1fef9c" alt="" width="16" height="16" data-path="images/marketing/icons/star.svg" />
    </FeatureCard>
  </FeatureGrid2>
</Section>

<Section gray>
  <SectionHeader label="Open source projects" title="What We Build & Maintain" subtitle="A handful of the most widely used projects. There are 43 public repositories on GitHub — new releases and contributions ship continuously." />

  <FeatureGrid3>
    <MediaCard title="Aspect CLI + AXL" description="A Rust-rewritten, extensible CLI for Bazel with the AXL plugin model — open source and BCR-published." href="https://github.com/aspect-build/aspect-cli" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/product/axl-img.avif?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=1ba18616087f5f7414073fc3bbc50ceb" alt="Aspect CLI and AXL" width="1292" height="720" data-path="images/marketing/product/axl-img.avif" />
    </MediaCard>

    <MediaCard title="rules_py" description="Modern Python rules for Bazel with hermetic toolchain support — an active Aspect-maintained complement to the official rules." href="https://github.com/aspect-build/rules_py" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/product/aspect-cli.avif?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=4d8178c5fed8de63a944f942b1b800d4" alt="rules_py" width="1088" height="708" data-path="images/marketing/product/aspect-cli.avif" />
    </MediaCard>

    <MediaCard title="rules_lint" description="Linting and formatting as first-class Bazel concepts. Supports 30 languages with 60+ open source contributors." href="https://github.com/aspect-build/rules_lint" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/github/Lint-comments.avif?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=3997d591cccf5d00cf8039bc0f4ca047" alt="rules_lint in action" width="1088" height="636" data-path="images/marketing/github/Lint-comments.avif" />
    </MediaCard>

    <MediaCard title="rules_js / rules_ts" description="The canonical Bazel rules for JavaScript and TypeScript. Aspect has authored these from the start and remains primary maintainer." href="https://github.com/aspect-build/rules_js" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/product/aspect-rules-repos.svg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=5736ed8928b7e9bf3f361ddcc7e434b6" alt="Aspect Bazel rules repositories on GitHub" width="976" height="556" data-path="images/marketing/product/aspect-rules-repos.svg" />
    </MediaCard>

    <MediaCard title="rules_oci" description="Modern OCI-compliant container image rules for Bazel — the community replacement for rules_docker, now under bazel-contrib." href="https://github.com/bazel-contrib/rules_oci" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/illustrations/aspect-delivery.svg?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=cf41f5d900ae4230bf53b295c1693765" alt="rules_oci container images" width="720" height="480" data-path="images/marketing/illustrations/aspect-delivery.svg" />
    </MediaCard>

    <MediaCard title="bazel-lib" description="Foundational utility library for Bazel rule authors. Donated to the Linux Foundation — community ownership complete." href="https://github.com/bazel-contrib/bazel-lib" linkText="View on GitHub" external>
      <img noZoom src="https://mintcdn.com/aspectbuild/x1L7Iep716jCyJVo/images/marketing/product/build-file-img.avif?fit=max&auto=format&n=x1L7Iep716jCyJVo&q=85&s=d6cd4f5d8ac505e3205b0dc7f2c73cab" alt="bazel-lib utilities" width="1296" height="720" data-path="images/marketing/product/build-file-img.avif" />
    </MediaCard>
  </FeatureGrid3>

  <p className="mt-10 text-center text-sm text-zinc-500 dark:text-zinc-400">
    Plus rules\_swc, rules\_jest, rules\_esbuild, rules\_cypress, and many more actively maintained projects.{" "}
    <a href="https://github.com/aspect-build" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Browse all on GitHub ↗</a>
  </p>
</Section>

<Section>
  <StatsBar
    stats={[
{ value: "43", label: "Public repositories" },
{ value: "23%", label: "of Bazel Central Registry releases are from Aspect" },
{ value: "20+", label: "Bazel rulesets authored or maintained" },
]}
  />

  <p className="mt-8 text-center text-sm text-zinc-500 dark:text-zinc-400">
    We have many more actively maintained projects. New releases are shipped regularly.{" "}
    <a href="https://github.com/aspect-build" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">View all on GitHub ↗</a>
  </p>
</Section>

<CTA title="Become a Partner" subtitle="Interested in partnering with Aspect Build? We're always looking to collaborate with organizations that share our mission to make Bazel the standard build system for large-scale software development." primaryCta="Get in Touch" primaryHref="/contact" />

<Section gray>
  <SectionHeader label="Support our mission" title="Support Our Open Source Mission" subtitle="Our open source work is sustained by the engineers and companies who use it. If you use our free software, please consider donating so we can pay the engineers who write it. Stay up to date on our activity on GitHub." />

  <div className="flex flex-wrap gap-3 justify-center">
    <a href="https://opencollective.com/aspect-build" target="_blank" rel="noopener noreferrer" 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">
      Support Aspect on Open Collective ↗
    </a>

    <a href="https://github.com/aspect-build" target="_blank" rel="noopener noreferrer" 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">
      Follow us on GitHub ↗
    </a>
  </div>
</Section>