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

# Introduction

> Start here to get familiar with BEEQ, choose the path that matches your role, and find the right resources to begin.

export const CardTile = ({title, href, imageLightSrc, imageDarkSrc, children, enableImgZoom}) => {
  if (!href) {
    return <div className="card-tile block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl overflow-hidden w-full">
        {imageLightSrc && <img className="w-full m-0 block dark:hidden" src={imageLightSrc} alt={title} {...enableImgZoom ? {
      zoom: true
    } : {
      noZoom: true
    }} />}
        {imageDarkSrc && <img className="w-full m-0 hidden dark:block" src={imageDarkSrc} alt={title} {...enableImgZoom ? {
      zoom: true
    } : {
      noZoom: true
    }} />}
        {title && <h2 className="mt-4 mb-2 px-6 text-base font-semibold">{title}</h2>}
        <div className="px-6 pb-5">{children}</div>
      </div>;
  }
  return <a href={href} className="card-tile block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl overflow-hidden w-full cursor-pointer">
      {imageLightSrc && <img className="w-full m-0 block dark:hidden" src={imageLightSrc} alt={title} noZoom />}
      {imageDarkSrc && <img className="w-full m-0 hidden dark:block" src={imageDarkSrc} alt={title} noZoom />}
      {title && <h2 className="mt-4 mb-2 px-6 text-base font-semibold">{title}</h2>}
      <div className="px-6 pb-5">{children}</div>
    </a>;
};

## Choose the path that fits your role

Different people come to BEEQ with different goals.
BEEQ supports two main onboarding paths, start with the resources that will help you get productive fastest.

<Columns cols={2}>
  <CardTile title="For designers" href="/getting-started/for-designers" imageLightSrc="./images/for-designers-light.svg" imageDarkSrc="./images/for-designers-dark.svg">
    Explore design foundations, visual guidelines, and Figma resources to create consistent product experiences with BEEQ.
  </CardTile>

  <CardTile title="For developers" href="/getting-started/for-developers" imageLightSrc="./images/for-developers-light.svg" imageDarkSrc="./images/for-developers-dark.svg">
    Learn how to install, integrate, and use BEEQ components in your stack, whether you work with Angular, React, Vue, or web components directly.
  </CardTile>
</Columns>

## Get familiar with BEEQ

Before diving into the details, it helps to understand what BEEQ includes and how it is meant to be used.
A few things to keep in mind as you explore:

* **Reusable components:** A shared library of production-ready UI building blocks.
* **Framework-agnostic:** Built on web components and usable across major frontend stacks.
* **Design foundations:** Guidance for colour, typography, spacing, and other visual rules.
* **Accessibility:** Components and guidance designed to support inclusive experiences.
* **Customization:** Theming and white-label capabilities for different brands and products.

## Core resources

Whichever path you choose, these resources will help you get oriented quickly.

### For designers

* [Design principles](/getting-started/design-principles) — Learn the values and methodology behind the system.
* [Figma setup](/getting-started/for-designers#set-up-the-figma-library) — Duplicate, publish, and enable the BEEQ Figma library in your workspace.
* [Design foundations](/getting-started/for-designers#explore-design-foundations) — Find color, typography, spacing, and icon guidance for visual decisions.

### For developers

* [Components](/components/overview) — Review available components and their capabilities.
* [Storybook Demo](https://storybook.beeq.design) — Preview components and explore usage examples.
* [GitHub](https://github.com/Endava/BEEQ) — Access the source code, packages, and contribution workflow.

## Need help?

<Tip>
  Use the feedback button on any page, open a discussion in [GitHub Issues](https://github.com/Endava/BEEQ/issues), or contact [beeq@endava.com](mailto:beeq@endava.com).
</Tip>