# Overview



<m-tag variant="success">Version {version}</m-tag>

# Components

> Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  {modules
    .flatMap((module) => module.declarations)
    .filter(
      (declaration) => declaration.kind === "class" && declaration.customElement && !exclude.includes(declaration.name) 
    )
    .sort((a, b) => a.name.localeCompare(b.name))
    .map((component) => (
      <ComponentCard
        key={component.name}
        name={component.name}
        description={component.description}
      />
    ))}
</div>




<m-tag variant="warning">In progress</m-tag>

# Patterns

> Design patterns help create consistent, intuitive experiences across our products. They provide proven solutions to common UX challenges, reduce cognitive load for users, and speed up both design and development by offering ready-to-use combinations of our components.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "1fr",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  <ComponentCard
    variant="horizontal"
    key="ai"
    image="/empty.svg"
    name="AI Assisted job description"
    href="/?path=/docs/patterns-ai-assisted-job-descriptions--docs"
    description="From promotion to using the feature"
  />
  <ComponentCard
    variant="horizontal"
    key="ai-button"
    image="/empty.svg"
    name="AI buttons"
    href="/?path=/docs/patterns-ai-buttons--docs"
    description="One button to rule the ai"
  />
  <ComponentCard
    variant="horizontal"
    key="forms"
    image="/empty.svg"
    name="Form patterns"
    href="/?path=/docs/patterns-forms--docs"
    description="How we build forms"
  />
</div>




<m-tag variant="success">Version {version}</m-tag>

# Design Tokens

> Design tokens are the foundational elements of our design system. They are used to create consistent and scalable UI components.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  {tokenGroups.map((component) => (
    <TokenCard
      key={component.name}
      name={component.name}
      description={component.description}
    />
  ))}
</div>