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

Form Controls

Helper text goes here

Select one option from the list

Maximum 500 characters

Email notifications

Receive emails about your activity

Marketing emails

Receive emails about our products

Search through your content

Example Components

Card Title

Panel Title

Panel description goes here

Panel setting