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