# MangoForm Design System

A comprehensive guide to our design language

## Colors

### Primary Colors

Mango

#FFC325

### Gray Scale

Text Primary

zinc-900

Text Secondary

zinc-700

Text Tertiary

zinc-500

## Typography

### Headers

Header 1 (24px - Semibold)

Header 2 (20px - Medium)

Header 3 (18px - Medium)

### Body

Regular text (16px)

Small text (14px)

Extra small text (12px)

## Buttons

Primary Button  
Secondary Button  
Ghost Button  
Outline Button

## Form Controls

Text Input

Helper text goes here

Select Menu

Select an option

Select one option from the list

Textarea

Maximum 500 characters

Toggle Switches

Email notifications

Receive emails about your activity

Marketing emails

Receive emails about our products

Action Buttons with Icons

Add Item
Delete

Input with Icon

Search through your content

## Example Components

### Card Title

Card select...

### Panel Title

Panel description goes here

Panel setting

Panel Action