# Source: https://www.activepieces.com/docs/handbook/product/interface-design.md

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

# Interface Design

This page is a collection of resources for interface design. It's a work in progress and will be updated as we go.

## Color Palette

<img src="https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=c53ca192391af38a9d96ce083d2d958b" alt="Color Palette" data-og-width="1600" width="1600" data-og-height="1200" height="1200" data-path="resources/color-palette.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=280&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=35ec80ff15e3f3de36cd52824dabb8db 280w, https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=560&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=49f3f206c38e8194ac7cb3d26647833c 560w, https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=840&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=bca91857f28a0e05941cedce2b6203f2 840w, https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=1100&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=29ef50171dcc5e6454262e81a6e1b9c3 1100w, https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=1650&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=3075f384856361ad42e92df0e188e93c 1650w, https://mintcdn.com/activepieces/ki8mFooo8mAmhMdP/resources/color-palette.png?w=2500&fit=max&auto=format&n=ki8mFooo8mAmhMdP&q=85&s=a2949a567017ea03c7e98e378a0d644a 2500w" />

The palette includes:

* Primary colors for main actions and branding
* Secondary colors for supporting elements
* Semantic colors for status and feedback (success, warning, destructive)

## Tech Stack

Our frontend is built with:

* **React** - Core UI framework
* **Shadcn UI** - Component library
* **Tailwind CSS** - Utility-first styling

## Learning Resources

* [Interface Design (Chapters 46-53)](https://basecamp.com/gettingreal/09.1-interface-first) from Getting Real by Basecamp