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

# Overview

> Pinch — the Mantle App design system

<div style={{ marginBottom: '16px' }}>
  <img src="https://mintcdn.com/mantlechat/wwastAq-CYCvSMGl/images/pinch-logo-light.svg?fit=max&auto=format&n=wwastAq-CYCvSMGl&q=85&s=83a3ae761eca4f9af5904eed5f7b90ca" alt="Pinch Design System" className="block dark:hidden" style={{ height: '32px' }} width="76" height="24" data-path="images/pinch-logo-light.svg" />

  <img src="https://mintcdn.com/mantlechat/wwastAq-CYCvSMGl/images/pinch-logo-dark.svg?fit=max&auto=format&n=wwastAq-CYCvSMGl&q=85&s=fbd56159b15d1690dad19857fde00edf" alt="Pinch Design System" className="hidden dark:block" style={{ height: '32px' }} width="76" height="24" data-path="images/pinch-logo-dark.svg" />
</div>

Modern components, consistent tokens, and seamless dark mode support across the app.

<Note>The Design System is currently in **Early Beta**. Some sections are still in development.</Note>

## The Stack

Our design system is built on top of proven technologies:

<CardGroup cols={2}>
  <Card title="Angular" icon="code" href="https://angular.dev">
    Google's frontend framework. Powerful & reliable.
  </Card>

  <Card title="Spartan UI" icon="palette" href="https://spartan.ng">
    Headless Angular UI primitives and components.
  </Card>

  <Card title="Tailwind CSS" icon="paintbrush" href="https://tailwindcss.com">
    Utility-first CSS framework with great design baked in.
  </Card>

  <Card title="shadcn/ui" icon="shapes" href="https://ui.shadcn.com">
    Composable patterns and modern design conventions.
  </Card>
</CardGroup>

## Explore

<CardGroup cols={2}>
  <Card title="Colors" icon="palette" href="/design-system/colors">
    Comprehensive color system with semantic meanings, contrast ratios, and dark mode support.
  </Card>

  <Card title="Typography" icon="text" href="/design-system/typography">
    Text styles, font scales, and hierarchy for consistent content presentation.
  </Card>

  <Card title="Buttons" icon="square" href="/design-system/buttons">
    Interactive button components with variants, sizes, and states documentation.
  </Card>

  <Card title="Best Practices" icon="book-open" href="/design-system/best-practices">
    Design principles, accessibility guidelines, and best practices for implementation.
  </Card>
</CardGroup>

## Design Principles

Our design system is built on four core principles:

<AccordionGroup>
  <Accordion title="Consistency" icon="equals">
    Maintain visual and functional consistency across all components and interactions. Use the same colors from our
    palette, apply consistent spacing scale, and follow typography hierarchy.
  </Accordion>

  <Accordion title="Accessibility" icon="universal-access">
    Ensure all components are accessible by default with proper ARIA labels and keyboard navigation. We follow WCAG AA
    contrast ratios and provide screen reader compatibility.
  </Accordion>

  <Accordion title="Performance" icon="gauge-high">
    Optimize components for fast loading and smooth interactions. This includes lazy loading heavy components,
    optimizing bundle sizes, and using Angular signals for reactivity.
  </Accordion>

  <Accordion title="Flexibility" icon="layer-group">
    Build components that can adapt to different contexts and use cases. All components are responsive by default,
    support dark mode, and are customizable with variants.
  </Accordion>
</AccordionGroup>